refactor: update minute logic, will auto switch date unit after switch

Author: moonrailgun

src/client/components/insights/ChartRender.tsx

@@ -2,7 +2,7 @@ import { trpc } from '@/api/trpc';
 import { useCurrentWorkspaceId } from '@/store/user';
 import dayjs from 'dayjs';
 import React, { useMemo, useState } from 'react';
-import { TimeEventChart } from '../chart/TimeEventChart';
+import { TimeEventChart, TimeEventChartType } from '../chart/TimeEventChart';
 import { useInsightsStore } from '@/store/insights';
 import { pickColorWithNum } from '@/utils/color';
 import { DateRangeSelection } from './DateRangeSelection';
@@ -44,7 +44,19 @@ export const ChartRender: React.FC<ChartRenderProps> = React.memo((props) => {
     dayjs().subtract(30, 'day').startOf('day').toDate(),
     dayjs().endOf('day').toDate(),
   ]);
+  const allowMinute = useMemo(() => {
+    const start = dayjs(dateRange[0]);
+    const end = dayjs(dateRange[1]);
+    return end.diff(start, 'day') <= 1;
+  }, [dateRange]);
   const [dateUnit, setDateUnit] = useState<DateUnit>('day');
+  const [chartType, setChartType] = useState<TimeEventChartType>('area');
+
+  useWatch([allowMinute, dateUnit], () => {
+    if (!allowMinute && dateUnit === 'minute') {
+      setDateUnit('day');
+    }
+  });
 
   const time = useMemo(
     () => ({

src/client/components/insights/DateUnitSelection.tsx

@@ -10,21 +10,24 @@ import { DateUnit } from '@tianji/shared';
 import { useTranslation } from '@i18next-toolkit/react';
 
 interface DateRangeSelectionProps {
+  allowMinute: boolean;
   value: DateUnit;
   onChange: (val: DateUnit) => void;
 }
 export const DateUnitSelection: React.FC<DateRangeSelectionProps> = React.memo(
   (props) => {
-    const { value, onChange } = props;
+    const { allowMinute, value, onChange } = props;
     const { t } = useTranslation();
 
     return (
       <Select value={value} onValueChange={onChange}>
         <SelectTrigger className="w-[120px]">
           <SelectValue placeholder="Day" />
         </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="minute">{t('Minute')}</SelectItem>
+        <SelectContent align="end">
+          <SelectItem value="minute" disabled={!allowMinute}>
+            {t('Minute')}
+          </SelectItem>
           <SelectItem value="hour">{t('Hour')}</SelectItem>
           <SelectItem value="day">{t('Day')}</SelectItem>
           <SelectItem value="month">{t('Month')}</SelectItem>