feat: Dynamic currency (#36416)

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -892,7 +892,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         columnKey: key,
         accessor: ((datum: D) => datum[key]) as never,
         Cell: ({ value, row }: { value: DataRecordValue; row: Row<D> }) => {
-          const [isHtml, text] = formatColumnValue(column, value);
+          const [isHtml, text] = formatColumnValue(column, value, row.original);
           const html = isHtml && allowRenderHtml ? { __html: text } : undefined;
 
           let backgroundColor;

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

@@ -29,6 +29,7 @@ import {
   getNumberFormatter,
   getTimeFormatter,
   getTimeFormatterForGranularity,
+  normalizeCurrency,
   NumberFormats,
   QueryMode,
   SMART_DATE_ID,
@@ -200,7 +201,12 @@ const processColumns = memoizeOne(function processColumns(
   props: TableChartProps,
 ) {
   const {
-    datasource: { columnFormats, currencyFormats, verboseMap },
+    datasource: {
+      columnFormats,
+      currencyFormats,
+      verboseMap,
+      currencyCodeColumn,
+    },
     rawFormData: {
       table_timestamp_format: tableTimestampFormat,
       metrics: metrics_,
@@ -210,7 +216,12 @@ const processColumns = memoizeOne(function processColumns(
     queriesData,
   } = props;
   const granularity = extractTimegrain(props.rawFormData);
-  const { data: records, colnames, coltypes } = queriesData[0] || {};
+  const {
+    data: records,
+    colnames,
+    coltypes,
+    detected_currency: detectedCurrency,
+  } = queriesData[0] || {};
   // convert `metrics` and `percentMetrics` to the key names in `data.records`
   const metrics = (metrics_ ?? []).map(getMetricLabel);
   const rawPercentMetrics = (percentMetrics_ ?? []).map(getMetricLabel);
@@ -276,10 +287,25 @@ const processColumns = memoizeOne(function processColumns(
         // percent metrics have a default format
         formatter = getNumberFormatter(numberFormat || PERCENT_3_POINT);
       } else if (isMetric || (isNumber && (numberFormat || currency))) {
-        formatter = currency?.symbol
+        // Resolve AUTO currency when currency column isn't in query results
+        let resolvedCurrency = currency;
+        if (
+          currency?.symbol === 'AUTO' &&
+          detectedCurrency &&
+          (!currencyCodeColumn || !colnames?.includes(currencyCodeColumn))
+        ) {
+          const normalizedCurrency = normalizeCurrency(detectedCurrency);
+          if (normalizedCurrency) {
+            resolvedCurrency = {
+              ...currency,
+              symbol: normalizedCurrency,
+            };
+          }
+        }
+        formatter = resolvedCurrency?.symbol
           ? new CurrencyFormatter({
               d3Format: numberFormat,
-              currency,
+              currency: resolvedCurrency,
             })
           : getNumberFormatter(numberFormat);
       }
@@ -292,6 +318,7 @@ const processColumns = memoizeOne(function processColumns(
         isPercentMetric,
         formatter,
         config,
+        currencyCodeColumn,
       };
     });
   return [metrics, percentMetrics, columns] as [

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

@@ -72,6 +72,7 @@ export interface DataColumnMeta {
   isNumeric?: boolean;
   config?: TableColumnConfig;
   isChildColumn?: boolean;
+  currencyCodeColumn?: string;
 }
 
 export interface TableChartData {

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

@@ -33,6 +33,8 @@ import DateWithFormatter from './DateWithFormatter';
 function formatValue(
   formatter: DataColumnMeta['formatter'],
   value: DataRecordValue,
+  rowData?: Record<string, DataRecordValue>,
+  currencyColumn?: string,
 ): [boolean, string] {
   // render undefined as empty string
   if (value === undefined) {
@@ -48,6 +50,10 @@ function formatValue(
     return [false, 'N/A'];
   }
   if (formatter) {
+    // If formatter is a CurrencyFormatter, pass row context for AUTO mode
+    if (formatter instanceof CurrencyFormatter) {
+      return [false, formatter(value as number, rowData, currencyColumn)];
+    }
     return [false, formatter(value as number)];
   }
   if (typeof value === 'string') {
@@ -59,8 +65,9 @@ function formatValue(
 export function formatColumnValue(
   column: DataColumnMeta,
   value: DataRecordValue,
+  rowData?: Record<string, DataRecordValue>,
 ) {
-  const { dataType, formatter, config = {} } = column;
+  const { dataType, formatter, config = {}, currencyCodeColumn } = column;
   const isNumber = dataType === GenericDataType.Numeric;
   const smallNumberFormatter =
     config.d3SmallNumberFormat === undefined
@@ -76,5 +83,7 @@ export function formatColumnValue(
       ? smallNumberFormatter
       : formatter,
     value,
+    rowData,
+    currencyCodeColumn,
   );
 }

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

@@ -28,6 +28,7 @@ export default function isEqualColumns(
   return (
     a.datasource.columnFormats === b.datasource.columnFormats &&
     a.datasource.currencyFormats === b.datasource.currencyFormats &&
+    a.datasource.currencyCodeColumn === b.datasource.currencyCodeColumn &&
     a.datasource.verboseMap === b.datasource.verboseMap &&
     a.formData.tableTimestampFormat === b.formData.tableTimestampFormat &&
     a.formData.timeGrainSqla === b.formData.timeGrainSqla &&
@@ -36,6 +37,8 @@ export default function isEqualColumns(
     isEqualArray(a.formData.metrics, b.formData.metrics) &&
     isEqualArray(a.queriesData?.[0]?.colnames, b.queriesData?.[0]?.colnames) &&
     isEqualArray(a.queriesData?.[0]?.coltypes, b.queriesData?.[0]?.coltypes) &&
+    a.queriesData?.[0]?.detected_currency ===
+      b.queriesData?.[0]?.detected_currency &&
     JSON.stringify(a.formData.extraFilters || null) ===
       JSON.stringify(b.formData.extraFilters || null) &&
     JSON.stringify(a.formData.extraFormData || null) ===

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

@@ -0,0 +1,155 @@
+/**
+ * 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 { CurrencyFormatter, getNumberFormatter } from '@superset-ui/core';
+import { GenericDataType } from '@apache-superset/core/api/core';
+import { formatColumnValue } from '../../src/utils/formatValue';
+import { DataColumnMeta } from '../../src/types';
+
+test('formatColumnValue with CurrencyFormatter AUTO mode uses row context', () => {
+  const formatter = new CurrencyFormatter({
+    d3Format: ',.2f',
+    currency: { symbol: 'AUTO', symbolPosition: 'prefix' },
+  });
+
+  const column: DataColumnMeta = {
+    key: 'revenue',
+    label: 'Revenue',
+    dataType: GenericDataType.Numeric,
+    formatter,
+    isNumeric: true,
+    currencyCodeColumn: 'currency_code',
+  };
+
+  const rowData = { revenue: 1000, currency_code: 'EUR' };
+  const [isHtml, result] = formatColumnValue(column, 1000, rowData);
+
+  expect(isHtml).toBe(false);
+  expect(result).toContain('€');
+  expect(result).toContain('1,000.00');
+});
+
+test('formatColumnValue with CurrencyFormatter AUTO mode returns neutral format without row context', () => {
+  const formatter = new CurrencyFormatter({
+    d3Format: ',.2f',
+    currency: { symbol: 'AUTO', symbolPosition: 'prefix' },
+  });
+
+  const column: DataColumnMeta = {
+    key: 'revenue',
+    label: 'Revenue',
+    dataType: GenericDataType.Numeric,
+    formatter,
+    isNumeric: true,
+    currencyCodeColumn: 'currency_code',
+  };
+
+  // No row data provided
+  const [isHtml, result] = formatColumnValue(column, 1000);
+
+  expect(isHtml).toBe(false);
+  expect(result).toBe('1,000.00');
+  expect(result).not.toContain('$');
+  expect(result).not.toContain('€');
+});
+
+test('formatColumnValue with static CurrencyFormatter ignores row context', () => {
+  const formatter = new CurrencyFormatter({
+    d3Format: ',.2f',
+    currency: { symbol: 'USD', symbolPosition: 'prefix' },
+  });
+
+  const column: DataColumnMeta = {
+    key: 'revenue',
+    label: 'Revenue',
+    dataType: GenericDataType.Numeric,
+    formatter,
+    isNumeric: true,
+  };
+
+  // Row has EUR but static mode should show $
+  const rowData = { revenue: 1000, currency_code: 'EUR' };
+  const [isHtml, result] = formatColumnValue(column, 1000, rowData);
+
+  expect(isHtml).toBe(false);
+  expect(result).toContain('$');
+  expect(result).not.toContain('€');
+});
+
+test('formatColumnValue with AUTO mode normalizes currency codes', () => {
+  const formatter = new CurrencyFormatter({
+    d3Format: ',.2f',
+    currency: { symbol: 'AUTO', symbolPosition: 'prefix' },
+  });
+
+  const column: DataColumnMeta = {
+    key: 'revenue',
+    label: 'Revenue',
+    dataType: GenericDataType.Numeric,
+    formatter,
+    isNumeric: true,
+    currencyCodeColumn: 'currency_code',
+  };
+
+  // Test lowercase currency code
+  const rowData1 = { revenue: 500, currency_code: 'usd' };
+  const [, result1] = formatColumnValue(column, 500, rowData1);
+  expect(result1).toContain('$');
+
+  // Test uppercase currency code (GBP -> £)
+  const rowData2 = { revenue: 750, currency_code: 'GBP' };
+  const [, result2] = formatColumnValue(column, 750, rowData2);
+  expect(result2).toContain('£');
+});
+
+test('formatColumnValue handles null values', () => {
+  const column: DataColumnMeta = {
+    key: 'revenue',
+    label: 'Revenue',
+    dataType: GenericDataType.Numeric,
+    formatter: getNumberFormatter(',.2f'),
+    isNumeric: true,
+  };
+
+  const [, nullResult] = formatColumnValue(column, null);
+  expect(nullResult).toBe('N/A');
+});
+
+test('formatColumnValue with small number format and currency', () => {
+  const formatter = new CurrencyFormatter({
+    d3Format: ',.2f',
+    currency: { symbol: 'EUR', symbolPosition: 'prefix' },
+  });
+
+  const column: DataColumnMeta = {
+    key: 'revenue',
+    label: 'Revenue',
+    dataType: GenericDataType.Numeric,
+    formatter,
+    isNumeric: true,
+    config: {
+      d3SmallNumberFormat: ',.4f',
+      currencyFormat: { symbol: 'EUR', symbolPosition: 'prefix' },
+    },
+  };
+
+  // Small number should use small number format
+  const [, result] = formatColumnValue(column, 0.5);
+  expect(result).toContain('€');
+  expect(result).toContain('0.5000');
+});