simplify container chart data and reduce rerenders

2025-12-17 18:56:17 +01:00 · 2024-10-14 11:48:33 -04:00
parent d53b6be5b9
commit bea37d62b4
11 changed files with 281 additions and 500 deletions
--- a/beszel/site/src/components/charts/area-chart.tsx
+++ b/beszel/site/src/components/charts/area-chart.tsx
@@ -12,7 +12,7 @@ import {
 } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { ChartTimes, SystemStatsRecord } from '@/types'
-import { useMemo } from 'react'
+import { memo, useMemo } from 'react'

 /** [label, key, color, opacity] */
 type DataKeys = [string, string, number, number]
@@ -27,23 +27,28 @@ const getNestedValue = (path: string, max = false, data: any): number | null =>
 		.reduce((acc: any, key: string) => acc?.[key] ?? (data.stats?.cpum ? 0 : null), data)
 }

-export default function AreaChartDefault({
-	ticks,
-	systemData,
-	showMax = false,
+export default memo(function AreaChartDefault({
+	maxToggled = false,
 	unit = ' MB/s',
 	chartName,
-	chartTime,
+	systemChartData,
 }: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
-	showMax?: boolean
+	maxToggled?: boolean
 	unit?: string
 	chartName: string
-	chartTime: ChartTimes
+	systemChartData: {
+		systemStats: SystemStatsRecord[]
+		ticks: number[]
+		domain: number[]
+		chartTime: ChartTimes
+	}
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()

+	const { chartTime } = systemChartData
+
+	const showMax = chartTime !== '1h' && maxToggled
+
 	const dataKeys: DataKeys[] = useMemo(() => {
 		// [label, key, color, opacity]
 		if (chartName === 'CPU Usage') {
@@ -67,6 +72,8 @@ export default function AreaChartDefault({
 		return []
 	}, [])

+	// console.log('Rendered at', new Date())
+
 	return (
 		<div>
 			<ChartContainer
@@ -74,7 +81,7 @@ export default function AreaChartDefault({
 					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart accessibilityLayer data={systemData} margin={chartMargin}>
+				<AreaChart accessibilityLayer data={systemChartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"
@@ -88,11 +95,12 @@ export default function AreaChartDefault({
 					/>
 					<XAxis
 						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
+						domain={systemChartData.domain}
+						ticks={systemChartData.ticks}
+						allowDataOverflow
 						type="number"
-						scale={'time'}
-						minTickGap={35}
+						scale="time"
+						minTickGap={30}
 						tickMargin={8}
 						axisLine={false}
 						tickFormatter={chartTimeData[chartTime].format}
@@ -104,7 +112,7 @@ export default function AreaChartDefault({
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 								contentFormatter={(item) => decimalString(item.value) + unit}
-								indicator="line"
+								// indicator="line"
 							/>
 						}
 					/>
@@ -128,4 +136,4 @@ export default function AreaChartDefault({
 			</ChartContainer>
 		</div>
 	)
-}
+})
--- a/beszel/site/src/components/charts/container-cpu-chart.tsx
+++ b/beszel/site/src/components/charts/container-cpu-chart.tsx
@@ -5,7 +5,7 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { useMemo } from 'react'
+import { memo, useMemo } from 'react'
 import {
 	useYAxisWidth,
 	chartTimeData,
@@ -13,22 +13,32 @@ import {
 	formatShortDate,
 	decimalString,
 	chartMargin,
+	toFixedWithoutTrailingZeros,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
-import { $chartTime, $containerFilter } from '@/lib/stores'
+import { $containerFilter } from '@/lib/stores'
+import { ChartTimes, ContainerStats } from '@/types'

-export default function ContainerCpuChart({
-	chartData,
-	ticks,
+export default memo(function ContainerCpuChart({
+	dataKey,
+	unit = '%',
+	containerChartData,
 }: {
-	chartData: Record<string, number | string>[]
-	ticks: number[]
+	dataKey: string
+	unit?: string
+	containerChartData: {
+		containerData: Record<string, number | ContainerStats>[]
+		ticks: number[]
+		domain: number[]
+		chartTime: ChartTimes
+	}
 }) {
-	const chartTime = useStore($chartTime)
 	const filter = useStore($containerFilter)
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()

+	const { containerData, ticks, domain, chartTime } = containerChartData
+
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
 			string,
@@ -38,16 +48,16 @@ export default function ContainerCpuChart({
 			}
 		>
 		const totalUsage = {} as Record<string, number>
-		for (let stats of chartData) {
+		for (let stats of containerData) {
 			for (let key in stats) {
-				if (key === 'time') {
+				if (!key || typeof stats[key] === 'number') {
 					continue
 				}
 				if (!(key in totalUsage)) {
 					totalUsage[key] = 0
 				}
 				// @ts-ignore
-				totalUsage[key] += stats[key]
+				totalUsage[key] += stats[key]?.[dataKey] ?? 0
 			}
 		}
 		let keys = Object.keys(totalUsage)
@@ -62,15 +72,12 @@ export default function ContainerCpuChart({
 			}
 		}
 		return config satisfies ChartConfig
-	}, [chartData])
+	}, [containerChartData])

-	// if (!chartData.length || !ticks.length) {
-	// 	return <Spinner />
-	// }
+	// console.log('rendered at', new Date())

 	return (
 		<div>
-			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
 					'opacity-100': yAxisWidth,
@@ -79,45 +86,44 @@ export default function ContainerCpuChart({
 				<AreaChart
 					accessibilityLayer
 					// syncId={'cpu'}
-					data={chartData}
+					data={containerData}
 					margin={chartMargin}
 					reverseStackOrder={true}
 				>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"
-						// domain={[0, (max: number) => Math.max(Math.ceil(max), 0.4)]}
 						width={yAxisWidth}
-						tickLine={false}
-						axisLine={false}
-						tickFormatter={(x) => {
-							const val = (x % 1 === 0 ? x : x.toFixed(1)) + '%'
+						tickFormatter={(value) => {
+							const val = toFixedWithoutTrailingZeros(value, 2) + unit
 							return updateYAxisWidth(val)
 						}}
+						tickLine={false}
+						axisLine={false}
 					/>
 					<XAxis
-						dataKey="time"
-						domain={[ticks[0], ticks.at(-1)!]}
+						dataKey="created"
+						domain={domain}
+						allowDataOverflow
 						ticks={ticks}
 						type="number"
-						scale={'time'}
+						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)}
+						labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 						// @ts-ignore
 						itemSorter={(a, b) => b.value - a.value}
 						content={
 							<ChartTooltipContent
 								filter={filter}
-								contentFormatter={(item) => decimalString(item.value) + '%'}
-								indicator="line"
+								contentFormatter={(item) => decimalString(item.value) + unit}
+								// indicator="line"
 							/>
 						}
 					/>
@@ -129,7 +135,8 @@ export default function ContainerCpuChart({
 							<Area
 								key={key}
 								isAnimationActive={false}
-								dataKey={key}
+								dataKey={`${key}.${dataKey}`}
+								name={key}
 								type="monotoneX"
 								fill={chartConfig[key].color}
 								fillOpacity={fillOpacity}
@@ -144,4 +151,4 @@ export default function ContainerCpuChart({
 			</ChartContainer>
 		</div>
 	)
-}
+})
--- a/beszel/site/src/components/charts/container-mem-chart.tsx
+++ b/beszel/site/src/components/charts/container-mem-chart.tsx
@@ -1,147 +0,0 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
-import { useMemo } from 'react'
-import {
-	useYAxisWidth,
-	chartTimeData,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	decimalString,
-	chartMargin,
-} from '@/lib/utils'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime, $containerFilter } from '@/lib/stores'
-
-export default function ContainerMemChart({
-	chartData,
-	ticks,
-}: {
-	chartData: Record<string, number | string>[]
-	ticks: number[]
-}) {
-	const chartTime = useStore($chartTime)
-	const filter = useStore($containerFilter)
-	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-
-	const chartConfig = useMemo(() => {
-		let config = {} as Record<
-			string,
-			{
-				label: string
-				color: string
-			}
-		>
-		const totalUsage = {} as Record<string, number>
-		for (let stats of chartData) {
-			for (let key in stats) {
-				if (key === 'time') {
-					continue
-				}
-				if (!(key in totalUsage)) {
-					totalUsage[key] = 0
-				}
-				// @ts-ignore
-				totalUsage[key] += stats[key]
-			}
-		}
-		let keys = Object.keys(totalUsage)
-		keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
-		const length = keys.length
-		for (let i = 0; i < length; i++) {
-			const key = keys[i]
-			const hue = ((i * 360) / length) % 360
-			config[key] = {
-				label: key,
-				color: `hsl(${hue}, 60%, 55%)`,
-			}
-		}
-		return config satisfies ChartConfig
-	}, [chartData])
-
-	// if (!chartData.length || !ticks.length) {
-	// 	return <Spinner />
-	// }
-
-	return (
-		<div>
-			{/* {!yAxisSet && <Spinner />} */}
-			<ChartContainer
-				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisWidth,
-				})}
-			>
-				<AreaChart
-					accessibilityLayer
-					data={chartData}
-					reverseStackOrder={true}
-					margin={chartMargin}
-				>
-					<CartesianGrid vertical={false} />
-					<YAxis
-						className="tracking-tighter"
-						// domain={[0, (max: number) => Math.ceil(max)]}
-						tickLine={false}
-						axisLine={false}
-						width={yAxisWidth}
-						tickFormatter={(value) => {
-							const val = toFixedWithoutTrailingZeros(value / 1024, 2) + ' GB'
-							return updateYAxisWidth(val)
-						}}
-					/>
-					<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
-								filter={filter}
-								contentFormatter={(item) => decimalString(item.value) + ' MB'}
-								indicator="line"
-							/>
-						}
-					/>
-					{Object.keys(chartConfig).map((key) => {
-						const filtered = filter && !key.includes(filter)
-						let fillOpacity = filtered ? 0.05 : 0.4
-						let strokeOpacity = filtered ? 0.1 : 1
-						return (
-							<Area
-								key={key}
-								isAnimationActive={false}
-								dataKey={key}
-								type="monotoneX"
-								fill={chartConfig[key].color}
-								strokeOpacity={strokeOpacity}
-								fillOpacity={fillOpacity}
-								stroke={chartConfig[key].color}
-								activeDot={filtered ? false : {}}
-								stackId="a"
-							/>
-						)
-					})}
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-}
--- a/beszel/site/src/components/charts/container-net-chart.tsx
+++ b/beszel/site/src/components/charts/container-net-chart.tsx
@@ -5,7 +5,7 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from '@/components/ui/chart'
-import { useMemo } from 'react'
+import { memo, useMemo } from 'react'
 import {
 	useYAxisWidth,
 	chartTimeData,
@@ -15,22 +15,26 @@ import {
 	decimalString,
 	chartMargin,
 } from '@/lib/utils'
-// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
-import { $chartTime, $containerFilter } from '@/lib/stores'
+import { $containerFilter } from '@/lib/stores'
 import { Separator } from '@/components/ui/separator'
+import { ChartTimes, ContainerStats } from '@/types'

-export default function ContainerCpuChart({
-	chartData,
-	ticks,
+export default memo(function ContainerCpuChart({
+	containerChartData,
 }: {
-	chartData: Record<string, number | number[]>[]
-	ticks: number[]
+	containerChartData: {
+		containerData: Record<string, ContainerStats | number>[]
+		ticks: number[]
+		domain: number[]
+		chartTime: ChartTimes
+	}
 }) {
-	const chartTime = useStore($chartTime)
 	const filter = useStore($containerFilter)
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()

+	const { containerData, ticks, domain, chartTime } = containerChartData
+
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
 			string,
@@ -40,15 +44,16 @@ export default function ContainerCpuChart({
 			}
 		>
 		const totalUsage = {} as Record<string, number>
-		for (let stats of chartData) {
+		for (let stats of containerData) {
 			for (let key in stats) {
-				if (!Array.isArray(stats[key])) {
+				// continue if number and not container stats
+				if (!key || typeof stats[key] === 'number') {
 					continue
 				}
 				if (!(key in totalUsage)) {
 					totalUsage[key] = 0
 				}
-				totalUsage[key] += stats[key][2] ?? 0
+				totalUsage[key] += stats[key]?.ns ?? 0 + stats[key]?.nr ?? 0
 			}
 		}
 		let keys = Object.keys(totalUsage)
@@ -63,7 +68,9 @@ export default function ContainerCpuChart({
 			}
 		}
 		return config satisfies ChartConfig
-	}, [chartData])
+	}, [containerChartData])
+
+	// console.log('rendered at', new Date())

 	return (
 		<div>
@@ -75,7 +82,7 @@ export default function ContainerCpuChart({
 			>
 				<AreaChart
 					accessibilityLayer
-					data={chartData}
+					data={containerData}
 					margin={chartMargin}
 					reverseStackOrder={true}
 				>
@@ -92,11 +99,12 @@ export default function ContainerCpuChart({
 						}}
 					/>
 					<XAxis
-						dataKey="time"
-						domain={[ticks[0], ticks.at(-1)!]}
+						dataKey="created"
+						domain={domain}
+						allowDataOverflow
 						ticks={ticks}
 						type="number"
-						scale={'time'}
+						scale="time"
 						minTickGap={35}
 						tickMargin={8}
 						axisLine={false}
@@ -106,17 +114,17 @@ export default function ContainerCpuChart({
 						// cursor={false}
 						animationEasing="ease-out"
 						animationDuration={150}
-						labelFormatter={(_, data) => formatShortDate(data[0].payload.time)}
+						labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 						// @ts-ignore
 						itemSorter={(a, b) => b.value - a.value}
 						content={
 							<ChartTooltipContent
 								filter={filter}
-								indicator="line"
+								// indicator="line"
 								contentFormatter={(item, key) => {
 									try {
-										const sent = item?.payload?.[key][0] ?? 0
-										const received = item?.payload?.[key][1] ?? 0
+										const sent = item?.payload?.[key]?.ns ?? 0
+										const received = item?.payload?.[key]?.nr ?? 0
 										return (
 											<span className="flex">
 												{decimalString(received)} MB/s
@@ -140,9 +148,8 @@ export default function ContainerCpuChart({
 							<Area
 								key={key}
 								name={key}
-								// animationDuration={1200}
 								isAnimationActive={false}
-								dataKey={(data) => data?.[key]?.[2] ?? 0}
+								dataKey={(data) => data?.[key]?.ns ?? 0 + data?.[key]?.nr ?? 0}
 								type="monotoneX"
 								fill={chartConfig[key].color}
 								fillOpacity={fillOpacity}
@@ -157,4 +164,4 @@ export default function ContainerCpuChart({
 			</ChartContainer>
 		</div>
 	)
-}
+})
--- a/beszel/site/src/components/charts/cpu-chart.tsx
+++ b/beszel/site/src/components/charts/cpu-chart.tsx
@@ -1,91 +0,0 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import {
-	useYAxisWidth,
-	chartTimeData,
-	cn,
-	formatShortDate,
-	decimalString,
-	chartMargin,
-} from '@/lib/utils'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime, $cpuMax } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
-import { useMemo } from 'react'
-
-export default function CpuChart({
-	ticks,
-	systemData,
-}: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
-}) {
-	const chartTime = useStore($chartTime)
-	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-	const showMax = useStore($cpuMax)
-
-	const dataKey = useMemo(
-		() => `stats.cpu${showMax && chartTime !== '1h' ? 'm' : ''}`,
-		[showMax, systemData]
-	)
-
-	return (
-		<div>
-			<ChartContainer
-				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisWidth,
-				})}
-			>
-				<AreaChart
-					accessibilityLayer
-					data={systemData}
-					margin={chartMargin}
-					// syncId={'cpu'}
-				>
-					<CartesianGrid vertical={false} />
-					<YAxis
-						className="tracking-tighter"
-						// domain={[0, (max: number) => Math.ceil(max)]}
-						width={yAxisWidth}
-						tickLine={false}
-						axisLine={false}
-						tickFormatter={(value) => updateYAxisWidth(value + '%')}
-					/>
-					<XAxis
-						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
-						type="number"
-						scale={'time'}
-						minTickGap={35}
-						tickMargin={8}
-						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
-					/>
-					<ChartTooltip
-						animationEasing="ease-out"
-						animationDuration={150}
-						content={
-							<ChartTooltipContent
-								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => decimalString(item.value) + '%'}
-								indicator="line"
-							/>
-						}
-					/>
-					<Area
-						dataKey={dataKey}
-						name="CPU Usage"
-						type="monotoneX"
-						fill="hsl(var(--chart-1))"
-						fillOpacity={0.4}
-						stroke="hsl(var(--chart-1))"
-						isAnimationActive={false}
-					/>
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-}
--- a/beszel/site/src/components/charts/disk-chart.tsx
+++ b/beszel/site/src/components/charts/disk-chart.tsx
@@ -12,35 +12,35 @@ import {
 	getSizeUnit,
 	chartMargin,
 } from '@/lib/utils'
-// import { useMemo } from 'react'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
+import { ChartTimes, SystemStatsRecord } from '@/types'
+import { memo } from 'react'

-export default function DiskChart({
-	ticks,
-	systemData,
+export default memo(function DiskChart({
 	dataKey,
 	diskSize,
+	systemChartData,
 }: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
 	dataKey: string
 	diskSize: number
+	systemChartData: {
+		systemStats: SystemStatsRecord[]
+		ticks: number[]
+		domain: number[]
+		chartTime: ChartTimes
+	}
 }) {
-	const chartTime = useStore($chartTime)
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()

+	// console.log('rendered at', new Date())
+
 	return (
 		<div>
-			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
 					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart accessibilityLayer data={systemData} margin={chartMargin}>
+				<AreaChart accessibilityLayer data={systemChartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"
@@ -56,14 +56,15 @@ export default function DiskChart({
 					/>
 					<XAxis
 						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
+						domain={systemChartData.domain}
+						ticks={systemChartData.ticks}
+						allowDataOverflow
 						type="number"
-						scale={'time'}
-						minTickGap={35}
+						scale="time"
+						minTickGap={30}
 						tickMargin={8}
 						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
+						tickFormatter={chartTimeData[systemChartData.chartTime].format}
 					/>
 					<ChartTooltip
 						animationEasing="ease-out"
@@ -74,7 +75,7 @@ export default function DiskChart({
 								contentFormatter={({ value }) =>
 									decimalString(getSizeVal(value)) + getSizeUnit(value)
 								}
-								indicator="line"
+								// indicator="line"
 							/>
 						}
 					/>
@@ -92,4 +93,4 @@ export default function DiskChart({
 			</ChartContainer>
 		</div>
 	)
-}
+})
--- a/beszel/site/src/components/charts/mem-chart.tsx
+++ b/beszel/site/src/components/charts/mem-chart.tsx
@@ -10,24 +10,24 @@ import {
 	formatShortDate,
 	chartMargin,
 } from '@/lib/utils'
-import { useMemo } from 'react'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
+import { memo } from 'react'
+import { ChartTimes, SystemStatsRecord } from '@/types'

-export default function MemChart({
-	ticks,
-	systemData,
+export default memo(function MemChart({
+	systemChartData,
 }: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
+	systemChartData: {
+		systemStats: SystemStatsRecord[]
+		ticks: number[]
+		domain: number[]
+		chartTime: ChartTimes
+	}
 }) {
-	const chartTime = useStore($chartTime)
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()

-	const totalMem = useMemo(() => {
-		return toFixedFloat(systemData.at(-1)?.stats.m ?? 0, 1)
-	}, [systemData])
+	const totalMem = toFixedFloat(systemChartData.systemStats.at(-1)?.stats.m ?? 0, 1)
+
+	// console.log('rendered at', new Date())

 	return (
 		<div>
@@ -37,7 +37,7 @@ export default function MemChart({
 					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart accessibilityLayer data={systemData} margin={chartMargin}>
+				<AreaChart accessibilityLayer data={systemChartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					{totalMem && (
 						<YAxis
@@ -56,14 +56,15 @@ export default function MemChart({
 					)}
 					<XAxis
 						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
+						domain={systemChartData.domain}
+						ticks={systemChartData.ticks}
+						allowDataOverflow
 						type="number"
-						scale={'time'}
-						minTickGap={35}
+						scale="time"
+						minTickGap={30}
 						tickMargin={8}
 						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
+						tickFormatter={chartTimeData[systemChartData.chartTime].format}
 					/>
 					<ChartTooltip
 						// cursor={false}
@@ -75,7 +76,7 @@ export default function MemChart({
 								itemSorter={(a, b) => a.order - b.order}
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 								contentFormatter={(item) => decimalString(item.value) + ' GB'}
-								indicator="line"
+								// indicator="line"
 							/>
 						}
 					/>
@@ -90,7 +91,7 @@ export default function MemChart({
 						stackId="1"
 						isAnimationActive={false}
 					/>
-					{systemData.at(-1)?.stats.mz && (
+					{systemChartData.systemStats.at(-1)?.stats.mz && (
 						<Area
 							name="ZFS ARC"
 							order={2}
@@ -119,4 +120,4 @@ export default function MemChart({
 			</ChartContainer>
 		</div>
 	)
-}
+})
--- a/beszel/site/src/components/charts/swap-chart.tsx
+++ b/beszel/site/src/components/charts/swap-chart.tsx
@@ -10,18 +10,19 @@ import {
 	decimalString,
 	chartMargin,
 } from '@/lib/utils'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
+import { ChartTimes, SystemStatsRecord } from '@/types'
+import { memo } from 'react'

-export default function SwapChart({
-	ticks,
-	systemData,
+export default memo(function SwapChart({
+	systemChartData,
 }: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
+	systemChartData: {
+		systemStats: SystemStatsRecord[]
+		ticks: number[]
+		domain: number[]
+		chartTime: ChartTimes
+	}
 }) {
-	const chartTime = useStore($chartTime)
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()

 	return (
@@ -31,11 +32,15 @@ export default function SwapChart({
 					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart accessibilityLayer data={systemData} margin={chartMargin}>
+				<AreaChart accessibilityLayer data={systemChartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"
-						domain={[0, () => toFixedWithoutTrailingZeros(systemData.at(-1)?.stats.s ?? 0.04, 2)]}
+						domain={[
+							0,
+							() =>
+								toFixedWithoutTrailingZeros(systemChartData.systemStats.at(-1)?.stats.s ?? 0.04, 2),
+						]}
 						width={yAxisWidth}
 						tickLine={false}
 						axisLine={false}
@@ -43,14 +48,15 @@ export default function SwapChart({
 					/>
 					<XAxis
 						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
+						domain={systemChartData.domain}
+						ticks={systemChartData.ticks}
+						allowDataOverflow
 						type="number"
-						scale={'time'}
-						minTickGap={35}
+						scale="time"
+						minTickGap={30}
 						tickMargin={8}
 						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
+						tickFormatter={chartTimeData[systemChartData.chartTime].format}
 					/>
 					<ChartTooltip
 						animationEasing="ease-out"
@@ -59,7 +65,7 @@ export default function SwapChart({
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 								contentFormatter={(item) => decimalString(item.value) + ' GB'}
-								indicator="line"
+								// indicator="line"
 							/>
 						}
 					/>
@@ -76,4 +82,4 @@ export default function SwapChart({
 			</ChartContainer>
 		</div>
 	)
-}
+})
--- a/beszel/site/src/components/charts/temperature-chart.tsx
+++ b/beszel/site/src/components/charts/temperature-chart.tsx
@@ -16,19 +16,19 @@ import {
 	decimalString,
 	chartMargin,
 } from '@/lib/utils'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
-import { useMemo } from 'react'
+import { ChartTimes, SystemStatsRecord } from '@/types'
+import { memo, useMemo } from 'react'

-export default function TemperatureChart({
-	ticks,
-	systemData,
+export default memo(function TemperatureChart({
+	systemChartData,
 }: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
+	systemChartData: {
+		systemStats: SystemStatsRecord[]
+		ticks: number[]
+		domain: number[]
+		chartTime: ChartTimes
+	}
 }) {
-	const chartTime = useStore($chartTime)
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()

 	/** Format temperature data for chart and assign colors */
@@ -38,7 +38,7 @@ export default function TemperatureChart({
 			colors: Record<string, string>
 		}
 		const tempSums = {} as Record<string, number>
-		for (let data of systemData) {
+		for (let data of systemChartData.systemStats) {
 			let newData = { created: data.created } as Record<string, number | string>
 			let keys = Object.keys(data.stats?.t ?? {})
 			for (let i = 0; i < keys.length; i++) {
@@ -53,13 +53,14 @@ export default function TemperatureChart({
 			chartData.colors[key] = `hsl(${((keys.indexOf(key) * 360) / keys.length) % 360}, 60%, 55%)`
 		}
 		return chartData
-	}, [systemData])
+	}, [systemChartData])

 	const colors = Object.keys(newChartData.colors)

+	// console.log('rendered at', new Date())
+
 	return (
 		<div>
-			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
 					'opacity-100': yAxisWidth,
@@ -80,14 +81,15 @@ export default function TemperatureChart({
 					/>
 					<XAxis
 						dataKey="created"
-						domain={[ticks[0], ticks.at(-1)!]}
-						ticks={ticks}
+						domain={systemChartData.domain}
+						ticks={systemChartData.ticks}
+						allowDataOverflow
 						type="number"
-						scale={'time'}
-						minTickGap={35}
+						scale="time"
+						minTickGap={30}
 						tickMargin={8}
 						axisLine={false}
-						tickFormatter={chartTimeData[chartTime].format}
+						tickFormatter={chartTimeData[systemChartData.chartTime].format}
 					/>
 					<ChartTooltip
 						animationEasing="ease-out"
@@ -98,7 +100,7 @@ export default function TemperatureChart({
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 								contentFormatter={(item) => decimalString(item.value) + ' °C'}
-								indicator="line"
+								// indicator="line"
 							/>
 						}
 					/>
@@ -119,4 +121,4 @@ export default function TemperatureChart({
 			</ChartContainer>
 		</div>
 	)
-}
+})