diff --git a/src/components/Dashboard/common/ModelHistoryDisplay.jsx b/src/components/Dashboard/common/ModelHistoryDisplay.jsx index 1f2f1556..5dbe6be1 100644 --- a/src/components/Dashboard/common/ModelHistoryDisplay.jsx +++ b/src/components/Dashboard/common/ModelHistoryDisplay.jsx @@ -1,4 +1,4 @@ -import { useEffect, useState, useContext, useMemo } from 'react' +import { useEffect, useState, useContext, useMemo, useCallback } from 'react' import { Card, Segmented, @@ -21,6 +21,7 @@ import HistoryChartLegend from './HistoryChartLegend' import { useHistoryLegendOverlay } from '../hooks/useHistoryLegendOverlay' import CheckIcon from '../../Icons/CheckIcon' import { LoadingOutlined } from '@ant-design/icons' +import { round } from '../utils/Utils' const legendMeasureStyle = { position: 'absolute', @@ -197,11 +198,26 @@ const ModelHistoryDisplay = ({ return { label: statDef.label || statDef.name, - color + color, + prefix: statDef.prefix, + suffix: statDef.suffix, + roundNumber: statDef.roundNumber } }) }, [modelStats, themeColors]) + const formatTooltipValue = useCallback( + (value, seriesLabel) => { + const seriesDef = seriesLabels.find((item) => item.label === seriesLabel) + let numericValue = Number(value ?? 0) + if (seriesDef?.roundNumber) { + numericValue = round(numericValue, seriesDef.roundNumber) + } + return `${seriesDef?.prefix || ''}${numericValue}${seriesDef?.suffix || ''}` + }, + [seriesLabels] + ) + const { slotRef, measureRef, @@ -342,7 +358,9 @@ const ModelHistoryDisplay = ({ date: point.date, dateFormatted: dayjs(point.date).format('DD/MM HH:mm'), category: label, - value: statValue || 0 + value: statValue || 0, + prefix: statDef.prefix || '', + suffix: statDef.suffix || '' } }) }) @@ -525,6 +543,7 @@ const ModelHistoryDisplay = ({ seriesLabels={seriesLabels} chartType={chartType} isDarkMode={isDarkMode} + formatTooltipValue={formatTooltipValue} /> )} {loading == true && chartRows.length == 0 && (