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

src/components/Dashboard/common/HistoryDisplay.jsx

@@ -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,14 +301,58 @@ 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'>
+        <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>
+
           <Segmented
             size='small'
             options={[
@@ -301,12 +364,22 @@ const HistoryDisplay = ({ objectType, startDate, endDate, styles }) => {
             ]}
             value={timeRange}
             onChange={setTimeRange}
+            disabled={loading}
           />
         </Flex>
       )}
-        <Column {...config} />
+      {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>
-    </Spin>
   )
 }
 
@@ -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