Merged in feature/MZ-25-size-legend-interaction (pull request #40)

feature/MZ-25: Fix gradient legend interaction
chartshq · Oct 29, 2019 · 37f6137 · 37f6137
2 parents 170f2ea + 54429d6
commit 37f6137
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 53 deletions.
diff --git a/examples/js/simple-bar.js b/examples/js/simple-bar.js
@@ -58,7 +58,7 @@
     // ])
 
     const canvas = env.canvas();
-    
+
     canvas
         .data(rootData)
         // .rows(['maxDays'])

diff --git a/examples/js/simple-scatter.js b/examples/js/simple-scatter.js
@@ -53,7 +53,7 @@
 
     let rootData = new DataModel(data, schema)
     const canvas = env.canvas();
-    
+
     canvas
         .data(rootData)
         .columns(['Acceleration'])

diff --git a/examples/js/wildfire.js b/examples/js/wildfire.js
@@ -5,20 +5,20 @@ const html = muze.Operators.html;
 d3.csv('../data/wildfires.csv', (data) => {
     const schema = [
         {
-            'name': 'year',
+            name: 'year',
             type: 'dimension'
         },
         {
             name: 'gis_acres',
-            'type': 'measure',
+            type: 'measure',
             defAggFn: 'avg'
         },
         {
             name: 'fire_name',
-            'type': 'dimension'
+            type: 'dimension'
         },
         {
-            'name': 'alarm_date',
+            name: 'alarm_date',
             type: 'dimension'
         }
     ];
@@ -45,57 +45,57 @@ d3.csv('../data/wildfires.csv', (data) => {
                     .detail(['fire_name'])
                     .color({ value: 'rgba(255, 156, 25, 0.5)' })
                     .size({
-            field: 'gis_acres',
-            range: [1, 450]
-        })
+                        field: 'gis_acres',
+                        range: [1, 450]
+                    })
                     .layers([{ mark: 'point' }])
                     .title('Wildfires over the year for different months')
                     .subtitle('Use data operators to transform data and visualize it and size (retinal) encoding channel to encode more information')
                     .config({
-            autoGroupBy: { disabled: true },
-            gridLines: {
-                y: { show: true }
-            },
-            border: {
-                showValueBorders: { left: false, bottom: false }
-            },
-            axes: {
-                y: {
-                    tickValues: [1950, 1970, 1990, 2010],
-                    showAxisName: false
-                },
-                x: {
-                    tickFormat: val => months[new Date(val).getMonth()],
-                    showInnerTicks: false,
-                    showAxisName: false
-                }
-            },
-            interaction: {
-                tooltip: {
-                    formatter: (dataModel, context) => {
-                        const tooltipData = dataModel.getData().data;
-                        const fieldConfig = dataModel.getFieldsConfig();
+                        autoGroupBy: { disabled: true },
+                        gridLines: {
+                            y: { show: true }
+                        },
+                        border: {
+                            showValueBorders: { left: false, bottom: false }
+                        },
+                        axes: {
+                            y: {
+                                tickValues: [1950, 1970, 1990, 2010],
+                                showAxisName: false
+                            },
+                            x: {
+                                tickFormat: val => months[new Date(val).getMonth()],
+                                showInnerTicks: false,
+                                showAxisName: false
+                            }
+                        },
+                        interaction: {
+                            tooltip: {
+                                formatter: (dataModel, context) => {
+                                    const tooltipData = dataModel.getData().data;
+                                    const fieldConfig = dataModel.getFieldsConfig();
 
-                        let tooltipContent = '';
-                        tooltipData.forEach((dataArray, i) => {
-                            const fireName = dataArray[fieldConfig.fire_name.index];
-                            const monthsOfFire = new Date(dataArray[fieldConfig['Months of Fire'].index]);
-                            const year = dataArray[fieldConfig.year.index];
-                            const acres = dataArray[fieldConfig.gis_acres.index];
+                                    let tooltipContent = '';
+                                    tooltipData.forEach((dataArray, i) => {
+                                        const fireName = dataArray[fieldConfig.fire_name.index];
+                                        const monthsOfFire = new Date(dataArray[fieldConfig['Months of Fire'].index]);
+                                        const year = dataArray[fieldConfig.year.index];
+                                        const acres = dataArray[fieldConfig.gis_acres.index];
 
-                            const date = monthsOfFire.getDate();
-                            const month = months[monthsOfFire.getMonth()];
+                                        const date = monthsOfFire.getDate();
+                                        const month = months[monthsOfFire.getMonth()];
 
-                            tooltipContent += `<p>The <b>${fireName}</b> fire on <b>${date} ${month}, ${year}</b>
+                                        tooltipContent += `<p>The <b>${fireName}</b> fire on <b>${date} ${month}, ${year}</b>
                                         affected <b>${acres.toFixed(2)}</b> acres of land</p>`;
-                        });
-                        return html`${tooltipContent}`;
-                    }
-                }
-            },
-            legend: {
-                size: { show: false }
-            }
-        })
-                    .mount('#chart-container');
+                                    });
+                                    return html`${tooltipContent}`;
+                                }
+                            }
+                        },
+                        legend: {
+                            size: { show: false }
+                        }
+                    })
+                    .mount('#chart');
 });
diff --git a/packages/muze-legend/src/firebolt/physical/drag.js b/packages/muze-legend/src/firebolt/physical/drag.js
@@ -54,7 +54,7 @@ import {
         endPos.y = Math.max(0, Math.min(endPos.y, boundingBox.height));
         if (startPos[axisType] === endPos[axisType]) {
             payload = {
-                criteria: {}
+                criteria: null
             };
         } else {
             payload = {

diff --git a/packages/muze-legend/src/firebolt/side-effects/selection-box/index.js b/packages/muze-legend/src/firebolt/side-effects/selection-box/index.js
@@ -11,6 +11,13 @@ import './styles.scss';
  * @class SelectionBox
  */
 /* istanbul ignore next */ class SelectionBox extends SpawnableSideEffect {
+    constructor (...params) {
+        super(...params);
+        this._graphicElems = {
+            rect: null
+        };
+    }
+
     static formalName () {
         return SELECTIONBOX;
     }
@@ -39,8 +46,15 @@ import './styles.scss';
         const config = this.config();
         const axis = context.axis().source();
         const className = `${config.classPrefix}-${config.className}`;
+        const { criteria } = payload;
+        const { rect } = this._graphicElems;
+
+        if (criteria === null) {
+            rect && rect.remove();
+            return this;
+        }
 
-        const domain = payload.criteria[firebolt.context.fieldName()];
+        const domain = criteria[firebolt.context.fieldName()];
         const axisScale = axis.scale();
         const range = domain ? [axis.getScaleValue(domain[0]), axis.getScaleValue(domain[1])] : [];
 
@@ -73,6 +87,8 @@ import './styles.scss';
                         .attr('x', x)
                         .attr(WIDTH, width)
                         .attr(HEIGHT, height);
+        this._graphicElems.rect = selBox;
+        return this;
     }
 }