feat: Funnel/tooltip-customization (#25666)

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

@@ -32,7 +32,8 @@ import {
 import { DEFAULT_FORM_DATA, EchartsFunnelLabelTypeType } from './types';
 import { legendSection } from '../controls';
 
-const { labelType, numberFormat, showLabels } = DEFAULT_FORM_DATA;
+const { labelType, numberFormat, showLabels, defaultTooltipLabel } =
+  DEFAULT_FORM_DATA;
 
 const funnelLegendSection = [...legendSection];
 funnelLegendSection.splice(2, 1);
@@ -84,7 +85,7 @@ const config: ControlPanelConfig = {
             name: 'label_type',
             config: {
               type: 'SelectControl',
-              label: t('Label Type'),
+              label: t('Label Contents'),
               default: labelType,
               renderTrigger: true,
               choices: [
@@ -101,7 +102,33 @@ const config: ControlPanelConfig = {
                   t('Category, Value and Percentage'),
                 ],
               ],
-              description: t('What should be shown on the label?'),
+              description: t('What should be shown as the label'),
+            },
+          },
+        ],
+        [
+          {
+            name: 'tooltip_label_type',
+            config: {
+              type: 'SelectControl',
+              label: t('Tooltip Contents'),
+              default: defaultTooltipLabel,
+              renderTrigger: true,
+              choices: [
+                [EchartsFunnelLabelTypeType.Key, t('Category Name')],
+                [EchartsFunnelLabelTypeType.Value, t('Value')],
+                [EchartsFunnelLabelTypeType.Percent, t('Percentage')],
+                [EchartsFunnelLabelTypeType.KeyValue, t('Category and Value')],
+                [
+                  EchartsFunnelLabelTypeType.KeyPercent,
+                  t('Category and Percentage'),
+                ],
+                [
+                  EchartsFunnelLabelTypeType.KeyValuePercent,
+                  t('Category, Value and Percentage'),
+                ],
+              ],
+              description: t('What should be shown as the tooltip label'),
             },
           },
         ],
@@ -132,6 +159,18 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'show_tooltip_labels',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show Tooltip Labels'),
+              renderTrigger: true,
+              default: showLabels,
+              description: t('Whether to display the tooltip labels.'),
+            },
+          },
+        ],
       ],
     },
   ],

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

@@ -64,6 +64,7 @@ export function formatFunnelLabel({
   const name = sanitizeName ? sanitizeHtml(rawName) : rawName;
   const formattedValue = numberFormatter(value as number);
   const formattedPercent = percentFormatter((percent as number) / 100);
+
   switch (labelType) {
     case EchartsFunnelLabelTypeType.Key:
       return name;
@@ -93,7 +94,6 @@ export default function transformProps(
     queriesData,
     width,
     theme,
-    inContextMenu,
     emitCrossFilters,
     datasource,
   } = chartProps;
@@ -107,6 +107,7 @@ export default function transformProps(
     gap,
     labelLine,
     labelType,
+    tooltipLabelType,
     legendMargin,
     legendOrientation,
     legendType,
@@ -114,6 +115,8 @@ export default function transformProps(
     numberFormat,
     currencyFormat,
     showLabels,
+    inContextMenu,
+    showTooltipLabels,
     showLegend,
     sliceId,
   }: EchartsFunnelFormData = {
@@ -227,13 +230,13 @@ export default function transformProps(
     },
     tooltip: {
       ...getDefaultTooltip(refs),
-      show: !inContextMenu,
+      show: !inContextMenu && showTooltipLabels,
       trigger: 'item',
       formatter: (params: any) =>
         formatFunnelLabel({
           params,
           numberFormatter,
-          labelType: EchartsFunnelLabelTypeType.KeyValuePercent,
+          labelType: tooltipLabelType,
         }),
     },
     legend: {

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

@@ -34,8 +34,10 @@ export type EchartsFunnelFormData = QueryFormData &
     groupby: QueryFormData[];
     labelLine: boolean;
     labelType: EchartsFunnelLabelTypeType;
+    tooltipLabelType: EchartsFunnelLabelTypeType;
     metric?: string;
     showLabels: boolean;
+    showTooltipLabels: boolean;
     numberFormat: string;
     gap: number;
     sort: 'descending' | 'ascending' | 'none' | undefined;
@@ -62,6 +64,7 @@ export const DEFAULT_FORM_DATA: EchartsFunnelFormData = {
   groupby: [],
   labelLine: false,
   labelType: EchartsFunnelLabelTypeType.Key,
+  defaultTooltipLabel: EchartsFunnelLabelTypeType.KeyValuePercent,
   legendOrientation: LegendOrientation.Top,
   legendType: LegendType.Scroll,
   numberFormat: 'SMART_NUMBER',