Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-11-18 11:36:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update node-metrics-charts.tsx

Browse Source
This commit is contained in:
MacRimi
2025-11-09 13:07:42 +01:00
parent 0f45424458
commit df83d8a3e5
1 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
AppImage/components/node-metrics-charts.tsx
View File

@@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts" import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
import { Loader2, TrendingUp, MemoryStick } from "lucide-react" import { Loader2, TrendingUp, MemoryStick } from "lucide-react"
import { useIsMobile } from "../hooks/use-mobile"
const TIMEFRAME_OPTIONS = [ const TIMEFRAME_OPTIONS = [
{ value: "hour", label: "1 Hour" }, { value: "hour", label: "1 Hour" },
@@ -69,6 +70,7 @@ export function NodeMetricsCharts() {
const [data, setData] = useState<NodeMetricsData[]>([]) const [data, setData] = useState<NodeMetricsData[]>([])
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null) const [error, setError] = useState<string | null>(null)
const isMobile = useIsMobile()
const [visibleLines, setVisibleLines] = useState({ const [visibleLines, setVisibleLines] = useState({
cpu: { cpu: true, load: true }, cpu: { cpu: true, load: true },
@@ -329,7 +331,7 @@ export function NodeMetricsCharts() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ResponsiveContainer width="100%" height={300}> <ResponsiveContainer width="100%" height={300}>
<AreaChart data={data} margin={{ bottom: 60, left: 30, right: 10 }}> <AreaChart data={data} margin={{ bottom: 60, left: isMobile ? 10 : 30, right: isMobile ? 10 : 10 }}>
<CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" /> <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
<XAxis <XAxis
dataKey="time" dataKey="time"
@@ -346,7 +348,9 @@ export function NodeMetricsCharts() {
stroke="currentColor" stroke="currentColor"
className="text-foreground" className="text-foreground"
tick={{ fill: "currentColor", fontSize: 12 }} tick={{ fill: "currentColor", fontSize: 12 }}
label={{ value: "CPU %", angle: -90, position: "insideLeft", fill: "currentColor" }} label={
isMobile ? undefined : { value: "CPU %", angle: -90, position: "insideLeft", fill: "currentColor" }
}
domain={[0, "dataMax"]} domain={[0, "dataMax"]}
/> />
<YAxis <YAxis
@@ -355,7 +359,9 @@ export function NodeMetricsCharts() {
stroke="currentColor" stroke="currentColor"
className="text-foreground" className="text-foreground"
tick={{ fill: "currentColor", fontSize: 12 }} tick={{ fill: "currentColor", fontSize: 12 }}
label={{ value: "Load", angle: 90, position: "insideRight", fill: "currentColor" }} label={
isMobile ? undefined : { value: "Load", angle: 90, position: "insideRight", fill: "currentColor" }
}
domain={[0, "dataMax"]} domain={[0, "dataMax"]}
/> />
<Tooltip content={<CustomCpuTooltip />} /> <Tooltip content={<CustomCpuTooltip />} />
@@ -397,7 +403,7 @@ export function NodeMetricsCharts() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<ResponsiveContainer width="100%" height={300}> <ResponsiveContainer width="100%" height={300}>
<AreaChart data={data} margin={{ bottom: 60, left: 30, right: 10 }}> <AreaChart data={data} margin={{ bottom: 60, left: isMobile ? 10 : 30, right: 10 }}>
<CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" /> <CartesianGrid strokeDasharray="3 3" stroke="currentColor" className="text-border" />
<XAxis <XAxis
dataKey="time" dataKey="time"
@@ -413,7 +419,9 @@ export function NodeMetricsCharts() {
stroke="currentColor" stroke="currentColor"
className="text-foreground" className="text-foreground"
tick={{ fill: "currentColor", fontSize: 12 }} tick={{ fill: "currentColor", fontSize: 12 }}
label={{ value: "GB", angle: -90, position: "insideLeft", fill: "currentColor" }} label={
isMobile ? undefined : { value: "GB", angle: -90, position: "insideLeft", fill: "currentColor" }
}
domain={[0, "dataMax"]} domain={[0, "dataMax"]}
/> />
<Tooltip content={<CustomMemoryTooltip />} /> <Tooltip content={<CustomMemoryTooltip />} />