feat(waterfall): add changes label series and grouping customize settings (#34847)

2026-04-18 23:55:00 +00:00 · 2025-09-17 14:24:45 +03:00
parent dced2f8564
commit 3e554674ff
5 changed files with 175 additions and 35 deletions
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/controlPanel.tsx
@@ -58,41 +58,109 @@ const config: ControlPanelConfig = {
            },
          },
        ],
+      ],
+    },
+    {
+      label: t('Series settings'),
+      expanded: true,
+      controlSetRows: [
        [
          <ControlSubSectionHeader>
-            {t('Series colors')}
+            {t('Series increase setting')}
          </ControlSubSectionHeader>,
        ],
        [
          {
            name: 'increase_color',
            config: {
-              label: t('Increase'),
+              label: t('Increase color'),
              type: 'ColorPickerControl',
              default: { r: 90, g: 193, b: 137, a: 1 },
              renderTrigger: true,
+              description: t(
+                'Select the color used for values that indicate an increase in the chart',
+              ),
            },
          },
          {
-            name: 'decrease_color',
+            name: 'increase_label',
            config: {
-              label: t('Decrease'),
-              type: 'ColorPickerControl',
-              default: { r: 224, g: 67, b: 85, a: 1 },
-              renderTrigger: true,
-            },
-          },
-          {
-            name: 'total_color',
-            config: {
-              label: t('Total'),
-              type: 'ColorPickerControl',
-              default: { r: 102, g: 102, b: 102, a: 1 },
+              label: t('Increase label'),
+              type: 'TextControl',
              renderTrigger: true,
+              description: t(
+                'Customize the label displayed for increasing values in the chart tooltips and legend.',
+              ),
            },
          },
        ],
-        [<ControlSubSectionHeader>{t('X Axis')}</ControlSubSectionHeader>],
+        [
+          <ControlSubSectionHeader>
+            {t('Series decrease setting')}
+          </ControlSubSectionHeader>,
+        ],
+        [
+          {
+            name: 'decrease_color',
+            config: {
+              label: t('Decrease color'),
+              type: 'ColorPickerControl',
+              default: { r: 224, g: 67, b: 85, a: 1 },
+              renderTrigger: true,
+              description: t(
+                'Select the color used for values that indicate a decrease in the chart.',
+              ),
+            },
+          },
+          {
+            name: 'decrease_label',
+            config: {
+              label: t('Decrease label'),
+              type: 'TextControl',
+              renderTrigger: true,
+              description: t(
+                'Customize the label displayed for decreasing values in the chart tooltips and legend.',
+              ),
+            },
+          },
+        ],
+        [
+          <ControlSubSectionHeader>
+            {t('Series total setting')}
+          </ControlSubSectionHeader>,
+        ],
+        [
+          {
+            name: 'total_color',
+            config: {
+              label: t('Total color'),
+              type: 'ColorPickerControl',
+              default: { r: 102, g: 102, b: 102, a: 1 },
+              renderTrigger: true,
+              description: t(
+                'Select the color used for values that represent total bars in the chart',
+              ),
+            },
+          },
+
+          {
+            name: 'total_label',
+            config: {
+              label: t('Total label'),
+              type: 'TextControl',
+              renderTrigger: true,
+              description: t(
+                'Customize the label displayed for total values in the chart tooltips, legend, and chart axis.',
+              ),
+            },
+          },
+        ],
+      ],
+    },
+    {
+      label: t('X Axis'),
+      expanded: true,
+      controlSetRows: [
        [
          {
            name: 'x_axis_label',
@@ -134,7 +202,12 @@ const config: ControlPanelConfig = {
            },
          },
        ],
-        [<ControlSubSectionHeader>{t('Y Axis')}</ControlSubSectionHeader>],
+      ],
+    },
+    {
+      label: t('Y Axis'),
+      expanded: true,
+      controlSetRows: [
        [
          {
            name: 'y_axis_label',
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
@@ -51,11 +51,13 @@ function formatTooltip({
  breakdownName,
  defaultFormatter,
  xAxisFormatter,
+  totalMark,
 }: {
  params: ICallbackDataParams[];
  breakdownName?: string;
  defaultFormatter: NumberFormatter | CurrencyFormatter;
  xAxisFormatter: (value: number | string, index: number) => string;
+  totalMark: string;
 }) {
  const series = params.find(
    param => param.seriesName !== ASSIST_MARK && param.data.value !== TOKEN,
@@ -66,7 +68,7 @@ function formatTooltip({
    return '';
  }

-  const isTotal = series?.seriesName === LEGEND.TOTAL;
+  const isTotal = series?.seriesName === totalMark;
  if (!series) {
    return NULL_STRING;
  }
@@ -82,7 +84,7 @@ function formatTooltip({
      defaultFormatter(series.data.originalValue),
    ]);
  }
-  rows.push([TOTAL_MARK, defaultFormatter(series.data.totalSum)]);
+  rows.push([totalMark, defaultFormatter(series.data.totalSum)]);
  return tooltipHtml(rows, title);
 }

@@ -91,11 +93,13 @@ function transformer({
  xAxis,
  metric,
  breakdown,
+  totalMark,
 }: {
  data: DataRecord[];
  xAxis: string;
  metric: string;
  breakdown?: string;
+  totalMark: string;
 }) {
  // Group by series (temporary map)
  const groupedData = data.reduce((acc, cur) => {
@@ -119,7 +123,7 @@ function transformer({
      // Push total per period to the end of period values array
      tempValue.push({
        [xAxis]: key,
-        [breakdown]: TOTAL_MARK,
+        [breakdown]: totalMark,
        [metric]: sum,
      });
      transformedData.push(...tempValue);
@@ -138,7 +142,7 @@ function transformer({
      total += sum;
    });
    transformedData.push({
-      [xAxis]: TOTAL_MARK,
+      [xAxis]: totalMark,
      [metric]: total,
    });
  }
@@ -179,11 +183,21 @@ export default function transformProps(
    xAxisLabel,
    yAxisFormat,
    showValue,
+    totalLabel,
+    increaseLabel,
+    decreaseLabel,
  } = formData;
  const defaultFormatter = currencyFormat?.symbol
    ? new CurrencyFormatter({ d3Format: yAxisFormat, currency: currencyFormat })
    : getNumberFormatter(yAxisFormat);

+  const totalMark = totalLabel || TOTAL_MARK;
+  const legendNames = {
+    INCREASE: increaseLabel || LEGEND.INCREASE,
+    DECREASE: decreaseLabel || LEGEND.DECREASE,
+    TOTAL: totalLabel || LEGEND.TOTAL,
+  };
+
  const seriesformatter = (params: ICallbackDataParams) => {
    const { data } = params;
    const { originalValue } = data;
@@ -205,6 +219,7 @@ export default function transformProps(
    breakdown: breakdownName,
    xAxis: xAxisName,
    metric: metricLabel,
+    totalMark,
  });

  const assistData: ISeriesData[] = [];
@@ -217,18 +232,18 @@ export default function transformProps(
  transformedData.forEach((datum, index, self) => {
    const totalSum = self.slice(0, index + 1).reduce((prev, cur, i) => {
      if (breakdownName) {
-        if (cur[breakdownName] !== TOTAL_MARK || i === 0) {
+        if (cur[breakdownName] !== totalMark || i === 0) {
          return prev + ((cur[metricLabel] as number) ?? 0);
        }
-      } else if (cur[xAxisName] !== TOTAL_MARK) {
+      } else if (cur[xAxisName] !== totalMark) {
        return prev + ((cur[metricLabel] as number) ?? 0);
      }
      return prev;
    }, 0);

    const isTotal =
-      (breakdownName && datum[breakdownName] === TOTAL_MARK) ||
-      datum[xAxisName] === TOTAL_MARK;
+      (breakdownName && datum[breakdownName] === totalMark) ||
+      datum[xAxisName] === totalMark;

    const originalValue = datum[metricLabel] as number;
    let value = originalValue;
@@ -270,9 +285,9 @@ export default function transformProps(
      : 'transparent';

    let opacity = 1;
-    if (legendState?.[LEGEND.INCREASE] === false && value > 0) {
+    if (legendState?.[legendNames.INCREASE] === false && value > 0) {
      opacity = 0;
-    } else if (legendState?.[LEGEND.DECREASE] === false && value < 0) {
+    } else if (legendState?.[legendNames.DECREASE] === false && value < 0) {
      opacity = 0;
    }

@@ -301,7 +316,7 @@ export default function transformProps(
  const xAxisData = transformedData.map(row => {
    let column = xAxisName;
    let value = row[xAxisName];
-    if (breakdownName && row[breakdownName] !== TOTAL_MARK) {
+    if (breakdownName && row[breakdownName] !== totalMark) {
      column = breakdownName;
      value = row[breakdownName];
    }
@@ -316,8 +331,8 @@ export default function transformProps(
  });

  const xAxisFormatter = (value: number | string, index: number) => {
-    if (value === TOTAL_MARK) {
-      return TOTAL_MARK;
+    if (value === totalMark) {
+      return totalMark;
    }
    if (coltypeMapping[xAxisColumns[index]] === GenericDataType.Temporal) {
      if (typeof value === 'string') {
@@ -370,7 +385,7 @@ export default function transformProps(
    },
    {
      ...seriesProps,
-      name: LEGEND.INCREASE,
+      name: legendNames.INCREASE,
      label: {
        ...labelProps,
        position: 'top',
@@ -382,7 +397,7 @@ export default function transformProps(
    },
    {
      ...seriesProps,
-      name: LEGEND.DECREASE,
+      name: legendNames.DECREASE,
      label: {
        ...labelProps,
        position: 'bottom',
@@ -394,7 +409,7 @@ export default function transformProps(
    },
    {
      ...seriesProps,
-      name: LEGEND.TOTAL,
+      name: legendNames.TOTAL,
      label: {
        ...labelProps,
        position: 'top',
@@ -417,7 +432,7 @@ export default function transformProps(
    legend: {
      show: showLegend,
      selected: legendState,
-      data: [LEGEND.INCREASE, LEGEND.DECREASE, LEGEND.TOTAL],
+      data: [legendNames.INCREASE, legendNames.DECREASE, legendNames.TOTAL],
    },
    xAxis: {
      data: xAxisData,
@@ -450,6 +465,7 @@ export default function transformProps(
          breakdownName,
          defaultFormatter,
          xAxisFormatter,
+          totalMark,
        }),
    },
    series: barSeries,
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/types.ts
@@ -57,6 +57,9 @@ export type EchartsWaterfallFormData = QueryFormData &
    xTicksLayout?: WaterfallFormXTicksLayout;
    yAxisLabel: string;
    yAxisFormat: string;
+    increaseLabel?: string;
+    decreaseLabel?: string;
+    totalLabel?: string;
  };

 export const DEFAULT_FORM_DATA: Partial<EchartsWaterfallFormData> = {