adapt y axis width in recharts

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

@@ -1,11 +1,12 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
+import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
 import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
+import { useRef } from 'react'
 
 export default function BandwidthChart({
 	ticks,
@@ -14,6 +15,8 @@ export default function BandwidthChart({
 	ticks: number[]
 	systemData: SystemStatsRecord[]
 }) {
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)
 
 	if (!systemData.length || !ticks.length) {
@@ -21,73 +24,75 @@ export default function BandwidthChart({
 	}
 
 	return (
-		<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
+		<div ref={chartRef}>
-			<AreaChart
+			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
-				accessibilityLayer
+				<AreaChart
-				data={systemData}
+					accessibilityLayer
-				margin={{
+					data={systemData}
-					left: 0,
+					margin={{
-					right: 0,
+						left: 0,
-					top: 10,
+						right: 0,
-					bottom: 0,
+						top: 10,
-				}}
+						bottom: 0,
-			>
-				<CartesianGrid vertical={false} />
-				<YAxis
-					className="tracking-tighter"
-					width={75}
-					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}
+					<CartesianGrid vertical={false} />
-					unit={' MB/s'}
+					<YAxis
-				/>
+						className="tracking-tighter"
-				<XAxis
+						width={yAxisWidth}
-					dataKey="created"
+						domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-					domain={[ticks[0], ticks.at(-1)!]}
+						tickFormatter={(value) => {
-					ticks={ticks}
+							if (value >= 100) {
-					type="number"
+								return value.toFixed(0)
-					scale={'time'}
+							}
-					minTickGap={35}
+							return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
-					tickMargin={8}
+						}}
-					axisLine={false}
+						tickLine={false}
-					tickFormatter={chartTimeData[chartTime].format}
+						axisLine={false}
-				/>
+						unit={' MB/s'}
-				<ChartTooltip
+					/>
-					animationEasing="ease-out"
+					<XAxis
-					animationDuration={150}
+						dataKey="created"
-					content={
+						domain={[ticks[0], ticks.at(-1)!]}
-						<ChartTooltipContent
+						ticks={ticks}
-							unit=" MB/s"
+						type="number"
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+						scale={'time'}
-							indicator="line"
+						minTickGap={35}
-						/>
+						tickMargin={8}
-					}
+						axisLine={false}
-				/>
+						tickFormatter={chartTimeData[chartTime].format}
-				<Area
+					/>
-					dataKey="stats.ns"
+					<ChartTooltip
-					name="Sent"
+						animationEasing="ease-out"
-					type="monotoneX"
+						animationDuration={150}
-					fill="hsl(var(--chart-5))"
+						content={
-					fillOpacity={0.4}
+							<ChartTooltipContent
-					stroke="hsl(var(--chart-5))"
+								unit=" MB/s"
-					animationDuration={1200}
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-				/>
+								indicator="line"
-				<Area
+							/>
-					dataKey="stats.nr"
+						}
-					name="Received"
+					/>
-					type="monotoneX"
+					<Area
-					fill="hsl(var(--chart-2))"
+						dataKey="stats.ns"
-					fillOpacity={0.4}
+						name="Sent"
-					stroke="hsl(var(--chart-2))"
+						type="monotoneX"
-					animationDuration={1200}
+						fill="hsl(var(--chart-5))"
-				/>
+						fillOpacity={0.4}
-			</AreaChart>
+						stroke="hsl(var(--chart-5))"
-		</ChartContainer>
+						animationDuration={1200}
+					/>
+					<Area
+						dataKey="stats.nr"
+						name="Received"
+						type="monotoneX"
+						fill="hsl(var(--chart-2))"
+						fillOpacity={0.4}
+						stroke="hsl(var(--chart-2))"
+						animationDuration={1200}
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }

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

@@ -5,8 +5,8 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { useMemo } from 'react'
+import { useMemo, useRef } from 'react'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
+import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
 import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
@@ -18,6 +18,8 @@ export default function ContainerCpuChart({
 	chartData: Record<string, number | string>[]
 	ticks: number[]
 }) {
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)
 
 	const chartConfig = useMemo(() => {
@@ -60,59 +62,61 @@ export default function ContainerCpuChart({
 	}
 
 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+		<div ref={chartRef}>
-			<AreaChart
+			<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
-				accessibilityLayer
+				<AreaChart
-				data={chartData}
+					accessibilityLayer
-				margin={{
+					data={chartData}
-					top: 10,
+					margin={{
-				}}
+						top: 10,
-				reverseStackOrder={true}
+					}}
-			>
+					reverseStackOrder={true}
-				<CartesianGrid vertical={false} />
+				>
-				<YAxis
+					<CartesianGrid vertical={false} />
-					// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
+					<YAxis
-					width={47}
+						// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
-					tickLine={false}
+						width={yAxisWidth}
-					axisLine={false}
+						tickLine={false}
-					unit={'%'}
+						axisLine={false}
-					tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
+						unit={'%'}
-				/>
+						tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
-				<XAxis
-					dataKey="time"
-					domain={[ticks[0], ticks.at(-1)!]}
-					ticks={ticks}
-					type="number"
-					scale={'time'}
-					minTickGap={35}
-					tickMargin={8}
-					axisLine={false}
-					tickFormatter={chartTimeData[chartTime].format}
-				/>
-				<ChartTooltip
-					// cursor={false}
-					animationEasing="ease-out"
-					animationDuration={150}
-					labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
-					// @ts-ignore
-					itemSorter={(a, b) => b.value - a.value}
-					content={<ChartTooltipContent unit="%" indicator="line" />}
-				/>
-				{Object.keys(chartConfig).map((key) => (
-					<Area
-						key={key}
-						// isAnimationActive={chartData.length < 20}
-						animateNewValues={false}
-						animationDuration={1200}
-						dataKey={key}
-						type="monotoneX"
-						fill={chartConfig[key].color}
-						fillOpacity={0.4}
-						stroke={chartConfig[key].color}
-						stackId="a"
 					/>
-				))}
+					<XAxis
-			</AreaChart>
+						dataKey="time"
-		</ChartContainer>
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						// cursor={false}
+						animationEasing="ease-out"
+						animationDuration={150}
+						labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+						// @ts-ignore
+						itemSorter={(a, b) => b.value - a.value}
+						content={<ChartTooltipContent unit="%" indicator="line" />}
+					/>
+					{Object.keys(chartConfig).map((key) => (
+						<Area
+							key={key}
+							// isAnimationActive={chartData.length < 20}
+							animateNewValues={false}
+							animationDuration={1200}
+							dataKey={key}
+							type="monotoneX"
+							fill={chartConfig[key].color}
+							fillOpacity={0.4}
+							stroke={chartConfig[key].color}
+							stackId="a"
+						/>
+					))}
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }

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

@@ -5,8 +5,8 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { useMemo } from 'react'
+import { useMemo, useRef } from 'react'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
+import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
 import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
@@ -18,6 +18,8 @@ export default function ContainerMemChart({
 	chartData: Record<string, number | string>[]
 	ticks: number[]
 }) {
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)
 
 	const chartConfig = useMemo(() => {
@@ -60,64 +62,66 @@ export default function ContainerMemChart({
 	}
 
 	return (
-		<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+		<div ref={chartRef}>
-			<AreaChart
+			<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
-				accessibilityLayer
+				<AreaChart
-				data={chartData}
+					accessibilityLayer
-				reverseStackOrder={true}
+					data={chartData}
-				margin={{
+					reverseStackOrder={true}
-					top: 10,
+					margin={{
-				}}
+						top: 10,
-
-				// reverseStackOrder={true}
-			>
-				<CartesianGrid vertical={false} />
-				<YAxis
-					// domain={[0, (max: number) => Math.ceil(max)]}
-					tickLine={false}
-					axisLine={false}
-					unit={' GB'}
-					width={70}
-					tickFormatter={(value) => {
-						value = value / 1024
-						return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
 					}}
-				/>
+
-				<XAxis
+					// reverseStackOrder={true}
-					dataKey="time"
+				>
-					domain={[ticks[0], ticks.at(-1)!]}
+					<CartesianGrid vertical={false} />
-					ticks={ticks}
+					<YAxis
-					type="number"
+						// domain={[0, (max: number) => Math.ceil(max)]}
-					scale={'time'}
+						tickLine={false}
-					minTickGap={35}
+						axisLine={false}
-					tickMargin={8}
+						unit={' GB'}
-					axisLine={false}
+						width={yAxisWidth}
-					tickFormatter={chartTimeData[chartTime].format}
+						tickFormatter={(value) => {
-				/>
+							value = value / 1024
-				<ChartTooltip
+							return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
-					// cursor={false}
+						}}
-					animationEasing="ease-out"
-					animationDuration={150}
-					labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
-					// @ts-ignore
-					itemSorter={(a, b) => b.value - a.value}
-					content={<ChartTooltipContent unit=" MB" indicator="line" />}
-				/>
-				{Object.keys(chartConfig).map((key) => (
-					<Area
-						key={key}
-						isAnimationActive={chartData.length < 20}
-						animateNewValues={false}
-						animationDuration={1200}
-						dataKey={key}
-						type="monotoneX"
-						fill={chartConfig[key].color}
-						fillOpacity={0.4}
-						stroke={chartConfig[key].color}
-						stackId="a"
 					/>
-				))}
+					<XAxis
-			</AreaChart>
+						dataKey="time"
-		</ChartContainer>
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						// cursor={false}
+						animationEasing="ease-out"
+						animationDuration={150}
+						labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+						// @ts-ignore
+						itemSorter={(a, b) => b.value - a.value}
+						content={<ChartTooltipContent unit=" MB" indicator="line" />}
+					/>
+					{Object.keys(chartConfig).map((key) => (
+						<Area
+							key={key}
+							isAnimationActive={chartData.length < 20}
+							animateNewValues={false}
+							animationDuration={1200}
+							dataKey={key}
+							type="monotoneX"
+							fill={chartConfig[key].color}
+							fillOpacity={0.4}
+							stroke={chartConfig[key].color}
+							stackId="a"
+						/>
+					))}
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }

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

@@ -5,8 +5,8 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { useMemo } from 'react'
+import { useMemo, useRef } from 'react'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
+import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
 import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
@@ -19,6 +19,8 @@ export default function ContainerCpuChart({
 	chartData: Record<string, number | number[]>[]
 	ticks: number[]
 }) {
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)
 
 	const chartConfig = useMemo(() => {
@@ -60,88 +62,91 @@ export default function ContainerCpuChart({
 	}
 
 	return (
-		<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
+		<div ref={chartRef}>
-			<AreaChart
+			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
-				accessibilityLayer
+				<AreaChart
-				data={chartData}
+					accessibilityLayer
-				margin={{
+					data={chartData}
-					top: 10,
+					margin={{
-				}}
+						top: 10,
-				reverseStackOrder={true}
-			>
-				<CartesianGrid vertical={false} />
-				<YAxis
-					// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
-					width={75}
-					tickLine={false}
-					axisLine={false}
-					unit={' MB'}
-					tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
-				/>
-				<XAxis
-					dataKey="time"
-					domain={[ticks[0], ticks.at(-1)!]}
-					ticks={ticks}
-					type="number"
-					scale={'time'}
-					minTickGap={35}
-					tickMargin={8}
-					axisLine={false}
-					tickFormatter={chartTimeData[chartTime].format}
-				/>
-				<ChartTooltip
-					// cursor={false}
-					animationEasing="ease-out"
-					animationDuration={150}
-					labelFormatter={(_, data) => {
-						return (
-							<span>
-								{formatShortDate(data[0].payload.time)}
-								<br />
-								<small className="opacity-70">Total MB received / transmitted</small>
-							</span>
-						)
 					}}
-					// @ts-ignore
+					reverseStackOrder={true}
-
+				>
-					itemSorter={(a, b) => b.value - a.value}
+					<CartesianGrid vertical={false} />
-					content={
+					<YAxis
-						<ChartTooltipContent
+						// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
-							indicator="line"
+						width={yAxisWidth}
-							contentFormatter={(item, key) => {
+						tickLine={false}
-								try {
+						axisLine={false}
-									const sent = item?.payload?.[key][0] ?? 0
+						unit={' MB'}
-									const received = item?.payload?.[key][1] ?? 0
+						tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
-									return (
-										<span className="flex">
-											{received.toLocaleString()} MB<span className="opacity-70 ml-0.5"> rx </span>
-											<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
-											{sent.toLocaleString()} MB<span className="opacity-70 ml-0.5"> tx</span>
-										</span>
-									)
-								} catch (e) {
-									return null
-								}
-							}}
-						/>
-					}
-				/>
-				{Object.keys(chartConfig).map((key) => (
-					<Area
-						key={key}
-						name={key}
-						// isAnimationActive={chartData.length < 20}
-						animateNewValues={false}
-						animationDuration={1200}
-						dataKey={(data) => data?.[key]?.[2] ?? 0}
-						type="monotoneX"
-						fill={chartConfig[key].color}
-						fillOpacity={0.4}
-						stroke={chartConfig[key].color}
-						stackId="a"
 					/>
-				))}
+					<XAxis
-			</AreaChart>
+						dataKey="time"
-		</ChartContainer>
+						domain={[ticks[0], ticks.at(-1)!]}
+						ticks={ticks}
+						type="number"
+						scale={'time'}
+						minTickGap={35}
+						tickMargin={8}
+						axisLine={false}
+						tickFormatter={chartTimeData[chartTime].format}
+					/>
+					<ChartTooltip
+						// cursor={false}
+						animationEasing="ease-out"
+						animationDuration={150}
+						labelFormatter={(_, data) => {
+							return (
+								<span>
+									{formatShortDate(data[0].payload.time)}
+									<br />
+									<small className="opacity-70">Total MB received / transmitted</small>
+								</span>
+							)
+						}}
+						// @ts-ignore
+
+						itemSorter={(a, b) => b.value - a.value}
+						content={
+							<ChartTooltipContent
+								indicator="line"
+								contentFormatter={(item, key) => {
+									try {
+										const sent = item?.payload?.[key][0] ?? 0
+										const received = item?.payload?.[key][1] ?? 0
+										return (
+											<span className="flex">
+												{received.toLocaleString()} MB
+												<span className="opacity-70 ml-0.5"> rx </span>
+												<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
+												{sent.toLocaleString()} MB<span className="opacity-70 ml-0.5"> tx</span>
+											</span>
+										)
+									} catch (e) {
+										return null
+									}
+								}}
+							/>
+						}
+					/>
+					{Object.keys(chartConfig).map((key) => (
+						<Area
+							key={key}
+							name={key}
+							// isAnimationActive={chartData.length < 20}
+							animateNewValues={false}
+							animationDuration={1200}
+							dataKey={(data) => data?.[key]?.[2] ?? 0}
+							type="monotoneX"
+							fill={chartConfig[key].color}
+							fillOpacity={0.4}
+							stroke={chartConfig[key].color}
+							stackId="a"
+						/>
+					))}
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }

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

@@ -1,11 +1,12 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
+import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
 import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
+import { useRef } from 'react'
 
 export default function CpuChart({
 	ticks,
@@ -14,6 +15,8 @@ export default function CpuChart({
 	ticks: number[]
 	systemData: SystemStatsRecord[]
 }) {
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)
 
 	if (!systemData.length || !ticks.length) {
@@ -21,50 +24,52 @@ export default function CpuChart({
 	}
 
 	return (
-		<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
+		<div ref={chartRef}>
-			<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
+			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
-				<CartesianGrid vertical={false} />
+				<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
-				<YAxis
+					<CartesianGrid vertical={false} />
-					// domain={[0, (max: number) => Math.ceil(max)]}
+					<YAxis
-					width={48}
+						// domain={[0, (max: number) => Math.ceil(max)]}
-					tickLine={false}
+						width={yAxisWidth}
-					axisLine={false}
+						tickLine={false}
-					unit={'%'}
+						axisLine={false}
-				/>
+						unit={'%'}
-				<XAxis
+					/>
-					dataKey="created"
+					<XAxis
-					domain={[ticks[0], ticks.at(-1)!]}
+						dataKey="created"
-					ticks={ticks}
+						domain={[ticks[0], ticks.at(-1)!]}
-					type="number"
+						ticks={ticks}
-					scale={'time'}
+						type="number"
-					minTickGap={35}
+						scale={'time'}
-					tickMargin={8}
+						minTickGap={35}
-					axisLine={false}
+						tickMargin={8}
-					tickFormatter={chartTimeData[chartTime].format}
+						axisLine={false}
-				/>
+						tickFormatter={chartTimeData[chartTime].format}
-				<ChartTooltip
+					/>
-					animationEasing="ease-out"
+					<ChartTooltip
-					animationDuration={150}
+						animationEasing="ease-out"
-					content={
+						animationDuration={150}
-						<ChartTooltipContent
+						content={
-							unit="%"
+							<ChartTooltipContent
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								unit="%"
-							indicator="line"
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-						/>
+								indicator="line"
-					}
+							/>
-				/>
+						}
-				<Area
+					/>
-					dataKey="stats.cpu"
+					<Area
-					name="CPU Usage"
+						dataKey="stats.cpu"
-					type="monotoneX"
+						name="CPU Usage"
-					fill="hsl(var(--chart-1))"
+						type="monotoneX"
-					fillOpacity={0.4}
+						fill="hsl(var(--chart-1))"
-					stroke="hsl(var(--chart-1))"
+						fillOpacity={0.4}
-					animationDuration={1200}
+						stroke="hsl(var(--chart-1))"
-					// animationEasing="ease-out"
+						animationDuration={1200}
-					// animateNewValues={false}
+						// animationEasing="ease-out"
-				/>
+						// animateNewValues={false}
-			</AreaChart>
+					/>
-		</ChartContainer>
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }

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

@@ -1,8 +1,8 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
+import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
-import { useMemo } from 'react'
+import { useMemo, useRef } from 'react'
 import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
@@ -15,6 +15,8 @@ export default function DiskChart({
 	ticks: number[]
 	systemData: SystemStatsRecord[]
 }) {
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)
 
 	const diskSize = useMemo(() => {
@@ -35,59 +37,61 @@ export default function DiskChart({
 	}
 
 	return (
-		<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
+		<div ref={chartRef}>
-			<AreaChart
+			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
-				accessibilityLayer
+				<AreaChart
-				data={systemData}
+					accessibilityLayer
-				margin={{
+					data={systemData}
-					left: 0,
+					margin={{
-					right: 0,
+						left: 0,
-					top: 10,
+						right: 0,
-					bottom: 0,
+						top: 10,
-				}}
+						bottom: 0,
-			>
+					}}
-				<CartesianGrid vertical={false} />
+				>
-				<YAxis
+					<CartesianGrid vertical={false} />
-					className="tracking-tighter"
+					<YAxis
-					width={diskSize >= 1000 ? 75 : 65}
+						className="tracking-tighter"
-					domain={[0, diskSize]}
+						width={yAxisWidth}
-					tickCount={9}
+						domain={[0, diskSize]}
-					tickLine={false}
+						tickCount={9}
-					axisLine={false}
+						tickLine={false}
-					unit={' GB'}
+						axisLine={false}
-				/>
+						unit={' GB'}
-				<XAxis
+					/>
-					dataKey="created"
+					<XAxis
-					domain={[ticks[0], ticks.at(-1)!]}
+						dataKey="created"
-					ticks={ticks}
+						domain={[ticks[0], ticks.at(-1)!]}
-					type="number"
+						ticks={ticks}
-					scale={'time'}
+						type="number"
-					minTickGap={35}
+						scale={'time'}
-					tickMargin={8}
+						minTickGap={35}
-					axisLine={false}
+						tickMargin={8}
-					tickFormatter={chartTimeData[chartTime].format}
+						axisLine={false}
-				/>
+						tickFormatter={chartTimeData[chartTime].format}
-				<ChartTooltip
+					/>
-					animationEasing="ease-out"
+					<ChartTooltip
-					animationDuration={150}
+						animationEasing="ease-out"
-					content={
+						animationDuration={150}
-						<ChartTooltipContent
+						content={
-							unit=" GB"
+							<ChartTooltipContent
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								unit=" GB"
-							indicator="line"
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-						/>
+								indicator="line"
-					}
+							/>
-				/>
+						}
-				<Area
+					/>
-					dataKey="stats.du"
+					<Area
-					name="Disk Usage"
+						dataKey="stats.du"
-					type="monotoneX"
+						name="Disk Usage"
-					fill="hsl(var(--chart-4))"
+						type="monotoneX"
-					fillOpacity={0.4}
+						fill="hsl(var(--chart-4))"
-					stroke="hsl(var(--chart-4))"
+						fillOpacity={0.4}
-					animationDuration={1200}
+						stroke="hsl(var(--chart-4))"
-				/>
+						animationDuration={1200}
-			</AreaChart>
+					/>
-		</ChartContainer>
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }

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

@@ -1,11 +1,12 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
+import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
 import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
+import { useRef } from 'react'
 
 export default function DiskIoChart({
 	ticks,
@@ -14,6 +15,8 @@ export default function DiskIoChart({
 	ticks: number[]
 	systemData: SystemStatsRecord[]
 }) {
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)
 
 	if (!systemData.length || !ticks.length) {
@@ -21,73 +24,75 @@ export default function DiskIoChart({
 	}
 
 	return (
-		<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
+		<div ref={chartRef}>
-			<AreaChart
+			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
-				accessibilityLayer
+				<AreaChart
-				data={systemData}
+					accessibilityLayer
-				margin={{
+					data={systemData}
-					left: 0,
+					margin={{
-					right: 0,
+						left: 0,
-					top: 10,
+						right: 0,
-					bottom: 0,
+						top: 10,
-				}}
+						bottom: 0,
-			>
-				<CartesianGrid vertical={false} />
-				<YAxis
-					className="tracking-tighter"
-					width={75}
-					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}
+					<CartesianGrid vertical={false} />
-					unit={' MB/s'}
+					<YAxis
-				/>
+						className="tracking-tighter"
-				<XAxis
+						width={yAxisWidth}
-					dataKey="created"
+						domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-					domain={[ticks[0], ticks.at(-1)!]}
+						tickFormatter={(value) => {
-					ticks={ticks}
+							if (value >= 100) {
-					type="number"
+								return value.toFixed(0)
-					scale={'time'}
+							}
-					minTickGap={35}
+							return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
-					tickMargin={8}
+						}}
-					axisLine={false}
+						tickLine={false}
-					tickFormatter={chartTimeData[chartTime].format}
+						axisLine={false}
-				/>
+						unit={' MB/s'}
-				<ChartTooltip
+					/>
-					animationEasing="ease-out"
+					<XAxis
-					animationDuration={150}
+						dataKey="created"
-					content={
+						domain={[ticks[0], ticks.at(-1)!]}
-						<ChartTooltipContent
+						ticks={ticks}
-							unit=" MB/s"
+						type="number"
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+						scale={'time'}
-							indicator="line"
+						minTickGap={35}
-						/>
+						tickMargin={8}
-					}
+						axisLine={false}
-				/>
+						tickFormatter={chartTimeData[chartTime].format}
-				<Area
+					/>
-					dataKey="stats.dw"
+					<ChartTooltip
-					name="Write"
+						animationEasing="ease-out"
-					type="monotoneX"
+						animationDuration={150}
-					fill="hsl(var(--chart-3))"
+						content={
-					fillOpacity={0.4}
+							<ChartTooltipContent
-					stroke="hsl(var(--chart-3))"
+								unit=" MB/s"
-					animationDuration={1200}
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-				/>
+								indicator="line"
-				<Area
+							/>
-					dataKey="stats.dr"
+						}
-					name="Read"
+					/>
-					type="monotoneX"
+					<Area
-					fill="hsl(var(--chart-1))"
+						dataKey="stats.dw"
-					fillOpacity={0.4}
+						name="Write"
-					stroke="hsl(var(--chart-1))"
+						type="monotoneX"
-					animationDuration={1200}
+						fill="hsl(var(--chart-3))"
-				/>
+						fillOpacity={0.4}
-			</AreaChart>
+						stroke="hsl(var(--chart-3))"
-		</ChartContainer>
+						animationDuration={1200}
+					/>
+					<Area
+						dataKey="stats.dr"
+						name="Read"
+						type="monotoneX"
+						fill="hsl(var(--chart-1))"
+						fillOpacity={0.4}
+						stroke="hsl(var(--chart-1))"
+						animationDuration={1200}
+					/>
+				</AreaChart>
+			</ChartContainer>
+		</div>
 	)
 }

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

@@ -1,8 +1,8 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, formatShortDate } from '@/lib/utils'
+import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
-import { useMemo } from 'react'
+import { useMemo, useRef } from 'react'
 import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
@@ -16,6 +16,8 @@ export default function MemChart({
 	systemData: SystemStatsRecord[]
 }) {
 	const chartTime = useStore($chartTime)
+	const chartRef = useRef<HTMLDivElement>(null)
+	const yAxisWidth = useYaxisWidth(chartRef)
 
 	const totalMem = useMemo(() => {
 		const maxMem = Math.ceil(systemData[0]?.stats.m)
@@ -27,71 +29,72 @@ export default function MemChart({
 	}
 
 	return (
-		<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
+		<div ref={chartRef}>
-			<AreaChart
+			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
-				accessibilityLayer
+				<AreaChart
-				data={systemData}
+					accessibilityLayer
-				margin={{
+					data={systemData}
-					top: 10,
+					margin={{
-				}}
+						top: 10,
-			>
+					}}
-				<CartesianGrid vertical={false} />
+				>
-				<YAxis
+					<CartesianGrid vertical={false} />
-					// use "ticks" instead of domain / tickcount if need more control
+					<YAxis
-					domain={[0, totalMem]}
+						// use "ticks" instead of domain / tickcount if need more control
-					tickLine={false}
+						domain={[0, totalMem]}
-					width={totalMem >= 100 ? 65 : 58}
+						width={yAxisWidth}
-					// allowDecimals={false}
+						tickLine={false}
-					axisLine={false}
+						axisLine={false}
-					unit={' GB'}
+						unit={' GB'}
-				/>
+					/>
-				<XAxis
+					<XAxis
-					dataKey="created"
+						dataKey="created"
-					domain={[ticks[0], ticks.at(-1)!]}
+						domain={[ticks[0], ticks.at(-1)!]}
-					ticks={ticks}
+						ticks={ticks}
-					type="number"
+						type="number"
-					scale={'time'}
+						scale={'time'}
-					minTickGap={35}
+						minTickGap={35}
-					tickMargin={8}
+						tickMargin={8}
-					axisLine={false}
+						axisLine={false}
-					tickFormatter={chartTimeData[chartTime].format}
+						tickFormatter={chartTimeData[chartTime].format}
-				/>
+					/>
-				<ChartTooltip
+					<ChartTooltip
-					// cursor={false}
+						// cursor={false}
-					animationEasing="ease-out"
+						animationEasing="ease-out"
-					animationDuration={150}
+						animationDuration={150}
-					content={
+						content={
-						<ChartTooltipContent
+							<ChartTooltipContent
-							unit=" GB"
+								unit=" GB"
-							// @ts-ignore
+								// @ts-ignore
-							itemSorter={(a, b) => a.name.localeCompare(b.name)}
+								itemSorter={(a, b) => a.name.localeCompare(b.name)}
-							labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
+								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-							indicator="line"
+								indicator="line"
-						/>
+							/>
-					}
+						}
-				/>
+					/>
-				<Area
+					<Area
-					dataKey="stats.mu"
+						dataKey="stats.mu"
-					name="Used"
+						name="Used"
-					type="monotoneX"
+						type="monotoneX"
-					fill="hsl(var(--chart-2))"
+						fill="hsl(var(--chart-2))"
-					fillOpacity={0.4}
+						fillOpacity={0.4}
-					stroke="hsl(var(--chart-2))"
+						stroke="hsl(var(--chart-2))"
-					stackId="a"
+						stackId="a"
-					animationDuration={1200}
+						animationDuration={1200}
-				/>
+					/>
-				<Area
+					<Area
-					dataKey="stats.mb"
+						dataKey="stats.mb"
-					name="Cache / Buffers"
+						name="Cache / Buffers"
-					type="monotoneX"
+						type="monotoneX"
-					fill="hsl(var(--chart-2))"
+						fill="hsl(var(--chart-2))"
-					fillOpacity={0.2}
+						fillOpacity={0.2}
-					strokeOpacity={0.3}
+						strokeOpacity={0.3}
-					stroke="hsl(var(--chart-2))"
+						stroke="hsl(var(--chart-2))"
-					stackId="a"
+						stackId="a"
-					animationDuration={1200}
+						animationDuration={1200}
-				/>
+					/>
-			</AreaChart>
+				</AreaChart>
-		</ChartContainer>
+			</ChartContainer>
+		</div>
 	)
 }

hub/site/src/lib/utils.ts

@@ -6,6 +6,7 @@ import { AlertRecord, ChartTimeData, ChartTimes, SystemRecord } from '@/types'
 import { RecordModel, RecordSubscription } from 'pocketbase'
 import { WritableAtom } from 'nanostores'
 import { timeDay, timeHour } from 'd3-time'
+import { useEffect, useState } from 'react'
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs))
@@ -179,3 +180,20 @@ export const chartTimeData: ChartTimeData = {
 		getOffset: (endTime: Date) => timeDay.offset(endTime, -30),
 	},
 }
+
+/** Hacky solution to set the correct width of the yAxis in recharts */
+export function useYaxisWidth(chartRef: React.RefObject<HTMLDivElement>) {
+	const [yAxisWidth, setYAxisWidth] = useState(90)
+	useEffect(() => {
+		let interval = setInterval(() => {
+			// console.log('chartRef', chartRef.current)
+			const yAxisElement = chartRef?.current?.querySelector('.yAxis')
+			if (yAxisElement) {
+				console.log('yAxisElement', yAxisElement)
+				setYAxisWidth(yAxisElement.getBoundingClientRect().width + 22)
+				clearInterval(interval)
+			}
+		}, 16)
+	}, [])
+	return yAxisWidth
+}