feat: Utility function to render chart tooltips (#27950)

2026-04-19 16:14:52 +00:00 · 2024-05-07 13:00:30 -03:00
parent 467e612533
commit b549977f05
23 changed files with 512 additions and 425 deletions
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Bubble/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Bubble/transformProps.test.ts
@@ -160,42 +160,44 @@ describe('Bubble formatTooltip', () => {
      data: [10000, 20000, 3, 'bubble title', 'bubble dimension'],
    };

-    expect(
-      formatTooltip(
-        params,
-        'x-axis-label',
-        'y-axis-label',
-        'size-label',
-        dollerFormatter,
-        dollerFormatter,
-        percentFormatter,
-      ),
-    ).toEqual(
-      `<p>bubble title </br> bubble dimension</p>
-        x-axis-label: $10,000.00 <br/>
-        y-axis-label: $20,000.00 <br/>
-        size-label: 300.0%`,
+    const html = formatTooltip(
+      params,
+      'x-axis-label',
+      'y-axis-label',
+      'size-label',
+      dollerFormatter,
+      dollerFormatter,
+      percentFormatter,
    );
+    expect(html).toContain('bubble title');
+    expect(html).toContain('bubble dimension');
+    expect(html).toContain('x-axis-label');
+    expect(html).toContain('y-axis-label');
+    expect(html).toContain('size-label');
+    expect(html).toContain('$10,000.00');
+    expect(html).toContain('$20,000.00');
+    expect(html).toContain('300.0%');
  });
  it('Should generate correct bubble label content without dimension', () => {
    const params = {
      data: [10000, 25000, 3, 'bubble title', null],
    };
-    expect(
-      formatTooltip(
-        params,
-        'x-axis-label',
-        'y-axis-label',
-        'size-label',
-        dollerFormatter,
-        dollerFormatter,
-        percentFormatter,
-      ),
-    ).toEqual(
-      `<p>bubble title</p>
-        x-axis-label: $10,000.00 <br/>
-        y-axis-label: $25,000.00 <br/>
-        size-label: 300.0%`,
+    const html = formatTooltip(
+      params,
+      'x-axis-label',
+      'y-axis-label',
+      'size-label',
+      dollerFormatter,
+      dollerFormatter,
+      percentFormatter,
    );
+    expect(html).toContain('bubble title');
+    expect(html).not.toContain('bubble dimension');
+    expect(html).toContain('x-axis-label');
+    expect(html).toContain('y-axis-label');
+    expect(html).toContain('size-label');
+    expect(html).toContain('$10,000.00');
+    expect(html).toContain('$25,000.00');
+    expect(html).toContain('300.0%');
  });
 });
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts
@@ -21,12 +21,9 @@ import {
  getNumberFormatter,
  supersetTheme,
 } from '@superset-ui/core';
-import transformProps, {
-  formatFunnelLabel,
-} from '../../src/Funnel/transformProps';
+import transformProps, { parseParams } from '../../src/Funnel/transformProps';
 import {
  EchartsFunnelChartProps,
-  EchartsFunnelLabelTypeType,
  PercentCalcType,
 } from '../../src/Funnel/types';

