jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-09-22 09:27:46 +02:00
Code Issues Packages Projects Releases 2 Wiki Activity

feat: change network packet loss to a red line (#2377)

Browse Source
This commit is contained in:
Sven van Ginkel
2026-09-21 20:49:11 +02:00
committed by GitHub
parent a5f216f425
commit c9de35fad2
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
internal/site/src/components/routes/system/charts/monitors-charts.tsx
View File

@@ -27,6 +27,8 @@ type MonitorChartBaseProps = MonitorChartProps & {
tickFormatter: (value: number) => string tickFormatter: (value: number) => string
contentFormatter: ({ value }: { value: number | string }) => string | number contentFormatter: ({ value }: { value: number | string }) => string | number
domain?: [number | "auto", number | "auto"] domain?: [number | "auto", number | "auto"]
/** Overrides the per-monitor line colors (e.g. a fixed color for single-monitor charts). */
color?: string
} }
function MonitorChart({ function MonitorChart({
@@ -41,6 +43,7 @@ function MonitorChart({
tickFormatter, tickFormatter,
contentFormatter, contentFormatter,
domain, domain,
color,
showFilter = monitors.length > 1, showFilter = monitors.length > 1,
}: MonitorChartBaseProps) { }: MonitorChartBaseProps) {
const storedFilter = useStore($monitorFilter) const storedFilter = useStore($monitorFilter)
@@ -67,11 +70,12 @@ function MonitorChart({
label, label,
dataKey: (record: NetworkMonitorStatsRecord) => record.stats?.[p.id]?.[metric] ?? null, dataKey: (record: NetworkMonitorStatsRecord) => record.stats?.[p.id]?.[metric] ?? null,
dot, dot,
color: count <= 5 ? i + 1 : `hsl(${(i * 360) / count}, var(--chart-saturation), var(--chart-lightness))`, color:
color ?? (count <= 5 ? i + 1 : `hsl(${(i * 360) / count}, var(--chart-saturation), var(--chart-lightness))`),
}) })
} }
return { dataPoints: points, visibleKeys: visibleIDs } return { dataPoints: points, visibleKeys: visibleIDs }
}, [monitors, filter, metric, chartData.chartTime]) }, [monitors, filter, metric, chartData.chartTime, color])
const filteredMonitorStats = useMemo(() => { const filteredMonitorStats = useMemo(() => {
if (!visibleKeys.length) return monitorStats if (!visibleKeys.length) return monitorStats
@@ -200,6 +204,7 @@ export function LossChart({ monitorStats, grid, monitors, chartData, empty, titl
title={title} title={title}
description={t`Packet loss (%)`} description={t`Packet loss (%)`}
domain={[0, 100]} domain={[0, 100]}
color="var(--destructive)"
tickFormatter={(value) => `${toFixedFloat(value, value >= 10 ? 0 : 1)}%`} tickFormatter={(value) => `${toFixedFloat(value, value >= 10 ? 0 : 1)}%`}
contentFormatter={({ value }) => { contentFormatter={({ value }) => {
if (typeof value !== "number") { if (typeof value !== "number") {