refactor: centralize date picker component and utilities

Author: x0sina

dashboard/src/components/charts/all-nodes-stacked-bar-chart.tsx

@@ -18,18 +18,7 @@ import { useTheme } from '@/components/common/theme-provider'
 import TimeSelector from './time-selector'
 import NodeStatsModal from '@/components/dialogs/node-stats-modal'
 
-// Helper function to determine period (copied from CostumeBarChart)
-const getPeriodFromDateRange = (range?: DateRange): Period => {
-  if (!range?.from || !range?.to) {
-    return Period.hour // Default to hour if no range
-  }
-  const diffTime = Math.abs(range.to.getTime() - range.from.getTime())
-  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
-  if (diffDays <= 2) {
-    return Period.hour
-  }
-  return Period.day
-}
+import { getPeriodFromDateRange } from '@/utils/datePickerUtils'
 
 function CustomTooltip({ active, payload, chartConfig, dir, period }: TooltipProps<any, any> & { chartConfig?: ChartConfig; dir: string; period?: string }) {
   const { t, i18n } = useTranslation()

dashboard/src/components/charts/area-costume-chart.tsx

@@ -12,6 +12,7 @@ import { Button } from '@/components/ui/button'
 import { Clock, History, Cpu, MemoryStick } from 'lucide-react'
 import { dateUtils } from '@/utils/dateFormatter'
 import { useTheme } from 'next-themes'
+import { getPeriodFromDateRange } from '@/utils/datePickerUtils'
 
 type DataPoint = {
   time: string
@@ -183,18 +184,6 @@ interface AreaCostumeChartProps {
   realtimeStats?: SystemStats | NodeRealtimeStats
 }
 
-const getPeriodFromDateRange = (range?: DateRange): Period => {
-  if (!range?.from || !range?.to) {
-    return Period.hour
-  }
-  const diffTime = Math.abs(range.to.getTime() - range.from.getTime())
-  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
-
-  if (diffDays <= 2) {
-    return Period.hour
-  }
-  return Period.day
-}
 const isSystemStats = (stats: SystemStats | NodeRealtimeStats): stats is SystemStats => {
   return 'total_user' in stats
 }

dashboard/src/components/charts/costume-bar-chart.tsx

@@ -14,6 +14,7 @@ import { TrendingUp, Upload, Download, Calendar } from 'lucide-react'
 import { dateUtils } from '@/utils/dateFormatter'
 import { TooltipProps } from 'recharts'
 import TimeSelector from './time-selector'
+import { getPeriodFromDateRange } from '@/utils/datePickerUtils'
 
 type DataPoint = {
   time: string
@@ -32,21 +33,6 @@ interface CostumeBarChartProps {
   nodeId?: number
 }
 
-// Helper function to determine period (copied from AreaCostumeChart)
-const getPeriodFromDateRange = (range?: DateRange): Period => {
-  if (!range?.from || !range?.to) {
-    return Period.hour // Default to hour if no range
-  }
-  const diffTime = Math.abs(range.to.getTime() - range.from.getTime())
-  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
-
-  if (diffDays <= 2) {
-    // Up to 2 days, use hourly data
-    return Period.hour
-  }
-  return Period.day // More than 2 days, use daily data
-}
-
 function CustomBarTooltip({ active, payload, period }: TooltipProps<any, any> & { period?: string }) {
   const { t, i18n } = useTranslation()
   if (!active || !payload || !payload.length) return null