farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Tom Butcher 2026-07-18 18:59:51 +01:00
parent 7ca78280b3
commit cd30be7677
1 changed files with 99 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
src/components/Dashboard/common/HistoryDisplay.jsx
View File

@ -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>
)
}