You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by mi...@apache.org on 2023/07/21 11:57:46 UTC
[superset] branch master updated: fix: Tooltip no longer highlights hovered data series (#24756)
This is an automated email from the ASF dual-hosted git repository.
michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new ac19f58cf6 fix: Tooltip no longer highlights hovered data series (#24756)
ac19f58cf6 is described below
commit ac19f58cf6998cfd269d5a45de3b8544afd5f47c
Author: Michael S. Molina <70...@users.noreply.github.com>
AuthorDate: Fri Jul 21 08:57:39 2023 -0300
fix: Tooltip no longer highlights hovered data series (#24756)
---
.../src/MixedTimeseries/EchartsMixedTimeseries.tsx | 7 +++++++
.../src/MixedTimeseries/transformProps.ts | 12 +++++++++++-
.../plugin-chart-echarts/src/MixedTimeseries/types.ts | 1 +
.../src/Timeseries/EchartsTimeseries.tsx | 7 +++++++
.../src/Timeseries/transformProps.ts | 16 +++++++++++-----
.../plugins/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 8c55ff7ae2..9c871407ff 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 331ddf190c..1ce4089357 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(`<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
index 3ec9b2a4b6..30969ae367 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 bd23c3f257..0223382193 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 63b2b2f6f4..64aafc0237 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(`<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
index 54eaab2812..1873086d99 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;
};