feat: add realtime datarange which can visit data more easy

src/client/components/DateFilter.tsx

@@ -27,6 +27,15 @@ export const DateFilter: React.FC<DateFilterProps> = React.memo((props) => {
         setShowDropdown(false);
       },
       items: compact([
+        {
+          label: t('Realtime'),
+          onClick: () => {
+            useGlobalStateStore.setState({ dateRange: DateRange.Realtime });
+          },
+        },
+        {
+          type: 'divider',
+        },
         {
           label: t('Today'),
           onClick: () => {

src/client/hooks/useGlobalRangeDate.tsx

@@ -1,5 +1,5 @@
 import dayjs, { Dayjs } from 'dayjs';
-import { useMemo, useReducer } from 'react';
+import { useEffect, useMemo, useReducer } from 'react';
 import { getMinimumUnit } from '@tianji/shared';
 import { DateRange, useGlobalStateStore } from '../store/global';
 import { DateUnit } from '../utils/date';
@@ -45,6 +45,15 @@ export function useGlobalRangeDate(): {
       };
     }
 
+    if (dateRange === DateRange.Realtime) {
+      return {
+        label: t('Realtime'),
+        startDate: dayjs().subtract(1, 'hour').startOf('minute'),
+        endDate: dayjs().endOf('minute'),
+        unit: 'minute' as const,
+      };
+    }
+
     if (dateRange === DateRange.Today) {
       return {
         label: t('Today'),
@@ -126,5 +135,30 @@ export function useGlobalRangeDate(): {
     };
   }, [dateRange, globalStartDate, globalEndDate, updateInc]);
 
+  /**
+   * Auto refresh if is realtime
+   * NOTICE: Not cool yet
+   */
+  useEffect(() => {
+    let timer: number | null = null;
+
+    if (dateRange === DateRange.Realtime) {
+      if (timer) {
+        window.clearInterval(timer);
+      }
+
+      timer = window.setInterval(() => {
+        refresh();
+      }, 60 * 1000);
+    }
+
+    return () => {
+      if (timer) {
+        window.clearInterval(timer);
+        timer = null;
+      }
+    };
+  }, [dateRange]);
+
   return { label, startDate, endDate, unit, refresh };
 }

src/client/store/global.ts

@@ -2,6 +2,7 @@ import { Dayjs } from 'dayjs';
 import { create } from 'zustand';
 
 export enum DateRange {
+  Realtime,
   Last24Hours,
   Today,
   Yesterday,