root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(detail): add chart info

Browse Source
This commit is contained in:
hamster1963 2024-12-01 16:17:34 +08:00
parent 671e31c148
commit 391e356f7c
1 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/(main)/ClientComponents/ServerDetailChartClient.tsx
View File

@ -6,7 +6,12 @@ import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progr
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { ChartConfig, ChartContainer } from "@/components/ui/chart"; import { ChartConfig, ChartContainer } from "@/components/ui/chart";
import getEnv from "@/lib/env-entry"; import getEnv from "@/lib/env-entry";
import { formatNezhaInfo, formatRelativeTime, nezhaFetcher } from "@/lib/utils"; import {
formatBytes,
formatNezhaInfo,
formatRelativeTime,
nezhaFetcher,
} from "@/lib/utils";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { import {
@ -339,7 +344,7 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
<Card> <Card>
<CardContent className="px-6 py-3"> <CardContent className="px-6 py-3">
<section className="flex flex-col gap-1"> <section className="flex flex-col gap-1">
<div className="flex items-center"> <div className="flex items-center justify-between">
<section className="flex items-center gap-4"> <section className="flex items-center gap-4">
<div className="flex flex-col"> <div className="flex flex-col">
<p className=" text-xs text-muted-foreground">{t("Mem")}</p> <p className=" text-xs text-muted-foreground">{t("Mem")}</p>
@ -368,6 +373,15 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
</div> </div>
</div> </div>
</section> </section>
<section className="flex flex-col items-end gap-0.5">
<div className="flex text-[11px] font-medium items-center gap-2">
{formatBytes(data.status.MemUsed)} /{" "}
{formatBytes(data.host.MemTotal)}
</div>
<div className="flex text-[11px] font-medium items-center gap-2">
swap: {formatBytes(data.status.SwapUsed)}
</div>
</section>
</div> </div>
<ChartContainer <ChartContainer
config={chartConfig} config={chartConfig}
@ -462,17 +476,23 @@ function DiskChart({ data }: { data: NezhaAPISafe }) {
<section className="flex flex-col gap-1"> <section className="flex flex-col gap-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-md font-medium">{t("Disk")}</p> <p className="text-md font-medium">{t("Disk")}</p>
<section className="flex items-center gap-2"> <section className="flex flex-col items-end gap-0.5">
<p className="text-xs text-end w-10 font-medium"> <section className="flex items-center gap-2">
{disk.toFixed(0)}% <p className="text-xs text-end w-10 font-medium">
</p> {disk.toFixed(0)}%
<AnimatedCircularProgressBar </p>
className="size-3 text-[0px]" <AnimatedCircularProgressBar
max={100} className="size-3 text-[0px]"
min={0} max={100}
value={disk} min={0}
primaryColor="hsl(var(--chart-5))" value={disk}
/> primaryColor="hsl(var(--chart-5))"
/>
</section>
<div className="flex text-[11px] font-medium items-center gap-2">
{formatBytes(data.status.DiskUsed)} /{" "}
{formatBytes(data.host.DiskTotal)}
</div>
</section> </section>
</div> </div>
<ChartContainer <ChartContainer