iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Michael S. Molina 2023-07-21 08:57:39 -03:00 committed by GitHub
parent 341b8d41c5
commit ac19f58cf6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 38 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx
View File

@ -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();

12
superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
View File

@ -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,

1
superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/types.ts
View File

@ -150,4 +150,5 @@ export type EchartsMixedTimeseriesChartTransformedProps =
label: string;
type: AxisType;
};
onFocusedSeries: (series: string | null) => void;
};

7
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
View File

@ -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);
},

16
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
View File

@ -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,

1
superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts
View File

@ -107,4 +107,5 @@ export type TimeseriesChartTransformedProps =
label: string;
type: AxisType;
};
onFocusedSeries: (series: string | null) => void;
};