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

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

@@ -24,6 +24,7 @@ import {
   getNumberFormatter,
   getValueFormatter,
   NumberFormats,
+  tooltipHtml,
   ValueFormatter,
 } from '@superset-ui/core';
 import { CallbackDataParams } from 'echarts/types/src/util/types';
@@ -50,19 +51,17 @@ import { Refs } from '../types';
 
 const percentFormatter = getNumberFormatter(NumberFormats.PERCENT_2_POINT);
 
-export function formatFunnelLabel({
+export function parseParams({
   params,
-  labelType,
   numberFormatter,
   percentCalculationType = PercentCalcType.FirstStep,
   sanitizeName = false,
 }: {
   params: Pick<CallbackDataParams, 'name' | 'value' | 'percent' | 'data'>;
-  labelType: EchartsFunnelLabelTypeType;
   numberFormatter: ValueFormatter;
   percentCalculationType?: PercentCalcType;
   sanitizeName?: boolean;
-}): string {
+}) {
   const { name: rawName = '', value, percent: totalPercent, data } = params;
   const name = sanitizeName ? sanitizeHtml(rawName) : rawName;
   const formattedValue = numberFormatter(value as number);
@@ -80,25 +79,7 @@ export function formatFunnelLabel({
     percent = firstStepPercent ?? 0;
   }
   const formattedPercent = percentFormatter(percent);
-
-  switch (labelType) {
-    case EchartsFunnelLabelTypeType.Key:
-      return name;
-    case EchartsFunnelLabelTypeType.Value:
-      return formattedValue;
-    case EchartsFunnelLabelTypeType.Percent:
-      return formattedPercent;
-    case EchartsFunnelLabelTypeType.KeyValue:
-      return `${name}: ${formattedValue}`;
-    case EchartsFunnelLabelTypeType.KeyValuePercent:
-      return `${name}: ${formattedValue} (${formattedPercent})`;
-    case EchartsFunnelLabelTypeType.KeyPercent:
-      return `${name}: ${formattedPercent}`;
-    case EchartsFunnelLabelTypeType.ValuePercent:
-      return `${formattedValue} (${formattedPercent})`;
-    default:
-      return name;
-  }
+  return [name, formattedValue, formattedPercent];
 }
 
 export default function transformProps(
@@ -216,13 +197,31 @@ export default function transformProps(
     {},
   );
 
-  const formatter = (params: CallbackDataParams) =>
-    formatFunnelLabel({
+  const formatter = (params: CallbackDataParams) => {
+    const [name, formattedValue, formattedPercent] = parseParams({
       params,
       numberFormatter,
-      labelType,
       percentCalculationType,
     });
+    switch (labelType) {
+      case EchartsFunnelLabelTypeType.Key:
+        return name;
+      case EchartsFunnelLabelTypeType.Value:
+        return formattedValue;
+      case EchartsFunnelLabelTypeType.Percent:
+        return formattedPercent;
+      case EchartsFunnelLabelTypeType.KeyValue:
+        return `${name}: ${formattedValue}`;
+      case EchartsFunnelLabelTypeType.KeyValuePercent:
+        return `${name}: ${formattedValue} (${formattedPercent})`;
+      case EchartsFunnelLabelTypeType.KeyPercent:
+        return `${name}: ${formattedPercent}`;
+      case EchartsFunnelLabelTypeType.ValuePercent:
+        return `${formattedValue} (${formattedPercent})`;
+      default:
+        return name;
+    }
+  };
 
   const defaultLabel = {
     formatter,
@@ -266,13 +265,26 @@ export default function transformProps(
       ...getDefaultTooltip(refs),
       show: !inContextMenu && showTooltipLabels,
       trigger: 'item',
-      formatter: (params: any) =>
-        formatFunnelLabel({
+      formatter: (params: any) => {
+        const [name, formattedValue, formattedPercent] = parseParams({
           params,
           numberFormatter,
-          labelType: tooltipLabelType,
           percentCalculationType,
-        }),
+        });
+        const row = [];
+        const enumName = EchartsFunnelLabelTypeType[tooltipLabelType];
+        const title = enumName.includes('Key') ? name : undefined;
+        if (enumName.includes('Value') || enumName.includes('Percent')) {
+          row.push(metricLabel);
+        }
+        if (enumName.includes('Value')) {
+          row.push(formattedValue);
+        }
+        if (enumName.includes('Percent')) {
+          row.push(formattedPercent);
+        }
+        return tooltipHtml([row], title);
+      },
     },
     legend: {
       ...getLegendProps(legendType, legendOrientation, showLegend, theme),