fix: Tooltip no longer highlights hovered data series (#24756)

apache · Jul 21, 2023 · ac19f58 · ac19f58
1 parent 341b8d4
commit ac19f58
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 6 deletions.
diff --git a/...rset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx b/...rset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx
@@ -45,6 +45,7 @@ export default function EchartsMixedTimeseries({
   emitCrossFilters,
   seriesBreakdown,
   onContextMenu,
+  onFocusedSeries,
   xValueFormatter,
   xAxis,
   refs,
@@ -123,6 +124,12 @@ export default function EchartsMixedTimeseries({
       const { seriesName, seriesIndex } = props;
       handleChange(seriesName, seriesIndex);
     },
+    mouseout: () => {
+      onFocusedSeries(null);
+    },
+    mouseover: params => {
+      onFocusedSeries(params.seriesName);
+    },
     contextmenu: async eventParams => {
       if (onContextMenu) {
         eventParams.event.stop();

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
@@ -121,6 +121,9 @@ export default function transformProps(
     inContextMenu,
     emitCrossFilters,
   } = chartProps;
+
+  let focusedSeries: string | null = null;
+
   const {
     verboseMap = {},
     currencyFormats = {},
@@ -576,7 +579,9 @@ export default function transformProps(
               ? tooltipFormatter
               : tooltipFormatterSecondary,
           });
-          rows.push(`<span style="opacity: 0.7">${content}</span>`);
+          const contentStyle =
+            key === focusedSeries ? 'font-weight: 700' : 'opacity: 0.7';
+          rows.push(`<span style="${contentStyle}">${content}</span>`);
         });
         return rows.join('<br />');
       },
@@ -627,6 +632,10 @@ export default function transformProps(
       : [],
   };
 
+  const onFocusedSeries = (seriesName: string | null) => {
+    focusedSeries = seriesName;
+  };
+
   return {
     formData,
     width,
@@ -641,6 +650,7 @@ export default function transformProps(
     seriesBreakdown: rawSeriesA.length,
     selectedValues: filterState.selectedValues || [],
     onContextMenu,
+    onFocusedSeries,
     xValueFormatter: tooltipFormatter,
     xAxis: {
       label: xAxisLabel,

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts
@@ -150,4 +150,5 @@ export type EchartsMixedTimeseriesChartTransformedProps =
         label: string;
         type: AxisType;
       };
+      onFocusedSeries: (series: string | null) => void;
     };
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
@@ -50,6 +50,7 @@ export default function EchartsTimeseries({
   legendData = [],
   onContextMenu,
   onLegendStateChanged,
+  onFocusedSeries,
   xValueFormatter,
   xAxis,
   refs,
@@ -146,6 +147,12 @@ export default function EchartsTimeseries({
         handleChange(name);
       }, TIMER_DURATION);
     },
+    mouseout: () => {
+      onFocusedSeries(null);
+    },
+    mouseover: params => {
+      onFocusedSeries(params.seriesName);
+    },
     legendselectchanged: payload => {
       onLegendStateChanged?.(payload.selected);
     },

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
@@ -112,6 +112,9 @@ export default function transformProps(
     inContextMenu,
     emitCrossFilters,
   } = chartProps;
+
+  let focusedSeries: string | null = null;
+
   const {
     verboseMap = {},
     columnFormats = {},
@@ -524,11 +527,9 @@ export default function transformProps(
               : getCustomFormatter(customFormatters, metrics, formatterKey) ??
                 defaultFormatter,
           });
-          if (!legendState || legendState[key]) {
-            rows.push(`<span style="font-weight: 700">${content}</span>`);
-          } else {
-            rows.push(`<span style="opacity: 0.7">${content}</span>`);
-          }
+          const contentStyle =
+            key === focusedSeries ? 'font-weight: 700' : 'opacity: 0.7';
+          rows.push(`<span style="${contentStyle}">${content}</span>`);
         });
         if (stack) {
           rows.reverse();
@@ -575,6 +576,10 @@ export default function transformProps(
       : [],
   };
 
+  const onFocusedSeries = (seriesName: string | null) => {
+    focusedSeries = seriesName;
+  };
+
   return {
     echartOptions,
     emitCrossFilters,
@@ -589,6 +594,7 @@ export default function transformProps(
     legendData,
     onContextMenu,
     onLegendStateChanged,
+    onFocusedSeries,
     xValueFormatter: tooltipFormatter,
     xAxis: {
       label: xAxisLabel,

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts
@@ -107,4 +107,5 @@ export type TimeseriesChartTransformedProps =
         label: string;
         type: AxisType;
       };
+      onFocusedSeries: (series: string | null) => void;
     };