From 08bfff94cf2ea42f71f0f7499d301bf975e2c23d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Tue, 21 Jan 2025 15:18:30 +0000
Subject: [PATCH] improvement(dashboard): add interval selector on dashboard
 page

---
 .../dashboards/[dashboardId]/list-reports.tsx          | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

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 5cdcac36..b6d322d6 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,6 +32,7 @@ import {
 } from '@openpanel/constants';
 import type { IServiceDashboard, getReportsByDashboardId } from '@openpanel/db';
 
+import { OverviewInterval } from '@/components/overview/overview-interval';
 import { OverviewRange } from '@/components/overview/overview-range';
 
 interface ListReportsProps {
@@ -42,7 +43,7 @@ interface ListReportsProps {
 export function ListReports({ reports, dashboard }: ListReportsProps) {
   const router = useRouter();
   const params = useAppParams<{ dashboardId: string }>();
-  const { range, startDate, endDate } = useOverviewOptions();
+  const { range, startDate, endDate, interval } = useOverviewOptions();
   const deletion = api.report.delete.useMutation({
     onError: handleError,
     onSuccess() {
@@ -56,6 +57,7 @@ export function ListReports({ reports, dashboard }: ListReportsProps) {
         <h1 className="text-3xl font-semibold">{dashboard.name}</h1>
         <div className="flex items-center justify-end gap-2">
           <OverviewRange />
+          <OverviewInterval />
           <Button
             icon={PlusIcon}
             onClick={() => {
@@ -146,11 +148,7 @@ export function ListReports({ reports, dashboard }: ListReportsProps) {
                     range: range ?? report.range,
                     startDate: startDate ?? report.startDate,
                     endDate: endDate ?? report.endDate,
-                    interval:
-                      getDefaultIntervalByDates(startDate, endDate) ||
-                      (range
-                        ? getDefaultIntervalByRange(range)
-                        : report.interval),
+                    interval: interval ?? report.interval,
                   }}
                 />
               </div>