From c5776541a0572001afd75ae2e1c2c5761cdfd473 Mon Sep 17 00:00:00 2001
From: Henry Dollman <hank@henrygd.me>
Date: Tue, 23 Jul 2024 14:48:33 -0400
Subject: [PATCH] style / chart axis updates

---
 .../src/components/charts/bandwidth-chart.tsx |  8 ++++++-
 .../components/charts/container-cpu-chart.tsx |  2 +-
 .../src/components/charts/disk-io-chart.tsx   |  2 +-
 hub/site/src/components/table-alerts.tsx      | 22 +++++++++----------
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/hub/site/src/components/charts/bandwidth-chart.tsx b/hub/site/src/components/charts/bandwidth-chart.tsx
index faaf083..5819036 100644
--- a/hub/site/src/components/charts/bandwidth-chart.tsx
+++ b/hub/site/src/components/charts/bandwidth-chart.tsx
@@ -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'}
diff --git a/hub/site/src/components/charts/container-cpu-chart.tsx b/hub/site/src/components/charts/container-cpu-chart.tsx
index 7f2004b..adeb00f 100644
--- a/hub/site/src/components/charts/container-cpu-chart.tsx
+++ b/hub/site/src/components/charts/container-cpu-chart.tsx
@@ -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}
diff --git a/hub/site/src/components/charts/disk-io-chart.tsx b/hub/site/src/components/charts/disk-io-chart.tsx
index 5636c68..9e6085f 100644
--- a/hub/site/src/components/charts/disk-io-chart.tsx
+++ b/hub/site/src/components/charts/disk-io-chart.tsx
@@ -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)
diff --git a/hub/site/src/components/table-alerts.tsx b/hub/site/src/components/table-alerts.tsx
index 0b5ffbf..95bde78 100644
--- a/hub/site/src/components/table-alerts.tsx
+++ b/hub/site/src/components/table-alerts.tsx
@@ -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}`}