fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 01:39:34 +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
className="tracking-tighter"
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}
axisLine={false}
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} />
<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}
tickLine={false}
axisLine={false}

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

@@ -47,7 +47,7 @@ export default function DiskIoChart({
<YAxis
className="tracking-tighter"
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)

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

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