fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 09:49:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

style / chart axis updates

Browse Source
This commit is contained in:
Henry Dollman
2024-07-23 14:48:33 -04:00
parent 5ba7568acf
commit c5776541a0
4 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
hub/site/src/components/charts/bandwidth-chart.tsx
View File

@@ -47,7 +47,13 @@ export default function BandwidthChart({
<YAxis <YAxis
className="tracking-tighter" className="tracking-tighter"
width={75} width={75}
domain={[0, (max: number) => (max < 0.4 ? 0.4 : Math.ceil(max))]} domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
tickFormatter={(value) => {
if (value >= 100) {
return value.toFixed(0)
}
return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
}}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}
unit={' MB/s'} unit={' MB/s'}

2
hub/site/src/components/charts/container-cpu-chart.tsx
View File

@@ -69,7 +69,7 @@ export default function ContainerCpuChart({
> >
<CartesianGrid vertical={false} /> <CartesianGrid vertical={false} />
<YAxis <YAxis
domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]} // domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
width={47} width={47}
tickLine={false} tickLine={false}
axisLine={false} axisLine={false}

2
hub/site/src/components/charts/disk-io-chart.tsx
View File

@@ -47,7 +47,7 @@ export default function DiskIoChart({
<YAxis <YAxis
className="tracking-tighter" className="tracking-tighter"
width={75} width={75}
domain={[0, (max: number) => (max < 0.4 ? 0.4 : Math.ceil(max))]} domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
tickFormatter={(value) => { tickFormatter={(value) => {
if (value >= 100) { if (value >= 100) {
return value.toFixed(0) return value.toFixed(0)

22
hub/site/src/components/table-alerts.tsx
View File

@@ -71,21 +71,21 @@ export default function AlertsButton({ system }: { system: SystemRecord }) {
system={system} system={system}
alerts={systemAlerts} alerts={systemAlerts}
name="CPU" name="CPU"
title="CPU usage" title="CPU Usage"
description="Triggers when CPU usage exceeds a threshold." description="Triggers when CPU usage exceeds a threshold."
/> />
<AlertWithSlider <AlertWithSlider
system={system} system={system}
alerts={systemAlerts} alerts={systemAlerts}
name="Memory" name="Memory"
title="Memory usage" title="Memory Usage"
description="Triggers when memory usage exceeds a threshold." description="Triggers when memory usage exceeds a threshold."
/> />
<AlertWithSlider <AlertWithSlider
system={system} system={system}
alerts={systemAlerts} alerts={systemAlerts}
name="Disk" name="Disk"
title="Disk usage" title="Disk Usage"
description="Triggers when disk usage exceeds a threshold." description="Triggers when disk usage exceeds a threshold."
/> />
</div> </div>
@@ -104,11 +104,11 @@ function AlertStatus({ system, alerts }: { system: SystemRecord; alerts: AlertRe
return ( return (
<label <label
htmlFor="alert-status" htmlFor="alert-status"
className="space-y-2 flex flex-row items-center justify-between rounded-lg border p-4 cursor-pointer" className="flex flex-row items-center justify-between gap-4 rounded-lg border p-4 cursor-pointer"
> >
<div className="grid gap-0.5 select-none"> <div className="grid gap-1 select-none">
<p className="font-medium text-[1.05em]">System status</p> <p className="font-semibold">System Status</p>
<span className="block text-[0.85em] text-foreground opacity-80"> <span className="block text-sm text-foreground opacity-80">
Triggers when status switches between up and down. Triggers when status switches between up and down.
</span> </span>
</div> </div>
@@ -171,13 +171,13 @@ function AlertWithSlider({
<div className="rounded-lg border"> <div className="rounded-lg border">
<label <label
htmlFor={`alert-${name}`} htmlFor={`alert-${name}`}
className={cn('space-y-2 flex flex-row items-center justify-between cursor-pointer p-4', { className={cn('flex flex-row items-center justify-between gap-4 cursor-pointer p-4', {
'pb-0': !!alert, 'pb-0': !!alert,
})} })}
> >
<div className="grid gap-0.5 select-none"> <div className="grid gap-1 select-none">
<p className="font-medium text-[1.05em]">{title}</p> <p className="font-semibold">{title}</p>
<span className="block text-[0.85em] text-foreground opacity-80">{description}</span> <span className="block text-sm text-foreground opacity-80">{description}</span>
</div> </div>
<Switch <Switch
id={`alert-${name}`} id={`alert-${name}`}