wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 17:41:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: overview chart toFixed(2)

Browse Source
This commit is contained in:
hamster1963 2024-12-15 17:00:08 +08:00
parent b5728d18fa
commit e84c9a4a11
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@ -1,5 +1,6 @@
import { useQuery } from "@tanstack/react-query" import { useQuery } from "@tanstack/react-query"
import React, { useCallback } from "react" import React, { useCallback } from "react"
import { useTranslation } from "react-i18next"
import { Route, BrowserRouter as Router, Routes } from "react-router-dom" import { Route, BrowserRouter as Router, Routes } from "react-router-dom"
import Footer from "./components/Footer" import Footer from "./components/Footer"
@ -10,7 +11,6 @@ import ErrorPage from "./pages/ErrorPage"
import NotFound from "./pages/NotFound" import NotFound from "./pages/NotFound"
import Server from "./pages/Server" import Server from "./pages/Server"
import ServerDetail from "./pages/ServerDetail" import ServerDetail from "./pages/ServerDetail"
import { useTranslation } from "react-i18next"
const App: React.FC = () => { const App: React.FC = () => {
const { data: settingData, error } = useQuery({ const { data: settingData, error } = useQuery({
@ -48,7 +48,7 @@ const App: React.FC = () => {
Array.from(tempDiv.childNodes).forEach((node) => { Array.from(tempDiv.childNodes).forEach((node) => {
if (node.nodeType === Node.ELEMENT_NODE) { if (node.nodeType === Node.ELEMENT_NODE) {
const element = node as HTMLElement const element = node as HTMLElement
; (handlers[element.tagName] || handlers.DEFAULT)(element) ;(handlers[element.tagName] || handlers.DEFAULT)(element)
} else if (node.nodeType === Node.TEXT_NODE) { } else if (node.nodeType === Node.TEXT_NODE) {
document.body.appendChild(document.createTextNode(node.textContent || "")) document.body.appendChild(document.createTextNode(node.textContent || ""))
} }

24
src/components/ServerDetailChart.tsx
View File

@ -138,7 +138,7 @@ function GpuChart({ now, gpuStat, gpuName }: { now: number; gpuStat: number; gpu
{gpuName && <p className="text-xs mt-1 mb-1.5">GPU: {gpuName}</p>} {gpuName && <p className="text-xs mt-1 mb-1.5">GPU: {gpuName}</p>}
</section> </section>
<section className="flex items-center gap-2"> <section className="flex items-center gap-2">
<p className="text-xs text-end w-10 font-medium">{gpuStat.toFixed(0)}%</p> <p className="text-xs text-end w-10 font-medium">{gpuStat.toFixed(2)}%</p>
<AnimatedCircularProgressBar <AnimatedCircularProgressBar
className="size-3 text-[0px]" className="size-3 text-[0px]"
max={100} max={100}
@ -229,7 +229,7 @@ function CpuChart({ now, data }: { now: number; data: NezhaServer }) {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-md font-medium">CPU</p> <p className="text-md font-medium">CPU</p>
<section className="flex items-center gap-2"> <section className="flex items-center gap-2">
<p className="text-xs text-end w-10 font-medium">{cpu.toFixed(0)}%</p> <p className="text-xs text-end w-10 font-medium">{cpu.toFixed(2)}%</p>
<AnimatedCircularProgressBar <AnimatedCircularProgressBar
className="size-3 text-[0px]" className="size-3 text-[0px]"
max={100} max={100}
@ -411,7 +411,7 @@ function MemChart({ now, data }: { now: number; data: NezhaServer }) {
value={mem} value={mem}
primaryColor="hsl(var(--chart-8))" primaryColor="hsl(var(--chart-8))"
/> />
<p className="text-xs font-medium">{mem.toFixed(0)}%</p> <p className="text-xs font-medium">{mem.toFixed(2)}%</p>
</div> </div>
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
@ -424,7 +424,7 @@ function MemChart({ now, data }: { now: number; data: NezhaServer }) {
value={swap} value={swap}
primaryColor="hsl(var(--chart-10))" primaryColor="hsl(var(--chart-10))"
/> />
<p className="text-xs font-medium">{swap.toFixed(0)}%</p> <p className="text-xs font-medium">{swap.toFixed(2)}%</p>
</div> </div>
</div> </div>
</section> </section>
@ -642,14 +642,26 @@ function NetworkChart({ now, data }: { now: number; data: NezhaServer }) {
<p className="text-xs text-muted-foreground">{t("serverDetailChart.upload")}</p> <p className="text-xs text-muted-foreground">{t("serverDetailChart.upload")}</p>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-1))]"></span> <span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-1))]"></span>
<p className="text-xs font-medium">{up.toFixed(2)} M/s</p> <p className="text-xs font-medium">
{up >= 1024
? `${(up / 1024).toFixed(2)}G/s`
: up >= 1
? `${up.toFixed(2)}M/s`
: `${(up * 1024).toFixed(2)}K/s`}
</p>
</div> </div>
</div> </div>
<div className="flex flex-col w-20"> <div className="flex flex-col w-20">
<p className=" text-xs text-muted-foreground">{t("serverDetailChart.download")}</p> <p className=" text-xs text-muted-foreground">{t("serverDetailChart.download")}</p>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-4))]"></span> <span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-4))]"></span>
<p className="text-xs font-medium">{down.toFixed(2)} M/s</p> <p className="text-xs font-medium">
{down >= 1024
? `${(down / 1024).toFixed(2)}G/s`
: down >= 1
? `${down.toFixed(2)}M/s`
: `${(down * 1024).toFixed(2)}K/s`}
</p>
</div> </div>
</div> </div>
</section> </section>