From 9b28c5a4640c93579809cc1642dd3ae789d1a39e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Tue, 3 Dec 2024 21:07:25 +0100
Subject: [PATCH] feature(dashboard): add interval picker to the overview page

---
 .../dashboards/[dashboardId]/list-reports.tsx |  4 +-
 .../[organizationSlug]/[projectId]/page.tsx   |  6 ++-
 .../app/(public)/share/overview/[id]/page.tsx |  4 +-
 .../components/overview/overview-interval.tsx | 48 +++++++++++++++++++
 .../overview/overview-range.tsx}              |  2 +-
 .../components/overview/useOverviewOptions.ts | 12 ++++-
 6 files changed, 67 insertions(+), 9 deletions(-)
 create mode 100644 apps/dashboard/src/components/overview/overview-interval.tsx
 rename apps/dashboard/src/{app/(app)/[organizationSlug]/[projectId]/overview-sticky-header.tsx => components/overview/overview-range.tsx} (94%)

diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/list-reports.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/list-reports.tsx
index 359dd871..5cdcac36 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/list-reports.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/list-reports.tsx
@@ -32,7 +32,7 @@ import {
 } from '@openpanel/constants';
 import type { IServiceDashboard, getReportsByDashboardId } from '@openpanel/db';
 
-import { OverviewReportRange } from '../../overview-sticky-header';
+import { OverviewRange } from '@/components/overview/overview-range';
 
 interface ListReportsProps {
   reports: Awaited<ReturnType<typeof getReportsByDashboardId>>;
@@ -55,7 +55,7 @@ export function ListReports({ reports, dashboard }: ListReportsProps) {
       <div className="row mb-4 items-center justify-between">
         <h1 className="text-3xl font-semibold">{dashboard.name}</h1>
         <div className="flex items-center justify-end gap-2">
-          <OverviewReportRange />
+          <OverviewRange />
           <Button
             icon={PlusIcon}
             onClick={() => {
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx
index 7a0a8f5b..88569f7f 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page.tsx
@@ -9,7 +9,8 @@ import OverviewTopGeo from '@/components/overview/overview-top-geo';
 import OverviewTopPages from '@/components/overview/overview-top-pages';
 import OverviewTopSources from '@/components/overview/overview-top-sources';
 
-import { OverviewReportRange } from './overview-sticky-header';
+import { OverviewInterval } from '@/components/overview/overview-interval';
+import { OverviewRange } from '@/components/overview/overview-range';
 
 interface PageProps {
   params: {
@@ -23,7 +24,8 @@ export default function Page({ params: { projectId } }: PageProps) {
       <div className="col gap-2 p-4">
         <div className="flex justify-between gap-2">
           <div className="flex gap-2">
-            <OverviewReportRange />
+            <OverviewRange />
+            <OverviewInterval />
             <OverviewFiltersDrawer projectId={projectId} mode="events" />
           </div>
           <div className="flex gap-2">
diff --git a/apps/dashboard/src/app/(public)/share/overview/[id]/page.tsx b/apps/dashboard/src/app/(public)/share/overview/[id]/page.tsx
index 9e540649..ad32969a 100644
--- a/apps/dashboard/src/app/(public)/share/overview/[id]/page.tsx
+++ b/apps/dashboard/src/app/(public)/share/overview/[id]/page.tsx
@@ -1,5 +1,4 @@
 import { StickyBelowHeader } from '@/app/(app)/[organizationSlug]/[projectId]/layout-sticky-below-header';
-import { OverviewReportRange } from '@/app/(app)/[organizationSlug]/[projectId]/overview-sticky-header';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import ServerLiveCounter from '@/components/overview/live-counter';
 import OverviewMetrics from '@/components/overview/overview-metrics';
@@ -10,6 +9,7 @@ import OverviewTopPages from '@/components/overview/overview-top-pages';
 import OverviewTopSources from '@/components/overview/overview-top-sources';
 import { notFound } from 'next/navigation';
 
+import { OverviewRange } from '@/components/overview/overview-range';
 import { getOrganizationBySlug, getShareOverviewById } from '@openpanel/db';
 
 interface PageProps {
@@ -56,7 +56,7 @@ export default async function Page({
         <StickyBelowHeader>
           <div className="flex justify-between gap-2 p-4">
             <div className="flex gap-2">
-              <OverviewReportRange />
+              <OverviewRange />
             </div>
             <div className="flex gap-2">
               <ServerLiveCounter projectId={projectId} />
diff --git a/apps/dashboard/src/components/overview/overview-interval.tsx b/apps/dashboard/src/components/overview/overview-interval.tsx
new file mode 100644
index 00000000..4425661b
--- /dev/null
+++ b/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',
+        },
+      ]}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/overview-sticky-header.tsx b/apps/dashboard/src/components/overview/overview-range.tsx
similarity index 94%
rename from apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/overview-sticky-header.tsx
rename to apps/dashboard/src/components/overview/overview-range.tsx
index 6722fda9..2e487ef6 100644
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/overview-sticky-header.tsx
+++ b/apps/dashboard/src/components/overview/overview-range.tsx
@@ -4,7 +4,7 @@ import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
 import { TimeWindowPicker } from '@/components/time-window-picker';
 import { endOfDay, formatISO, startOfDay } from 'date-fns';
 
-export function OverviewReportRange() {
+export function OverviewRange() {
   const { range, setRange, setStartDate, setEndDate, endDate, startDate } =
     useOverviewOptions();
 
diff --git a/apps/dashboard/src/components/overview/useOverviewOptions.ts b/apps/dashboard/src/components/overview/useOverviewOptions.ts
index cabd5be3..74c37116 100644
--- a/apps/dashboard/src/components/overview/useOverviewOptions.ts
+++ b/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,
   };
 }