[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

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],
       ],
     },
     {

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'],
       ],
     },
     {

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'],
       ],
     },

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'),

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>
       );

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>

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>