Updated icons

src/components/legends/CategoricalLegend.vue

@@ -1,14 +1,18 @@
 <template>
-    <div 
-        :id="this.legendElemID" 
-        class="vdp-legend" 
-        :style="{
-            'height': this.computedHeight + 'px', 
-            'width': this.computedWidth + 'px',
-            'top': this.computedTop + 'px',
-            'left': this.computedLeft + 'px'
-        }"
-    ></div>
+    <div>
+        <div 
+            :id="this.legendElemID" 
+            class="vdp-legend" 
+            :style="{
+                'height': this.computedHeight + 'px', 
+                'width': this.computedWidth + 'px',
+                'top': this.computedTop + 'px',
+                'left': this.computedLeft + 'px'
+            }"
+        ></div>
+
+        <ColorScalePicker v-if="showColorScalePicker" @close="showColorScalePicker = false" :onSelect="changeColorScale" />
+    </div>
 </template>
 
 <script>
@@ -22,7 +26,9 @@ import CategoricalScale from './../../scales/CategoricalScale.js';
 import HistoryEvent from './../../history/HistoryEvent.js';
 import HistoryStack from './../../history/HistoryStack.js';
 
-import { COLOR_PICKER_PATH, EYE_PATH, EYE_DISABLED_PATH } from './../../icons.js';
+import ColorScalePicker from './../modals/ColorScalePicker.vue';
+
+import { COLOR_PICKER_PATH, EYE_PATH, EYE_DISABLED_PATH, PAINT_BUCKET_PATH } from './../../icons.js';
 
 
 
@@ -49,6 +55,9 @@ let uuid = 0;
  */
 export default {
     name: 'CategoricalLegend',
+    components: {
+        ColorScalePicker,
+    },
     props: {
         'variable': {
             type: String
@@ -73,7 +82,8 @@ export default {
     data() {
         return {
             lHeight: 0,
-            highlightScale: null
+            highlightScale: null,
+            showColorScalePicker: false
         }
     },
     computed: {
@@ -149,6 +159,17 @@ export default {
             highlight.selectAll("rect")
                 .attr("fill-opacity", 0);
         },
+        changeColorScale(scaleKey) {
+            this._varScale.setColorScaleByKey(scaleKey);
+
+            this._stack.push(new HistoryEvent(
+                HistoryEvent.types.SCALE,
+                HistoryEvent.subtypes.SCALE_COLOR_SCALE,
+                this._varScale.id,
+                "setColorScaleByKey",
+                [scaleKey]
+            ));
+        },
         drawLegend() {
             const vm = this;
             vm.removeLegend();
@@ -187,6 +208,17 @@ export default {
             const titleTextBbox = titleText.node().getBBox();
             titleText.attr("transform", "translate(" + 0 + "," + titleTextBbox.height + ")");
 
+            title.append("path")
+                .attr("d", PAINT_BUCKET_PATH)
+                .attr("width", 20)
+                .attr("height", 20)
+                .attr("transform", "translate(" + (vm.lWidth - 1.5*marginX) + "," + (titleTextBbox.height/2) + ") scale(-0.7 0.7)")
+                .style("cursor", "pointer")
+                .attr("fill", "silver")
+                .on("click", () => {
+                    vm.showColorScalePicker = true;
+                });
+
             const legendInner = legend.append("g")
                 .attr("class", "legend-inner");
 
@@ -266,7 +298,7 @@ export default {
             const buttonWidth = 16;
 
             const filterButtons = items.append("g")
-                .attr("transform", "translate(" + (vm.lWidth - buttonWidth - marginX) + ",0)")
+                .attr("transform", "translate(" + (vm.lWidth - 2*(buttonWidth + 2*marginX)) + ",0)")
                 .style("cursor", "pointer")
                 .on("click", (d) => {
                     let newDomainIndices;
@@ -310,6 +342,51 @@ export default {
                 .attr("fill", (d) => "silver");
             
 
+            const colorButtons = items.append("g")
+                .attr("transform", "translate(" + (vm.lWidth - 1*(buttonWidth + 2*marginX)) + ",0)")
+                .style("cursor", "pointer")
+                .on("click", (d) => {
+                    let newDomainIndices;
+                    if(varScale.domainFiltered.includes(d)) {
+                        // Remove element
+                        let newDomain = varScale.domainFiltered.slice();
+                        newDomain.splice(newDomain.indexOf(d), 1);
+                        newDomainIndices = newDomain.map((el) => varScale.domain.indexOf(el));
+                    } else {
+                        // Add element
+                        let newDomain = varScale.domainFiltered.slice();
+                        newDomainIndices = newDomain.map((el) => varScale.domain.indexOf(el));
+                        newDomainIndices.push(varScale.domain.indexOf(d));
+                        // TODO: check if this sorting introduces other bugs. if so, maybe use (d, i)
+                        // and get the index of the legend item, then use that to add
+                        newDomainIndices.sort((a, b) => (a - b));
+                    }
+                    varScale.filter(newDomainIndices);
+                    stack.push(new HistoryEvent(
+                        HistoryEvent.types.SCALE,
+                        HistoryEvent.subtypes.SCALE_DOMAIN_FILTER,
+                        varScale.id,
+                        "filter",
+                        [newDomainIndices]
+                    ));
+                });
+
+            colorButtons.append("rect")
+                .attr("x", 0)
+                .attr("y", marginY)
+                .attr("width", buttonWidth)
+                .attr("height", scale.bandwidth() - 2*marginY)
+                .attr("fill", "transparent")
+                .attr("stroke", "transparent")
+            
+            colorButtons.append("path")
+                .attr("d", COLOR_PICKER_PATH)
+                .attr("y", scale.bandwidth() - 5)
+                .attr("x", buttonWidth / 2)
+                .attr("transform", "scale(0.7 0.7)")
+                .attr("fill", (d) => "silver");
+            
+
 
             
             

src/components/legends/ContinuousLegend.vue

@@ -50,7 +50,7 @@ import HistoryStack from './../../history/HistoryStack.js';
 import ColorScalePicker from './../modals/ColorScalePicker.vue';
 import Axis from './../axes/Axis.vue';
 
-import { COLOR_PICKER_PATH } from './../../icons.js';
+import { COLOR_PICKER_PATH, PAINT_BUCKET_PATH } from './../../icons.js';
 
 const STYLES = Object.freeze({ "BAR": 1, "DOT": 2, "LINE": 3, "SHAPE": 4 });
 
@@ -224,11 +224,12 @@ export default {
             titleText.attr("transform", "translate(" + 0 + "," + titleTextBbox.height + ")");
 
             title.append("path")
-                .attr("d", COLOR_PICKER_PATH)
+                .attr("d", PAINT_BUCKET_PATH)
                 .attr("width", 20)
                 .attr("height", 20)
-                .attr("transform", "translate(" + (vm.lWidth - 20) + "," + (titleTextBbox.height/2) + ") scale(0.7 0.7)")
+                .attr("transform", "translate(" + (vm.lWidth - 1.5*marginX) + "," + (titleTextBbox.height/2) + ") scale(-0.7 0.7)")
                 .style("cursor", "pointer")
+                .attr("fill", "silver")
                 .on("click", () => {
                     vm.showColorScalePicker = true;
                 });