fix(dashboard): show hours when needed and remove bugs for filters

apps/dashboard/src/components/overview/overview-hydrate-options.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { getStorageItem } from '@/utils/storage';
+import { useEffect, useRef } from 'react';
+import { useOverviewOptions } from './useOverviewOptions';
+
+export function OverviewHydrateOptions() {
+  const { setRange, range } = useOverviewOptions();
+  const ref = useRef<boolean>(false);
+
+  useEffect(() => {
+    if (!ref.current) {
+      const range = getStorageItem('range', '7d');
+      if (range !== '7d') {
+        setRange(range);
+      }
+      ref.current = true;
+    }
+  }, []);
+
+  return null;
+}

apps/dashboard/src/components/overview/overview-metrics.tsx

@@ -9,6 +9,7 @@ import { useNumber } from '@/hooks/useNumerFormatter';
 import { type RouterOutputs, api } from '@/trpc/client';
 import { getChartColor } from '@/utils/theme';
 import { getPreviousMetric } from '@openpanel/common';
+import type { IInterval } from '@openpanel/validation';
 import React from 'react';
 import {
   CartesianGrid,
@@ -89,7 +90,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
       timestamp: new Date(item.date).getTime(),
     })) || [];
 
-  const xAxisProps = useXAxisProps({ interval: 'day' });
+  const xAxisProps = useXAxisProps({ interval });
   const yAxisProps = useYAxisProps();
 
   return (
@@ -131,7 +132,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
           </div>
           <div className="w-full h-[150px]">
             {overviewQuery.isLoading && <Skeleton className="h-full w-full" />}
-            <TooltipProvider metric={activeMetric}>
+            <TooltipProvider metric={activeMetric} interval={interval}>
               <ResponsiveContainer width="100%" height="100%">
                 <LineChart data={data}>
                   <Tooltip />
@@ -215,9 +216,10 @@ const { Tooltip, TooltipProvider } = createChartTooltip<
   RouterOutputs['overview']['stats']['series'][number],
   {
     metric: (typeof TITLES)[number];
+    interval: IInterval;
   }
->(({ context: { metric }, data }) => {
-  const formatDate = useFormatDateInterval('day');
+>(({ context: { metric, interval }, data }) => {
+  const formatDate = useFormatDateInterval(interval);
   const number = useNumber();
 
   return (

apps/dashboard/src/components/overview/useOverviewOptions.ts

@@ -6,7 +6,7 @@ import {
   useQueryState,
 } from 'nuqs';
 
-import { getStorageItem, setStorageItem } from '@/utils/storage';
+import { setStorageItem } from '@/utils/storage';
 import {
   getDefaultIntervalByDates,
   getDefaultIntervalByRange,
@@ -15,7 +15,6 @@ 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;
 
@@ -45,13 +44,6 @@ export function useOverviewOptions() {
     }),
   );
 
-  useEffect(() => {
-    const range = getStorageItem('range', '7d');
-    if (range !== '7d') {
-      setRange(range);
-    }
-  }, []);
-
   const interval =
     overrideInterval ||
     getDefaultIntervalByDates(startDate, endDate) ||