From ac19f58cf6998cfd269d5a45de3b8544afd5f47c Mon Sep 17 00:00:00 2001 From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com> Date: Fri, 21 Jul 2023 08:57:39 -0300 Subject: [PATCH] fix: Tooltip no longer highlights hovered data series (#24756) --- .../MixedTimeseries/EchartsMixedTimeseries.tsx | 7 +++++++ .../src/MixedTimeseries/transformProps.ts | 12 +++++++++++- .../src/MixedTimeseries/types.ts | 1 + .../src/Timeseries/EchartsTimeseries.tsx | 7 +++++++ .../src/Timeseries/transformProps.ts | 16 +++++++++++----- .../plugin-chart-echarts/src/Timeseries/types.ts | 1 + 6 files changed, 38 insertions(+), 6 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx index 8c55ff7ae227a..9c871407ff6ec 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx +++ b/superset-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 index 331ddf190c59a..1ce4089357d3a 100644 --- 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(`${content}`); + const contentStyle = + key === focusedSeries ? 'font-weight: 700' : 'opacity: 0.7'; + rows.push(`${content}`); }); return rows.join('
'); }, @@ -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 index 3ec9b2a4b6d38..30969ae367ce9 100644 --- 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 index bd23c3f2573f7..0223382193a27 100644 --- 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 index 63b2b2f6f4b6e..64aafc0237163 100644 --- 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(`${content}`); - } else { - rows.push(`${content}`); - } + const contentStyle = + key === focusedSeries ? 'font-weight: 700' : 'opacity: 0.7'; + rows.push(`${content}`); }); 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 index 54eaab2812233..1873086d99122 100644 --- 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; };