From cd978cf9cc1b27db4c256aa2fd4c604a098dd500 Mon Sep 17 00:00:00 2001 From: Ranajit Banerjee Date: Tue, 29 Oct 2019 16:32:01 +0530 Subject: [PATCH] feature/MZ-25: Fix gradient legend interaction --- examples/index.html | 7 +- examples/js/simple-bar.js | 11 +-- examples/js/simple-scatter.js | 14 +-- examples/js/wildfire.js | 98 +++++++++---------- .../muze-legend/src/firebolt/physical/drag.js | 2 +- .../side-effects/selection-box/index.js | 18 +++- 6 files changed, 79 insertions(+), 71 deletions(-) diff --git a/examples/index.html b/examples/index.html index 19013e4c..9b8b607a 100644 --- a/examples/index.html +++ b/examples/index.html @@ -42,11 +42,6 @@
- - - - + \ No newline at end of file diff --git a/examples/js/simple-bar.js b/examples/js/simple-bar.js index 59ec0159..0bcc97da 100644 --- a/examples/js/simple-bar.js +++ b/examples/js/simple-bar.js @@ -59,16 +59,13 @@ // ]) const canvas = env.canvas(); - + canvas .data(rootData) // .rows(['maxDays']) - .columns(['Maker']) - .rows(['Horsepower']) - .layers([{ - mark: 'bar' - }]) - .color('Origin') + .rows(['Origin', 'Horsepower']) + .columns(['Year']) + .color('Horsepower') // .detail(['Name']) .mount('#chart') .height(650) diff --git a/examples/js/simple-scatter.js b/examples/js/simple-scatter.js index b4d7818f..5724ba2a 100644 --- a/examples/js/simple-scatter.js +++ b/examples/js/simple-scatter.js @@ -59,18 +59,18 @@ // ]) const canvas = env.canvas(); - + canvas .data(rootData) - // .rows(['maxDays']) - .columns(['Maker']) - .rows(['Horsepower']) + .columns(['Displacement', 'Horsepower']) + .rows(['Horsepower', 'Acceleration']) .layers([{ mark: 'point' }]) - .color('Origin') - .size('Horsepower') - // .detail(['Name']) + .color('Horsepower') + // .size('Horsepower') + // .shape('Origin') + .detail(['Name']) .mount('#chart') .height(500) .width(500) diff --git a/examples/js/wildfire.js b/examples/js/wildfire.js index 4bacbdd0..8cdbb165 100644 --- 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 += `

The ${fireName} fire on ${date} ${month}, ${year} + tooltipContent += `

The ${fireName} fire on ${date} ${month}, ${year} affected ${acres.toFixed(2)} acres of land

`; - }); - 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 index 5af81158..f213a479 100644 --- 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 index 5449128c..d6314ec4 100644 --- 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; } }