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

Enhanced HistoryDisplay component with custom date range selection and improved loading states.

Browse Source
This commit is contained in:
Tom Butcher 2025-12-09 02:09:48 +00:00
parent 2d2aff125c
commit 3d17a08a71
1 changed files with 102 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,5 @@
import { useEffect, useState, useContext, useMemo } from 'react'
import { Card, Spin, Segmented, Flex } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import { Card, Segmented, Flex, Popover, DatePicker, Button, Space } from 'antd'
import { Column } from '@ant-design/charts'
import PropTypes from 'prop-types'
import { getModelByName } from '../../../database/ObjectModels'
@ -8,14 +7,25 @@ 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'
const HistoryDisplay = ({ objectType, startDate, endDate, styles }) => {
const HistoryDisplay = ({
objectType,
startDate,
endDate,
styles,
height = 400
}) => {
const { getModelHistory, connected } = useContext(ApiServerContext)
const { token } = useContext(AuthContext)
const [historyData, setHistoryData] = useState([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)
const [timeRange, setTimeRange] = useState('4hrs')
const [startCustomDate, setStartCustomDate] = useState(null)
const [endCustomDate, setEndCustomDate] = useState(null)
const { isDarkMode, getColors } = useThemeContext()
// Calculate dates based on selected time range or provided props
const { defaultStartDate, defaultEndDate } = useMemo(() => {
@ -30,6 +40,14 @@ const HistoryDisplay = ({ objectType, startDate, endDate, styles }) => {
}
}
// Handle custom date range
if (timeRange === 'custom' && startCustomDate && endCustomDate) {
return {
defaultStartDate: startCustomDate.toDate(),
defaultEndDate: endCustomDate.toDate()
}
}
// Otherwise, calculate based on selected time range
const hoursMap = {
'8hrs': 8,
@ -43,7 +61,7 @@ const HistoryDisplay = ({ objectType, startDate, endDate, styles }) => {
defaultStartDate: new Date(now.getTime() - hours * 60 * 60 * 1000),
defaultEndDate: now
}
}, [startDate, endDate, timeRange])
}, [startDate, endDate, timeRange, startCustomDate, endCustomDate])
useEffect(() => {
if (!objectType || !getModelHistory || !token || !connected) {
@ -251,6 +269,7 @@ const HistoryDisplay = ({ objectType, startDate, endDate, styles }) => {
const config = {
data: chartData,
height,
xField: 'dateFormatted',
yField: 'value',
theme: {
@ -282,31 +301,85 @@ const HistoryDisplay = ({ objectType, startDate, endDate, styles }) => {
}
}
const customTimeRangeContent = (
<Space.Compact>
<DatePicker.RangePicker
onChange={(dates) => {
if (dates) {
setStartCustomDate(dates[0])
setEndCustomDate(dates[1])
} else {
setStartCustomDate(null)
setEndCustomDate(null)
}
}}
value={[startCustomDate, endCustomDate]}
/>
<Button
type='primary'
onClick={() => {
if (startCustomDate && endCustomDate) {
setTimeRange('custom')
}
}}
disabled={!startCustomDate || !endCustomDate}
icon={<CheckIcon />}
></Button>
</Space.Compact>
)
return (
<Spin spinning={loading} indicator={<LoadingOutlined spin />}>
<Card
style={{ width: '100%' }}
styles={{ body: { padding: '12px', ...styles } }}
>
{!startDate && !endDate && (
<Flex justify='flex-end'>
<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}
/>
<Card
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' } }}
>
<Segmented
size='small'
options={[{ label: 'Custom', value: 'custom' }]}
value={timeRange}
onChange={setTimeRange}
disabled={loading}
/>
</Popover>
</Flex>
)}
<Column {...config} />
</Card>
</Spin>
<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>
)}
{chartData.length > 0 && <Column {...config} />}
{loading == false && chartData.length == 0 && (
<Flex justify='center' align='center' style={{ height: `${height}px` }}>
<MissingPlaceholder message='No data available.' />
</Flex>
)}
</Card>
)
}
@ -317,7 +390,8 @@ HistoryDisplay.propTypes = {
PropTypes.instanceOf(Date)
]),
styles: PropTypes.object,
endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
endDate: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
height: PropTypes.string
}
export default HistoryDisplay