improve y axis annoyances on charts

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

@@ -82,6 +82,7 @@ export default function ContainerCpuChart({
 				>
 					<CartesianGrid vertical={false} />
 					<YAxis
+						className="tracking-tighter"
 						// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
 						width={yAxisWidth}
 						tickLine={false}

hub/site/src/components/charts/container-mem-chart.tsx

@@ -88,6 +88,7 @@ export default function ContainerMemChart({
 				>
 					<CartesianGrid vertical={false} />
 					<YAxis
+						className="tracking-tighter"
 						// domain={[0, (max: number) => Math.ceil(max)]}
 						tickLine={false}
 						axisLine={false}

hub/site/src/components/charts/container-net-chart.tsx

@@ -88,6 +88,7 @@ export default function ContainerCpuChart({
 				>
 					<CartesianGrid vertical={false} />
 					<YAxis
+						className="tracking-tighter"
 						// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
 						width={yAxisWidth}
 						tickLine={false}

hub/site/src/components/charts/cpu-chart.tsx

@@ -21,10 +21,6 @@ export default function CpuChart({
 
 	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
-	// if (!systemData.length || !ticks.length) {
-	// 	return <Spinner />
-	// }
-
 	return (
 		<div ref={chartRef}>
 			<ChartContainer
@@ -36,6 +32,7 @@ export default function CpuChart({
 				<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
 					<CartesianGrid vertical={false} />
 					<YAxis
+						className="tracking-tighter"
 						// domain={[0, (max: number) => Math.ceil(max)]}
 						width={yAxisWidth}
 						tickLine={false}

hub/site/src/components/charts/mem-chart.tsx

@@ -1,13 +1,7 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import {
+import { chartTimeData, cn, formatShortDate, toFixedFloat, useYaxisWidth } from '@/lib/utils'
-	chartTimeData,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	useYaxisWidth,
-} from '@/lib/utils'
 import { useMemo, useRef } from 'react'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
@@ -21,20 +15,15 @@ export default function MemChart({
 	ticks: number[]
 	systemData: SystemStatsRecord[]
 }) {
-	const chartTime = useStore($chartTime)
 	const chartRef = useRef<HTMLDivElement>(null)
 	const yAxisWidth = useYaxisWidth(chartRef)
+	const chartTime = useStore($chartTime)
 
 	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
-	// const totalMem = useMemo(() => {
+	const totalMem = useMemo(() => {
-	// 	const maxMem = Math.ceil(systemData[0]?.stats.m)
+		return toFixedFloat(systemData.at(-1)?.stats.m ?? 0, 1)
-	// 	return maxMem > 2 && maxMem % 2 !== 0 ? maxMem + 1 : maxMem
+	}, [systemData])
-	// }, [systemData])
-
-	// if (!systemData.length || !ticks.length) {
-	// 	return <Spinner />
-	// }
 
 	return (
 		<div ref={chartRef}>
@@ -53,14 +42,17 @@ export default function MemChart({
 					}}
 				>
 					<CartesianGrid vertical={false} />
+					{totalMem && (
 						<YAxis
 							// use "ticks" instead of domain / tickcount if need more control
-						domain={[0, () => toFixedWithoutTrailingZeros(systemData.at(-1)?.stats.m ?? 0.04, 1)]}
+							domain={[0, totalMem]}
+							className="tracking-tighter"
 							width={yAxisWidth}
 							tickLine={false}
 							axisLine={false}
 							unit={' GB'}
 						/>
+					)}
 					<XAxis
 						dataKey="created"
 						domain={[ticks[0], ticks.at(-1)!]}
@@ -93,8 +85,7 @@ export default function MemChart({
 						fill="hsl(var(--chart-2))"
 						fillOpacity={0.4}
 						stroke="hsl(var(--chart-2))"
-						stackId="a"
+						stackId="1"
-						// animationDuration={1200}
 						isAnimationActive={false}
 					/>
 					<Area
@@ -105,8 +96,7 @@ export default function MemChart({
 						fillOpacity={0.2}
 						strokeOpacity={0.3}
 						stroke="hsl(var(--chart-2))"
-						stackId="a"
+						stackId="1"
-						// animationDuration={1200}
 						isAnimationActive={false}
 					/>
 				</AreaChart>

hub/site/src/components/charts/swap-chart.tsx

@@ -38,6 +38,7 @@ export default function SwapChart({
 				<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
 					<CartesianGrid vertical={false} />
 					<YAxis
+						className="tracking-tighter"
 						domain={[0, () => toFixedWithoutTrailingZeros(systemData.at(-1)?.stats.s ?? 0.04, 2)]}
 						width={yAxisWidth}
 						tickLine={false}

hub/site/src/lib/utils.ts

@@ -192,7 +192,7 @@ export function useYaxisWidth(chartRef: React.RefObject<HTMLDivElement>) {
 			if (yAxisElement) {
 				// console.log('yAxisElement', yAxisElement)
 				clearInterval(interval)
-				setYAxisWidth(yAxisElement.getBoundingClientRect().width + 24)
+				setYAxisWidth(yAxisElement.getBoundingClientRect().width + 22)
 			}
 		}, 16)
 		return () => clearInterval(interval)
@@ -221,3 +221,7 @@ export function useClampedIsInViewport(options: HookOptions): [boolean | null, C
 export function toFixedWithoutTrailingZeros(num: number, digits: number) {
 	return parseFloat(num.toFixed(digits)).toString()
 }
+
+export function toFixedFloat(num: number, digits: number) {
+	return parseFloat(num.toFixed(digits))
+}