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 74775f0d896e4..2066148c84800 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -22,6 +22,7 @@ import { AnnotationLayer, AxisType, CategoricalColorNamespace, + CurrencyFormatter, ensureIsArray, GenericDataType, getMetricLabel, @@ -112,9 +113,15 @@ const getYAxisFormatter = ( } const metricsArray = ensureIsArray(metrics); if ( - metricsArray.length === 1 && - isSavedMetric(metricsArray[0]) && - customFormatters[metricsArray[0]] + metricsArray.every(isSavedMetric) && + metricsArray + .map(metric => customFormatters[metric]) + .every( + (formatter, _, formatters) => + formatter instanceof CurrencyFormatter && + (formatter as CurrencyFormatter)?.currency?.symbol === + (formatters[0] as CurrencyFormatter)?.currency?.symbol, + ) ) { return customFormatters[metricsArray[0]]; } @@ -273,8 +280,6 @@ export default function transformProps( currencyFormats, columnFormats, yAxisFormat, - labelMap, - Object.values(rawSeries).map(series => series.name as string), ); const array = ensureIsArray(chartProps.rawFormData?.time_compare); @@ -305,8 +310,11 @@ export default function transformProps( stack, formatter: forcePercentFormatter ? percentFormatter - : getCustomFormatter(customFormatters, metrics, seriesName) ?? - defaultFormatter, + : getCustomFormatter( + customFormatters, + metrics, + labelMap[seriesName]?.[0], + ) ?? defaultFormatter, showValue, onlyTotal, totalStackedValues: sortedTotalValues, @@ -536,12 +544,16 @@ export default function transformProps( if (value.observation === 0 && stack) { return; } + // 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 + const formatterKey = + groupby.length === 0 ? inverted[key] : labelMap[key]?.[0]; const content = formatForecastTooltipSeries({ ...value, seriesName: key, formatter: forcePercentFormatter ? percentFormatter - : getCustomFormatter(customFormatters, metrics, key) ?? + : getCustomFormatter(customFormatters, metrics, formatterKey) ?? defaultFormatter, }); if (!legendState || legendState[key]) { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/valueFormatter.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/valueFormatter.ts index 03ea6bd5fb3e9..5d995c9f00081 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/valueFormatter.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/valueFormatter.ts @@ -3,7 +3,6 @@ import { CurrencyFormatter, ensureIsArray, getNumberFormatter, - isDefined, isSavedMetric, QueryFormMetric, ValueFormatter, @@ -14,50 +13,27 @@ export const buildCustomFormatters = ( currencyFormats: Record, columnFormats: Record, d3Format: string | undefined, - labelMap: Record = {}, - seriesNames: string[] = [], ) => { const metricsArray = ensureIsArray(metrics); - if (metricsArray.length === 1) { - const metric = metricsArray[0]; + return metricsArray.reduce((acc, metric) => { + const actualD3Format = isSavedMetric(metric) + ? columnFormats[metric] ?? d3Format + : d3Format; if (isSavedMetric(metric)) { - return { - [metric]: currencyFormats[metric] - ? new CurrencyFormatter({ - d3Format: columnFormats[metric] ?? d3Format, + return currencyFormats[metric] + ? { + ...acc, + [metric]: new CurrencyFormatter({ + d3Format: actualD3Format, currency: currencyFormats[metric], - }) - : getNumberFormatter(columnFormats[metric] ?? d3Format), - }; - } - return {}; - } - return seriesNames.reduce((acc, name) => { - if (!isDefined(name)) { - return acc; - } - - const metricName = labelMap[name]?.[0]; - const isSaved = - metricName && - // string equality checks if it is a saved metric - metricsArray?.some(metric => metric === metricName); - const actualD3Format = isSaved - ? columnFormats[metricName] ?? d3Format - : d3Format; - if (isSaved && currencyFormats[metricName]) { - return { - ...acc, - [name]: new CurrencyFormatter({ - d3Format: actualD3Format, - currency: currencyFormats[metricName], - }), - }; + }), + } + : { + ...acc, + [metric]: getNumberFormatter(actualD3Format), + }; } - return { - ...acc, - [name]: getNumberFormatter(actualD3Format), - }; + return acc; }, {}); }; @@ -78,19 +54,10 @@ export const getValueFormatter = ( currencyFormats: Record, columnFormats: Record, d3Format: string | undefined, - labelMap: Record = {}, - seriesNames: string[] = [], key?: string, ) => getCustomFormatter( - buildCustomFormatters( - metrics, - currencyFormats, - columnFormats, - d3Format, - labelMap, - seriesNames, - ), + buildCustomFormatters(metrics, currencyFormats, columnFormats, d3Format), metrics, key, ) ?? getNumberFormatter(d3Format);