feat: Implement support for currencies in more charts (#24594)

superset-frontend/packages/superset-ui-core/src/currency-format/index.ts

@@ -19,3 +19,4 @@
 
 export { default as CurrencyFormatter } from './CurrencyFormatter';
 export * from './CurrencyFormatter';
+export * from './utils';

superset-frontend/plugins/plugin-chart-echarts/src/utils/valueFormatter.ts → superset-frontend/packages/superset-ui-core/src/currency-format/utils.ts

@@ -1,3 +1,21 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
 import {
   Currency,
   CurrencyFormatter,
@@ -16,10 +34,8 @@ export const buildCustomFormatters = (
 ) => {
   const metricsArray = ensureIsArray(metrics);
   return metricsArray.reduce((acc, metric) => {
-    const actualD3Format = isSavedMetric(metric)
-      ? columnFormats[metric] ?? d3Format
-      : d3Format;
     if (isSavedMetric(metric)) {
+      const actualD3Format = d3Format ?? columnFormats[metric];
       return currencyFormats[metric]
         ? {
             ...acc,

superset-frontend/packages/superset-ui-core/test/currency-format/utils.test.ts

@@ -0,0 +1,151 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+  buildCustomFormatters,
+  CurrencyFormatter,
+  getCustomFormatter,
+  getNumberFormatter,
+  getValueFormatter,
+  NumberFormatter,
+  ValueFormatter,
+} from '@superset-ui/core';
+
+it('buildCustomFormatters without saved metrics returns empty object', () => {
+  expect(
+    buildCustomFormatters(
+      [
+        {
+          expressionType: 'SIMPLE',
+          aggregate: 'COUNT',
+          column: { column_name: 'test' },
+        },
+      ],
+      {
+        sum__num: { symbol: 'USD', symbolPosition: 'prefix' },
+      },
+      {},
+      ',.1f',
+    ),
+  ).toEqual({});
+
+  expect(
+    buildCustomFormatters(
+      undefined,
+      {
+        sum__num: { symbol: 'USD', symbolPosition: 'prefix' },
+      },
+      {},
+      ',.1f',
+    ),
+  ).toEqual({});
+});
+
+it('buildCustomFormatters with saved metrics returns custom formatters object', () => {
+  const customFormatters: Record<string, ValueFormatter> =
+    buildCustomFormatters(
+      [
+        {
+          expressionType: 'SIMPLE',
+          aggregate: 'COUNT',
+          column: { column_name: 'test' },
+        },
+        'sum__num',
+        'count',
+      ],
+      {
+        sum__num: { symbol: 'USD', symbolPosition: 'prefix' },
+      },
+      { sum__num: ',.2' },
+      ',.1f',
+    );
+
+  expect(customFormatters).toEqual({
+    sum__num: expect.any(Function),
+    count: expect.any(Function),
+  });
+
+  expect(customFormatters.sum__num).toBeInstanceOf(CurrencyFormatter);
+  expect(customFormatters.count).toBeInstanceOf(NumberFormatter);
+  expect((customFormatters.sum__num as CurrencyFormatter).d3Format).toEqual(
+    ',.1f',
+  );
+});
+
+it('buildCustomFormatters uses dataset d3 format if not provided in control panel', () => {
+  const customFormatters: Record<string, ValueFormatter> =
+    buildCustomFormatters(
+      [
+        {
+          expressionType: 'SIMPLE',
+          aggregate: 'COUNT',
+          column: { column_name: 'test' },
+        },
+        'sum__num',
+        'count',
+      ],
+      {
+        sum__num: { symbol: 'USD', symbolPosition: 'prefix' },
+      },
+      { sum__num: ',.2' },
+      undefined,
+    );
+
+  expect((customFormatters.sum__num as CurrencyFormatter).d3Format).toEqual(
+    ',.2',
+  );
+});
+
+it('getCustomFormatter', () => {
+  const customFormatters = {
+    sum__num: new CurrencyFormatter({
+      currency: { symbol: 'USD', symbolPosition: 'prefix' },
+    }),
+    count: getNumberFormatter(),
+  };
+  expect(getCustomFormatter(customFormatters, 'count')).toEqual(
+    customFormatters.count,
+  );
+  expect(
+    getCustomFormatter(customFormatters, ['count', 'sum__num'], 'count'),
+  ).toEqual(customFormatters.count);
+  expect(getCustomFormatter(customFormatters, ['count', 'sum__num'])).toEqual(
+    undefined,
+  );
+});
+
+it('getValueFormatter', () => {
+  expect(
+    getValueFormatter(['count', 'sum__num'], {}, {}, ',.1f'),
+  ).toBeInstanceOf(NumberFormatter);
+
+  expect(
+    getValueFormatter(['count', 'sum__num'], {}, {}, ',.1f', 'count'),
+  ).toBeInstanceOf(NumberFormatter);
+
+  expect(
+    getValueFormatter(
+      ['count', 'sum__num'],
+      { count: { symbol: 'USD', symbolPosition: 'prefix' } },
+      {},
+      ',.1f',
+      'count',
+    ),
+  ).toBeInstanceOf(CurrencyFormatter);
+});

superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js

@@ -51,7 +51,7 @@ const propTypes = {
   leftMargin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   metric: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   normalized: PropTypes.bool,
-  numberFormat: PropTypes.string,
+  valueFormatter: PropTypes.object,
   showLegend: PropTypes.bool,
   showPercentage: PropTypes.bool,
   showValues: PropTypes.bool,
@@ -90,7 +90,7 @@ function Heatmap(element, props) {
     leftMargin,
     metric,
     normalized,
-    numberFormat,
+    valueFormatter,
     showLegend,
     showPercentage,
     showValues,
@@ -115,8 +115,6 @@ function Heatmap(element, props) {
   const pixelsPerCharX = 4.5; // approx, depends on font size
   let pixelsPerCharY = 6; // approx, depends on font size
 
-  const valueFormatter = getNumberFormatter(numberFormat);
-
   // Dynamically adjusts  based on max x / y category lengths
   function adjustMargins() {
     let longestX = 1;

superset-frontend/plugins/legacy-plugin-chart-heatmap/src/transformProps.js

@@ -1,3 +1,5 @@
+import { getValueFormatter } from '@superset-ui/core';
+
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -17,7 +19,7 @@
  * under the License.
  */
 export default function transformProps(chartProps) {
-  const { width, height, formData, queriesData } = chartProps;
+  const { width, height, formData, queriesData, datasource } = chartProps;
   const {
     bottomMargin,
     canvasImageRendering,
@@ -37,7 +39,13 @@ export default function transformProps(chartProps) {
     yAxisBounds,
     yAxisFormat,
   } = formData;
-
+  const { columnFormats = {}, currencyFormats = {} } = datasource;
+  const valueFormatter = getValueFormatter(
+    metric,
+    currencyFormats,
+    columnFormats,
+    yAxisFormat,
+  );
   return {
     width,
     height,
@@ -50,7 +58,6 @@ export default function transformProps(chartProps) {
     leftMargin,
     metric,
     normalized,
-    numberFormat: yAxisFormat,
     showLegend,
     showPercentage: showPerc,
     showValues,
@@ -59,5 +66,6 @@ export default function transformProps(chartProps) {
     xScaleInterval: parseInt(xscaleInterval, 10),
     yScaleInterval: parseInt(yscaleInterval, 10),
     yAxisBounds,
+    valueFormatter,
   };
 }

superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js

@@ -21,7 +21,6 @@ import d3 from 'd3';
 import PropTypes from 'prop-types';
 import { extent as d3Extent } from 'd3-array';
 import {
-  getNumberFormatter,
   getSequentialSchemeRegistry,
   CategoricalColorNamespace,
 } from '@superset-ui/core';
@@ -47,10 +46,9 @@ const propTypes = {
   setDataMask: PropTypes.func,
   onContextMenu: PropTypes.func,
   emitCrossFilters: PropTypes.bool,
+  formatter: PropTypes.object,
 };
 
-const formatter = getNumberFormatter();
-
 function WorldMap(element, props) {
   const {
     countryFieldtype,
@@ -71,6 +69,7 @@ function WorldMap(element, props) {
     inContextMenu,
     filterState,
     emitCrossFilters,
+    formatter,
   } = props;
   const div = d3.select(element);
   div.classed('superset-legacy-chart-world-map', true);

superset-frontend/plugins/legacy-plugin-chart-world-map/src/transformProps.js

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { rgb } from 'd3-color';
+import { getValueFormatter } from '@superset-ui/core';
 
 export default function transformProps(chartProps) {
   const {
@@ -28,6 +29,7 @@ export default function transformProps(chartProps) {
     inContextMenu,
     filterState,
     emitCrossFilters,
+    datasource,
   } = chartProps;
   const { onContextMenu, setDataMask } = hooks;
   const {
@@ -40,8 +42,17 @@ export default function transformProps(chartProps) {
     colorBy,
     colorScheme,
     sliceId,
+    metric,
   } = formData;
   const { r, g, b } = colorPicker;
+  const { currencyFormats = {}, columnFormats = {} } = datasource;
+
+  const formatter = getValueFormatter(
+    metric,
+    currencyFormats,
+    columnFormats,
+    undefined,
+  );
 
   return {
     countryFieldtype,
@@ -61,5 +72,6 @@ export default function transformProps(chartProps) {
     inContextMenu,
     filterState,
     emitCrossFilters,
+    formatter,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts

@@ -26,11 +26,11 @@ import {
   getMetricLabel,
   extractTimegrain,
   QueryFormData,
+  getValueFormatter,
 } from '@superset-ui/core';
 import { BigNumberTotalChartProps, BigNumberVizProps } from '../types';
 import { getDateFormatter, parseMetricValue } from '../utils';
 import { Refs } from '../../types';
-import { getValueFormatter } from '../../utils/valueFormatter';
 
 export default function transformProps(
   chartProps: BigNumberTotalChartProps,

superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts

@@ -28,6 +28,7 @@ import {
   getXAxisLabel,
   Metric,
   ValueFormatter,
+  getValueFormatter,
 } from '@superset-ui/core';
 import { EChartsCoreOption, graphic } from 'echarts';
 import {
@@ -39,7 +40,6 @@ import {
 import { getDateFormatter, parseMetricValue } from '../utils';
 import { getDefaultTooltip } from '../../utils/tooltip';
 import { Refs } from '../../types';
-import { getValueFormatter } from '../../utils/valueFormatter';
 
 const defaultNumberFormatter = getNumberFormatter();
 export function renderTooltipFactory(

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts

@@ -24,6 +24,7 @@ import {
   NumberFormats,
   ValueFormatter,
   getColumnLabel,
+  getValueFormatter,
 } from '@superset-ui/core';
 import { CallbackDataParams } from 'echarts/types/src/util/types';
 import { EChartsCoreOption, FunnelSeriesOption } from 'echarts';
@@ -45,7 +46,6 @@ import { defaultGrid } from '../defaults';
 import { OpacityEnum, DEFAULT_LEGEND_FORM_DATA } from '../constants';
 import { getDefaultTooltip } from '../utils/tooltip';
 import { Refs } from '../types';
-import { getValueFormatter } from '../utils/valueFormatter';
 
 const percentFormatter = getNumberFormatter(NumberFormats.PERCENT_2_POINT);
 

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts

@@ -23,6 +23,7 @@ import {
   DataRecord,
   getMetricLabel,
   getColumnLabel,
+  getValueFormatter,
 } from '@superset-ui/core';
 import { EChartsCoreOption, GaugeSeriesOption } from 'echarts';
 import { GaugeDataItemOption } from 'echarts/types/src/chart/gauge/GaugeSeries';
@@ -46,7 +47,6 @@ import { OpacityEnum } from '../constants';
 import { getDefaultTooltip } from '../utils/tooltip';
 import { Refs } from '../types';
 import { getColtypesMapping } from '../utils/series';
-import { getValueFormatter } from '../utils/valueFormatter';
 
 const setIntervalBoundsAndColors = (
   intervals: string,