@@ -89,85 +86,40 @@ describe('formatFunnelLabel', () => {
      data: { firstStepPercent: 0.5, prevStepPercent: 0.85 },
    };
    expect(
-      formatFunnelLabel({
+      parseParams({
        params,
        numberFormatter,
-        labelType: EchartsFunnelLabelTypeType.Key,
        percentCalculationType: PercentCalcType.Total,
      }),
-    ).toEqual('My Label');
+    ).toEqual(['My Label', '1.23k', '12.34%']);
    expect(
-      formatFunnelLabel({
+      parseParams({
        params,
        numberFormatter,
-        labelType: EchartsFunnelLabelTypeType.Value,
-        percentCalculationType: PercentCalcType.Total,
-      }),
-    ).toEqual('1.23k');
-    expect(
-      formatFunnelLabel({
-        params,
-        numberFormatter,
-        labelType: EchartsFunnelLabelTypeType.Percent,
-        percentCalculationType: PercentCalcType.Total,
-      }),
-    ).toEqual('12.34%');
-    expect(
-      formatFunnelLabel({
-        params,
-        numberFormatter,
-        labelType: EchartsFunnelLabelTypeType.Percent,
        percentCalculationType: PercentCalcType.FirstStep,
      }),
-    ).toEqual('50.00%');
+    ).toEqual(['My Label', '1.23k', '50.00%']);
    expect(
-      formatFunnelLabel({
+      parseParams({
        params,
        numberFormatter,
-        labelType: EchartsFunnelLabelTypeType.Percent,
        percentCalculationType: PercentCalcType.PreviousStep,
      }),
-    ).toEqual('85.00%');
+    ).toEqual(['My Label', '1.23k', '85.00%']);
    expect(
-      formatFunnelLabel({
-        params,
-        numberFormatter,
-        labelType: EchartsFunnelLabelTypeType.KeyValue,
-        percentCalculationType: PercentCalcType.Total,
-      }),
-    ).toEqual('My Label: 1.23k');
-    expect(
-      formatFunnelLabel({
-        params,
-        numberFormatter,
-        labelType: EchartsFunnelLabelTypeType.KeyPercent,
-        percentCalculationType: PercentCalcType.Total,
-      }),
-    ).toEqual('My Label: 12.34%');
-    expect(
-      formatFunnelLabel({
-        params,
-        numberFormatter,
-        labelType: EchartsFunnelLabelTypeType.KeyValuePercent,
-        percentCalculationType: PercentCalcType.Total,
-      }),
-    ).toEqual('My Label: 1.23k (12.34%)');
-    expect(
-      formatFunnelLabel({
+      parseParams({
        params: { ...params, name: '<NULL>' },
        numberFormatter,
-        labelType: EchartsFunnelLabelTypeType.Key,
        percentCalculationType: PercentCalcType.Total,
      }),
-    ).toEqual('<NULL>');
+    ).toEqual(['<NULL>', '1.23k', '12.34%']);
    expect(
-      formatFunnelLabel({
+      parseParams({
        params: { ...params, name: '<NULL>' },
        numberFormatter,
-        labelType: EchartsFunnelLabelTypeType.Key,
        percentCalculationType: PercentCalcType.Total,
        sanitizeName: true,
      }),
-    ).toEqual('&lt;NULL&gt;');
+    ).toEqual(['&lt;NULL&gt;', '1.23k', '12.34%']);
  });
 });
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Graph/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Graph/transformProps.test.ts
@@ -81,11 +81,7 @@ describe('EchartsGraph transformProps', () => {
                    label: { fontWeight: 'bolder' },
                  },
                  symbolSize: 50,
-                  tooltip: {
-                    appendToBody: true,
-                    formatter: '{b}: {c}',
-                    position: expect.anything(),
-                  },
+                  tooltip: expect.anything(),
                  value: 6,
                },
                {
@@ -99,11 +95,7 @@ describe('EchartsGraph transformProps', () => {
                    label: { fontWeight: 'bolder' },
                  },
                  symbolSize: 50,
-                  tooltip: {
-                    appendToBody: true,
-                    formatter: '{b}: {c}',
-                    position: expect.anything(),
-                  },
+                  tooltip: expect.anything(),
                  value: 6,
                },
                {
@@ -117,11 +109,7 @@ describe('EchartsGraph transformProps', () => {
                    label: { fontWeight: 'bolder' },
                  },
                  symbolSize: 10,
-                  tooltip: {
-                    appendToBody: true,
-                    formatter: '{b}: {c}',
-                    position: expect.anything(),
-                  },
+                  tooltip: expect.anything(),
                  value: 5,
                },
                {
@@ -135,11 +123,7 @@ describe('EchartsGraph transformProps', () => {
                    label: { fontWeight: 'bolder' },
                  },
                  symbolSize: 10,
-                  tooltip: {
-                    appendToBody: true,
-                    formatter: '{b}: {c}',
-                    position: expect.anything(),
-                  },
+                  tooltip: expect.anything(),
                  value: 5,
                },
              ],
@@ -239,11 +223,7 @@ describe('EchartsGraph transformProps', () => {
                  symbolSize: 10,
                  category: 'category_value_1',
                  select: DEFAULT_GRAPH_SERIES_OPTION.select,
-                  tooltip: {
-                    appendToBody: true,
-                    formatter: '{b}: {c}',
-                    position: expect.anything(),
-                  },
+                  tooltip: expect.anything(),
                  label: { show: true },
                },
                {
@@ -254,11 +234,7 @@ describe('EchartsGraph transformProps', () => {
                  symbolSize: 10,
                  category: 'category_value_2',
                  select: DEFAULT_GRAPH_SERIES_OPTION.select,
-                  tooltip: {
-                    appendToBody: true,
-                    formatter: '{b}: {c}',
-                    position: expect.anything(),
-                  },
+                  tooltip: expect.anything(),
                  label: { show: true },
                },
              ],
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts
@@ -22,8 +22,8 @@ import {
  SqlaFormData,
  supersetTheme,
 } from '@superset-ui/core';
-import transformProps, { formatPieLabel } from '../../src/Pie/transformProps';
-import { EchartsPieChartProps, EchartsPieLabelType } from '../../src/Pie/types';
+import transformProps, { parseParams } from '../../src/Pie/transformProps';
+import { EchartsPieChartProps } from '../../src/Pie/types';

 describe('Pie transformProps', () => {
  const formData: SqlaFormData = {
@@ -81,61 +81,23 @@ describe('formatPieLabel', () => {
    const numberFormatter = getNumberFormatter();
    const params = { name: 'My Label', value: 1234, percent: 12.34 };
    expect(
-      formatPieLabel({
+      parseParams({
        params,
        numberFormatter,
-        labelType: EchartsPieLabelType.Key,
      }),
-    ).toEqual('My Label');
+    ).toEqual(['My Label', '1.23k', '12.34%']);
    expect(
-      formatPieLabel({
-        params,
-        numberFormatter,
-        labelType: EchartsPieLabelType.Value,
-      }),
-    ).toEqual('1.23k');
-    expect(
-      formatPieLabel({
-        params,
-        numberFormatter,
-        labelType: EchartsPieLabelType.Percent,
-      }),
-    ).toEqual('12.34%');
-    expect(
-      formatPieLabel({
-        params,
-        numberFormatter,
-        labelType: EchartsPieLabelType.KeyValue,
-      }),
-    ).toEqual('My Label: 1.23k');
-    expect(
-      formatPieLabel({
-        params,
-        numberFormatter,
-        labelType: EchartsPieLabelType.KeyPercent,
-      }),
-    ).toEqual('My Label: 12.34%');
-    expect(
-      formatPieLabel({
-        params,
-        numberFormatter,
-        labelType: EchartsPieLabelType.KeyValuePercent,
-      }),
-    ).toEqual('My Label: 1.23k (12.34%)');
-    expect(
-      formatPieLabel({
+      parseParams({
        params: { ...params, name: '<NULL>' },
        numberFormatter,
-        labelType: EchartsPieLabelType.Key,
      }),
-    ).toEqual('<NULL>');
+    ).toEqual(['<NULL>', '1.23k', '12.34%']);
    expect(
-      formatPieLabel({
+      parseParams({
        params: { ...params, name: '<NULL>' },
        numberFormatter,
-        labelType: EchartsPieLabelType.Key,
        sanitizeName: true,
      }),
-    ).toEqual('&lt;NULL&gt;');
+    ).toEqual(['&lt;NULL&gt;', '1.23k', '12.34%']);
  });
 });
--- a/superset-frontend/plugins/plugin-chart-echarts/test/utils/forecast.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/utils/forecast.test.ts
@@ -234,7 +234,7 @@ test('formatForecastTooltipSeries should apply format to value', () => {
      observation: 10.1,
      formatter,
    }),
-  ).toEqual('<img>abc: 10');
+  ).toEqual(['<img>abc', '10']);
 });

 test('formatForecastTooltipSeries should show falsy value', () => {
@@ -245,7 +245,7 @@ test('formatForecastTooltipSeries should show falsy value', () => {
      observation: 0,
      formatter,
    }),
-  ).toEqual('<img>abc: 0');
+  ).toEqual(['<img>abc', '0']);
 });

 test('formatForecastTooltipSeries should format full forecast', () => {
@@ -259,7 +259,7 @@ test('formatForecastTooltipSeries should format full forecast', () => {
      forecastUpper: 7.1,
      formatter,
    }),
-  ).toEqual('<img>qwerty: 10, ŷ = 20 (5, 12)');
+  ).toEqual(['<img>qwerty', '10, ŷ = 20 (5, 12)']);
 });

 test('formatForecastTooltipSeries should format forecast without observation', () => {
@@ -272,7 +272,7 @@ test('formatForecastTooltipSeries should format forecast without observation', (
      forecastUpper: 7,
      formatter,
    }),
-  ).toEqual('<img>qwerty: ŷ = 20 (5, 12)');
+  ).toEqual(['<img>qwerty', 'ŷ = 20 (5, 12)']);
 });

 test('formatForecastTooltipSeries should format forecast without point estimate', () => {
@@ -285,7 +285,7 @@ test('formatForecastTooltipSeries should format forecast without point estimate'
      forecastUpper: 7,
      formatter,
    }),
-  ).toEqual('<img>qwerty: 10 (6, 13)');
+  ).toEqual(['<img>qwerty', '10 (6, 13)']);
 });

 test('formatForecastTooltipSeries should format forecast with only confidence band', () => {
@@ -297,5 +297,5 @@ test('formatForecastTooltipSeries should format forecast with only confidence ba
      forecastUpper: 8,
      formatter,
    }),
-  ).toEqual('<img>qwerty: (7, 15)');
+  ).toEqual(['<img>qwerty', '(7, 15)']);
 });