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;
};