fix wrapping of y axis chart labels

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

@@ -2,18 +2,17 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
 import {
+	useYAxisWidth,
 	chartTimeData,
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
 	twoDecimalString,
-	useYaxisWidth,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
-import { useMemo, useRef } from 'react'
 
 export default function BandwidthChart({
 	ticks,
@@ -22,19 +21,16 @@ export default function BandwidthChart({
 	ticks: number[]
 	systemData: SystemStatsRecord[]
 }) {
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)
-
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
 	return (
-		<div ref={chartRef}>
+		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
 				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
 				<AreaChart
@@ -52,10 +48,13 @@ export default function BandwidthChart({
 						className="tracking-tighter"
 						width={yAxisWidth}
 						// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
+						tickFormatter={(value) => {
+							const val = toFixedWithoutTrailingZeros(value, 2) + ' MB/s'
+							return updateYAxisWidth(val)
+						}}
 						tickLine={false}
 						axisLine={false}
-						unit={' MB/s'}
+						// unit={' MB/s'}
 					/>
 					<XAxis
 						dataKey="created"

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

@@ -5,8 +5,8 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
-import { chartTimeData, cn, formatShortDate, twoDecimalString, useYaxisWidth } from '@/lib/utils'
+import { useYAxisWidth, chartTimeData, cn, formatShortDate, twoDecimalString } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime, $containerFilter } from '@/lib/stores'
@@ -18,12 +18,9 @@ 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 filter = useStore($containerFilter)
-
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
@@ -65,12 +62,12 @@ export default function ContainerCpuChart({
 	// }
 
 	return (
-		<div ref={chartRef}>
+		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
 				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
 				<AreaChart
@@ -89,8 +86,10 @@ export default function ContainerCpuChart({
 						width={yAxisWidth}
 						tickLine={false}
 						axisLine={false}
-						unit={'%'}
+						tickFormatter={(x) => {
-						tickFormatter={(x) => (x % 1 === 0 ? x : x.toFixed(1))}
+							const val = (x % 1 === 0 ? x : x.toFixed(1)) + '%'
+							return updateYAxisWidth(val)
+						}}
 					/>
 					<XAxis
 						dataKey="time"

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

@@ -5,14 +5,14 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 import {
+	useYAxisWidth,
 	chartTimeData,
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
 	twoDecimalString,
-	useYaxisWidth,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
@@ -26,11 +26,8 @@ export default function ContainerMemChart({
 	ticks: number[]
 }) {
 	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
 	const filter = useStore($containerFilter)
-
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
@@ -72,12 +69,12 @@ export default function ContainerMemChart({
 	// }
 
 	return (
-		<div ref={chartRef}>
+		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
 				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
 				<AreaChart
@@ -94,9 +91,11 @@ export default function ContainerMemChart({
 						// domain={[0, (max: number) => Math.ceil(max)]}
 						tickLine={false}
 						axisLine={false}
-						unit={' GB'}
 						width={yAxisWidth}
-						tickFormatter={(value) => toFixedWithoutTrailingZeros(value / 1024, 2)}
+						tickFormatter={(value) => {
+							const val = toFixedWithoutTrailingZeros(value / 1024, 2) + ' GB'
+							return updateYAxisWidth(val)
+						}}
 					/>
 					<XAxis
 						dataKey="time"

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

@@ -5,14 +5,14 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 import {
+	useYAxisWidth,
 	chartTimeData,
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
 	twoDecimalString,
-	useYaxisWidth,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
@@ -27,11 +27,8 @@ export default function ContainerCpuChart({
 	ticks: number[]
 }) {
 	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
 	const filter = useStore($containerFilter)
-
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
@@ -72,12 +69,12 @@ export default function ContainerCpuChart({
 	// }
 
 	return (
-		<div ref={chartRef}>
+		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
 				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
 				<AreaChart
@@ -95,8 +92,10 @@ export default function ContainerCpuChart({
 						width={yAxisWidth}
 						tickLine={false}
 						axisLine={false}
-						unit={' MB/s'}
+						tickFormatter={(value) => {
-						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
+							const val = toFixedWithoutTrailingZeros(value, 2) + ' MB/s'
+							return updateYAxisWidth(val)
+						}}
 					/>
 					<XAxis
 						dataKey="time"

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

@@ -1,12 +1,11 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, cn, formatShortDate, twoDecimalString, useYaxisWidth } from '@/lib/utils'
+import { useYAxisWidth, chartTimeData, cn, formatShortDate, twoDecimalString } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
-import { useMemo, useRef } from 'react'
 
 export default function CpuChart({
 	ticks,
@@ -16,17 +15,14 @@ export default function CpuChart({
 	systemData: SystemStatsRecord[]
 }) {
 	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const yAxisWidth = useYaxisWidth(chartRef)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
 	return (
-		<div ref={chartRef}>
+		<div>
 			<ChartContainer
 				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
 				<AreaChart
@@ -42,7 +38,7 @@ export default function CpuChart({
 						width={yAxisWidth}
 						tickLine={false}
 						axisLine={false}
-						unit={'%'}
+						tickFormatter={(value) => updateYAxisWidth(value + '%')}
 					/>
 					<XAxis
 						dataKey="created"

beszel/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, cn, formatShortDate, twoDecimalString, useYaxisWidth } from '@/lib/utils'
+import { useYAxisWidth, chartTimeData, cn, formatShortDate, twoDecimalString } from '@/lib/utils'
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
@@ -16,22 +16,19 @@ export default function DiskChart({
 	systemData: SystemStatsRecord[]
 }) {
 	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const yAxisWidth = useYaxisWidth(chartRef)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
 	const diskSize = useMemo(() => {
 		return Math.round(systemData.at(-1)?.stats.d ?? NaN)
 	}, [systemData])
 
 	return (
-		<div ref={chartRef}>
+		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
 				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
 				<AreaChart
@@ -53,7 +50,7 @@ export default function DiskChart({
 						minTickGap={6}
 						tickLine={false}
 						axisLine={false}
-						unit={' GB'}
+						tickFormatter={(value) => updateYAxisWidth(value + ' GB')}
 					/>
 					<XAxis
 						dataKey="created"

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

@@ -2,18 +2,17 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
 import {
+	useYAxisWidth,
 	chartTimeData,
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
 	twoDecimalString,
-	useYaxisWidth,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
-import { useMemo, useRef } from 'react'
 
 export default function DiskIoChart({
 	ticks,
@@ -23,22 +22,15 @@ export default function DiskIoChart({
 	systemData: SystemStatsRecord[]
 }) {
 	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const yAxisWidth = useYaxisWidth(chartRef)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
-
-	// if (!systemData.length || !ticks.length) {
-	// 	return <Spinner />
-	// }
 
 	return (
-		<div ref={chartRef}>
+		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
 				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
 				<AreaChart
@@ -56,10 +48,12 @@ export default function DiskIoChart({
 						className="tracking-tighter"
 						width={yAxisWidth}
 						// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
+						tickFormatter={(value) => {
+							const val = toFixedWithoutTrailingZeros(value, 2) + ' MB/s'
+							return updateYAxisWidth(val)
+						}}
 						tickLine={false}
 						axisLine={false}
-						unit={' MB/s'}
 					/>
 					<XAxis
 						dataKey="created"

beszel/site/src/components/charts/extra-fs-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, cn, formatShortDate, twoDecimalString, useYaxisWidth } from '@/lib/utils'
+import { useYAxisWidth, chartTimeData, cn, formatShortDate, twoDecimalString } from '@/lib/utils'
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
@@ -18,10 +18,7 @@ export default function ExFsDiskChart({
 	fs: string
 }) {
 	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const yAxisWidth = useYaxisWidth(chartRef)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
 	const diskSize = useMemo(() => {
 		const size = systemData.at(-1)?.stats.efs?.[fs].d ?? 0
@@ -29,11 +26,11 @@ export default function ExFsDiskChart({
 	}, [systemData])
 
 	return (
-		<div ref={chartRef}>
+		<div>
 			<ChartContainer
 				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
 				<AreaChart
@@ -52,7 +49,7 @@ export default function ExFsDiskChart({
 						minTickGap={6}
 						tickLine={false}
 						axisLine={false}
-						unit={' GB'}
+						tickFormatter={(value) => updateYAxisWidth(value + ' GB')}
 					/>
 					<XAxis
 						dataKey="created"

beszel/site/src/components/charts/extra-fs-disk-io-chart.tsx

@@ -2,18 +2,17 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
 import {
+	useYAxisWidth,
 	chartTimeData,
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
 	twoDecimalString,
-	useYaxisWidth,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
-import { useMemo, useRef } from 'react'
 
 export default function ExFsDiskIoChart({
 	ticks,
@@ -25,22 +24,15 @@ export default function ExFsDiskIoChart({
 	fs: string
 }) {
 	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const yAxisWidth = useYaxisWidth(chartRef)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
-
-	// if (!systemData.length || !ticks.length) {
-	// 	return <Spinner />
-	// }
 
 	return (
-		<div ref={chartRef}>
+		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
 				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
 				<AreaChart
@@ -58,10 +50,12 @@ export default function ExFsDiskIoChart({
 						className="tracking-tighter"
 						width={yAxisWidth}
 						// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
+						tickFormatter={(value) => {
+							const val = toFixedWithoutTrailingZeros(value, 2)
+							return updateYAxisWidth(val + ' MB/s')
+						}}
 						tickLine={false}
 						axisLine={false}
-						unit={' MB/s'}
 					/>
 					<XAxis
 						dataKey="created"

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

@@ -2,14 +2,14 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
 import {
+	useYAxisWidth,
 	chartTimeData,
 	cn,
 	formatShortDate,
 	toFixedFloat,
 	twoDecimalString,
-	useYaxisWidth,
 } from '@/lib/utils'
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
@@ -22,23 +22,20 @@ export default function MemChart({
 	ticks: number[]
 	systemData: SystemStatsRecord[]
 }) {
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)
-
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
 	const totalMem = useMemo(() => {
 		return toFixedFloat(systemData.at(-1)?.stats.m ?? 0, 1)
 	}, [systemData])
 
 	return (
-		<div ref={chartRef}>
+		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
 				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
 				<AreaChart
@@ -58,7 +55,10 @@ export default function MemChart({
 							width={yAxisWidth}
 							tickLine={false}
 							axisLine={false}
-							unit={' GB'}
+							tickFormatter={(value) => {
+								const val = toFixedFloat(value, 1)
+								return updateYAxisWidth(val + ' GB')
+							}}
 						/>
 					)}
 					<XAxis

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

@@ -2,18 +2,17 @@ import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
 import {
+	useYAxisWidth,
 	chartTimeData,
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
 	twoDecimalString,
-	useYaxisWidth,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
-import { useMemo, useRef } from 'react'
 
 export default function SwapChart({
 	ticks,
@@ -23,17 +22,14 @@ export default function SwapChart({
 	systemData: SystemStatsRecord[]
 }) {
 	const chartTime = useStore($chartTime)
-	const chartRef = useRef<HTMLDivElement>(null)
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const yAxisWidth = useYaxisWidth(chartRef)
-
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
 
 	return (
-		<div ref={chartRef}>
+		<div>
 			<ChartContainer
 				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
 				<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
@@ -44,7 +40,7 @@ export default function SwapChart({
 						width={yAxisWidth}
 						tickLine={false}
 						axisLine={false}
-						unit={' GB'}
+						tickFormatter={(value) => updateYAxisWidth(value + ' GB')}
 					/>
 					<XAxis
 						dataKey="created"

beszel/site/src/components/charts/temperature-chart.tsx

@@ -8,17 +8,17 @@ import {
 	ChartTooltipContent,
 } from '@/components/ui/chart'
 import {
+	useYAxisWidth,
 	chartTimeData,
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
 	twoDecimalString,
-	useYaxisWidth,
 } from '@/lib/utils'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 
 export default function TemperatureChart({
 	ticks,
@@ -27,9 +27,8 @@ export default function TemperatureChart({
 	ticks: number[]
 	systemData: SystemStatsRecord[]
 }) {
-	const chartRef = useRef<HTMLDivElement>(null)
-	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
 	/** Format temperature data for chart and assign colors */
 	const newChartData = useMemo(() => {
@@ -55,15 +54,13 @@ export default function TemperatureChart({
 		return chartData
 	}, [systemData])
 
-	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
-
 	return (
-		<div ref={chartRef}>
+		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
 				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisSet,
+					'opacity-100': yAxisWidth,
 				})}
 			>
 				<LineChart
@@ -80,10 +77,12 @@ export default function TemperatureChart({
 					<YAxis
 						className="tracking-tighter"
 						width={yAxisWidth}
-						tickFormatter={(value) => toFixedWithoutTrailingZeros(value, 2)}
+						tickFormatter={(value) => {
+							const val = toFixedWithoutTrailingZeros(value, 2)
+							return updateYAxisWidth(val + ' °C')
+						}}
 						tickLine={false}
 						axisLine={false}
-						unit={' °C'}
 					/>
 					<XAxis
 						dataKey="created"

beszel/site/src/index.css

@@ -88,5 +88,5 @@
 }
 
 .recharts-yAxis {
-	font-variant-numeric: tabular-nums;
+	@apply tabular-nums;
 }

beszel/site/src/lib/utils.ts

@@ -195,22 +195,27 @@ export const chartTimeData: ChartTimeData = {
 	},
 }
 
-/** Hacky solution to set the correct width of the yAxis in recharts */
+/** Sets the correct width of the y axis in recharts based on the longest label */
-export function useYaxisWidth(chartRef: React.RefObject<HTMLDivElement>) {
+export function useYAxisWidth() {
-	const [yAxisWidth, setYAxisWidth] = useState(180)
+	const [yAxisWidth, setYAxisWidth] = useState(0)
-	useEffect(() => {
+	let maxChars = 0
-		let interval = setInterval(() => {
+	let timeout: Timer
-			// console.log('chartRef', chartRef.current)
+	function updateYAxisWidth(str: string) {
-			const yAxisElement = chartRef?.current?.querySelector('.yAxis')
+		if (str.length > maxChars) {
-			if (yAxisElement) {
+			maxChars = str.length
-				// console.log('yAxisElement', yAxisElement)
+			const div = document.createElement('div')
-				clearInterval(interval)
+			div.className = 'text-xs tabular-nums tracking-tighter table sr-only'
-				setYAxisWidth(yAxisElement.getBoundingClientRect().width + 24)
+			div.innerHTML = str
+			clearTimeout(timeout)
+			timeout = setTimeout(() => {
+				document.body.appendChild(div)
+				setYAxisWidth(div.offsetWidth + 24)
+				document.body.removeChild(div)
+			})
 		}
-		}, 16)
+		return str
-		return () => clearInterval(interval)
+	}
-	}, [])
+	return { yAxisWidth, updateYAxisWidth }
-	return yAxisWidth
 }
 
 export function useClampedIsInViewport(options: HookOptions): [boolean | null, CallbackRef] {

beszel/site/src/main.tsx

@@ -1,5 +1,5 @@
 import './index.css'
-import { Suspense, lazy, useEffect } from 'react'
+import { Suspense, lazy, useEffect, StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 import Home from './components/routes/home.tsx'
 import { ThemeProvider } from './components/theme-provider.tsx'
@@ -218,10 +218,10 @@ const Layout = () => {
 ReactDOM.createRoot(document.getElementById('app')!).render(
 	// strict mode in dev mounts / unmounts components twice
 	// and breaks the clipboard dialog
-	//<React.StrictMode>
+	//<StrictMode>
 	<ThemeProvider>
 		<Layout />
 		<Toaster />
 	</ThemeProvider>
-	//</React.StrictMode>
+	//</StrictMode>
 )