From cd30be76777b60115ad1a8e652971751cd3b8c3d Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 18 Jul 2026 18:59:51 +0100
Subject: [PATCH] Refactor HistoryDisplay component to streamline imports and
 enhance layout structure. Consolidate loading state handling and improve
 chart rendering logic for better performance and user experience.

---
 .../Dashboard/common/HistoryDisplay.jsx       | 194 +++++++++---------
 1 file changed, 99 insertions(+), 95 deletions(-)

diff --git a/src/components/Dashboard/common/HistoryDisplay.jsx b/src/components/Dashboard/common/HistoryDisplay.jsx
index 7e19b21..a46f885 100644
--- a/src/components/Dashboard/common/HistoryDisplay.jsx
+++ b/src/components/Dashboard/common/HistoryDisplay.jsx
@@ -1,13 +1,5 @@
 import { useEffect, useState, useContext, useMemo } from 'react'
-import {
-  Card,
-  Segmented,
-  Flex,
-  Popover,
-  DatePicker,
-  Button,
-  Space
-} from 'antd'
+import { Card, Segmented, Flex, Popover, DatePicker, Button, Space } from 'antd'
 import {
   ResponsiveContainer,
   BarChart,
@@ -25,9 +17,9 @@ import { ApiServerContext } from '../context/ApiServerContext'
 import { AuthContext } from '../context/AuthContext'
 import dayjs from 'dayjs'
 import { useThemeContext } from '../context/ThemeContext'
-import LoadingPlaceholder from './LoadingPlaceholder'
 import MissingPlaceholder from './MissingPlaceholder'
 import CheckIcon from '../../Icons/CheckIcon'
+import { LoadingOutlined } from '@ant-design/icons'
 
 const HistoryDisplay = ({
   objectType,
@@ -291,15 +283,17 @@ const HistoryDisplay = ({
   })
 
   const chartRows = Array.from(
-    chartData.reduce((acc, item) => {
-      const existing = acc.get(item.date) || {
-        date: item.date,
-        dateFormatted: item.dateFormatted
-      }
-      existing[item.category] = item.value
-      acc.set(item.date, existing)
-      return acc
-    }, new Map()).values()
+    chartData
+      .reduce((acc, item) => {
+        const existing = acc.get(item.date) || {
+          date: item.date,
+          dateFormatted: item.dateFormatted
+        }
+        existing[item.category] = item.value
+        acc.set(item.date, existing)
+        return acc
+      }, new Map())
+      .values()
   ).sort((a, b) => new Date(a.date) - new Date(b.date))
 
   const customTimeRangeContent = (
@@ -334,89 +328,99 @@ const HistoryDisplay = ({
       style={{ width: '100%' }}
       styles={{ body: { padding: '12px', ...styles } }}
     >
-      {!startDate && !endDate && (
-        <Flex justify='space-between'>
-          <Flex align='center' gap='5px'>
-            <Popover
-              content={customTimeRangeContent}
-              trigger='hover'
-              arrow={false}
-              placement='bottomLeft'
-              styles={{ body: { borderRadius: '22.5px' } }}
-            >
+      <Flex gap='small' vertical>
+        {!startDate && !endDate && (
+          <Flex justify='space-between'>
+            <Flex align='center' gap='5px'>
+              <Popover
+                content={customTimeRangeContent}
+                trigger='hover'
+                arrow={false}
+                placement='bottomLeft'
+                styles={{ body: { borderRadius: '22.5px' } }}
+              >
+                <Segmented
+                  size='small'
+                  options={[{ label: 'Custom', value: 'custom' }]}
+                  value={timeRange}
+                  onChange={setTimeRange}
+                  disabled={loading}
+                />
+              </Popover>
+            </Flex>
+
+            <Flex gap='middle'>
+              {loading == true && <LoadingOutlined />}
               <Segmented
                 size='small'
-                options={[{ label: 'Custom', value: 'custom' }]}
+                options={[
+                  { label: '24hr', value: '24hrs' },
+                  { label: '12hr', value: '12hrs' },
+                  { label: '8hr', value: '8hrs' },
+                  { label: '4hr', value: '4hrs' },
+                  { label: '1hr', value: '1hrs' }
+                ]}
                 value={timeRange}
                 onChange={setTimeRange}
                 disabled={loading}
               />
-            </Popover>
+            </Flex>
           </Flex>
-
-          <Segmented
-            size='small'
-            options={[
-              { label: '24hr', value: '24hrs' },
-              { label: '12hr', value: '12hrs' },
-              { label: '8hr', value: '8hrs' },
-              { label: '4hr', value: '4hrs' },
-              { label: '1hr', value: '1hrs' }
-            ]}
-            value={timeRange}
-            onChange={setTimeRange}
-            disabled={loading}
-          />
-        </Flex>
-      )}
-      {loading == true && (
-        <Flex justify='center' align='center' style={{ height: `${height}px` }}>
-          <LoadingPlaceholder message='Loading history data...' />
-        </Flex>
-      )}
-      {chartRows.length > 0 && (
-        <div style={{ width: '100%', height: `${height}px` }}>
-          <ResponsiveContainer width='100%' height='100%'>
-            <BarChart data={chartRows}>
-              <CartesianGrid
-                strokeDasharray='3 3'
-                stroke={isDarkMode ? '#303030' : '#f0f0f0'}
-              />
-              <XAxis
-                dataKey='dateFormatted'
-                tick={{ fill: isDarkMode ? '#d9d9d9' : '#595959', fontSize: 12 }}
-              />
-              <YAxis
-                tick={{ fill: isDarkMode ? '#d9d9d9' : '#595959', fontSize: 12 }}
-              />
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: isDarkMode ? '#1f1f1f' : '#ffffff',
-                  border: `1px solid ${isDarkMode ? '#303030' : '#f0f0f0'}`,
-                  borderRadius: 8
-                }}
-              />
-              <Legend />
-              {modelStats.map((statDef, index) => {
-                const category = statDef.label || statDef.name
-                return (
-                  <Bar
-                    key={category}
-                    dataKey={category}
-                    stackId='history'
-                    fill={colorRange[index] || colors.default}
-                  />
-                )
-              })}
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      )}
-      {loading == false && chartRows.length == 0 && (
-        <Flex justify='center' align='center' style={{ height: `${height}px` }}>
-          <MissingPlaceholder message='No data available.' />
-        </Flex>
-      )}
+        )}
+        {chartRows.length > 0 && (
+          <div style={{ width: '100%', height: `${height}px` }}>
+            <ResponsiveContainer width='100%' height='100%'>
+              <BarChart data={chartRows}>
+                <CartesianGrid
+                  strokeDasharray='3 3'
+                  stroke={isDarkMode ? '#303030' : '#f0f0f0'}
+                />
+                <XAxis
+                  dataKey='dateFormatted'
+                  tick={{
+                    fill: isDarkMode ? '#d9d9d9' : '#595959',
+                    fontSize: 12
+                  }}
+                />
+                <YAxis
+                  tick={{
+                    fill: isDarkMode ? '#d9d9d9' : '#595959',
+                    fontSize: 12
+                  }}
+                />
+                <Tooltip
+                  contentStyle={{
+                    backgroundColor: isDarkMode ? '#1f1f1f' : '#ffffff',
+                    border: `1px solid ${isDarkMode ? '#303030' : '#f0f0f0'}`,
+                    borderRadius: 8
+                  }}
+                />
+                <Legend />
+                {modelStats.map((statDef, index) => {
+                  const category = statDef.label || statDef.name
+                  return (
+                    <Bar
+                      key={category}
+                      dataKey={category}
+                      stackId='history'
+                      fill={colorRange[index] || colors.default}
+                    />
+                  )
+                })}
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+        {loading == false && chartRows.length == 0 && (
+          <Flex
+            justify='center'
+            align='center'
+            style={{ height: `${height}px` }}
+          >
+            <MissingPlaceholder message='No data available.' />
+          </Flex>
+        )}
+      </Flex>
     </Card>
   )
 }