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,6 +24,7 @@ export default function BandwidthChart({
 	}
 
 	return (
+		<div ref={chartRef}>
 			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
 				<AreaChart
 					accessibilityLayer
@@ -35,7 +39,7 @@ export default function BandwidthChart({
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"
-					width={75}
+						width={yAxisWidth}
 						domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
 						tickFormatter={(value) => {
 							if (value >= 100) {
@@ -89,5 +93,6 @@ export default function BandwidthChart({
 					/>
 				</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,6 +62,7 @@ export default function ContainerCpuChart({
 	}
 
 	return (
+		<div ref={chartRef}>
 			<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
 				<AreaChart
 					accessibilityLayer
@@ -72,7 +75,7 @@ export default function ContainerCpuChart({
 					<CartesianGrid vertical={false} />
 					<YAxis
 						// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
-					width={47}
+						width={yAxisWidth}
 						tickLine={false}
 						axisLine={false}
 						unit={'%'}
@@ -114,5 +117,6 @@ export default function ContainerCpuChart({
 					))}
 				</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,6 +62,7 @@ export default function ContainerMemChart({
 	}
 
 	return (
+		<div ref={chartRef}>
 			<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
 				<AreaChart
 					accessibilityLayer
@@ -77,7 +80,7 @@ export default function ContainerMemChart({
 						tickLine={false}
 						axisLine={false}
 						unit={' GB'}
-					width={70}
+						width={yAxisWidth}
 						tickFormatter={(value) => {
 							value = value / 1024
 							return value.toFixed((value * 100) % 1 === 0 ? 1 : 2)
@@ -119,5 +122,6 @@ export default function ContainerMemChart({
 					))}
 				</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,6 +62,7 @@ export default function ContainerCpuChart({
 	}
 
 	return (
+		<div ref={chartRef}>
 			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
 				<AreaChart
 					accessibilityLayer
@@ -72,7 +75,7 @@ export default function ContainerCpuChart({
 					<CartesianGrid vertical={false} />
 					<YAxis
 						// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
-					width={75}
+						width={yAxisWidth}
 						tickLine={false}
 						axisLine={false}
 						unit={' MB'}
@@ -114,7 +117,8 @@ export default function ContainerCpuChart({
 										const received = item?.payload?.[key][1] ?? 0
 										return (
 											<span className="flex">
-											{received.toLocaleString()} MB<span className="opacity-70 ml-0.5"> rx </span>
+												{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>
@@ -143,5 +147,6 @@ export default function ContainerCpuChart({
 					))}
 				</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,12 +24,13 @@ export default function CpuChart({
 	}
 
 	return (
+		<div ref={chartRef}>
 			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
 				<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						// domain={[0, (max: number) => Math.ceil(max)]}
-					width={48}
+						width={yAxisWidth}
 						tickLine={false}
 						axisLine={false}
 						unit={'%'}
@@ -66,5 +70,6 @@ export default function CpuChart({
 					/>
 				</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,6 +37,7 @@ export default function DiskChart({
 	}
 
 	return (
+		<div ref={chartRef}>
 			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
 				<AreaChart
 					accessibilityLayer
@@ -49,7 +52,7 @@ export default function DiskChart({
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"
-					width={diskSize >= 1000 ? 75 : 65}
+						width={yAxisWidth}
 						domain={[0, diskSize]}
 						tickCount={9}
 						tickLine={false}
@@ -89,5 +92,6 @@ export default function DiskChart({
 					/>
 				</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,6 +24,7 @@ export default function DiskIoChart({
 	}
 
 	return (
+		<div ref={chartRef}>
 			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
 				<AreaChart
 					accessibilityLayer
@@ -35,7 +39,7 @@ export default function DiskIoChart({
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"
-					width={75}
+						width={yAxisWidth}
 						domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
 						tickFormatter={(value) => {
 							if (value >= 100) {
@@ -89,5 +93,6 @@ export default function DiskIoChart({
 					/>
 				</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,6 +29,7 @@ export default function MemChart({
 	}
 
 	return (
+		<div ref={chartRef}>
 			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
 				<AreaChart
 					accessibilityLayer
@@ -39,9 +42,8 @@ export default function MemChart({
 					<YAxis
 						// use "ticks" instead of domain / tickcount if need more control
 						domain={[0, totalMem]}
+						width={yAxisWidth}
 						tickLine={false}
-					width={totalMem >= 100 ? 65 : 58}
-					// allowDecimals={false}
 						axisLine={false}
 						unit={' GB'}
 					/>
@@ -93,5 +95,6 @@ export default function MemChart({
 					/>
 				</AreaChart>
 			</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
+}