fix: Sunburst chart respects and prefers Metric's D3 Format (apache#282)

* fix: now respects/prefers metric's D3 Format * fix: node-modules reinstalled, re-prettifying accordingly * fix: making eslint happier * style: shorter/DRYer is better * style: using Array.prototype.find instead of Array.prototype.forEach
zhaoyongjie · Nov 24, 2021 · e43591e · e43591e
1 parent 0efa0bf
commit e43591e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/...ins/superset-ui-plugins/packages/superset-ui-legacy-plugin-chart-sunburst/src/Sunburst.js b/...ins/superset-ui-plugins/packages/superset-ui-legacy-plugin-chart-sunburst/src/Sunburst.js
@@ -32,6 +32,7 @@ const propTypes = {
   width: PropTypes.number,
   height: PropTypes.number,
   colorScheme: PropTypes.string,
+  numberFormat: PropTypes.string,
   metrics: PropTypes.arrayOf(
     PropTypes.oneOfType([
       PropTypes.string,
@@ -61,7 +62,7 @@ function getAncestors(node) {
 function Sunburst(element, props) {
   const container = d3.select(element);
   container.classed('superset-legacy-chart-sunburst', true);
-  const { data, width, height, colorScheme, metrics } = props;
+  const { data, width, height, colorScheme, metrics, numberFormat } = props;
 
   // vars with shared scope within this function
   const margin = { top: 10, right: 5, bottom: 10, left: 5 };
@@ -97,7 +98,7 @@ function Sunburst(element, props) {
     .innerRadius(d => Math.sqrt(d.y))
     .outerRadius(d => Math.sqrt(d.y + d.dy));
 
-  const formatNum = getNumberFormatter(NumberFormats.SI_3_DIGIT);
+  const formatNum = getNumberFormatter(numberFormat || NumberFormats.SI_3_DIGIT);
   const formatPerc = getNumberFormatter(NumberFormats.PERCENT_3_POINT);
 
   container.select('svg').remove();

diff --git a/...perset-ui-plugins/packages/superset-ui-legacy-plugin-chart-sunburst/src/transformProps.js b/...perset-ui-plugins/packages/superset-ui-legacy-plugin-chart-sunburst/src/transformProps.js
@@ -17,14 +17,25 @@
  * under the License.
  */
 export default function transformProps(chartProps) {
-  const { width, height, formData, queryData } = chartProps;
+  const { width, height, formData, queryData, datasource } = chartProps;
   const { colorScheme, metric, secondaryMetric } = formData;
 
-  return {
+  const returnProps = {
     width,
     height,
     data: queryData.data,
     colorScheme,
     metrics: [metric, secondaryMetric],
   };
+
+  if (datasource && datasource.metrics) {
+    const metricWithFormat = datasource.metrics.find(
+      ({ metric_name: metricName, d3format }) => metricName === formData.metric && d3format,
+    );
+    if (metricWithFormat) {
+      Object.assign(returnProps, { numberFormat: metricWithFormat.d3format });
+    }
+  }
+
+  return returnProps;
 }