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

24
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 { ChartConfig, ChartContainer } from "@/components/ui/chart";
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 { useEffect, useState } from "react";
import {
@ -339,7 +344,7 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
<Card>
<CardContent className="px-6 py-3">
<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">
<div className="flex flex-col">
<p className=" text-xs text-muted-foreground">{t("Mem")}</p>
@ -368,6 +373,15 @@ function MemChart({ data }: { data: NezhaAPISafe }) {
</div>
</div>
</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>
<ChartContainer
config={chartConfig}
@ -462,6 +476,7 @@ function DiskChart({ data }: { data: NezhaAPISafe }) {
<section className="flex flex-col gap-1">
<div className="flex items-center justify-between">
<p className="text-md font-medium">{t("Disk")}</p>
<section className="flex flex-col items-end gap-0.5">
<section className="flex items-center gap-2">
<p className="text-xs text-end w-10 font-medium">
{disk.toFixed(0)}%
@ -474,6 +489,11 @@ function DiskChart({ data }: { data: NezhaAPISafe }) {
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>
</div>
<ChartContainer
config={chartConfig}