feat(echarts-pie): add string template support for labels (#28774)

superset-frontend/plugins/plugin-chart-echarts/test/Pie/transformProps.test.ts

@@ -22,6 +22,8 @@ import {
   SqlaFormData,
   supersetTheme,
 } from '@superset-ui/core';
+import { LabelFormatterCallback, PieSeriesOption } from 'echarts';
+import { CallbackDataParams } from 'echarts/types/src/util/types';
 import transformProps, { parseParams } from '../../src/Pie/transformProps';
 import { EchartsPieChartProps } from '../../src/Pie/types';
 
@@ -101,3 +103,112 @@ describe('formatPieLabel', () => {
     ).toEqual(['<NULL>', '1.23k', '12.34%']);
   });
 });
+
+describe('Pie label string template', () => {
+  const params: CallbackDataParams = {
+    componentType: '',
+    componentSubType: '',
+    componentIndex: 0,
+    seriesType: 'pie',
+    seriesIndex: 0,
+    seriesId: 'seriesId',
+    seriesName: 'test',
+    name: 'Tablet',
+    dataIndex: 0,
+    data: {},
+    value: 123456,
+    percent: 55.5,
+    $vars: [],
+  };
+
+  const getChartProps = (form: Partial<SqlaFormData>): EchartsPieChartProps => {
+    const formData: SqlaFormData = {
+      colorScheme: 'bnbColors',
+      datasource: '3__table',
+      granularity_sqla: 'ds',
+      metric: 'sum__num',
+      groupby: ['foo', 'bar'],
+      viz_type: 'my_viz',
+      ...form,
+    };
+
+    return new ChartProps({
+      formData,
+      width: 800,
+      height: 600,
+      queriesData: [
+        {
+          data: [
+            { foo: 'Sylvester', bar: 1, sum__num: 10 },
+            { foo: 'Arnold', bar: 2, sum__num: 2.5 },
+          ],
+        },
+      ],
+      theme: supersetTheme,
+    }) as EchartsPieChartProps;
+  };
+
+  const format = (form: Partial<SqlaFormData>) => {
+    const props = transformProps(getChartProps(form));
+    expect(props).toEqual(
+      expect.objectContaining({
+        width: 800,
+        height: 600,
+        echartOptions: expect.objectContaining({
+          series: [
+            expect.objectContaining({
+              avoidLabelOverlap: true,
+              data: expect.arrayContaining([
+                expect.objectContaining({
+                  name: 'Arnold, 2',
+                  value: 2.5,
+                }),
+                expect.objectContaining({
+                  name: 'Sylvester, 1',
+                  value: 10,
+                }),
+              ]),
+              label: expect.objectContaining({
+                formatter: expect.any(Function),
+              }),
+            }),
+          ],
+        }),
+      }),
+    );
+
+    const formatter = (props.echartOptions.series as PieSeriesOption[])[0]!
+      .label?.formatter;
+
+    return (formatter as LabelFormatterCallback)(params);
+  };
+
+  it('should generate a valid pie chart label with template', () => {
+    expect(
+      format({
+        label_type: 'template',
+        label_template: '{name}:{value}\n{percent}',
+      }),
+    ).toEqual('Tablet:123k\n55.50%');
+  });
+
+  it('should be formatted using the number formatter', () => {
+    expect(
+      format({
+        label_type: 'template',
+        label_template: '{name}:{value}\n{percent}',
+        number_format: ',d',
+      }),
+    ).toEqual('Tablet:123,456\n55.50%');
+  });
+
+  it('should be compatible with ECharts raw variable syntax', () => {
+    expect(
+      format({
+        label_type: 'template',
+        label_template: '{b}:{c}\n{d}',
+        number_format: ',d',
+      }),
+    ).toEqual('Tablet:123456\n55.5');
+  });
+});