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

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

@@ -21,6 +21,7 @@ import {
   getMetricLabel,
   DataRecord,
   DataRecordValue,
+  tooltipHtml,
 } from '@superset-ui/core';
 import { EChartsCoreOption, GraphSeriesOption } from 'echarts';
 import { extent as d3Extent } from 'd3-array';
@@ -138,19 +139,6 @@ function getKeyByValue(
   return Object.keys(object).find(key => object[key] === value) as string;
 }
 
-function edgeFormatter(
-  sourceIndex: string,
-  targetIndex: string,
-  value: number,
-  nodes: { [name: string]: number },
-): string {
-  const source = Number(sourceIndex);
-  const target = Number(targetIndex);
-  return `${sanitizeHtml(getKeyByValue(nodes, source))} > ${sanitizeHtml(
-    getKeyByValue(nodes, target),
-  )} : ${value}`;
-}
-
 function getCategoryName(columnName: string, name?: DataRecordValue) {
   if (name === false) {
     return `${columnName}: false`;
@@ -321,13 +309,16 @@ export default function transformProps(
     tooltip: {
       ...getDefaultTooltip(refs),
       show: !inContextMenu,
-      formatter: (params: any): string =>
-        edgeFormatter(
-          params.data.source,
-          params.data.target,
-          params.value,
-          nodes,
-        ),
+      formatter: (params: any): string => {
+        const source = sanitizeHtml(
+          getKeyByValue(nodes, Number(params.data.source)),
+        );
+        const target = sanitizeHtml(
+          getKeyByValue(nodes, Number(params.data.target)),
+        );
+        const title = `${source} > ${target}`;
+        return tooltipHtml([[metricLabel, `${params.value}`]], title);
+      },
     },
     legend: {
       ...getLegendProps(legendType, legendOrientation, showLegend, theme),