From dff0a02c1256d2b37569bdfaea0262dc723d5924 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Tue, 1 Sep 2026 13:34:37 +0100
Subject: [PATCH] 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.
---
 .../Dashboard/common/ModelHistoryDisplay.jsx  | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

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 && (