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

feat: chart background color

Browse Source
This commit is contained in:
hamster1963 2024-12-20 13:44:27 +08:00
parent 13915634c5
commit 3a293009a1
2 changed files with 74 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/NetworkChart.tsx
View File

@ -3,7 +3,7 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { fetchMonitor } from "@/lib/nezha-api"
import { formatTime } from "@/lib/utils"
import { cn, formatTime } from "@/lib/utils"
import { formatRelativeTime } from "@/lib/utils"
import { NezhaMonitor, ServerMonitorChart } from "@/types/nezha-api"
import { useQuery } from "@tanstack/react-query"
@ -93,6 +93,10 @@ export const NetworkChartClient = React.memo(function NetworkChart({
const defaultChart = "All"
const customBackgroundImage =
// @ts-expect-error CustomBackgroundImage is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
const [activeChart, setActiveChart] = React.useState(defaultChart)
const [isPeakEnabled, setIsPeakEnabled] = React.useState(false)
@ -236,7 +240,11 @@ export const NetworkChartClient = React.memo(function NetworkChart({
}, [isPeakEnabled, activeChart, formattedData, chartData, chartDataKey, defaultChart])
return (
<Card>
<Card
className={cn({
"bg-card/80": customBackgroundImage,
})}
>
<CardHeader className="flex flex-col items-stretch space-y-0 p-0 sm:flex-row">
<div className="flex flex-none flex-col justify-center gap-1 border-b px-6 py-4">
<CardTitle className="flex flex-none items-center gap-0.5 text-md">{serverName}</CardTitle>

72
src/components/ServerDetailChart.tsx
View File

@ -2,7 +2,7 @@ import { Card, CardContent } from "@/components/ui/card"
import { ChartConfig, ChartContainer } from "@/components/ui/chart"
import { useWebSocketContext } from "@/hooks/use-websocket-context"
import { formatBytes } from "@/lib/format"
import { formatNezhaInfo, formatRelativeTime } from "@/lib/utils"
import { cn, formatNezhaInfo, formatRelativeTime } from "@/lib/utils"
import { NezhaServer, NezhaWebsocketResponse } from "@/types/nezha-api"
import { useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
@ -99,6 +99,10 @@ export default function ServerDetailChart({ server_id }: { server_id: string })
function GpuChart({ now, gpuStat, gpuName }: { now: number; gpuStat: number; gpuName?: string }) {
const [gpuChartData, setGpuChartData] = useState([] as gpuChartData[])
const customBackgroundImage =
// @ts-expect-error CustomBackgroundImage is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
useEffect(() => {
if (gpuStat) {
const timestamp = Date.now().toString()
@ -125,7 +129,11 @@ function GpuChart({ now, gpuStat, gpuName }: { now: number; gpuStat: number; gpu
} satisfies ChartConfig
return (
<Card>
<Card
className={cn({
"bg-card/80": customBackgroundImage,
})}
>
<CardContent className="px-6 py-3">
<section className="flex flex-col gap-1">
<div className="flex items-center justify-between">
@ -173,6 +181,10 @@ function CpuChart({ now, data }: { now: number; data: NezhaServer }) {
const { cpu } = formatNezhaInfo(now, data)
const customBackgroundImage =
// @ts-expect-error CustomBackgroundImage is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
useEffect(() => {
if (data) {
const timestamp = Date.now().toString()
@ -199,7 +211,11 @@ function CpuChart({ now, data }: { now: number; data: NezhaServer }) {
} satisfies ChartConfig
return (
<Card>
<Card
className={cn({
"bg-card/80": customBackgroundImage,
})}
>
<CardContent className="px-6 py-3">
<section className="flex flex-col gap-1">
<div className="flex items-center justify-between">
@ -243,6 +259,10 @@ function ProcessChart({ now, data }: { now: number; data: NezhaServer }) {
const { t } = useTranslation()
const [processChartData, setProcessChartData] = useState([] as processChartData[])
const customBackgroundImage =
// @ts-expect-error CustomBackgroundImage is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
const { process } = formatNezhaInfo(now, data)
useEffect(() => {
@ -271,7 +291,11 @@ function ProcessChart({ now, data }: { now: number; data: NezhaServer }) {
} satisfies ChartConfig
return (
<Card>
<Card
className={cn({
"bg-card/80": customBackgroundImage,
})}
>
<CardContent className="px-6 py-3">
<section className="flex flex-col gap-1">
<div className="flex items-center justify-between">
@ -321,6 +345,10 @@ function MemChart({ now, data }: { now: number; data: NezhaServer }) {
const { t } = useTranslation()
const [memChartData, setMemChartData] = useState([] as memChartData[])
const customBackgroundImage =
// @ts-expect-error CustomBackgroundImage is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
const { mem, swap } = formatNezhaInfo(now, data)
useEffect(() => {
@ -352,7 +380,11 @@ function MemChart({ now, data }: { now: number; data: NezhaServer }) {
} satisfies ChartConfig
return (
<Card>
<Card
className={cn({
"bg-card/80": customBackgroundImage,
})}
>
<CardContent className="px-6 py-3">
<section className="flex flex-col gap-1">
<div className="flex items-center justify-between">
@ -429,6 +461,10 @@ function DiskChart({ now, data }: { now: number; data: NezhaServer }) {
const { t } = useTranslation()
const [diskChartData, setDiskChartData] = useState([] as diskChartData[])
const customBackgroundImage =
// @ts-expect-error CustomBackgroundImage is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
const { disk } = formatNezhaInfo(now, data)
useEffect(() => {
@ -457,7 +493,11 @@ function DiskChart({ now, data }: { now: number; data: NezhaServer }) {
} satisfies ChartConfig
return (
<Card>
<Card
className={cn({
"bg-card/80": customBackgroundImage,
})}
>
<CardContent className="px-6 py-3">
<section className="flex flex-col gap-1">
<div className="flex items-center justify-between">
@ -506,6 +546,10 @@ function NetworkChart({ now, data }: { now: number; data: NezhaServer }) {
const { t } = useTranslation()
const [networkChartData, setNetworkChartData] = useState([] as networkChartData[])
const customBackgroundImage =
// @ts-expect-error CustomBackgroundImage is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
const { up, down } = formatNezhaInfo(now, data)
useEffect(() => {
@ -543,7 +587,11 @@ function NetworkChart({ now, data }: { now: number; data: NezhaServer }) {
} satisfies ChartConfig
return (
<Card>
<Card
className={cn({
"bg-card/80": customBackgroundImage,
})}
>
<CardContent className="px-6 py-3">
<section className="flex flex-col gap-1">
<div className="flex items-center">
@ -612,6 +660,10 @@ function NetworkChart({ now, data }: { now: number; data: NezhaServer }) {
function ConnectChart({ now, data }: { now: number; data: NezhaServer }) {
const [connectChartData, setConnectChartData] = useState([] as connectChartData[])
const customBackgroundImage =
// @ts-expect-error CustomBackgroundImage is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
const { tcp, udp } = formatNezhaInfo(now, data)
useEffect(() => {
@ -643,7 +695,11 @@ function ConnectChart({ now, data }: { now: number; data: NezhaServer }) {
} satisfies ChartConfig
return (
<Card>
<Card
className={cn({
"bg-card/80": customBackgroundImage,
})}
>
<CardContent className="px-6 py-3">
<section className="flex flex-col gap-1">
<div className="flex items-center">