fix(plugin-chart-echarts): sort tooltip correctly (#30819)

This commit is contained in:
Ville Brofeldt
2024-11-01 15:24:51 -07:00
committed by GitHub
parent d466383df2
commit b02d18a39e
4 changed files with 122 additions and 63 deletions

View File

@@ -62,6 +62,7 @@ import {
extractDataTotalValues,
extractSeries,
extractShowValueIndexes,
extractTooltipKeys,
getAxisType,
getColtypesMapping,
getLegendProps,
@@ -584,9 +585,13 @@ export default function transformProps(
: params.value[0];
const forecastValue: any[] = richTooltip ? params : [params];
if (richTooltip && tooltipSortByMetric) {
forecastValue.sort((a, b) => b.data[1] - a.data[1]);
}
const sortedKeys = extractTooltipKeys(
forecastValue,
// horizontal mode is not supported in mixed series chart
1,
richTooltip,
tooltipSortByMetric,
);
const rows: string[][] = [];
const forecastValues =
@@ -594,44 +599,46 @@ export default function transformProps(
const keys = Object.keys(forecastValues);
let focusedRow;
keys.forEach(key => {
const value = forecastValues[key];
// if there are no dimensions, key is a verbose name of a metric,
// otherwise it is a comma separated string where the first part is metric name
let formatterKey;
if (primarySeries.has(key)) {
formatterKey =
groupby.length === 0 ? inverted[key] : labelMap[key]?.[0];
} else {
formatterKey =
groupbyB.length === 0 ? inverted[key] : labelMapB[key]?.[0];
}
const tooltipFormatter = getFormatter(
customFormatters,
formatter,
metrics,
formatterKey,
!!contributionMode,
);
const tooltipFormatterSecondary = getFormatter(
customFormattersSecondary,
formatterSecondary,
metricsB,
formatterKey,
!!contributionMode,
);
const row = formatForecastTooltipSeries({
...value,
seriesName: key,
formatter: primarySeries.has(key)
? tooltipFormatter
: tooltipFormatterSecondary,
sortedKeys
.filter(key => keys.includes(key))
.forEach(key => {
const value = forecastValues[key];
// if there are no dimensions, key is a verbose name of a metric,
// otherwise it is a comma separated string where the first part is metric name
let formatterKey;
if (primarySeries.has(key)) {
formatterKey =
groupby.length === 0 ? inverted[key] : labelMap[key]?.[0];
} else {
formatterKey =
groupbyB.length === 0 ? inverted[key] : labelMapB[key]?.[0];
}
const tooltipFormatter = getFormatter(
customFormatters,
formatter,
metrics,
formatterKey,
!!contributionMode,
);
const tooltipFormatterSecondary = getFormatter(
customFormattersSecondary,
formatterSecondary,
metricsB,
formatterKey,
!!contributionMode,
);
const row = formatForecastTooltipSeries({
...value,
seriesName: key,
formatter: primarySeries.has(key)
? tooltipFormatter
: tooltipFormatterSecondary,
});
rows.push(row);
if (key === focusedSeries) {
focusedRow = rows.length - 1;
}
});
rows.push(row);
if (key === focusedSeries) {
focusedRow = rows.length - 1;
}
});
return tooltipHtml(rows, tooltipFormatter(xValue), focusedRow);
},
},