feat: add Nightingale chart support for echarts pie chart (#28597)

superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Pie/Pie.stories.tsx

@@ -23,7 +23,7 @@ import {
   EchartsPieChartPlugin,
   PieTransformProps,
 } from '@superset-ui/plugin-chart-echarts';
-import { weekday, population } from './data';
+import { weekday, population, sales } from './data';
 import { withResizableChartDemo } from '../../../../shared/components/ResizableChartDemo';
 
 new EchartsPieChartPlugin().configure({ key: 'echarts-pie' }).register();
@@ -193,3 +193,91 @@ PopulationPie.argTypes = {
     },
   },
 };
+
+export const SalesPie = (
+  {
+    donut,
+    innerRadius,
+    outerRadius,
+    labelsOutside,
+    labelLine,
+    showLabels,
+    showLegend,
+    labelType,
+    roseType,
+  }: {
+    donut: boolean;
+    innerRadius: number;
+    outerRadius: number;
+    labelsOutside: boolean;
+    labelLine: boolean;
+    showLabels: boolean;
+    showLegend: boolean;
+    labelType: string;
+    roseType: string;
+  },
+  { width, height }: { width: number; height: number },
+) => (
+  <SuperChart
+    chartType="echarts-pie"
+    width={width}
+    height={height}
+    queriesData={[{ data: sales }]}
+    formData={{
+      colorScheme: 'supersetColors',
+      groupby: ['Product'],
+      metric: 'SUM(AMOUNT)',
+      numberFormat: 'SMART_NUMBER',
+      roseType,
+      donut,
+      innerRadius,
+      outerRadius,
+      labelsOutside,
+      labelLine,
+      showLabels,
+      showLegend,
+      labelType,
+    }}
+  />
+);
+
+SalesPie.args = {
+  roseType: 'area',
+  donut: false,
+  innerRadius: 30,
+  outerRadius: 70,
+  labelsOutside: false,
+  labelLine: true,
+  showLabels: true,
+  showLegend: false,
+  labelType: 'key',
+};
+
+SalesPie.argTypes = {
+  roseType: {
+    control: {
+      type: 'select',
+      options: ['area', 'radius'],
+    },
+  },
+  donut: { control: 'boolean' },
+  innerRadius: { control: 'number' },
+  outerRadius: { control: 'number' },
+  labelsOutside: { control: 'boolean' },
+  labelLine: { control: 'boolean' },
+  showLabels: { control: 'boolean' },
+  showLegend: { control: 'boolean' },
+  labelType: {
+    control: {
+      type: 'select',
+      options: [
+        'key',
+        'value',
+        'percent',
+        'key_value',
+        'key_percent',
+        'key_value_percent',
+      ],
+    },
+  },
+};

superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Pie/data.ts

@@ -240,3 +240,14 @@ export const population = [
   { Country: 'Sint Maarten (Dutch part)', Population: 597781 },
   { Country: 'Tuvalu', Population: 466709 },
 ];
+
+export const sales = [
+  { Product: 'Laptop', 'SUM(AMOUNT)': 30 },
+  { Product: 'Workstation', 'SUM(AMOUNT)': 28 },
+  { Product: 'Phone', 'SUM(AMOUNT)': 26 },
+  { Product: 'Tablet', 'SUM(AMOUNT)': 24 },
+  { Product: 'PDA', 'SUM(AMOUNT)': 22 },
+  { Product: 'Ink Pad', 'SUM(AMOUNT)': 20 },
+  { Product: 'Accessories', 'SUM(AMOUNT)': 18 },
+  { Product: 'Pad', 'SUM(AMOUNT)': 16 },
+];

superset-frontend/plugins/plugin-chart-echarts/src/Pie/controlPanel.tsx

@@ -40,6 +40,7 @@ const {
   outerRadius,
   numberFormat,
   showLabels,
+  roseType,
 } = DEFAULT_FORM_DATA;
 
 const config: ControlPanelConfig = {
@@ -87,6 +88,23 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'roseType',
+            config: {
+              type: 'SelectControl',
+              label: t('Rose Type'),
+              default: roseType,
+              renderTrigger: true,
+              choices: [
+                ['area', t('Area')],
+                ['radius', t('Radius')],
+                [null, t('None')],
+              ],
+              description: t('Whether to show as Nightingale chart.'),
+            },
+          },
+        ],
         ...legendSection,
         // eslint-disable-next-line react/jsx-key
         [<ControlSubSectionHeader>{t('Labels')}</ControlSubSectionHeader>],

superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts

@@ -74,6 +74,7 @@ export default class EchartsPieChartPlugin extends EchartsChartPlugin<
           t('Popular'),
           t('Proportional'),
           t('ECharts'),
+          t('Nightingale'),
         ],
         thumbnail,
       },

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

@@ -156,6 +156,7 @@ export default function transformProps(
     showLabelsThreshold,
     sliceId,
     showTotal,
+    roseType,
   }: EchartsPieFormData = {
     ...DEFAULT_LEGEND_FORM_DATA,
     ...DEFAULT_PIE_FORM_DATA,
@@ -283,6 +284,7 @@ export default function transformProps(
       type: 'pie',
       ...chartPadding,
       animation: false,
+      roseType: roseType || undefined,
       radius: [`${donut ? innerRadius : 0}%`, `${outerRadius}%`],
       center: ['50%', '50%'],
       avoidLabelOverlap: true,

superset-frontend/plugins/plugin-chart-echarts/src/Pie/types.ts

@@ -45,6 +45,7 @@ export type EchartsPieFormData = QueryFormData &
     numberFormat: string;
     dateFormat: string;
     showLabelsThreshold: number;
+    roseType: 'radius' | 'area' | null;
   };
 
 export enum EchartsPieLabelType {
@@ -78,6 +79,7 @@ export const DEFAULT_FORM_DATA: EchartsPieFormData = {
   labelsOutside: true,
   showLabelsThreshold: 5,
   dateFormat: 'smart_date',
+  roseType: null,
 };
 
 export type PieChartTransformedProps =