feat(charts): add '1m' time period option to charts and update date range logic accordingly

Author: x0sina

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

@@ -499,18 +499,18 @@ export function AllNodesStackedBarChart() {
     if (!showCustomRange) {
       const now = new Date()
       let from: Date | undefined
-      if (selectedTime === '12h') {
-        from = new Date(now.getTime() - 12 * 60 * 60 * 1000)
-      } else if (selectedTime === '24h') {
+      if (selectedTime === '24h') {
         from = new Date(now.getTime() - 24 * 60 * 60 * 1000)
       } else if (selectedTime === '3d') {
         from = new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000)
       } else if (selectedTime === '1w') {
         from = new Date(now.getTime() - 6 * 24 * 60 * 60 * 1000)
+      } else if (selectedTime === '1m') {
+        from = new Date(now.getTime() - 29 * 24 * 60 * 60 * 1000)
       }
       if (from) {
-        // For 1w and 3d, set to end of current day to avoid extra bar
-        const to = selectedTime === '1w' || selectedTime === '3d' ? dateUtils.toDayjs(now).endOf('day').toDate() : now
+        // For 1w, 3d, and 1m, set to end of current day to avoid extra bar
+        const to = selectedTime === '1w' || selectedTime === '3d' || selectedTime === '1m' ? dateUtils.toDayjs(now).endOf('day').toDate() : now
         setDateRange({ from, to })
       }
     }

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

@@ -365,18 +365,18 @@ export function CostumeBarChart({ nodeId }: CostumeBarChartProps) {
     if (!showCustomRange) {
       const now = new Date()
       let from: Date | undefined
-      if (selectedTime === '12h') {
-        from = new Date(now.getTime() - 12 * 60 * 60 * 1000)
-      } else if (selectedTime === '24h') {
+      if (selectedTime === '24h') {
         from = new Date(now.getTime() - 24 * 60 * 60 * 1000)
       } else if (selectedTime === '3d') {
         from = new Date(now.getTime() - 3 * 24 * 60 * 60 * 1000)
       } else if (selectedTime === '1w') {
         from = new Date(now.getTime() - 6 * 24 * 60 * 60 * 1000)
+      } else if (selectedTime === '1m') {
+        from = new Date(now.getTime() - 29 * 24 * 60 * 60 * 1000)
       }
       if (from) {
-        // For 1w and 3d, set to end of current day to avoid extra bar
-        const to = selectedTime === '1w' || selectedTime === '3d' ? dateUtils.toDayjs(now).endOf('day').toDate() : now
+        // For 1w, 3d, and 1m, set to end of current day to avoid extra bar
+        const to = selectedTime === '1w' || selectedTime === '3d' || selectedTime === '1m' ? dateUtils.toDayjs(now).endOf('day').toDate() : now
         setDateRange({ from, to })
       }
     }

dashboard/src/components/charts/time-selector.tsx

@@ -12,9 +12,6 @@ export default function TimeSelector({ selectedTime, setSelectedTime }: TimeSele
   return (
     <div className="inline-flex max-h-[50px] max-w-[220px] rounded-md border p-1">
       <ToggleGroup type="single" value={selectedTime} onValueChange={(value: any) => value && setSelectedTime(value)} className="space-x-1">
-        <ToggleGroupItem value="12h" variant="default" className="border-0 bg-transparent px-3 py-1 text-sm">
-          12h
-        </ToggleGroupItem>
         <ToggleGroupItem value="24h" variant="default" className="border-0 bg-transparent px-3 py-1 text-sm">
           24h
         </ToggleGroupItem>
@@ -24,6 +21,9 @@ export default function TimeSelector({ selectedTime, setSelectedTime }: TimeSele
         <ToggleGroupItem value="1w" variant="default" className="border-0 bg-transparent px-3 py-1 text-sm">
           1w
         </ToggleGroupItem>
+        <ToggleGroupItem value="1m" variant="default" className="border-0 bg-transparent px-3 py-1 text-sm">
+          1m
+        </ToggleGroupItem>
       </ToggleGroup>
     </div>
   )

dashboard/src/components/dashboard/data-usage-chart.tsx

@@ -23,11 +23,11 @@ type PeriodOption = {
 }
 
 const PERIOD_KEYS = [
-  { key: '12h', period: 'hour' as Period, amount: 12, unit: 'hour' },
   { key: '24h', period: 'hour' as Period, amount: 24, unit: 'hour' },
   { key: '3d', period: 'day' as Period, amount: 3, unit: 'day' },
   { key: '7d', period: 'day' as Period, amount: 7, unit: 'day' },
   { key: '30d', period: 'day' as Period, amount: 30, unit: 'day' },
+  { key: '1m', period: 'day' as Period, amount: 1, unit: 'month' },
   { key: '3m', period: 'day' as Period, amount: 3, unit: 'month' },
   { key: 'all', period: 'day' as Period, allTime: true },
 ]
@@ -246,7 +246,7 @@ const DataUsageChart = ({ admin_username }: { admin_username?: string }) => {
     ],
     [t],
   )
-  const [periodOption, setPeriodOption] = useState<PeriodOption>(() => PERIOD_OPTIONS[3])
+  const [periodOption, setPeriodOption] = useState<PeriodOption>(() => PERIOD_OPTIONS[2])
 
   // Update periodOption when PERIOD_OPTIONS changes (e.g., language change)
   useEffect(() => {
@@ -334,9 +334,9 @@ const DataUsageChart = ({ admin_username }: { admin_username?: string }) => {
   }, [chartData])
 
   const xAxisInterval = useMemo(() => {
-    // For hours (12h, 24h), show approximately 6-8 labels
+    // For hours (24h), show approximately 8 labels
     if (periodOption.hours) {
-      const targetLabels = periodOption.hours === 12 ? 6 : 8
+      const targetLabels = 8
       return Math.max(1, Math.floor(chartData.length / targetLabels))
     }
 

dashboard/src/components/dialogs/usage-modal.tsx

@@ -21,15 +21,15 @@ import NodeStatsModal from './node-stats-modal'
 import { getPeriodFromDateRange } from '@/utils/datePickerUtils'
 
 // Define allowed period keys
-const PERIOD_KEYS = ['1h', '12h', '24h', '3d', '1w'] as const
+const PERIOD_KEYS = ['1h', '24h', '3d', '1w', '1m'] as const
 type PeriodKey = (typeof PERIOD_KEYS)[number]
 
 const getPeriodMap = (now: number) => ({
   '1h': { period: Period.minute, start: new Date(now - 60 * 60 * 1000) },
-  '12h': { period: Period.hour, start: new Date(now - 12 * 60 * 60 * 1000) },
   '24h': { period: Period.hour, start: new Date(now - 24 * 60 * 60 * 1000) },
   '3d': { period: Period.day, start: new Date(now - 2 * 24 * 60 * 60 * 1000) },
   '1w': { period: Period.day, start: new Date(now - 6 * 24 * 60 * 60 * 1000) },
+  '1m': { period: Period.day, start: new Date(now - 29 * 24 * 60 * 60 * 1000) },
 })
 
 interface UsageModalProps {
@@ -538,12 +538,12 @@ const UsageModal = ({ open, onClose, username }: UsageModalProps) => {
         }
       }
       let filtered = flatStats
-      if ((period === '12h' || period === '24h') && !showCustomRange) {
+      if (period === '24h' && !showCustomRange) {
         if (!start || !end)
           return flatStats.map((point: any) => {
             const dateObj = dateUtils.toDayjs(point.period_start)
             let timeFormat
-            if (period === '12h' || period === '24h' || (showCustomRange && backendPeriod === Period.hour)) {
+            if (period === '24h' || (showCustomRange && backendPeriod === Period.hour)) {
               timeFormat = dateObj.format('HH:mm')
             } else {
               timeFormat = dateObj.format('MM/DD')
@@ -572,7 +572,7 @@ const UsageModal = ({ open, onClose, username }: UsageModalProps) => {
       return filtered.map((point: any) => {
         const dateObj = dateUtils.toDayjs(point.period_start)
         let timeFormat
-        if (period === '12h' || period === '24h' || (showCustomRange && backendPeriod === Period.hour)) {
+        if (period === '24h' || (showCustomRange && backendPeriod === Period.hour)) {
           timeFormat = dateObj.format('HH:mm')
         } else {
           timeFormat = dateObj.format('MM/DD')
@@ -642,10 +642,10 @@ const UsageModal = ({ open, onClose, username }: UsageModalProps) => {
       setShowCustomRange(true)
       const diffHours = (range.to.getTime() - range.from.getTime()) / (1000 * 60 * 60)
       if (diffHours <= 1) setPeriod('1h')
-      else if (diffHours <= 12) setPeriod('12h')
       else if (diffHours <= 24) setPeriod('24h')
       else if (diffHours <= 72) setPeriod('3d')
-      else setPeriod('1w')
+      else if (diffHours <= 168) setPeriod('1w')
+      else setPeriod('1m')
     }
   }, [])