jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-04-03 19:41:49 +02:00
Code Issues Packages Projects Releases 2 Wiki Activity

fix(hub): ui bug where charts didn't display 1m max until next update

Browse Source
This commit is contained in:
henrygd
2026-03-28 12:16:12 -04:00
parent 9840b99327
commit 8202d746af
3 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
internal/site/src/components/charts/area-chart.tsx
View File

@@ -67,8 +67,8 @@ export default function AreaChartDefault({
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const { isIntersecting, ref } = useIntersectionObserver({ freeze: false })
const sourceData = customData ?? chartData.systemStats
// Only update the rendered data while the chart is visible
const [displayData, setDisplayData] = useState(sourceData)
const [displayMaxToggled, setDisplayMaxToggled] = useState(maxToggled)
// Reduce chart redraws by only updating while visible or when chart time changes
useEffect(() => {
@@ -78,7 +78,10 @@ export default function AreaChartDefault({
if (shouldUpdate) {
setDisplayData(sourceData)
}
}, [displayData, isIntersecting, sourceData])
if (isIntersecting && maxToggled !== displayMaxToggled) {
setDisplayMaxToggled(maxToggled)
}
}, [displayData, displayMaxToggled, isIntersecting, maxToggled, sourceData])
// Use a stable key derived from data point identities and visual properties
const areasKey = dataPoints?.map((d) => `${d.label}:${d.opacity}`).join("\0")
@@ -106,14 +109,14 @@ export default function AreaChartDefault({
/>
)
})
}, [areasKey, maxToggled])
}, [areasKey, displayMaxToggled])
return useMemo(() => {
if (displayData.length === 0) {
return null
}
// if (logRender) {
// console.log("Rendered at", new Date(), "for", dataPoints?.at(0)?.label)
// console.log("Rendered", dataPoints?.map((d) => d.label).join(", "), new Date())
// }
return (
<ChartContainer
@@ -163,5 +166,5 @@ export default function AreaChartDefault({
</AreaChart>
</ChartContainer>
)
}, [displayData, yAxisWidth, showTotal, filter])
}, [displayData, yAxisWidth, filter, Areas])
}

13
internal/site/src/components/charts/line-chart.tsx
View File

@@ -66,8 +66,8 @@ export default function LineChartDefault({
const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
const { isIntersecting, ref } = useIntersectionObserver({ freeze: false })
const sourceData = customData ?? chartData.systemStats
// Only update the rendered data while the chart is visible
const [displayData, setDisplayData] = useState(sourceData)
const [displayMaxToggled, setDisplayMaxToggled] = useState(maxToggled)
// Reduce chart redraws by only updating while visible or when chart time changes
useEffect(() => {
@@ -77,7 +77,10 @@ export default function LineChartDefault({
if (shouldUpdate) {
setDisplayData(sourceData)
}
}, [displayData, isIntersecting, sourceData])
if (isIntersecting && maxToggled !== displayMaxToggled) {
setDisplayMaxToggled(maxToggled)
}
}, [displayData, displayMaxToggled, isIntersecting, maxToggled, sourceData])
// Use a stable key derived from data point identities and visual properties
const linesKey = dataPoints?.map((d) => `${d.label}:${d.strokeOpacity ?? ""}`).join("\0")
@@ -105,14 +108,14 @@ export default function LineChartDefault({
/>
)
})
}, [linesKey, maxToggled])
}, [linesKey, displayMaxToggled])
return useMemo(() => {
if (displayData.length === 0) {
return null
}
// if (logRender) {
// console.log("Rendered at", new Date(), "for", dataPoints?.at(0)?.label)
// console.log("Rendered", dataPoints?.map((d) => d.label).join(", "), new Date())
// }
return (
<ChartContainer
@@ -162,5 +165,5 @@ export default function LineChartDefault({
</LineChart>
</ChartContainer>
)
}, [displayData, yAxisWidth, showTotal, filter, chartData.chartTime])
}, [displayData, yAxisWidth, filter, Lines])
}

6
internal/site/src/components/systemd-table/systemd-table.tsx
View File

@@ -18,7 +18,7 @@ import { listenKeys } from "nanostores"
import { memo, type ReactNode, useEffect, useMemo, useRef, useState } from "react"
import { getStatusColor, systemdTableCols } from "@/components/systemd-table/systemd-table-columns"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Card, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
@@ -161,13 +161,13 @@ export default function SystemdTable({ systemId }: { systemId?: string }) {
<CardTitle className="mb-2">
<Trans>Systemd Services</Trans>
</CardTitle>
<CardDescription className="flex items-center">
<div className="text-sm text-muted-foreground flex items-center flex-wrap">
<Trans>Total: {data.length}</Trans>
<Separator orientation="vertical" className="h-4 mx-2 bg-primary/40" />
<Trans>Failed: {statusTotals[ServiceStatus.Failed]}</Trans>
<Separator orientation="vertical" className="h-4 mx-2 bg-primary/40" />
<Trans>Updated every 10 minutes.</Trans>
</CardDescription>
</div>
</div>
<Input
placeholder={t`Filter...`}