feat(sunburst): Added some options to adjust Sunburst chart view: innerRadius, outerRadius, donut, showNulls

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

@@ -28,8 +28,17 @@ import {
   getStandardizedControls,
 } from '@superset-ui/chart-controls';
 import { DEFAULT_FORM_DATA } from './types';
+import { NULL_STRING } from '../constants';
 
-const { labelType, numberFormat, showLabels } = DEFAULT_FORM_DATA;
+const {
+  labelType,
+  numberFormat,
+  showLabels,
+  outerRadius,
+  innerRadius,
+  donut,
+  showNulls,
+} = DEFAULT_FORM_DATA;
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
@@ -108,6 +117,8 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [<ControlSubSectionHeader>{t('Shape')}</ControlSubSectionHeader>],
+
         [
           {
             name: 'number_format',
@@ -122,6 +133,62 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'outerRadius',
+            config: {
+              type: 'SliderControl',
+              label: t('Outer Radius'),
+              renderTrigger: true,
+              min: 10,
+              max: 100,
+              step: 1,
+              default: outerRadius,
+              description: t('Outer edge of Pie chart'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'donut',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Donut'),
+              default: donut,
+              renderTrigger: true,
+              description: t('Do you want a donut or a pie?'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'innerRadius',
+            config: {
+              type: 'SliderControl',
+              label: t('Inner Radius'),
+              renderTrigger: true,
+              min: 0,
+              max: 100,
+              step: 1,
+              default: innerRadius,
+              description: t('Inner radius of donut hole'),
+              visibility: ({ controls }: ControlPanelsContainerProps) =>
+                Boolean(controls?.donut?.value),
+            },
+          },
+        ],
+        [
+          {
+            name: 'showNulls',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show %s values', NULL_STRING),
+              default: showNulls,
+              renderTrigger: true,
+              description: t('Do you want %s slices visible?', NULL_STRING),
+            },
+          },
+        ],
         ['currency_format'],
         [
           {

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

@@ -187,6 +187,10 @@ export default function transformProps(
     showLabelsThreshold,
     showTotal,
     sliceId,
+    innerRadius,
+    outerRadius,
+    donut,
+    showNulls,
   } = formData;
   const { currencyFormats = {}, columnFormats = {} } = datasource;
   const refs: Refs = {};
@@ -276,48 +280,50 @@ export default function transformProps(
     path: string[],
     pathRecords?: DataRecordValue[],
   ) =>
-    treeNodes.map(treeNode => {
-      const { name: nodeName, value, secondaryValue, groupBy } = treeNode;
-      const records = [...(pathRecords || []), nodeName];
-      let name = formatSeriesName(nodeName, {
-        numberFormatter,
-        timeFormatter: getTimeFormatter(dateFormat),
-        ...(coltypeMapping[groupBy] && {
-          coltype: coltypeMapping[groupBy],
-        }),
-      });
-      const newPath = path.concat(name);
-      let item: NodeItemOption = {
-        records,
-        name,
-        value,
-        secondaryValue,
-        itemStyle: {
-          color: colorByCategory
-            ? categoricalColorScale(name, sliceId)
-            : linearColorScale(secondaryValue / value),
-        },
-      };
-      if (treeNode.children?.length) {
-        item.children = traverse(treeNode.children, newPath, records);
-      } else {
-        name = newPath.join(',');
-      }
-      columnsLabelMap.set(name, newPath);
-      if (filterState.selectedValues?.[0]?.includes(name) === false) {
-        item = {
-          ...item,
+    treeNodes
+      .map(treeNode => {
+        const { name: nodeName, value, secondaryValue, groupBy } = treeNode;
+        const records = [...(pathRecords || []), nodeName];
+        let name = formatSeriesName(nodeName, {
+          numberFormatter,
+          timeFormatter: getTimeFormatter(dateFormat),
+          ...(coltypeMapping[groupBy] && {
+            coltype: coltypeMapping[groupBy],
+          }),
+        });
+        const newPath = path.concat(name);
+        let item: NodeItemOption = {
+          records,
+          name,
+          value,
+          secondaryValue,
           itemStyle: {
-            ...item.itemStyle,
-            opacity: OpacityEnum.SemiTransparent,
-          },
-          label: {
-            color: `rgba(0, 0, 0, ${OpacityEnum.SemiTransparent})`,
+            color: colorByCategory
+              ? categoricalColorScale(name, sliceId)
+              : linearColorScale(secondaryValue / value),
           },
         };
-      }
-      return item;
-    });
+        if (treeNode.children?.length) {
+          item.children = traverse(treeNode.children, newPath, records);
+        } else {
+          name = newPath.join(',');
+        }
+        columnsLabelMap.set(name, newPath);
+        if (filterState.selectedValues?.[0]?.includes(name) === false) {
+          item = {
+            ...item,
+            itemStyle: {
+              ...item.itemStyle,
+              opacity: OpacityEnum.SemiTransparent,
+            },
+            label: {
+              color: `rgba(0, 0, 0, ${OpacityEnum.SemiTransparent})`,
+            },
+          };
+        }
+        return item;
+      })
+      .filter(x => showNulls || x.name !== NULL_STRING);
 
   const echartOptions: EChartsCoreOption = {
     grid: {
@@ -357,14 +363,14 @@ export default function transformProps(
           minAngle: minShowLabelAngle,
           overflow: 'breakAll',
         },
-        radius: [radius * 0.3, radius],
+        radius: [`${donut ? innerRadius : 0}%`, `${outerRadius}%`],
         data: traverse(treeData, []),
       },
     ],
     graphic: showTotal
       ? {
           type: 'text',
-          top: 'center',
+          top: donut ? 'center' : 'top',
           left: 'center',
           style: {
             text: t('Total: %s', primaryValueFormatter(totalValue)),

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

@@ -52,6 +52,10 @@ export const DEFAULT_FORM_DATA: Partial<EchartsSunburstFormData> = {
   labelType: EchartsSunburstLabelType.Key,
   showLabels: false,
   dateFormat: 'smart_date',
+  innerRadius: 30,
+  outerRadius: 70,
+  donut: true,
+  showNulls: true,
 };
 
 export interface EchartsSunburstChartProps