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:
parent
589acab592
commit
dff0a02c12
@ -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 && (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user