Format Waterfall's tooltip

apache · Apr 19, 2024 · ae46232 · ae46232
1 parent 513705a
commit ae46232
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 37 deletions.
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts
@@ -78,7 +78,7 @@ export default function transformProps(
     linearColorScheme,
     leftMargin,
     legendType = 'continuous',
-    metric,
+    metric = '',
     normalizeAcross,
     normalized,
     showLegend,
@@ -123,10 +123,11 @@ 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) || 0;
   }
   if (max === undefined) {
-    max = maxBy(data, row => row[colorColumn])?.[colorColumn] as number;
+    max =
+      (maxBy(data, row => row[colorColumn])?.[colorColumn] as number) || 200;
   }
 
   const series: HeatmapSeriesOption[] = [

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
@@ -27,7 +27,7 @@ import {
   isAdhocColumn,
   NumberFormatter,
   rgbToHex,
-  SupersetTheme,
+  tooltipHtml,
 } from '@superset-ui/core';
 import { EChartsOption, BarSeriesOption } from 'echarts';
 import {
@@ -44,13 +44,11 @@ import { Refs } from '../types';
 import { NULL_STRING } from '../constants';
 
 function formatTooltip({
-  theme,
   params,
   breakdownName,
   defaultFormatter,
   xAxisFormatter,
 }: {
-  theme: SupersetTheme;
   params: ICallbackDataParams[];
   breakdownName?: string;
   defaultFormatter: NumberFormatter | CurrencyFormatter;
@@ -70,40 +68,19 @@ function formatTooltip({
     return NULL_STRING;
   }
 
-  const createRow = (name: string, value: string) => `
-    <div>
-      <span style="
-        font-size:${theme.typography.sizes.m}px;
-        color:${theme.colors.grayscale.base};
-        font-weight:${theme.typography.weights.normal};
-        margin-left:${theme.gridUnit * 0.5}px;"
-      >
-        ${name}:
-      </span>
-      <span style="
-        float:right;
-        margin-left:${theme.gridUnit * 5}px;
-        font-size:${theme.typography.sizes.m}px;
-        color:${theme.colors.grayscale.base};
-        font-weight:${theme.typography.weights.bold}"
-      >
-        ${value}
-      </span>
-    </div>
-  `;
-
-  let result = '';
-  if (!isTotal || breakdownName) {
-    result = xAxisFormatter(series.name, series.dataIndex);
-  }
+  const title =
+    !isTotal || breakdownName
+      ? xAxisFormatter(series.name, series.dataIndex)
+      : undefined;
+  const rows: string[][] = [];
   if (!isTotal) {
-    result += createRow(
+    rows.push([
       series.seriesName!,
       defaultFormatter(series.data.originalValue),
-    );
+    ]);
   }
-  result += createRow(TOTAL_MARK, defaultFormatter(series.data.totalSum));
-  return result;
+  rows.push([TOTAL_MARK, defaultFormatter(series.data.totalSum)]);
+  return tooltipHtml(rows, ['left', 'right'], title);
 }
 
 function transformer({
@@ -463,7 +440,6 @@ export default function transformProps(
       show: !inContextMenu,
       formatter: (params: any) =>
         formatTooltip({
-          theme,
           params,
           breakdownName,
           defaultFormatter,