feat: Implement currencies formatter for saved metrics (#24517)

superset-frontend/plugins/plugin-chart-table/src/transformProps.ts

@@ -18,6 +18,7 @@
  */
 import memoizeOne from 'memoize-one';
 import {
+  CurrencyFormatter,
   DataRecord,
   extractTimegrain,
   GenericDataType,
@@ -84,7 +85,7 @@ const processColumns = memoizeOne(function processColumns(
   props: TableChartProps,
 ) {
   const {
-    datasource: { columnFormats, verboseMap },
+    datasource: { columnFormats, currencyFormats, verboseMap },
     rawFormData: {
       table_timestamp_format: tableTimestampFormat,
       metrics: metrics_,
@@ -123,6 +124,7 @@ const processColumns = memoizeOne(function processColumns(
       const isTime = dataType === GenericDataType.TEMPORAL;
       const isNumber = dataType === GenericDataType.NUMERIC;
       const savedFormat = columnFormats?.[key];
+      const currency = currencyFormats?.[key];
       const numberFormat = config.d3NumberFormat || savedFormat;
 
       let formatter;
@@ -155,7 +157,9 @@ const processColumns = memoizeOne(function processColumns(
         // percent metrics have a default format
         formatter = getNumberFormatter(numberFormat || PERCENT_3_POINT);
       } else if (isMetric || (isNumber && numberFormat)) {
-        formatter = getNumberFormatter(numberFormat);
+        formatter = currency
+          ? new CurrencyFormatter({ d3Format: numberFormat, currency })
+          : getNumberFormatter(numberFormat);
       }
       return {
         key,

superset-frontend/plugins/plugin-chart-table/src/types.ts

@@ -31,6 +31,7 @@ import {
   QueryFormData,
   SetDataMaskHook,
   ContextMenuFilters,
+  CurrencyFormatter,
 } from '@superset-ui/core';
 import { ColorFormatters, ColumnConfig } from '@superset-ui/chart-controls';
 
@@ -42,7 +43,11 @@ export interface DataColumnMeta {
   // `label` is verbose column name used for rendering
   label: string;
   dataType: GenericDataType;
-  formatter?: TimeFormatter | NumberFormatter | CustomFormatter;
+  formatter?:
+    | TimeFormatter
+    | NumberFormatter
+    | CustomFormatter
+    | CurrencyFormatter;
   isMetric?: boolean;
   isPercentMetric?: boolean;
   isNumeric?: boolean;

superset-frontend/plugins/plugin-chart-table/src/utils/formatValue.ts

@@ -47,7 +47,6 @@ function formatValue(
     return [false, 'N/A'];
   }
   if (formatter) {
-    // in case percent metric can specify percent format in the future
     return [false, formatter(value as number)];
   }
   if (typeof value === 'string') {

superset-frontend/plugins/plugin-chart-table/src/utils/isEqualColumns.ts

@@ -27,6 +27,7 @@ export default function isEqualColumns(
   const b = propsB[0];
   return (
     a.datasource.columnFormats === b.datasource.columnFormats &&
+    a.datasource.currencyFormats === b.datasource.currencyFormats &&
     a.datasource.verboseMap === b.datasource.verboseMap &&
     a.formData.tableTimestampFormat === b.formData.tableTimestampFormat &&
     a.formData.timeGrainSqla === b.formData.timeGrainSqla &&