feat: improve network chart x-axis tick formatting and display

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

@@ -15,7 +15,6 @@ 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"
@@ -285,12 +284,22 @@ export const NetworkChart = React.memo(function NetworkChart({
             <CartesianGrid vertical={false} />
             <XAxis
               dataKey="created_at"
-              tickLine={false}
+              tickLine={true}
+              tickSize={3}
               axisLine={false}
               tickMargin={8}
-              minTickGap={32}
+              minTickGap={80}
-              interval={"preserveStartEnd"}
+              interval={0}
-              tickFormatter={(value) => formatRelativeTime(value)}
+              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`
+              }}
             />
             <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 shadow-xl",
+          "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",
           className,
         )}
       >
@@ -233,13 +233,14 @@ const ChartTooltipContent = React.forwardRef<
                       {item.value && (
                         <span
                           className={cn(
-                            "ml-2 font-mono font-medium tabular-nums text-foreground",
+                            "ml-2 font-medium tabular-nums text-foreground",
                             payload.length === 1 && "-ml-9",
                           )}
                         >
                           {typeof item.value === "number"
-                            ? item.value.toFixed(3).toLocaleString()
+                            ? item.value.toFixed(2).toLocaleString()
-                            : item.value}
+                            : item.value}{" "}
+                          ms
                         </span>
                       )}
                     </div>

lib/utils.ts

@@ -125,3 +125,13 @@ 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}`
+}