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

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

@@ -18,12 +18,14 @@
  */
 import {
   GenericDataType,
+  NumberFormats,
   QueryFormColumn,
   getColumnLabel,
   getMetricLabel,
   getSequentialSchemeRegistry,
   getTimeFormatter,
   getValueFormatter,
+  tooltipHtml,
 } from '@superset-ui/core';
 import memoizeOne from 'memoize-one';
 import { maxBy, minBy } from 'lodash';
@@ -34,6 +36,9 @@ import { getDefaultTooltip } from '../utils/tooltip';
 import { Refs } from '../types';
 import { parseAxisBound } from '../utils/controls';
 import { NULL_STRING } from '../constants';
+import { getPercentFormatter } from '../utils/formatters';
+
+const DEFAULT_ECHARTS_BOUNDS = [0, 200];
 
 // Calculated totals per x and y categories plus total
 const calculateTotals = memoizeOne(
@@ -75,7 +80,7 @@ export default function transformProps(
     linearColorScheme,
     leftMargin,
     legendType = 'continuous',
-    metric,
+    metric = '',
     normalizeAcross,
     normalized,
     showLegend,
@@ -109,6 +114,7 @@ export default function transformProps(
 
   const xAxisFormatter = getAxisFormatter(coltypes[0]);
   const yAxisFormatter = getAxisFormatter(coltypes[1]);
+  const percentFormatter = getPercentFormatter(NumberFormats.PERCENT_2_POINT);
   const valueFormatter = getValueFormatter(
     metric,
     currencyFormats,
@@ -119,10 +125,14 @@ export default function transformProps(
 
   let [min, max] = (valueBounds || []).map(parseAxisBound);
   if (min === undefined) {
-    min = minBy(data, row => row[colorColumn])?.[colorColumn] as number;
+    min =
+      (minBy(data, row => row[colorColumn])?.[colorColumn] as number) ||
+      DEFAULT_ECHARTS_BOUNDS[0];
   }
   if (max === undefined) {
-    max = maxBy(data, row => row[colorColumn])?.[colorColumn] as number;
+    max =
+      (maxBy(data, row => row[colorColumn])?.[colorColumn] as number) ||
+      DEFAULT_ECHARTS_BOUNDS[1];
   }
 
   const series: HeatmapSeriesOption[] = [
@@ -175,29 +185,22 @@ export default function transformProps(
         let suffix = 'heatmap';
         if (typeof value === 'number') {
           if (normalizeAcross === 'x') {
-            percentage = (value / totals.x[x]) * 100;
+            percentage = value / totals.x[x];
             suffix = formattedX;
           } else if (normalizeAcross === 'y') {
-            percentage = (value / totals.y[y]) * 100;
+            percentage = value / totals.y[y];
             suffix = formattedY;
           } else {
-            percentage = (value / totals.total) * 100;
+            percentage = value / totals.total;
             suffix = 'heatmap';
           }
         }
-        return `
-          <div>
-            <div>${colnames[0]}: <b>${formattedX}</b></div>
-            <div>${colnames[1]}: <b>${formattedY}</b></div>
-            <div>${colnames[2]}: <b>${formattedValue}</b></div>
-            ${
-              showPercentage
-                ? `<div>% (${suffix}): <b>${valueFormatter(
-                    percentage,
-                  )}%</b></div>`
-                : ''
-            }
-          </div>`;
+        const title = `${formattedX} (${formattedY})`;
+        const row = [colnames[2], formattedValue];
+        if (showPercentage) {
+          row.push(`${percentFormatter(percentage)} (${suffix})`);
+        }
+        return tooltipHtml([row], title);
       },
     },
     visualMap: {