Enhance ModelHistoryDisplay with Tooltip Formatting and Utility Functions

- Added useCallback for formatTooltipValue to improve tooltip display by incorporating prefix, suffix, and rounding based on series definitions.
- Updated data structure in chart data preparation to include prefix and suffix for values, enhancing clarity in displayed metrics.
- Imported round utility function to facilitate number rounding based on series configuration, improving data presentation accuracy.
This commit is contained in:
Tom Butcher 2026-09-01 13:34:37 +01:00
parent 589acab592
commit dff0a02c12

View File

@ -1,4 +1,4 @@
import { useEffect, useState, useContext, useMemo } from 'react' import { useEffect, useState, useContext, useMemo, useCallback } from 'react'
import { import {
Card, Card,
Segmented, Segmented,
@ -21,6 +21,7 @@ import HistoryChartLegend from './HistoryChartLegend'
import { useHistoryLegendOverlay } from '../hooks/useHistoryLegendOverlay' import { useHistoryLegendOverlay } from '../hooks/useHistoryLegendOverlay'
import CheckIcon from '../../Icons/CheckIcon' import CheckIcon from '../../Icons/CheckIcon'
import { LoadingOutlined } from '@ant-design/icons' import { LoadingOutlined } from '@ant-design/icons'
import { round } from '../utils/Utils'
const legendMeasureStyle = { const legendMeasureStyle = {
position: 'absolute', position: 'absolute',
@ -197,11 +198,26 @@ const ModelHistoryDisplay = ({
return { return {
label: statDef.label || statDef.name, label: statDef.label || statDef.name,
color color,
prefix: statDef.prefix,
suffix: statDef.suffix,
roundNumber: statDef.roundNumber
} }
}) })
}, [modelStats, themeColors]) }, [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 { const {
slotRef, slotRef,
measureRef, measureRef,
@ -342,7 +358,9 @@ const ModelHistoryDisplay = ({
date: point.date, date: point.date,
dateFormatted: dayjs(point.date).format('DD/MM HH:mm'), dateFormatted: dayjs(point.date).format('DD/MM HH:mm'),
category: label, category: label,
value: statValue || 0 value: statValue || 0,
prefix: statDef.prefix || '',
suffix: statDef.suffix || ''
} }
}) })
}) })
@ -525,6 +543,7 @@ const ModelHistoryDisplay = ({
seriesLabels={seriesLabels} seriesLabels={seriesLabels}
chartType={chartType} chartType={chartType}
isDarkMode={isDarkMode} isDarkMode={isDarkMode}
formatTooltipValue={formatTooltipValue}
/> />
)} )}
{loading == true && chartRows.length == 0 && ( {loading == true && chartRows.length == 0 && (