This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 2476814 [feat] Add d3 legend formatting for Arc, Polygon and Scatter
deck.gl maps (#7951)
2476814 is described below
commit 2476814a6ae00856510d774ddc7ad9eb5e25107b
Author: Tom Hunter <[email protected]>
AuthorDate: Sat Aug 10 21:55:56 2019 -0400
[feat] Add d3 legend formatting for Arc, Polygon and Scatter deck.gl maps
(#7951)
* Legend formatting for Arc, Polygon and Scatter
* fix typo
* refactor from d3-format to superset-ui
---
.../assets/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 e0bee75..6341673 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 2579021..cc29b84 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 8e60029..e2c6308 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 3ddabd2..ae673de 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 fcaef02..355f632 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 { formatNumber } from '@superset-ui/number-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 formatNumber(this.props.format, numValue);
+
+ }
+
+ formatCategoryLabel(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)}
>
- <span style={style}>{icon}</span> {k}
+ <span style={style}>{icon}</span> {this.formatCategoryLabel(k)}
</a>
</li>
);
diff --git
a/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx
b/superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx
index e1933a4..7352b3d 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}
/>
</AnimatableDeckGLContainer>
</div>
diff --git
a/superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx
b/superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx
index 3797d7e..891856d 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 {
<Legend
categories={buckets}
position={formData.legend_position}
+ format={formData.legend_format}
/>}
</AnimatableDeckGLContainer>
</div>
