improved date range selector with hotkeys

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/dashboards/[dashboardId]/list-reports.tsx

@@ -22,6 +22,7 @@ import { toast } from 'sonner';
 import {
   getDefaultIntervalByDates,
   getDefaultIntervalByRange,
+  timeWindows,
 } from '@openpanel/constants';
 import type { getReportsByDashboardId } from '@openpanel/db';
 
@@ -64,7 +65,7 @@ export function ListReports({ reports }: ListReportsProps) {
       </StickyBelowHeader>
       <div className="mx-auto flex max-w-3xl flex-col gap-8 p-4 md:p-8">
         {reports.map((report) => {
-          const chartRange = report.range; // timeRanges[report.range];
+          const chartRange = report.range;
           return (
             <div className="card" key={report.id}>
               <Link
@@ -84,7 +85,7 @@ export function ListReports({ reports }: ListReportsProps) {
                             : ''
                         }
                       >
-                        {chartRange}
+                        {timeWindows[chartRange].label}
                       </span>
                       {startDate && endDate ? (
                         <span>Custom dates</span>

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/charts/events-per-day-chart.tsx

@@ -23,7 +23,7 @@ export function EventsPerDayChart({ projectId, filters, events }: Props) {
     <div className="card mb-8 p-4">
       <ChartSwitchShortcut
         projectId={projectId}
-        range="1m"
+        range="30d"
         chartType="histogram"
         events={
           events && events.length > 0

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/overview-sticky-header.tsx

@@ -1,37 +1,20 @@
 'use client';
 
 import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
-import { ReportRange } from '@/components/report/ReportRange';
-import { endOfDay, startOfDay } from 'date-fns';
+import { TimeWindowPicker } from '@/components/time-window-picker';
 
 export function OverviewReportRange() {
-  const { range, setRange, setEndDate, setStartDate, startDate, endDate } =
+  const { range, setRange, setStartDate, setEndDate, endDate, startDate } =
     useOverviewOptions();
-  return (
-    <ReportRange
-      range={range}
-      onRangeChange={(value) => {
-        setRange(value);
-        setStartDate(null);
-        setEndDate(null);
-      }}
-      dates={{
-        startDate,
-        endDate,
-      }}
-      onDatesChange={(val) => {
-        if (!val) return;
 
-        if (val.from && val.to) {
-          setRange(null);
-          setStartDate(startOfDay(val.from).toISOString());
-          setEndDate(endOfDay(val.to).toISOString());
-        } else if (val.from) {
-          setStartDate(startOfDay(val.from).toISOString());
-        } else if (val.to) {
-          setEndDate(endOfDay(val.to).toISOString());
-        }
-      }}
+  return (
+    <TimeWindowPicker
+      onChange={setRange}
+      value={range}
+      onStartDateChange={(date) => setStartDate(date)}
+      onEndDateChange={(date) => setEndDate(date)}
+      endDate={endDate}
+      startDate={startDate}
     />
   );
 }

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/page.tsx

@@ -114,7 +114,7 @@ export default async function Page({
     lineType: 'monotone',
     interval: 'day',
     name: 'Events',
-    range: '1m',
+    range: '30d',
     previous: false,
     metric: 'sum',
   };

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/reports/report-editor.tsx

@@ -6,11 +6,9 @@ import { ChartSwitch } from '@/components/report/chart';
 import { ReportChartType } from '@/components/report/ReportChartType';
 import { ReportInterval } from '@/components/report/ReportInterval';
 import { ReportLineType } from '@/components/report/ReportLineType';
-import { ReportRange } from '@/components/report/ReportRange';
 import { ReportSaveButton } from '@/components/report/ReportSaveButton';
 import {
   changeDateRanges,
-  changeDates,
   changeEndDate,
   changeStartDate,
   ready,
@@ -18,6 +16,7 @@ import {
   setReport,
 } from '@/components/report/reportSlice';
 import { ReportSidebar } from '@/components/report/sidebar/ReportSidebar';
+import { TimeWindowPicker } from '@/components/time-window-picker';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { useAppParams } from '@/hooks/useAppParams';
@@ -63,32 +62,20 @@ export default function ReportEditor({
         </SheetTrigger>
         <div className="col-span-4 grid grid-cols-2 gap-2 md:grid-cols-4">
           <ReportChartType className="min-w-0 flex-1" />
-          <ReportRange
+          <TimeWindowPicker
             className="min-w-0 flex-1"
-            range={report.range}
-            onRangeChange={(value) => {
+            onChange={(value) => {
               dispatch(changeDateRanges(value));
             }}
-            dates={{
-              startDate: report.startDate,
-              endDate: report.endDate,
-            }}
-            onDatesChange={(val) => {
-              if (!val) return;
-
-              if (val.from && val.to) {
-                dispatch(
-                  changeDates({
-                    startDate: startOfDay(val.from).toISOString(),
-                    endDate: endOfDay(val.to).toISOString(),
-                  })
-                );
-              } else if (val.from) {
-                dispatch(changeStartDate(startOfDay(val.from).toISOString()));
-              } else if (val.to) {
-                dispatch(changeEndDate(endOfDay(val.to).toISOString()));
-              }
-            }}
+            value={report.range}
+            onStartDateChange={(date) =>
+              dispatch(changeStartDate(startOfDay(date).toISOString()))
+            }
+            onEndDateChange={(date) =>
+              dispatch(changeEndDate(endOfDay(date).toISOString()))
+            }
+            endDate={report.endDate}
+            startDate={report.startDate}
           />
           <ReportInterval className="min-w-0 flex-1" />
           <ReportLineType className="min-w-0 flex-1" />