feature(dashboard): add interval picker to the overview page

apps/dashboard/src/components/overview/overview-interval.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
+import { TimeWindowPicker } from '@/components/time-window-picker';
+import {
+  isHourIntervalEnabledByRange,
+  isMinuteIntervalEnabledByRange,
+} from '@openpanel/constants';
+import { endOfDay, formatISO, startOfDay } from 'date-fns';
+import { ClockIcon } from 'lucide-react';
+import { Combobox } from '../ui/combobox';
+
+export function OverviewInterval() {
+  const { interval, setInterval, range } = useOverviewOptions();
+
+  return (
+    <Combobox
+      icon={ClockIcon}
+      placeholder="Interval"
+      onChange={(value) => {
+        setInterval(value);
+      }}
+      value={interval}
+      items={[
+        {
+          value: 'minute',
+          label: 'Minute',
+          disabled: !isMinuteIntervalEnabledByRange(range),
+        },
+        {
+          value: 'hour',
+          label: 'Hour',
+          disabled: !isHourIntervalEnabledByRange(range),
+        },
+        {
+          value: 'day',
+          label: 'Day',
+        },
+        {
+          value: 'month',
+          label: 'Month',
+          disabled:
+            range === 'today' || range === 'lastHour' || range === '30min',
+        },
+      ]}
+    />
+  );
+}

apps/dashboard/src/components/overview/overview-range.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
+import { TimeWindowPicker } from '@/components/time-window-picker';
+import { endOfDay, formatISO, startOfDay } from 'date-fns';
+
+export function OverviewRange() {
+  const { range, setRange, setStartDate, setEndDate, endDate, startDate } =
+    useOverviewOptions();
+
+  return (
+    <TimeWindowPicker
+      onChange={setRange}
+      value={range}
+      onStartDateChange={(date) => {
+        const d = formatISO(startOfDay(new Date(date)));
+        setStartDate(d);
+      }}
+      onEndDateChange={(date) => {
+        const d = formatISO(endOfDay(new Date(date)));
+        setEndDate(d);
+      }}
+      endDate={endDate}
+      startDate={startDate}
+    />
+  );
+}

apps/dashboard/src/components/overview/useOverviewOptions.ts

@@ -10,6 +10,7 @@ import { getStorageItem, setStorageItem } from '@/utils/storage';
 import {
   getDefaultIntervalByDates,
   getDefaultIntervalByRange,
+  intervals,
   timeWindows,
 } from '@openpanel/constants';
 import type { IChartRange } from '@openpanel/validation';
@@ -36,6 +37,13 @@ export function useOverviewOptions() {
         clearOnDefault: false,
       }),
   );
+  const [overrideInterval, setInterval] = useQueryState(
+    'overrideInterval',
+    parseAsStringEnum(mapKeys(intervals)).withOptions({
+      ...nuqsOptions,
+      clearOnDefault: false,
+    }),
+  );
 
   useEffect(() => {
     const range = getStorageItem('range', '7d');
@@ -45,6 +53,7 @@ export function useOverviewOptions() {
   }, []);
 
   const interval =
+    overrideInterval ||
     getDefaultIntervalByDates(startDate, endDate) ||
     getDefaultIntervalByRange(range);
 
@@ -78,8 +87,7 @@ export function useOverviewOptions() {
     setStartDate,
     endDate,
     setEndDate,
-
-    // Computed
     interval,
+    setInterval,
   };
 }