[SSE] Add presets for conditional formatting

apps/common/main/resources/less/toolbar.less

@@ -634,3 +634,37 @@
     border: @scaled-one-px-value solid @border-regular-control;
     .background-ximage-v2('toolbar/math.png', 1500px);
 }
+
+.item-databar {
+    .icon {
+        width: 20px;
+        height: 22px;
+    }
+
+    svg.icon {
+        display: inline-block;
+        vertical-align: middle;
+        fill: @icon-normal-ie;
+        fill: @icon-normal;
+    }
+
+    width: 20px;
+    height: 22px;
+}
+
+.item-colorscale {
+    .icon {
+        width: 20px;
+        height: 21px;
+    }
+
+    svg.icon {
+        display: inline-block;
+        vertical-align: middle;
+        fill: @icon-normal-ie;
+        fill: @icon-normal;
+    }
+
+    width: 20px;
+    height: 21px;
+}

apps/spreadsheeteditor/main/app/collection/ConditionalFormatIcons.js

@@ -0,0 +1,56 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2021
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+/**
+ *  ConditionalFormatIcons.js
+ *
+ *  Created by Julia Radzhabova on 25.02.21
+ *  Copyright (c) 2021 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'backbone'
+], function(Backbone){ 'use strict';
+
+    SSE.Collections.ConditionalFormatIcons = Backbone.Collection.extend({
+        model: Backbone.Model.extend({
+            defaults: function() {
+                return {
+                    id: Common.UI.getId(),
+                    data: 0,
+                    icons: null
+                }
+            }
+        })
+    });
+});

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -55,6 +55,7 @@ define([
     'spreadsheeteditor/main/app/collection/ShapeGroups',
     'spreadsheeteditor/main/app/collection/TableTemplates',
     'spreadsheeteditor/main/app/collection/EquationGroups',
+    'spreadsheeteditor/main/app/collection/ConditionalFormatIcons',
     'spreadsheeteditor/main/app/controller/FormulaDialog'
 ], function () {
     'use strict';
@@ -87,6 +88,7 @@ define([
                 'ShapeGroups',
                 'EquationGroups',
                 'TableTemplates',
+                'ConditionalFormatIcons',
                 'Common.Collections.TextArt'
             ],
             views: [],
@@ -2034,7 +2036,21 @@ define([
                 });
                 artStore.reset(arr);
             },
-            
+
+            fillCondFormatIcons: function(iconSets){
+                if (_.isEmpty(iconSets)) return;
+
+                var arr = [],
+                    store = this.getCollection('ConditionalFormatIcons');
+                _.each(iconSets, function(iconSet, index){
+                    arr.push({
+                        icons : iconSet,
+                        data  : index
+                    });
+                });
+                store.reset(arr);
+            },
+
             updateThemeColors: function() {
                 var me = this;
                 setTimeout(function(){

apps/spreadsheeteditor/main/app/controller/Toolbar.js

@@ -393,6 +393,7 @@ define([
                 });
                 toolbar.btnPrintTitles.on('click',                          _.bind(this.onPrintTitlesClick, this));
                 if (toolbar.btnCondFormat.rendered) {
+                    toolbar.btnCondFormat.menu.on('show:before',            _.bind(this.onShowBeforeCondFormat, this));
                     toolbar.btnCondFormat.menu.on('item:click',             _.bind(this.onCondFormatMenu, this));
                     toolbar.btnCondFormat.menu.items[7].menu.on('item:click', _.bind(this.onCondFormatMenu, this));
                     toolbar.btnCondFormat.menu.items[9].menu.on('item:click', _.bind(this.onCondFormatMenu, this));
@@ -1587,6 +1588,88 @@ define([
             }
         },
 
+        onShowBeforeCondFormat: function() {
+            var collection = SSE.getCollection('ConditionalFormatIcons');
+            if (collection.length>0) return;
+
+            SSE.getController('Main').fillCondFormatIcons(this.api.asc_getCFIcons());
+
+            var me = this;
+            var menuItem = this.toolbar.mnuDataBars;
+            menuItem.menu.addItem(new Common.UI.MenuItem({
+                template: _.template('<div id="id-toolbar-menu-databar" class="menu-shapes" style="margin-left: 5px; width: 173px;"></div>')
+            }));
+            var picker = new Common.UI.DataViewSimple({
+                el: $('#id-toolbar-menu-databar', menuItem.$el),
+                parentMenu: menuItem.menu,
+                itemTemplate: _.template('<div class="item-databar" id="<%= id %>"><svg width="20" height="22" class=\"icon\"><use xlink:href=\"#bar-<%= data.name %>\"></use></svg></div>')
+            });
+            picker.on('item:click', function(picker, item, record, e) {
+                if (me.api) {
+                    if (record) {
+                        me.api.asc_setCF([], [], [Asc.c_oAscCFRuleTypeSettings.dataBar, record.get('data').index]);
+                    }
+                    if (e.type !== 'click')
+                        me.toolbar.btnCondFormat.menu.hide();
+                    Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnCondFormat);
+                }
+            });
+            var arr = [
+                { data: {name: 'gradient-blue', index: 0} },
+                { data: {name: 'gradient-green', index: 1} },
+                { data: {name: 'gradient-red', index: 2} },
+                { data: {name: 'gradient-yellow', index: 3} },
+                { data: {name: 'gradient-lightblue', index: 4} },
+                { data: {name: 'gradient-purple', index: 5} },
+                { data: {name: 'solid-blue', index: 6} },
+                { data: {name: 'solid-green', index: 7} },
+                { data: {name: 'solid-red', index: 8} },
+                { data: {name: 'solid-yellow', index: 9} },
+                { data: {name: 'solid-lightblue', index: 10} },
+                { data: {name: 'solid-purple', index: 11} }
+            ];
+            picker.setStore(new Common.UI.DataViewStore(arr));
+
+            menuItem = this.toolbar.mnuColorScales;
+            menuItem.menu.addItem(new Common.UI.MenuItem({
+                template: _.template('<div id="id-toolbar-menu-colorscales" class="menu-shapes" style="margin-left: 5px; width: 117px;"></div>')
+            }));
+            picker = new Common.UI.DataViewSimple({
+                el: $('#id-toolbar-menu-colorscales', menuItem.$el),
+                parentMenu: menuItem.menu,
+                itemTemplate: _.template('<div class="item-colorscale" id="<%= id %>"><svg width="20" height="21" class=\"icon\"><use xlink:href=\"#color-scale-<%= data.name %>\"></use></svg></div>')
+            });
+            picker.on('item:click', function(picker, item, record, e) {
+                if (me.api) {
+                    if (record) {
+                        me.api.asc_setCF([], [], [Asc.c_oAscCFRuleTypeSettings.colorScale, record.get('data').index]);
+                    }
+                    if (e.type !== 'click')
+                        me.toolbar.btnCondFormat.menu.hide();
+                    Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnCondFormat);
+                }
+            });
+            arr = [
+                { data: {name: 'green-yellow-red', index: 0} },
+                { data: {name: 'red-yellow-green', index: 1} },
+                { data: {name: 'green-white-red', index: 2} },
+                { data: {name: 'red-white-green', index: 3} },
+                { data: {name: 'blue-white-red', index: 4} },
+                { data: {name: 'red-white-blue', index: 5} },
+                { data: {name: 'white-red', index: 6} },
+                { data: {name: 'red-white', index: 7} },
+                { data: {name: 'green-white', index: 8} },
+                { data: {name: 'white-green', index: 9} },
+                { data: {name: 'green-yellow', index: 10} },
+                { data: {name: 'yellow-green', index: 11} }
+            ];
+            picker.setStore(new Common.UI.DataViewStore(arr));
+
+            this.toolbar.mnuIconSets.menu.addItem(new Common.UI.MenuItem({
+                template: _.template('<div id="id-toolbar-menu-iconsets" class="menu-shapes" style="margin-left: 5px;"></div>')
+            }));
+        },
+
         onCondFormatMenu: function(menu, item) {
             var me = this;
             var value = this.api.asc_getLocale();
@@ -2909,7 +2992,7 @@ define([
                         el: $('#id-toolbar-menu-shapegroup' + i, menu.items[i].$el),
                         store: shapesStore.at(i).get('groupStore'),
                         parentMenu: menu.items[i].menu,
-                        itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
+                        itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="21" height="21" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
                     });
                     shapePicker.on('item:click', function(picker, item, record, e) {
                         if (me.api) {

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -2012,30 +2012,33 @@ define([
                             type        : Asc.c_oAscCFType.duplicateValues
                         },
                         {caption: '--'},
-                        {
+                        this.mnuDataBars = new Common.UI.MenuItem({
                             caption     : this.textDataBars,
                             type        : Asc.c_oAscCFType.dataBar,
                             menu        : new Common.UI.Menu({
                                 menuAlign   : 'tl-tr',
+                                style: 'min-width: auto;',
                                 items: []
                             })
-                        },
+                        }),
-                        {
+                        this.mnuColorScales = new Common.UI.MenuItem({
                             caption     : this.textColorScales,
                             type        : Asc.c_oAscCFType.colorScale,
                             menu        : new Common.UI.Menu({
                                 menuAlign   : 'tl-tr',
+                                style: 'min-width: auto;',
                                 items: []
                             })
-                        },
+                        }),
-                        {
+                        this.mnuIconSets = new Common.UI.MenuItem({
                             caption     : Common.define.conditionalData.textIconSets,
                             type        : Asc.c_oAscCFType.iconSet,
                             menu        : new Common.UI.Menu({
                                 menuAlign   : 'tl-tr',
+                                style: 'min-width: auto;',
                                 items: []
                             })
-                        },
+                        }),
                         {caption: '--'},
                         {
                             caption     : Common.define.conditionalData.textFormula,

apps/spreadsheeteditor/main/index.html

@@ -319,6 +319,7 @@
     <img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
     <img class="inline-svg" src="resources/img/recent-file.svg">
     <img class="inline-svg" src="resources/img/file-template.svg">
+    <img class="inline-svg" src="resources/img/cf-icons.svg">
     <script>
         var svgpoints = document.querySelectorAll('img.inline-svg');
         SVGInjector(svgpoints);

apps/spreadsheeteditor/main/index.html.deploy

@@ -360,6 +360,7 @@
     <inline src="resources/img/toolbar/charttypes.svg" />
     <inline src="resources/img/recent-file.svg" />
     <inline src="resources/img/file-template.svg" />
+    <inline src="resources/img/cf-icons.svg" />
 
     <script src="../../../../../../sdkjs/common/device_scale.js?__inline=true"></script>
     <script data-main="app" src="../../../vendor/requirejs/require.js"></script>

apps/spreadsheeteditor/main/index_loader.html

@@ -264,6 +264,7 @@
 <img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
 <img class="inline-svg" src="resources/img/recent-file.svg">
 <img class="inline-svg" src="resources/img/file-template.svg">
+<img class="inline-svg" src="resources/img/cf-icons.svg">
 <script>
     var svgpoints = document.querySelectorAll('img.inline-svg');
     SVGInjector(svgpoints);

apps/spreadsheeteditor/main/index_loader.html.deploy

@@ -315,6 +315,7 @@
     <inline src="resources/img/toolbar/charttypes.svg" />
     <inline src="resources/img/recent-file.svg" />
     <inline src="resources/img/file-template.svg" />
+    <inline src="resources/img/cf-icons.svg" />
 
     <div id="viewport"></div>
 

apps/spreadsheeteditor/main/resources/img/cf-icons.svg

@@ -0,0 +1,330 @@
+<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<symbol id="color-scale-blue-white-red" viewBox="0 0 20 21">
+<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="white"/>
+<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#FAB2B5"/>
+<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#ABC3E3"/>
+<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#5A8AC6"/>
+<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#F8696B"/>
+</symbol>
+
+<symbol id="color-scale-green-white" viewBox="0 0 20 21">
+<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="#B0DDBD"/>
+<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#D6EDDE"/>
+<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#8ACE9C"/>
+<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#63BE7B"/>
+<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="white"/>
+</symbol>
+
+<symbol id="color-scale-green-white-red" viewBox="0 0 20 21">
+<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="white"/>
+<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#FAB2B5"/>
+<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#B0DDBD"/>
+<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#63BE7B"/>
+<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#F8696B"/>
+</symbol>
+
+<symbol id="color-scale-green-yellow" viewBox="0 0 20 21">
+<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="#B1D78C"/>
+<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#D8E394"/>
+<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#8ACB84"/>
+<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#63BE7B"/>
+<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#FFEF9C"/>
+</symbol>
+
+<symbol id="color-scale-green-yellow-red" viewBox="0 0 20 21">
+<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="#FFEB84"/>
+<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#FBAA77"/>
+<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#CCE3AB"/>
+<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#63BE7B"/>
+<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#F8696B"/>
+</symbol>
+
+<symbol id="color-scale-red-white" viewBox="0 0 20 21">
+<rect id="Rectangle 874" x="19.5" y="20.5" width="19" height="4" transform="rotate(-180 19.5 20.5)" stroke="#444444"/>
+<rect id="Rectangle 876" x="19.5" y="16.5" width="19" height="4" transform="rotate(-180 19.5 16.5)" stroke="#444444"/>
+<rect id="Rectangle 878" x="19.5" y="12.5" width="19" height="4" transform="rotate(-180 19.5 12.5)" stroke="#444444"/>
+<rect id="Rectangle 882" x="19.5" y="8.5" width="19" height="4" transform="rotate(-180 19.5 8.5)" stroke="#444444"/>
+<rect id="Rectangle 879" x="19" y="12" width="18" height="3" transform="rotate(-180 19 12)" fill="#FAB3B5"/>
+<rect id="Rectangle 883" x="19" y="8" width="18" height="3" transform="rotate(-180 19 8)" fill="#F98E90"/>
+<rect id="Rectangle 881" x="19" y="16" width="18" height="3" transform="rotate(-180 19 16)" fill="#FBD8DA"/>
+<rect id="Rectangle 880" x="19" y="20" width="18" height="3" transform="rotate(-180 19 20)" fill="white"/>
+<rect id="Rectangle 882_2" x="19.5" y="4.5" width="19" height="4" transform="rotate(-180 19.5 4.5)" stroke="#444444"/>
+<rect id="Rectangle 883_2" x="19" y="4" width="18" height="3" transform="rotate(-180 19 4)" fill="#F8696B"/>
+</symbol>
+
+<symbol id="color-scale-red-white-blue" viewBox="0 0 20 21">
+<rect id="Rectangle 874" x="19.5" y="20.5" width="19" height="4" transform="rotate(-180 19.5 20.5)" stroke="#444444"/>
+<rect id="Rectangle 876" x="19.5" y="16.5" width="19" height="4" transform="rotate(-180 19.5 16.5)" stroke="#444444"/>
+<rect id="Rectangle 878" x="19.5" y="12.5" width="19" height="4" transform="rotate(-180 19.5 12.5)" stroke="#444444"/>
+<rect id="Rectangle 882" x="19.5" y="8.5" width="19" height="4" transform="rotate(-180 19.5 8.5)" stroke="#444444"/>
+<rect id="Rectangle 879" x="19" y="12" width="18" height="3" transform="rotate(-180 19 12)" fill="white"/>
+<rect id="Rectangle 883" x="19" y="8" width="18" height="3" transform="rotate(-180 19 8)" fill="#FAB2B5"/>
+<rect id="Rectangle 881" x="19" y="16" width="18" height="3" transform="rotate(-180 19 16)" fill="#ABC3E3"/>
+<rect id="Rectangle 880" x="19" y="20" width="18" height="3" transform="rotate(-180 19 20)" fill="#5A8AC6"/>
+<rect id="Rectangle 882_2" x="19.5" y="4.5" width="19" height="4" transform="rotate(-180 19.5 4.5)" stroke="#444444"/>
+<rect id="Rectangle 883_2" x="19" y="4" width="18" height="3" transform="rotate(-180 19 4)" fill="#F8696B"/>
+</symbol>
+
+<symbol id="color-scale-red-white-green" viewBox="0 0 20 21">
+<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="white"/>
+<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#B0DDBD"/>
+<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#FAB2B5"/>
+<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#F8696B"/>
+<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#63BE7B"/>
+</symbol>
+
+<symbol id="color-scale-red-yellow-green" viewBox="0 0 20 21">
+<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="#EDC87E"/>
+<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#B1D580"/>
+<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#FBAA77"/>
+<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="#F8696B"/>
+<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#63BE7B"/>
+</symbol>
+
+<symbol id="color-scale-white-green" viewBox="0 0 20 21">
+<rect id="Rectangle 874" x="19.5" y="20.5" width="19" height="4" transform="rotate(-180 19.5 20.5)" stroke="#444444"/>
+<rect id="Rectangle 876" x="19.5" y="16.5" width="19" height="4" transform="rotate(-180 19.5 16.5)" stroke="#444444"/>
+<rect id="Rectangle 878" x="19.5" y="12.5" width="19" height="4" transform="rotate(-180 19.5 12.5)" stroke="#444444"/>
+<rect id="Rectangle 882" x="19.5" y="8.5" width="19" height="4" transform="rotate(-180 19.5 8.5)" stroke="#444444"/>
+<rect id="Rectangle 879" x="19" y="12" width="18" height="3" transform="rotate(-180 19 12)" fill="#B0DDBD"/>
+<rect id="Rectangle 883" x="19" y="8" width="18" height="3" transform="rotate(-180 19 8)" fill="#D6EDDE"/>
+<rect id="Rectangle 881" x="19" y="16" width="18" height="3" transform="rotate(-180 19 16)" fill="#CCE3AB"/>
+<rect id="Rectangle 880" x="19" y="20" width="18" height="3" transform="rotate(-180 19 20)" fill="#63BE7B"/>
+<rect id="Rectangle 882_2" x="19.5" y="4.5" width="19" height="4" transform="rotate(-180 19.5 4.5)" stroke="#444444"/>
+<rect id="Rectangle 883_2" x="19" y="4" width="18" height="3" transform="rotate(-180 19 4)" fill="white"/>
+</symbol>
+
+<symbol id="color-scale-white-red" viewBox="0 0 20 21">
+<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 876" x="0.5" y="4.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 878" x="0.5" y="8.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 882" x="0.5" y="12.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 879" x="1" y="9" width="18" height="3" fill="#FAB3B5"/>
+<rect id="Rectangle 883" x="1" y="13" width="18" height="3" fill="#F98E90"/>
+<rect id="Rectangle 881" x="1" y="5" width="18" height="3" fill="#FBD8DA"/>
+<rect id="Rectangle 880" x="1" y="1" width="18" height="3" fill="white"/>
+<rect id="Rectangle 882_2" x="0.5" y="16.5" width="19" height="4" stroke="#444444"/>
+<rect id="Rectangle 883_2" x="1" y="17" width="18" height="3" fill="#F8696B"/>
+</symbol>
+
+<symbol id="color-scale-yellow-green" viewBox="0 0 20 21">
+<rect id="Rectangle 874" x="19.5" y="20.5" width="19" height="4" transform="rotate(-180 19.5 20.5)" stroke="#444444"/>
+<rect id="Rectangle 876" x="19.5" y="16.5" width="19" height="4" transform="rotate(-180 19.5 16.5)" stroke="#444444"/>
+<rect id="Rectangle 878" x="19.5" y="12.5" width="19" height="4" transform="rotate(-180 19.5 12.5)" stroke="#444444"/>
+<rect id="Rectangle 882" x="19.5" y="8.5" width="19" height="4" transform="rotate(-180 19.5 8.5)" stroke="#444444"/>
+<rect id="Rectangle 879" x="19" y="12" width="18" height="3" transform="rotate(-180 19 12)" fill="#B1D78C"/>
+<rect id="Rectangle 883" x="19" y="8" width="18" height="3" transform="rotate(-180 19 8)" fill="#D8E394"/>
+<rect id="Rectangle 881" x="19" y="16" width="18" height="3" transform="rotate(-180 19 16)" fill="#8ACB84"/>
+<rect id="Rectangle 880" x="19" y="20" width="18" height="3" transform="rotate(-180 19 20)" fill="#63BE7B"/>
+<rect id="Rectangle 882_2" x="19.5" y="4.5" width="19" height="4" transform="rotate(-180 19.5 4.5)" stroke="#444444"/>
+<rect id="Rectangle 883_2" x="19" y="4" width="18" height="3" transform="rotate(-180 19 4)" fill="#FFEF9C"/>
+</symbol>
+
+<symbol id="bar-solid-blue" viewBox="0 0 20 22">
+    <path id="Rectangle 874 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 1H1V7H19V1ZM0 0V8H20V0H0Z" fill="#444444"/>
+    <path id="Rectangle 876 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 8H1V14H19V8ZM0 7V15H20V7H0Z" fill="#444444"/>
+    <path id="Rectangle 878 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 15H1V21H19V15ZM0 14V22H20V14H0Z" fill="#444444"/>
+    <path id="Rectangle 875" d="M1 1H14V7H1V1Z" fill="#4D82B8"/>
+    <path id="Rectangle 877" d="M1 8H9V14H1V8Z" fill="#4D82B8"/>
+    <path id="Rectangle 879" d="M1 15H19V21H1V15Z" fill="#4D82B8"/>
+</symbol>
+
+<symbol id="bar-solid-green" viewBox="0 0 20 22">
+    <path id="Rectangle 874 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 1H1V7H19V1ZM0 0V8H20V0H0Z" fill="#444444"/>
+    <path id="Rectangle 876 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 8H1V14H19V8ZM0 7V15H20V7H0Z" fill="#444444"/>
+    <path id="Rectangle 878 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 15H1V21H19V15ZM0 14V22H20V14H0Z" fill="#444444"/>
+    <path id="Rectangle 875" d="M1 1H14V7H1V1Z" fill="#63C384"/>
+    <path id="Rectangle 877" d="M1 8H9V14H1V8Z" fill="#63C384"/>
+    <path id="Rectangle 879" d="M1 15H19V21H1V15Z" fill="#63C384"/>
+</symbol>
+
+<symbol id="bar-solid-lightblue" viewBox="0 0 20 22">
+    <path id="Rectangle 874 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 1H1V7H19V1ZM0 0V8H20V0H0Z" fill="#444444"/>
+    <path id="Rectangle 876 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 8H1V14H19V8ZM0 7V15H20V7H0Z" fill="#444444"/>
+    <path id="Rectangle 878 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 15H1V21H19V15ZM0 14V22H20V14H0Z" fill="#444444"/>
+    <path id="Rectangle 875" d="M1 1H14V7H1V1Z" fill="#008AEF"/>
+    <path id="Rectangle 877" d="M1 8H9V14H1V8Z" fill="#008AEF"/>
+    <path id="Rectangle 879" d="M1 15H19V21H1V15Z" fill="#008AEF"/>
+</symbol>
+
+<symbol id="bar-solid-purple" viewBox="0 0 20 22">
+    <path id="Rectangle 874 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 1H1V7H19V1ZM0 0V8H20V0H0Z" fill="#444444"/>
+    <path id="Rectangle 876 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 8H1V14H19V8ZM0 7V15H20V7H0Z" fill="#444444"/>
+    <path id="Rectangle 878 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 15H1V21H19V15ZM0 14V22H20V14H0Z" fill="#444444"/>
+    <path id="Rectangle 875" d="M1 1H14V7H1V1Z" fill="#D6007B"/>
+    <path id="Rectangle 877" d="M1 8H9V14H1V8Z" fill="#D6007B"/>
+    <path id="Rectangle 879" d="M1 15H19V21H1V15Z" fill="#D6007B"/>
+</symbol>
+
+<symbol id="bar-solid-red" viewBox="0 0 20 22">
+    <path id="Rectangle 874 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 1H1V7H19V1ZM0 0V8H20V0H0Z" fill="#444444"/>
+    <path id="Rectangle 876 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 8H1V14H19V8ZM0 7V15H20V7H0Z" fill="#444444"/>
+    <path id="Rectangle 878 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 15H1V21H19V15ZM0 14V22H20V14H0Z" fill="#444444"/>
+    <path id="Rectangle 875" d="M1 1H14V7H1V1Z" fill="#FF555A"/>
+    <path id="Rectangle 877" d="M1 8H9V14H1V8Z" fill="#FF555A"/>
+    <path id="Rectangle 879" d="M1 15H19V21H1V15Z" fill="#FF555A"/>
+</symbol>
+
+<symbol id="bar-solid-yellow" viewBox="0 0 20 22">
+    <path id="Rectangle 874 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 1H1V7H19V1ZM0 0V8H20V0H0Z" fill="#444444"/>
+    <path id="Rectangle 876 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 8H1V14H19V8ZM0 7V15H20V7H0Z" fill="#444444"/>
+    <path id="Rectangle 878 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M19 15H1V21H19V15ZM0 14V22H20V14H0Z" fill="#444444"/>
+    <path id="Rectangle 875" d="M1 1H14V7H1V1Z" fill="#FFB628"/>
+    <path id="Rectangle 877" d="M1 8H9V14H1V8Z" fill="#FFB628"/>
+    <path id="Rectangle 879" d="M1 15H19V21H1V15Z" fill="#FFB628"/>
+</symbol>
+<symbol id="bar-gradient-blue" viewBox="0 0 20 22">
+<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="7" fill="url(#paint0_linear)" stroke="#444444"/>
+<rect id="Rectangle 876" x="0.5" y="7.5" width="19" height="7" fill="url(#paint1_linear)" stroke="#444444"/>
+<rect id="Rectangle 878" x="0.5" y="14.5" width="19" height="7" fill="url(#paint2_linear)" stroke="#444444"/>
+</symbol>
+<defs>
+<linearGradient id="paint0_linear" x1="3" y1="4" x2="18.9998" y2="4.06004" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4D82B8"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="1" y1="11" x2="19" y2="11" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4D82B8"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="5" y1="18" x2="19" y2="18.0015" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4D82B8"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+
+<symbol id="bar-gradient-green" viewBox="0 0 20 22">
+<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="7" fill="url(#paint3_linear)" stroke="#444444"/>
+<rect id="Rectangle 876" x="0.5" y="7.5" width="19" height="7" fill="url(#paint4_linear)" stroke="#444444"/>
+<rect id="Rectangle 878" x="0.5" y="14.5" width="19" height="7" fill="url(#paint5_linear)" stroke="#444444"/>
+</symbol>
+<defs>
+<linearGradient id="paint3_linear" x1="3" y1="4" x2="19" y2="4.00008" gradientUnits="userSpaceOnUse">
+<stop stop-color="#63C384"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="1" y1="11" x2="19" y2="11.0001" gradientUnits="userSpaceOnUse">
+<stop stop-color="#63C384"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="5" y1="18" x2="18.9998" y2="18.0525" gradientUnits="userSpaceOnUse">
+<stop stop-color="#63C384"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+
+<symbol id="bar-gradient-lightblue" viewBox="0 0 20 22">
+<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="7" fill="url(#paint6_linear)" stroke="#444444"/>
+<rect id="Rectangle 876" x="0.5" y="7.5" width="19" height="7" fill="url(#paint7_linear)" stroke="#444444"/>
+<rect id="Rectangle 878" x="0.5" y="14.5" width="19" height="7" fill="url(#paint8_linear)" stroke="#444444"/>
+</symbol>
+<defs>
+<linearGradient id="paint6_linear" x1="3" y1="4" x2="19" y2="4.00009" gradientUnits="userSpaceOnUse">
+<stop stop-color="#008AEF"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear" x1="1" y1="11" x2="19" y2="10.9999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#008AEF"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear" x1="5" y1="18" x2="19" y2="17.9999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#008AEF"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+
+<symbol id="bar-gradient-purple" viewBox="0 0 20 22">
+<rect id="Rectangle 879" x="0.5" y="0.5" width="19" height="7" fill="url(#paint9_linear)" stroke="#444444"/>
+<rect id="Rectangle 880" x="0.5" y="7.5" width="19" height="7" fill="url(#paint10_linear)" stroke="#444444"/>
+<rect id="Rectangle 881" x="0.5" y="14.5" width="19" height="7" fill="url(#paint11_linear)" stroke="#444444"/>
+</symbol>
+<defs>
+<linearGradient id="paint9_linear" x1="3" y1="4" x2="19" y2="3.99996" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D6007B"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear" x1="1" y1="11" x2="19" y2="11.0001" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D6007B"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear" x1="5" y1="18" x2="18.9998" y2="18.0525" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D6007B"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+
+<symbol id="bar-gradient-red" viewBox="0 0 20 22">
+<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="7" fill="url(#paint12_linear)" stroke="#444444"/>
+<rect id="Rectangle 876" x="0.5" y="7.5" width="19" height="7" fill="url(#paint13_linear)" stroke="#444444"/>
+<rect id="Rectangle 878" x="0.5" y="14.5" width="19" height="7" fill="url(#paint14_linear)" stroke="#444444"/>
+</symbol>
+<defs>
+<linearGradient id="paint12_linear" x1="3" y1="4" x2="19" y2="4.00007" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF555A"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear" x1="1" y1="11" x2="18.9997" y2="11.0675" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF555A"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint14_linear" x1="5" y1="18" x2="18.9998" y2="18.0525" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF555A"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+
+<symbol id="bar-gradient-yellow" viewBox="0 0 20 22">
+<rect id="Rectangle 874" x="0.5" y="0.5" width="19" height="7" fill="url(#paint15_linear)" stroke="#444444"/>
+<rect id="Rectangle 876" x="0.5" y="7.5" width="19" height="7" fill="url(#paint16_linear)" stroke="#444444"/>
+<rect id="Rectangle 878" x="0.5" y="14.5" width="19" height="7" fill="url(#paint17_linear)" stroke="#444444"/>
+</symbol>
+<defs>
+<linearGradient id="paint15_linear" x1="3" y1="4" x2="18.9998" y2="4.06005" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFB628"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint16_linear" x1="1" y1="11" x2="18.9997" y2="11.0676" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFB628"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint17_linear" x1="5" y1="18" x2="18.9998" y2="18.0526" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFB628"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>