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

2026-04-19 08:04:53 +00:00 · 2023-08-02 19:22:45 +02:00
parent 1a9c559a8f
commit f7e76d02b7
63 changed files with 697 additions and 306 deletions
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts
@@ -62,6 +62,7 @@ export default {
        [headerFontSize],
        [subheaderFontSize],
        ['y_axis_format'],
+        ['currency_format'],
        [
          {
            name: 'time_format',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts
@@ -53,6 +53,7 @@ export default function transformProps(
    timeFormat,
    yAxisFormat,
    conditionalFormatting,
+    currencyFormat,
  } = formData;
  const refs: Refs = {};
  const { data = [], coltypes = [] } = queriesData[0];
@@ -80,6 +81,7 @@ export default function transformProps(
    currencyFormats,
    columnFormats,
    yAxisFormat,
+    currencyFormat,
  );

  const headerFormatter =
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/controlPanel.tsx
@@ -136,6 +136,7 @@ const config: ControlPanelConfig = {
        [headerFontSize],
        [subheaderFontSize],
        ['y_axis_format'],
+        ['currency_format'],
        [
          {
            name: 'time_format',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
@@ -91,6 +91,7 @@ export default function transformProps(
    subheaderFontSize,
    forceTimestampFormatting,
    yAxisFormat,
+    currencyFormat,
    timeRangeFixed,
  } = formData;
  const granularity = extractTimegrain(rawFormData);
@@ -180,6 +181,7 @@ export default function transformProps(
    currencyFormats,
    columnFormats,
    yAxisFormat,
+    currencyFormat,
  );

  const headerFormatter =
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
@@ -119,6 +119,7 @@ const config: ControlPanelConfig = {
            },
          },
        ],
+        ['currency_format'],
        [
          {
            name: 'show_labels',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
@@ -112,6 +112,7 @@ export default function transformProps(
    legendType,
    metric = '',
    numberFormat,
+    currencyFormat,
    showLabels,
    showLegend,
    sliceId,
@@ -147,6 +148,7 @@ export default function transformProps(
    currencyFormats,
    columnFormats,
    numberFormat,
+    currencyFormat,
  );

  const transformedData: FunnelSeriesOption[] = data.map(datum => {
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/controlPanel.tsx
@@ -154,6 +154,7 @@ const config: ControlPanelConfig = {
            },
          },
        ],
+        ['currency_format'],
        [
          {
            name: 'value_formatter',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts
@@ -118,6 +118,7 @@ export default function transformProps(
    colorScheme,
    fontSize,
    numberFormat,
+    currencyFormat,
    animation,
    showProgress,
    overlap,
@@ -141,6 +142,7 @@ export default function transformProps(
    currencyFormats,
    columnFormats,
    numberFormat,
+    currencyFormat,
  );
  const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
  const axisLineWidth = calculateAxisLineWidth(data, fontSize, overlap);
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/controlPanel.tsx
@@ -389,6 +389,7 @@ const config: ControlPanelConfig = {
            },
          },
        ],
+        ['currency_format'],
        [
          {
            name: 'logAxis',
@@ -427,6 +428,15 @@ const config: ControlPanelConfig = {
            },
          },
        ],
+        [
+          {
+            name: 'currency_format_secondary',
+            config: {
+              ...sharedControls.currency_format,
+              label: t('Secondary currency format'),
+            },
+          },
+        ],
        [
          {
            name: 'yAxisTitleSecondary',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
@@ -36,9 +36,9 @@ import {
  ensureIsArray,
  buildCustomFormatters,
  ValueFormatter,
-  NumberFormatter,
  QueryFormMetric,
  getCustomFormatter,
+  CurrencyFormatter,
 } from '@superset-ui/core';
 import { getOriginalSeries } from '@superset-ui/chart-controls';
 import { EChartsCoreOption, SeriesOption } from 'echarts';
@@ -92,7 +92,7 @@ import { getYAxisFormatter } from '../utils/getYAxisFormatter';

 const getFormatter = (
  customFormatters: Record<string, ValueFormatter>,
-  defaultFormatter: NumberFormatter,
+  defaultFormatter: ValueFormatter,
  metrics: QueryFormMetric[],
  formatterKey: string,
  forcePercentFormat: boolean,
@@ -167,7 +167,9 @@ export default function transformProps(
    truncateYAxis,
    tooltipTimeFormat,
    yAxisFormat,
+    currencyFormat,
    yAxisFormatSecondary,
+    currencyFormatSecondary,
    xAxisTimeFormat,
    yAxisBounds,
    yAxisBoundsSecondary,
@@ -221,21 +223,32 @@ export default function transformProps(
  const xAxisDataType = dataTypes?.[xAxisLabel] ?? dataTypes?.[xAxisOrig];
  const xAxisType = getAxisType(xAxisDataType);
  const series: SeriesOption[] = [];
-  const formatter = getNumberFormatter(contributionMode ? ',.0%' : yAxisFormat);
-  const formatterSecondary = getNumberFormatter(
-    contributionMode ? ',.0%' : yAxisFormatSecondary,
-  );
+  const formatter = contributionMode
+    ? getNumberFormatter(',.0%')
+    : currencyFormat?.symbol
+    ? new CurrencyFormatter({ d3Format: yAxisFormat, currency: currencyFormat })
+    : getNumberFormatter(yAxisFormat);
+  const formatterSecondary = contributionMode
+    ? getNumberFormatter(',.0%')
+    : currencyFormatSecondary?.symbol
+    ? new CurrencyFormatter({
+        d3Format: yAxisFormatSecondary,
+        currency: currencyFormatSecondary,
+      })
+    : getNumberFormatter(yAxisFormatSecondary);
  const customFormatters = buildCustomFormatters(
    [...ensureIsArray(metrics), ...ensureIsArray(metricsB)],
    currencyFormats,
    columnFormats,
    yAxisFormat,
+    currencyFormat,
  );
  const customFormattersSecondary = buildCustomFormatters(
    [...ensureIsArray(metrics), ...ensureIsArray(metricsB)],
    currencyFormats,
    columnFormats,
    yAxisFormatSecondary,
+    currencyFormatSecondary,
  );

  const primarySeries = new Set<string>();
@@ -498,7 +511,7 @@ export default function transformProps(
            metrics,
            !!contributionMode,
            customFormatters,
-            yAxisFormat,
+            formatter,
          ),
        },
        scale: truncateYAxis,
@@ -520,7 +533,7 @@ export default function transformProps(
            metricsB,
            !!contributionMode,
            customFormattersSecondary,
-            yAxisFormatSecondary,
+            formatterSecondary,
          ),
        },
        scale: truncateYAxis,
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx
@@ -127,6 +127,7 @@ const config: ControlPanelConfig = {
            },
          },
        ],
+        ['currency_format'],
        [
          {
            name: 'date_format',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts
@@ -165,6 +165,7 @@ export default function transformProps(
    legendType,
    metric = '',
    numberFormat,
+    currencyFormat,
    dateFormat,
    outerRadius,
    showLabels,
@@ -211,6 +212,7 @@ export default function transformProps(
    currencyFormats,
    columnFormats,
    numberFormat,
+    currencyFormat,
  );

  let totalValue = 0;
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/controlPanel.tsx
@@ -136,6 +136,7 @@ const config: ControlPanelConfig = {
            },
          },
        ],
+        ['currency_format'],
        [
          {
            name: 'date_format',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts
@@ -195,6 +195,7 @@ export default function transformProps(
    linearColorScheme,
    labelType,
    numberFormat,
+    currencyFormat,
    dateFormat,
    showLabels,
    showLabelsThreshold,
@@ -208,6 +209,7 @@ export default function transformProps(
    currencyFormats,
    columnFormats,
    numberFormat,
+    currencyFormat,
  );
  const secondaryValueFormatter = secondaryMetric
    ? getValueFormatter(
@@ -215,6 +217,7 @@ export default function transformProps(
        currencyFormats,
        columnFormats,
        numberFormat,
+        currencyFormat,
      )
    : undefined;

--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/controlPanel.tsx
@@ -215,6 +215,7 @@ const config: ControlPanelConfig = {
        // eslint-disable-next-line react/jsx-key
        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
        ['y_axis_format'],
+        ['currency_format'],
        [
          {
            name: 'logAxis',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
@@ -194,6 +194,7 @@ function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
        },
      },
    ],
+    ['currency_format'],
    [
      {
        name: 'logAxis',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/controlPanel.tsx
@@ -203,6 +203,7 @@ const config: ControlPanelConfig = {
        // eslint-disable-next-line react/jsx-key
        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
        ['y_axis_format'],
+        ['currency_format'],
        [
          {
            name: 'logAxis',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/controlPanel.tsx
@@ -147,6 +147,7 @@ const config: ControlPanelConfig = {
        // eslint-disable-next-line react/jsx-key
        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
        ['y_axis_format'],
+        ['currency_format'],
        [
          {
            name: 'logAxis',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/controlPanel.tsx
@@ -147,6 +147,7 @@ const config: ControlPanelConfig = {
        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],

        ['y_axis_format'],
+        ['currency_format'],
        [
          {
            name: 'logAxis',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/controlPanel.tsx
@@ -197,6 +197,7 @@ const config: ControlPanelConfig = {
        // eslint-disable-next-line react/jsx-key
        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
        ['y_axis_format'],
+        ['currency_format'],
        [
          {
            name: 'logAxis',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
@@ -37,6 +37,7 @@ import {
  TimeseriesChartDataResponseResult,
  buildCustomFormatters,
  getCustomFormatter,
+  CurrencyFormatter,
 } from '@superset-ui/core';
 import {
  extractExtraMetrics,
@@ -168,6 +169,7 @@ export default function transformProps(
    xAxisTitleMargin,
    yAxisBounds,
    yAxisFormat,
+    currencyFormat,
    yAxisTitle,
    yAxisTitleMargin,
    yAxisTitlePosition,
@@ -245,12 +247,15 @@ export default function transformProps(

  const forcePercentFormatter = Boolean(contributionMode || isAreaExpand);
  const percentFormatter = getNumberFormatter(',.0%');
-  const defaultFormatter = getNumberFormatter(yAxisFormat);
+  const defaultFormatter = currencyFormat?.symbol
+    ? new CurrencyFormatter({ d3Format: yAxisFormat, currency: currencyFormat })
+    : getNumberFormatter(yAxisFormat);
  const customFormatters = buildCustomFormatters(
    metrics,
    currencyFormats,
    columnFormats,
    yAxisFormat,
+    currencyFormat,
  );

  const array = ensureIsArray(chartProps.rawFormData?.time_compare);
@@ -468,7 +473,7 @@ export default function transformProps(
        metrics,
        forcePercentFormatter,
        customFormatters,
-        yAxisFormat,
+        defaultFormatter,
      ),
    },
    scale: truncateYAxis,
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/controlPanel.tsx
@@ -119,6 +119,7 @@ const config: ControlPanelConfig = {
            },
          },
        ],
+        ['currency_format'],
        [
          {
            name: 'date_format',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts
@@ -133,6 +133,7 @@ export default function transformProps(
    labelType,
    labelPosition,
    numberFormat,
+    currencyFormat,
    dateFormat,
    showLabels,
    showUpperLabels,
@@ -149,6 +150,7 @@ export default function transformProps(
    currencyFormats,
    columnFormats,
    numberFormat,
+    currencyFormat,
  );

  const formatter = (params: TreemapSeriesCallbackDataParams) =>
--- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/getYAxisFormatter.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/getYAxisFormatter.ts
@@ -22,7 +22,6 @@ import {
  ensureIsArray,
  getNumberFormatter,
  isSavedMetric,
-  NumberFormats,
  QueryFormMetric,
  ValueFormatter,
 } from '@superset-ui/core';
@@ -31,7 +30,7 @@ export const getYAxisFormatter = (
  metrics: QueryFormMetric[],
  forcePercentFormatter: boolean,
  customFormatters: Record<string, ValueFormatter>,
-  yAxisFormat: string = NumberFormats.SMART_NUMBER,
+  defaultFormatter: ValueFormatter,
 ) => {
  if (forcePercentFormatter) {
    return getNumberFormatter(',.0%');
@@ -50,5 +49,5 @@ export const getYAxisFormatter = (
  ) {
    return customFormatters[metricsArray[0]];
  }
-  return getNumberFormatter(yAxisFormat);
+  return defaultFormatter ?? getNumberFormatter();
 };