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

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

@@ -26,6 +26,7 @@ import {
   t,
   ValueFormatter,
   getValueFormatter,
+  tooltipHtml,
 } from '@superset-ui/core';
 import { CallbackDataParams } from 'echarts/types/src/util/types';
 import { EChartsCoreOption, PieSeriesOption } from 'echarts';
@@ -51,40 +52,20 @@ import { Refs } from '../types';
 
 const percentFormatter = getNumberFormatter(NumberFormats.PERCENT_2_POINT);
 
-export function formatPieLabel({
+export function parseParams({
   params,
-  labelType,
   numberFormatter,
   sanitizeName = false,
 }: {
   params: Pick<CallbackDataParams, 'name' | 'value' | 'percent'>;
-  labelType: EchartsPieLabelType;
   numberFormatter: ValueFormatter;
   sanitizeName?: boolean;
-}): string {
+}): string[] {
   const { name: rawName = '', value, percent } = params;
   const name = sanitizeName ? sanitizeHtml(rawName) : rawName;
   const formattedValue = numberFormatter(value as number);
   const formattedPercent = percentFormatter((percent as number) / 100);
-
-  switch (labelType) {
-    case EchartsPieLabelType.Key:
-      return name;
-    case EchartsPieLabelType.Value:
-      return formattedValue;
-    case EchartsPieLabelType.Percent:
-      return formattedPercent;
-    case EchartsPieLabelType.KeyValue:
-      return `${name}: ${formattedValue}`;
-    case EchartsPieLabelType.KeyValuePercent:
-      return `${name}: ${formattedValue} (${formattedPercent})`;
-    case EchartsPieLabelType.KeyPercent:
-      return `${name}: ${formattedPercent}`;
-    case EchartsPieLabelType.ValuePercent:
-      return `${formattedValue} (${formattedPercent})`;
-    default:
-      return name;
-  }
+  return [name, formattedValue, formattedPercent];
 }
 
 function getTotalValuePadding({
@@ -260,12 +241,30 @@ export default function transformProps(
     {},
   );
 
-  const formatter = (params: CallbackDataParams) =>
-    formatPieLabel({
+  const formatter = (params: CallbackDataParams) => {
+    const [name, formattedValue, formattedPercent] = parseParams({
       params,
       numberFormatter,
-      labelType,
     });
+    switch (labelType) {
+      case EchartsPieLabelType.Key:
+        return name;
+      case EchartsPieLabelType.Value:
+        return formattedValue;
+      case EchartsPieLabelType.Percent:
+        return formattedPercent;
+      case EchartsPieLabelType.KeyValue:
+        return `${name}: ${formattedValue}`;
+      case EchartsPieLabelType.KeyValuePercent:
+        return `${name}: ${formattedValue} (${formattedPercent})`;
+      case EchartsPieLabelType.KeyPercent:
+        return `${name}: ${formattedPercent}`;
+      case EchartsPieLabelType.ValuePercent:
+        return `${formattedValue} (${formattedPercent})`;
+      default:
+        return name;
+    }
+  };
 
   const defaultLabel = {
     formatter,
@@ -319,13 +318,17 @@ export default function transformProps(
       ...getDefaultTooltip(refs),
       show: !inContextMenu,
       trigger: 'item',
-      formatter: (params: any) =>
-        formatPieLabel({
+      formatter: (params: any) => {
+        const [name, formattedValue, formattedPercent] = parseParams({
           params,
           numberFormatter,
-          labelType: EchartsPieLabelType.KeyValuePercent,
           sanitizeName: true,
-        }),
+        });
+        return tooltipHtml(
+          [[metricLabel, formattedValue, formattedPercent]],
+          name,
+        );
+      },
     },
     legend: {
       ...getLegendProps(legendType, legendOrientation, showLegend, theme),