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 {
|
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 && (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user