Compare commits

...

3 Commits

Author SHA1 Message Date
hamster1963
084f71e4a6 chore: bump version to 2.7.2 2025-02-16 16:03:49 +08:00
hamster1963
cc810dd41c chore: update @types/node to version 22.13.4 2025-02-16 15:57:14 +08:00
hamster1963
c14f371bc2 feat: improve network chart x-axis tick formatting and display 2025-02-16 15:54:40 +08:00
5 changed files with 31 additions and 11 deletions

View File

@ -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}
interval={"preserveStartEnd"}
tickFormatter={(value) => formatRelativeTime(value)}
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`
}}
/>
<YAxis
tickLine={false}

BIN
bun.lockb

Binary file not shown.

View File

@ -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}
? item.value.toFixed(2).toLocaleString()
: item.value}{" "}
ms
</span>
)}
</div>

View File

@ -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}`
}

View File

@ -1,6 +1,6 @@
{
"name": "nezha-dash",
"version": "2.7.1",
"version": "2.7.2",
"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.1",
"@types/node": "^22.13.4",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"postcss": "^8.5.2",