improved date range selector with hotkeys

apps/dashboard/src/components/report/ReportInterval.tsx

@@ -5,7 +5,6 @@ import {
   isHourIntervalEnabledByRange,
   isMinuteIntervalEnabledByRange,
 } from '@openpanel/constants';
-import type { IInterval } from '@openpanel/validation';
 
 import { Combobox } from '../ui/combobox';
 import { changeInterval } from './reportSlice';
@@ -55,10 +54,7 @@ export function ReportInterval({ className }: ReportIntervalProps) {
           value: 'month',
           label: 'Month',
           disabled:
-            range === 'today' ||
-            range === '24h' ||
-            range === '1h' ||
-            range === '30min',
+            range === 'today' || range === 'lastHour' || range === '30min',
         },
       ]}
     />

apps/dashboard/src/components/report/ReportRange.tsx

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import { Button } from '@/components/ui/button';
-import { Calendar } from '@/components/ui/calendar';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
-import { useBreakpoint } from '@/hooks/useBreakpoint';
-import { cn } from '@/utils/cn';
-import { format } from 'date-fns';
-import { CalendarIcon, ChevronsUpDownIcon } from 'lucide-react';
-import type { SelectRangeEventHandler } from 'react-day-picker';
-
-import { timeRanges } from '@openpanel/constants';
-import type { IChartRange } from '@openpanel/validation';
-
-import type { ExtendedComboboxProps } from '../ui/combobox';
-import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
-
-export function ReportRange({
-  range,
-  onRangeChange,
-  onDatesChange,
-  dates,
-  className,
-  ...props
-}: {
-  range: IChartRange;
-  onRangeChange: (range: IChartRange) => void;
-  onDatesChange: SelectRangeEventHandler;
-  dates: { startDate: string | null; endDate: string | null };
-} & Omit<ExtendedComboboxProps<string>, 'value' | 'onChange'>) {
-  const { isBelowSm } = useBreakpoint('sm');
-
-  return (
-    <>
-      <Popover>
-        <PopoverTrigger asChild>
-          <Button
-            id="date"
-            variant={'outline'}
-            className={cn('justify-start text-left font-normal', className)}
-            icon={CalendarIcon}
-            {...props}
-          >
-            <span className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
-              {dates.startDate ? (
-                dates.endDate ? (
-                  <>
-                    {format(dates.startDate, 'LLL dd')} -{' '}
-                    {format(dates.endDate, 'LLL dd')}
-                  </>
-                ) : (
-                  format(dates.startDate, 'LLL dd, y')
-                )
-              ) : (
-                <span>{range}</span>
-              )}
-            </span>
-            <ChevronsUpDownIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
-          <div className="border-b border-border p-4">
-            <ToggleGroup
-              value={range}
-              onValueChange={(value) => {
-                if (value) onRangeChange(value as IChartRange);
-              }}
-              type="single"
-              variant="outline"
-              className="flex-wrap max-sm:max-w-xs"
-            >
-              {Object.values(timeRanges).map((key) => (
-                <ToggleGroupItem value={key} aria-label={key} key={key}>
-                  {key}
-                </ToggleGroupItem>
-              ))}
-            </ToggleGroup>
-          </div>
-          <Calendar
-            initialFocus
-            mode="range"
-            defaultMonth={
-              dates.startDate ? new Date(dates.startDate) : new Date()
-            }
-            selected={{
-              from: dates.startDate ? new Date(dates.startDate) : undefined,
-              to: dates.endDate ? new Date(dates.endDate) : undefined,
-            }}
-            onSelect={onDatesChange}
-            numberOfMonths={isBelowSm ? 1 : 2}
-            className="[&_table]:mx-auto [&_table]:w-auto"
-          />
-        </PopoverContent>
-      </Popover>
-    </>
-  );
-}

apps/dashboard/src/components/report/reportSlice.ts

@@ -1,4 +1,3 @@
-import { start } from 'repl';
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { isSameDay, isSameMonth } from 'date-fns';
@@ -39,7 +38,7 @@ const initialState: InitialState = {
   interval: 'day',
   breakdowns: [],
   events: [],
-  range: '1m',
+  range: '30d',
   startDate: null,
   endDate: null,
   previous: false,
@@ -232,10 +231,11 @@ export const reportSlice = createSlice({
     changeDateRanges: (state, action: PayloadAction<IChartRange>) => {
       state.dirty = true;
       state.range = action.payload;
-      state.startDate = null;
-      state.endDate = null;
-
-      state.interval = getDefaultIntervalByRange(action.payload);
+      if (action.payload !== 'custom') {
+        state.startDate = null;
+        state.endDate = null;
+        state.interval = getDefaultIntervalByRange(action.payload);
+      }
     },
 
     // Formula