app/(main)/ClientComponents/detail/NetworkChart.tsx

@@ -15,6 +15,7 @@ import { Label } from "@/components/ui/label"
 import { Switch } from "@/components/ui/switch"
 import getEnv from "@/lib/env-entry"
 import { formatTime, nezhaFetcher } from "@/lib/utils"
+import { formatRelativeTime } from "@/lib/utils"
 import { useTranslations } from "next-intl"
 import * as React from "react"
 import { useCallback, useMemo } from "react"
@@ -284,22 +285,12 @@ export const NetworkChart = React.memo(function NetworkChart({
             <CartesianGrid vertical={false} />
             <XAxis
               dataKey="created_at"
-              tickLine={true}
-              tickSize={3}
+              tickLine={false}
               axisLine={false}
               tickMargin={8}
-              minTickGap={80}
-              interval={0}
-              ticks={processedData
-                .filter((item) => {
-                  const date = new Date(item.created_at)
-                  return date.getMinutes() === 0 && date.getHours() % 3 === 0
-                })
-                .map((item) => item.created_at)}
-              tickFormatter={(value) => {
-                const date = new Date(value)
-                return `${date.getHours()}:00`
-              }}
+              minTickGap={32}
+              interval={"preserveStartEnd"}
+              tickFormatter={(value) => formatRelativeTime(value)}
             />
             <YAxis
               tickLine={false}

components/ui/chart.tsx

@@ -164,7 +164,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start overflow-hidden gap-1.5 rounded-sm border border-border/50 bg-stone-100 dark:bg-stone-900 text-xs",
+          "grid min-w-[8rem] items-start overflow-hidden gap-1.5 rounded-sm border border-border/50 bg-stone-100 dark:bg-stone-900 text-xs shadow-xl",
           className,
         )}
       >
@@ -233,14 +233,13 @@ const ChartTooltipContent = React.forwardRef<
                       {item.value && (
                         <span
                           className={cn(
-                            "ml-2 font-medium tabular-nums text-foreground",
+                            "ml-2 font-mono font-medium tabular-nums text-foreground",
                             payload.length === 1 && "-ml-9",
                           )}
                         >
                           {typeof item.value === "number"
-                            ? item.value.toFixed(2).toLocaleString()
-                            : item.value}{" "}
-                          ms
+                            ? item.value.toFixed(3).toLocaleString()
+                            : item.value}
                         </span>
                       )}
                     </div>

lib/utils.ts

@@ -125,13 +125,3 @@ export function formatTime(timestamp: number): string {
   const seconds = date.getSeconds().toString().padStart(2, "0")
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
 }
-
-export function formatTime12(timestamp: number): string {
-  // example: 3:45 PM
-  const date = new Date(timestamp)
-  const hours = date.getHours()
-  const minutes = date.getMinutes()
-  const ampm = hours >= 12 ? "PM" : "AM"
-  const hours12 = hours % 12 || 12
-  return `${hours12}:${minutes.toString().padStart(2, "0")} ${ampm}`
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nezha-dash",
-  "version": "2.7.2",
+  "version": "2.7.1",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3040",
@@ -64,7 +64,7 @@
     "@biomejs/biome": "1.9.4",
     "@next/bundle-analyzer": "^15.1.7",
     "@tailwindcss/postcss": "^4.0.6",
-    "@types/node": "^22.13.4",
+    "@types/node": "^22.13.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "postcss": "^8.5.2",