feat: Add currencies controls in control panels (#24718)

superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx

@@ -140,6 +140,7 @@ export default function PivotTableChart(props: PivotTableProps) {
     colTotals,
     rowTotals,
     valueFormat,
+    currencyFormat,
     emitCrossFilters,
     setDataMask,
     selectedFilters,
@@ -155,8 +156,14 @@ export default function PivotTableChart(props: PivotTableProps) {
 
   const theme = useTheme();
   const defaultFormatter = useMemo(
-    () => getNumberFormatter(valueFormat),
-    [valueFormat],
+    () =>
+      currencyFormat?.symbol
+        ? new CurrencyFormatter({
+            currency: currencyFormat,
+            d3Format: valueFormat,
+          })
+        : getNumberFormatter(valueFormat),
+    [valueFormat, currencyFormat],
   );
   const customFormatsArray = useMemo(
     () =>
@@ -168,9 +175,9 @@ export default function PivotTableChart(props: PivotTableProps) {
       ).map(metricName => [
         metricName,
         columnFormats[metricName] || valueFormat,
-        currencyFormats[metricName],
+        currencyFormats[metricName] || currencyFormat,
       ]),
-    [columnFormats, currencyFormats, valueFormat],
+    [columnFormats, currencyFormat, currencyFormats, valueFormat],
   );
   const hasCustomMetricFormatters = customFormatsArray.length > 0;
   const metricFormatters = useMemo(

superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/controlPanel.tsx

@@ -272,6 +272,7 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        ['currency_format'],
         [
           {
             name: 'date_format',

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

@@ -102,6 +102,7 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
     metricsLayout,
     conditionalFormatting,
     timeGrainSqla,
+    currencyFormat,
   } = formData;
   const { selectedFilters } = filterState;
   const granularity = extractTimegrain(rawFormData);
@@ -157,6 +158,7 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
     colTotals,
     rowTotals,
     valueFormat,
+    currencyFormat,
     emitCrossFilters,
     setDataMask,
     selectedFilters,

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

@@ -65,6 +65,7 @@ interface PivotTableCustomizeProps {
   colTotals: boolean;
   rowTotals: boolean;
   valueFormat: string;
+  currencyFormat: Currency;
   setDataMask: SetDataMaskHook;
   emitCrossFilters?: boolean;
   selectedFilters?: SelectedFiltersType;

superset-frontend/plugins/plugin-chart-pivot-table/test/plugin/buildQuery.test.ts

@@ -52,6 +52,7 @@ const formData: PivotTableQueryFormData = {
   margin: 0,
   time_grain_sqla: TimeGranularity.MONTH,
   temporal_columns_lookup: { col1: true },
+  currencyFormat: { symbol: 'USD', symbolPosition: 'prefix' },
 };
 
 test('should build groupby with series in form data', () => {

superset-frontend/plugins/plugin-chart-pivot-table/test/plugin/transformProps.test.ts

@@ -45,6 +45,7 @@ describe('PivotTableChart transformProps', () => {
     dateFormat: '',
     legacy_order_by: 'count',
     order_desc: true,
+    currencyFormat: { symbol: 'USD', symbolPosition: 'prefix' },
   };
   const chartProps = new ChartProps<QueryFormData>({
     formData,
@@ -91,6 +92,7 @@ describe('PivotTableChart transformProps', () => {
       emitCrossFilters: false,
       columnFormats: {},
       currencyFormats: {},
+      currencyFormat: { symbol: 'USD', symbolPosition: 'prefix' },
     });
   });
 });