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 63404d52..0abb8019 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 @@ -89,7 +89,8 @@ export function ListReports({ reports, dashboard }: ListReportsProps) {
Custom dates ) : ( - range !== null && {range} + range !== null && + chartRange !== range && ( + {timeWindows[range].label} + ) )}
)} diff --git a/apps/dashboard/src/components/overview/useOverviewOptions.ts b/apps/dashboard/src/components/overview/useOverviewOptions.ts index a04ff364..cabd5be3 100644 --- a/apps/dashboard/src/components/overview/useOverviewOptions.ts +++ b/apps/dashboard/src/components/overview/useOverviewOptions.ts @@ -6,6 +6,7 @@ import { useQueryState, } from 'nuqs'; +import { getStorageItem, setStorageItem } from '@/utils/storage'; import { getDefaultIntervalByDates, getDefaultIntervalByRange, @@ -13,6 +14,7 @@ import { } from '@openpanel/constants'; import type { IChartRange } from '@openpanel/validation'; import { mapKeys } from '@openpanel/validation'; +import { useEffect } from 'react'; const nuqsOptions = { history: 'push' } as const; @@ -29,9 +31,19 @@ export function useOverviewOptions() { 'range', parseAsStringEnum(mapKeys(timeWindows)) .withDefault('7d') - .withOptions(nuqsOptions), + .withOptions({ + ...nuqsOptions, + clearOnDefault: false, + }), ); + useEffect(() => { + const range = getStorageItem('range', '7d'); + if (range !== '7d') { + setRange(range); + } + }, []); + const interval = getDefaultIntervalByDates(startDate, endDate) || getDefaultIntervalByRange(range); @@ -56,6 +68,7 @@ export function useOverviewOptions() { if (value !== 'custom') { setStartDate(null); setEndDate(null); + setStorageItem('range', value); } setRange(value); }, diff --git a/apps/dashboard/src/utils/storage.ts b/apps/dashboard/src/utils/storage.ts new file mode 100644 index 00000000..9eed2ff5 --- /dev/null +++ b/apps/dashboard/src/utils/storage.ts @@ -0,0 +1,23 @@ +const prefix = '@op'; + +export function getStorageItem(key: string): T | null; +export function getStorageItem(key: string, defaultValue: T): T; +export function getStorageItem(key: string, defaultValue?: T): T | null { + if (typeof window === 'undefined') return defaultValue ?? null; + const item = localStorage.getItem(`${prefix}:${key}`); + if (item === null) { + return defaultValue ?? null; + } + + return item as T; +} + +export function setStorageItem(key: string, value: unknown) { + if (typeof window === 'undefined') return; + localStorage.setItem(`${prefix}:${key}`, value as string); +} + +export function removeStorageItem(key: string) { + if (typeof window === 'undefined') return; + localStorage.removeItem(`${prefix}:${key}`); +}