fix: Making viz components respect D3 Format from metric (apache-superset#280)

* fix: BigNumber uses metric's d3format value now, when populated.

* fix: respecting D3 Format column for a handful of NVD3 charts

* fix: treemap respects metric's D3 Format setting

* style: Simpler loop syntax using forEach, Prettier cleanup.

* style: prettier

* style: re-installed modules, re-ran prettier

* fix: eslint nits

* style: moving grabD3Format outside the transformProps block

* fix: allow formData to override metric's D3 Format

* style: overwriting yAxisFormat rather than declaring a new var

Author: rusackas

plugins/superset-ui-plugins/packages/superset-ui-legacy-plugin-chart-treemap/src/transformProps.js

@@ -19,7 +19,16 @@
 /* eslint-disable sort-keys */
 export default function transformProps(chartProps) {
   const { width, height, formData, queryData } = chartProps;
-  const { colorScheme, numberFormat, treemapRatio } = formData;
+  const { colorScheme, treemapRatio } = formData;
+  let { numberFormat } = formData;
+
+  if (!numberFormat && chartProps.datasource && chartProps.datasource.metrics) {
+    chartProps.datasource.metrics.forEach(metric => {
+      if (metric.metric_name === chartProps.formData.metrics[0] && metric.d3format) {
+        numberFormat = metric.d3format;
+      }
+    });
+  }
 
   return {
     width,

plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-big-number/src/BigNumber/transformProps.js

@@ -36,8 +36,8 @@ export default function transformProps(chartProps) {
     startYAxisAtZero,
     subheader = '',
     vizType,
-    yAxisFormat,
   } = formData;
+  let { yAxisFormat } = formData;
   const { data } = queryData;
 
   let mainColor;
@@ -68,7 +68,10 @@ export default function transformProps(chartProps) {
       }
     }
     trendLineData = supportAndShowTrendLine
-      ? sortedData.map(point => ({ x: point[TIME_COLUMN], y: point[metricName] }))
+      ? sortedData.map(point => ({
+          x: point[TIME_COLUMN],
+          y: point[metricName],
+        }))
       : null;
   } else {
     bigNumber = data[0][metricName];
@@ -82,6 +85,14 @@ export default function transformProps(chartProps) {
     className = 'negative';
   }
 
+  if (!yAxisFormat && chartProps.datasource && chartProps.datasource.metrics) {
+    chartProps.datasource.metrics.forEach(metricEntry => {
+      if (metricEntry.metric_name === metric && metricEntry.d3format) {
+        yAxisFormat = metricEntry.d3format;
+      }
+    });
+  }
+
   const formatValue = getNumberFormatter(yAxisFormat);
 
   return {

plugins/superset-ui-plugins/packages/superset-ui-legacy-preset-chart-nvd3/src/transformProps.js

@@ -22,6 +22,17 @@ import { formatLabel } from './utils';
 
 const NOOP = () => {};
 
+const grabD3Format = (chartProps, targetMetric) => {
+  let foundFormatter;
+  chartProps.datasource.metrics.forEach(metric => {
+    if (metric.d3format && metric.metric_name === targetMetric) {
+      foundFormatter = metric.d3format;
+    }
+  });
+
+  return foundFormatter;
+};
+
 export default function transformProps(chartProps) {
   const { width, height, annotationData, datasource, formData, hooks, queryData } = chartProps;
 
@@ -59,18 +70,17 @@ export default function transformProps(chartProps) {
     xAxisFormat,
     xAxisLabel,
     xAxisShowminmax,
-    numberFormat,
     xLogScale,
     xTicksLayout,
     y,
-    yAxisFormat,
-    yAxis2Format,
     yAxisBounds,
     yAxisLabel,
     yAxisShowminmax,
     yLogScale,
   } = formData;
 
+  let { numberFormat, yAxisFormat, yAxis2Format } = formData;
+
   const rawData = queryData.data || [];
   const data = Array.isArray(rawData)
     ? rawData.map(row => ({
@@ -79,6 +89,15 @@ export default function transformProps(chartProps) {
       }))
     : rawData;
 
+  if (chartProps.formData.vizType === 'pie') {
+    numberFormat = numberFormat || grabD3Format(chartProps, chartProps.formData.metric);
+  } else if (chartProps.formData.vizType === 'dual_line') {
+    yAxisFormat = yAxisFormat || grabD3Format(chartProps, chartProps.formData.metric);
+    yAxis2Format = yAxis2Format || grabD3Format(chartProps, chartProps.formData.metric2);
+  } else if (['line', 'dist_bar', 'bar', 'area'].indexOf(chartProps.formData.vizType) > -1) {
+    yAxisFormat = yAxisFormat || grabD3Format(chartProps, chartProps.formData.metrics[0]);
+  }
+
   return {
     width,
     height,