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

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

@@ -8,6 +8,7 @@ import OverviewTopGeo from '@/components/overview/overview-top-geo';
 import OverviewTopPages from '@/components/overview/overview-top-pages';
 import OverviewTopSources from '@/components/overview/overview-top-sources';
 
+import { OverviewHydrateOptions } from '@/components/overview/overview-hydrate-options';
 import { OverviewInterval } from '@/components/overview/overview-interval';
 import OverviewMetrics from '@/components/overview/overview-metrics';
 import { OverviewRange } from '@/components/overview/overview-range';
@@ -21,6 +22,7 @@ interface PageProps {
 export default function Page({ params: { projectId } }: PageProps) {
   return (
     <>
+      <OverviewHydrateOptions />
       <div className="col gap-2 p-4">
         <div className="flex justify-between gap-2">
           <div className="flex gap-2">

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) ||

apps/dashboard/src/hooks/useEventQueryFilters.ts

@@ -59,7 +59,7 @@ export function useEventQueryFilters(options: NuqsOptions = {}) {
         | undefined
         | null
         | (string | number | boolean | undefined | null)[],
-      operator: IChartEventFilterOperator = 'is',
+      operator: IChartEventFilterOperator,
     ) => {
       setFilters((prev) => {
         const exists = prev.find((filter) => filter.name === name);
@@ -80,7 +80,10 @@ export function useEventQueryFilters(options: NuqsOptions = {}) {
             if (filter.name === name) {
               return {
                 ...filter,
-                operator: newValue.length === 0 ? 'isNull' : operator,
+                operator:
+                  !operator && newValue.length === 0
+                    ? 'isNull'
+                    : (operator ?? 'is'),
                 value: newValue,
               };
             }
@@ -93,7 +96,10 @@ export function useEventQueryFilters(options: NuqsOptions = {}) {
           {
             id: name,
             name,
-            operator: newValue.length === 0 ? 'isNull' : operator,
+            operator:
+              !operator && newValue.length === 0
+                ? 'isNull'
+                : (operator ?? 'is'),
             value: newValue,
           },
         ];