From 238c8022dbe292cf0eb08b06400cdd822d0b9fb5 Mon Sep 17 00:00:00 2001 From: Tom Date: Fri, 9 Aug 2019 23:41:24 -0400 Subject: [PATCH 1/3] Legend formatting for Arc, Polygon and Scatter --- .../src/explore/controlPanels/DeckArc.js | 1 + .../src/explore/controlPanels/DeckPolygon.js | 2 +- .../src/explore/controlPanels/DeckScatter.js | 1 + superset/assets/src/explore/controls.jsx | 10 +++++++ superset/assets/src/visualizations/Legend.jsx | 30 ++++++++++++++++++- .../deckgl/CategoricalDeckGLContainer.jsx | 1 + .../deckgl/layers/Polygon/Polygon.jsx | 1 + 7 files changed, 44 insertions(+), 2 deletions(-) diff --git a/superset/assets/src/explore/controlPanels/DeckArc.js b/superset/assets/src/explore/controlPanels/DeckArc.js index e0bee756fa994..6341673db125d 100644 --- a/superset/assets/src/explore/controlPanels/DeckArc.js +++ b/superset/assets/src/explore/controlPanels/DeckArc.js @@ -44,6 +44,7 @@ export default { ['color_picker', 'target_color_picker'], ['dimension', 'color_scheme', 'label_colors'], ['stroke_width', 'legend_position'], + ['legend_format', null], ], }, { diff --git a/superset/assets/src/explore/controlPanels/DeckPolygon.js b/superset/assets/src/explore/controlPanels/DeckPolygon.js index 25790216fb55a..cc29b84c5caf2 100644 --- a/superset/assets/src/explore/controlPanels/DeckPolygon.js +++ b/superset/assets/src/explore/controlPanels/DeckPolygon.js @@ -52,7 +52,7 @@ export default { ['linear_color_scheme', 'opacity'], ['num_buckets', 'break_points'], ['table_filter', 'toggle_polygons'], - ['legend_position', null], + ['legend_position', 'legend_format'], ], }, { diff --git a/superset/assets/src/explore/controlPanels/DeckScatter.js b/superset/assets/src/explore/controlPanels/DeckScatter.js index 8e60029fe2a59..e2c63084176ec 100644 --- a/superset/assets/src/explore/controlPanels/DeckScatter.js +++ b/superset/assets/src/explore/controlPanels/DeckScatter.js @@ -62,6 +62,7 @@ export default { label: t('Point Color'), controlSetRows: [ ['color_picker', 'legend_position'], + [null, 'legend_format'], ['dimension', 'color_scheme', 'label_colors'], ], }, diff --git a/superset/assets/src/explore/controls.jsx b/superset/assets/src/explore/controls.jsx index 3ddabd21aea79..ae673de545e28 100644 --- a/superset/assets/src/explore/controls.jsx +++ b/superset/assets/src/explore/controls.jsx @@ -305,6 +305,16 @@ export const controls = { renderTrigger: true, }, + legend_format: { + label: t('Legend Format'), + description: t('Choose the format for legend values'), + type: 'SelectControl', + clearable: false, + default: D3_FORMAT_OPTIONS[0], + choices: D3_FORMAT_OPTIONS, + renderTrigger: true, + }, + fill_color_picker: { label: t('Fill Color'), description: t(' Set the opacity to 0 if you do not want to override the color specified in the GeoJSON'), diff --git a/superset/assets/src/visualizations/Legend.jsx b/superset/assets/src/visualizations/Legend.jsx index fcaef02c84b82..c2381cfd6ba82 100644 --- a/superset/assets/src/visualizations/Legend.jsx +++ b/superset/assets/src/visualizations/Legend.jsx @@ -18,13 +18,17 @@ */ import React from 'react'; import PropTypes from 'prop-types'; +import { format } from 'd3-format'; import './Legend.css'; +const categoryDelimiter = ' - '; + const propTypes = { categories: PropTypes.object, toggleCategory: PropTypes.func, showSingleCategory: PropTypes.func, + format: PropTypes.string, position: PropTypes.oneOf([null, 'tl', 'tr', 'bl', 'br']), }; @@ -32,10 +36,34 @@ const defaultProps = { categories: {}, toggleCategory: () => {}, showSingleCategory: () => {}, + format: null, position: 'tr', }; export default class Legend extends React.PureComponent { + format(value) { + if (!this.props.format) { + return value; + } + + const numValue = parseFloat(value); + return format(this.props.format)(numValue); + + } + + formatCatregoryLabel(k) { + if (!this.props.format) { + return k; + } + + if (k.includes(categoryDelimiter)) { + const values = k.split(categoryDelimiter); + return this.format(values[0]) + categoryDelimiter + this.format(values[1]); + } + + return this.format(k); + } + render() { if (Object.keys(this.props.categories).length === 0 || this.props.position === null) { return null; @@ -51,7 +79,7 @@ export default class Legend extends React.PureComponent { onClick={() => this.props.toggleCategory(k)} onDoubleClick={() => this.props.showSingleCategory(k)} > - {icon} {k} + {icon} {this.formatCatregoryLabel(k)} ); diff --git a/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx b/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx index e1933a4b1b50e..7352b3d49512c 100644 --- a/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx +++ b/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx @@ -237,6 +237,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent { toggleCategory={this.toggleCategory} showSingleCategory={this.showSingleCategory} position={this.props.formData.legend_position} + format={this.props.formData.legend_format} /> diff --git a/superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx b/superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx index 3797d7e7ebba7..891856d04302a 100644 --- a/superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx +++ b/superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx @@ -274,6 +274,7 @@ class DeckGLPolygon extends React.Component { } From a9563059037128be9cc7b7f4597a8f97651b8295 Mon Sep 17 00:00:00 2001 From: Tom Date: Mon, 5 Aug 2019 12:25:19 -0400 Subject: [PATCH 2/3] fix typo --- superset/assets/src/visualizations/Legend.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/superset/assets/src/visualizations/Legend.jsx b/superset/assets/src/visualizations/Legend.jsx index c2381cfd6ba82..ba89759423439 100644 --- a/superset/assets/src/visualizations/Legend.jsx +++ b/superset/assets/src/visualizations/Legend.jsx @@ -51,7 +51,7 @@ export default class Legend extends React.PureComponent { } - formatCatregoryLabel(k) { + formatCategoryLabel(k) { if (!this.props.format) { return k; } @@ -79,7 +79,7 @@ export default class Legend extends React.PureComponent { onClick={() => this.props.toggleCategory(k)} onDoubleClick={() => this.props.showSingleCategory(k)} > - {icon} {this.formatCatregoryLabel(k)} + {icon} {this.formatCategoryLabel(k)} ); From 3b7d4d929a5017b77cd5ae8b4c8b767915af9997 Mon Sep 17 00:00:00 2001 From: Tom Date: Fri, 9 Aug 2019 23:42:33 -0400 Subject: [PATCH 3/3] refactor from d3-format to superset-ui --- superset/assets/src/visualizations/Legend.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/superset/assets/src/visualizations/Legend.jsx b/superset/assets/src/visualizations/Legend.jsx index ba89759423439..355f632d34b9a 100644 --- a/superset/assets/src/visualizations/Legend.jsx +++ b/superset/assets/src/visualizations/Legend.jsx @@ -18,7 +18,7 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { format } from 'd3-format'; +import { formatNumber } from '@superset-ui/number-format'; import './Legend.css'; @@ -47,7 +47,7 @@ export default class Legend extends React.PureComponent { } const numValue = parseFloat(value); - return format(this.props.format)(numValue); + return formatNumber(this.props.format, numValue); }