combine docker charts and chart data

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

@@ -11,7 +11,7 @@ import {
 	chartMargin,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
-import { ChartTimes, SystemStatsRecord } from '@/types'
+import { ChartData } from '@/types'
 import { memo, useMemo } from 'react'
 
 /** [label, key, color, opacity] */
@@ -31,21 +31,16 @@ export default memo(function AreaChartDefault({
 	maxToggled = false,
 	unit = ' MB/s',
 	chartName,
-	systemChartData,
+	chartData,
 }: {
 	maxToggled?: boolean
 	unit?: string
 	chartName: string
-	systemChartData: {
+	chartData: ChartData
-		systemStats: SystemStatsRecord[]
-		ticks: number[]
-		domain: number[]
-		chartTime: ChartTimes
-	}
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
-	const { chartTime } = systemChartData
+	const { chartTime } = chartData
 
 	const showMax = chartTime !== '1h' && maxToggled
 
@@ -81,7 +76,7 @@ export default memo(function AreaChartDefault({
 					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart accessibilityLayer data={systemChartData.systemStats} margin={chartMargin}>
+				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"
@@ -95,8 +90,8 @@ export default memo(function AreaChartDefault({
 					/>
 					<XAxis
 						dataKey="created"
-						domain={systemChartData.domain}
+						domain={chartData.domain}
-						ticks={systemChartData.ticks}
+						ticks={chartData.ticks}
 						allowDataOverflow
 						type="number"
 						scale="time"

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

@@ -13,31 +13,33 @@ import {
 	formatShortDate,
 	decimalString,
 	chartMargin,
+	toFixedFloat,
+	getSizeAndUnit,
 	toFixedWithoutTrailingZeros,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $containerFilter } from '@/lib/stores'
-import { ChartTimes, ContainerStats } from '@/types'
+import { ChartData } from '@/types'
+import { Separator } from '../ui/separator'
 
-export default memo(function ContainerCpuChart({
+export default memo(function ContainerChart({
 	dataKey,
+	chartData,
+	chartName,
 	unit = '%',
-	containerChartData,
 }: {
 	dataKey: string
+	chartData: ChartData
+	chartName: string
 	unit?: string
-	containerChartData: {
-		containerData: Record<string, number | ContainerStats>[]
-		ticks: number[]
-		domain: number[]
-		chartTime: ChartTimes
-	}
 }) {
 	const filter = useStore($containerFilter)
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
-	const { containerData, ticks, domain, chartTime } = containerChartData
+	const { containerData, ticks, domain, chartTime } = chartData
+
+	const isNetChart = chartName === 'net'
 
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
@@ -50,16 +52,20 @@ export default memo(function ContainerCpuChart({
 		const totalUsage = {} as Record<string, number>
 		for (let stats of containerData) {
 			for (let key in stats) {
-				if (!key || typeof stats[key] === 'number') {
+				if (!key || key === 'created') {
 					continue
 				}
 				if (!(key in totalUsage)) {
 					totalUsage[key] = 0
 				}
+				if (isNetChart) {
+					totalUsage[key] += stats[key]?.ns ?? 0 + stats[key]?.nr ?? 0
+				} else {
 					// @ts-ignore
 					totalUsage[key] += stats[key]?.[dataKey] ?? 0
 				}
 			}
+		}
 		let keys = Object.keys(totalUsage)
 		keys.sort((a, b) => (totalUsage[a] > totalUsage[b] ? -1 : 1))
 		const length = keys.length
@@ -72,7 +78,7 @@ export default memo(function ContainerCpuChart({
 			}
 		}
 		return config satisfies ChartConfig
-	}, [containerChartData])
+	}, [chartData])
 
 	// console.log('rendered at', new Date())
 
@@ -95,8 +101,12 @@ export default memo(function ContainerCpuChart({
 						className="tracking-tighter"
 						width={yAxisWidth}
 						tickFormatter={(value) => {
+							if (chartName === 'cpu') {
 								const val = toFixedWithoutTrailingZeros(value, 2) + unit
 								return updateYAxisWidth(val)
+							}
+							const { v, u } = getSizeAndUnit(value, false)
+							return updateYAxisWidth(`${toFixedFloat(v, 2)}${u}${isNetChart ? '/s' : ''}`)
 						}}
 						tickLine={false}
 						axisLine={false}
@@ -122,8 +132,26 @@ export default memo(function ContainerCpuChart({
 						content={
 							<ChartTooltipContent
 								filter={filter}
-								contentFormatter={(item) => decimalString(item.value) + unit}
+								contentFormatter={(item, key) => {
-								// indicator="line"
+									if (!isNetChart) {
+										return decimalString(item.value) + unit
+									}
+									try {
+										const sent = item?.payload?.[key]?.ns ?? 0
+										const received = item?.payload?.[key]?.nr ?? 0
+										return (
+											<span className="flex">
+												{decimalString(received)} MB/s
+												<span className="opacity-70 ml-0.5"> rx </span>
+												<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
+												{decimalString(sent)} MB/s
+												<span className="opacity-70 ml-0.5"> tx</span>
+											</span>
+										)
+									} catch (e) {
+										return null
+									}
+								}}
 							/>
 						}
 					/>
@@ -135,7 +163,12 @@ export default memo(function ContainerCpuChart({
 							<Area
 								key={key}
 								isAnimationActive={false}
-								dataKey={`${key}.${dataKey}`}
+								dataKey={(data) => {
+									if (isNetChart) {
+										return data[key]?.ns ?? 0 + data?.[key]?.nr ?? 0
+									}
+									return data[key]?.[dataKey] ?? 0
+								}}
 								name={key}
 								type="monotoneX"
 								fill={chartConfig[key].color}

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

@@ -1,167 +0,0 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '@/components/ui/chart'
-import { memo, useMemo } from 'react'
-import {
-	useYAxisWidth,
-	chartTimeData,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	decimalString,
-	chartMargin,
-} from '@/lib/utils'
-import { useStore } from '@nanostores/react'
-import { $containerFilter } from '@/lib/stores'
-import { Separator } from '@/components/ui/separator'
-import { ChartTimes, ContainerStats } from '@/types'
-
-export default memo(function ContainerCpuChart({
-	containerChartData,
-}: {
-	containerChartData: {
-		containerData: Record<string, ContainerStats | number>[]
-		ticks: number[]
-		domain: number[]
-		chartTime: ChartTimes
-	}
-}) {
-	const filter = useStore($containerFilter)
-	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-
-	const { containerData, ticks, domain, chartTime } = containerChartData
-
-	const chartConfig = useMemo(() => {
-		let config = {} as Record<
-			string,
-			{
-				label: string
-				color: string
-			}
-		>
-		const totalUsage = {} as Record<string, number>
-		for (let stats of containerData) {
-			for (let key in stats) {
-				// 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]?.ns ?? 0 + stats[key]?.nr ?? 0
-			}
-		}
-		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
-	}, [containerChartData])
-
-	// 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={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={(value) => {
-							const val = toFixedWithoutTrailingZeros(value, 2) + ' MB/s'
-							return updateYAxisWidth(val)
-						}}
-					/>
-					<XAxis
-						dataKey="created"
-						domain={domain}
-						allowDataOverflow
-						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.created)}
-						// @ts-ignore
-						itemSorter={(a, b) => b.value - a.value}
-						content={
-							<ChartTooltipContent
-								filter={filter}
-								// indicator="line"
-								contentFormatter={(item, key) => {
-									try {
-										const sent = item?.payload?.[key]?.ns ?? 0
-										const received = item?.payload?.[key]?.nr ?? 0
-										return (
-											<span className="flex">
-												{decimalString(received)} MB/s
-												<span className="opacity-70 ml-0.5"> rx </span>
-												<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
-												{decimalString(sent)} MB/s<span className="opacity-70 ml-0.5"> tx</span>
-											</span>
-										)
-									} catch (e) {
-										return null
-									}
-								}}
-							/>
-						}
-					/>
-					{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}
-								name={key}
-								isAnimationActive={false}
-								dataKey={(data) => data?.[key]?.ns ?? 0 + data?.[key]?.nr ?? 0}
-								type="monotoneX"
-								fill={chartConfig[key].color}
-								fillOpacity={fillOpacity}
-								stroke={chartConfig[key].color}
-								strokeOpacity={strokeOpacity}
-								activeDot={{ opacity: filtered ? 0 : 1 }}
-								stackId="a"
-							/>
-						)
-					})}
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-})

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

@@ -8,26 +8,20 @@ import {
 	formatShortDate,
 	decimalString,
 	toFixedFloat,
-	getSizeVal,
-	getSizeUnit,
 	chartMargin,
+	getSizeAndUnit,
 } from '@/lib/utils'
-import { ChartTimes, SystemStatsRecord } from '@/types'
+import { ChartData } from '@/types'
 import { memo } from 'react'
 
 export default memo(function DiskChart({
 	dataKey,
 	diskSize,
-	systemChartData,
+	chartData,
 }: {
 	dataKey: string
 	diskSize: number
-	systemChartData: {
+	chartData: ChartData
-		systemStats: SystemStatsRecord[]
-		ticks: number[]
-		domain: number[]
-		chartTime: ChartTimes
-	}
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
@@ -40,7 +34,7 @@ export default memo(function DiskChart({
 					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart accessibilityLayer data={systemChartData.systemStats} margin={chartMargin}>
+				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"
@@ -50,21 +44,22 @@ export default memo(function DiskChart({
 						minTickGap={6}
 						tickLine={false}
 						axisLine={false}
-						tickFormatter={(value) =>
+						tickFormatter={(value) => {
-							updateYAxisWidth(toFixedFloat(getSizeVal(value), 2) + getSizeUnit(value))
+							const { v, u } = getSizeAndUnit(value)
-						}
+							return updateYAxisWidth(toFixedFloat(v, 2) + u)
+						}}
 					/>
 					<XAxis
 						dataKey="created"
-						domain={systemChartData.domain}
+						domain={chartData.domain}
-						ticks={systemChartData.ticks}
+						ticks={chartData.ticks}
 						allowDataOverflow
 						type="number"
 						scale="time"
 						minTickGap={30}
 						tickMargin={8}
 						axisLine={false}
-						tickFormatter={chartTimeData[systemChartData.chartTime].format}
+						tickFormatter={chartTimeData[chartData.chartTime].format}
 					/>
 					<ChartTooltip
 						animationEasing="ease-out"
@@ -72,10 +67,10 @@ export default memo(function DiskChart({
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={({ value }) =>
+								contentFormatter={({ value }) => {
-									decimalString(getSizeVal(value)) + getSizeUnit(value)
+									const { v, u } = getSizeAndUnit(value)
-								}
+									return decimalString(v) + u
-								// indicator="line"
+								}}
 							/>
 						}
 					/>

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

@@ -11,21 +11,12 @@ import {
 	chartMargin,
 } from '@/lib/utils'
 import { memo } from 'react'
-import { ChartTimes, SystemStatsRecord } from '@/types'
+import { ChartData } from '@/types'
 
-export default memo(function MemChart({
+export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
-	systemChartData,
-}: {
-	systemChartData: {
-		systemStats: SystemStatsRecord[]
-		ticks: number[]
-		domain: number[]
-		chartTime: ChartTimes
-	}
-}) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
-	const totalMem = toFixedFloat(systemChartData.systemStats.at(-1)?.stats.m ?? 0, 1)
+	const totalMem = toFixedFloat(chartData.systemStats.at(-1)?.stats.m ?? 0, 1)
 
 	// console.log('rendered at', new Date())
 
@@ -37,7 +28,7 @@ export default memo(function MemChart({
 					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart accessibilityLayer data={systemChartData.systemStats} margin={chartMargin}>
+				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					{totalMem && (
 						<YAxis
@@ -56,15 +47,15 @@ export default memo(function MemChart({
 					)}
 					<XAxis
 						dataKey="created"
-						domain={systemChartData.domain}
+						domain={chartData.domain}
-						ticks={systemChartData.ticks}
+						ticks={chartData.ticks}
 						allowDataOverflow
 						type="number"
 						scale="time"
 						minTickGap={30}
 						tickMargin={8}
 						axisLine={false}
-						tickFormatter={chartTimeData[systemChartData.chartTime].format}
+						tickFormatter={chartTimeData[chartData.chartTime].format}
 					/>
 					<ChartTooltip
 						// cursor={false}
@@ -91,7 +82,7 @@ export default memo(function MemChart({
 						stackId="1"
 						isAnimationActive={false}
 					/>
-					{systemChartData.systemStats.at(-1)?.stats.mz && (
+					{chartData.systemStats.at(-1)?.stats.mz && (
 						<Area
 							name="ZFS ARC"
 							order={2}

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

@@ -10,19 +10,10 @@ import {
 	decimalString,
 	chartMargin,
 } from '@/lib/utils'
-import { ChartTimes, SystemStatsRecord } from '@/types'
+import { ChartData } from '@/types'
 import { memo } from 'react'
 
-export default memo(function SwapChart({
+export default memo(function SwapChart({ chartData }: { chartData: ChartData }) {
-	systemChartData,
-}: {
-	systemChartData: {
-		systemStats: SystemStatsRecord[]
-		ticks: number[]
-		domain: number[]
-		chartTime: ChartTimes
-	}
-}) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
 	return (
@@ -32,14 +23,13 @@ export default memo(function SwapChart({
 					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart accessibilityLayer data={systemChartData.systemStats} margin={chartMargin}>
+				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"
 						domain={[
 							0,
-							() =>
+							() => toFixedWithoutTrailingZeros(chartData.systemStats.at(-1)?.stats.s ?? 0.04, 2),
-								toFixedWithoutTrailingZeros(systemChartData.systemStats.at(-1)?.stats.s ?? 0.04, 2),
 						]}
 						width={yAxisWidth}
 						tickLine={false}
@@ -48,15 +38,15 @@ export default memo(function SwapChart({
 					/>
 					<XAxis
 						dataKey="created"
-						domain={systemChartData.domain}
+						domain={chartData.domain}
-						ticks={systemChartData.ticks}
+						ticks={chartData.ticks}
 						allowDataOverflow
 						type="number"
 						scale="time"
 						minTickGap={30}
 						tickMargin={8}
 						axisLine={false}
-						tickFormatter={chartTimeData[systemChartData.chartTime].format}
+						tickFormatter={chartTimeData[chartData.chartTime].format}
 					/>
 					<ChartTooltip
 						animationEasing="ease-out"

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

@@ -16,29 +16,20 @@ import {
 	decimalString,
 	chartMargin,
 } from '@/lib/utils'
-import { ChartTimes, SystemStatsRecord } from '@/types'
+import { ChartData } from '@/types'
 import { memo, useMemo } from 'react'
 
-export default memo(function TemperatureChart({
+export default memo(function TemperatureChart({ chartData }: { chartData: ChartData }) {
-	systemChartData,
-}: {
-	systemChartData: {
-		systemStats: SystemStatsRecord[]
-		ticks: number[]
-		domain: number[]
-		chartTime: ChartTimes
-	}
-}) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
 	/** Format temperature data for chart and assign colors */
 	const newChartData = useMemo(() => {
-		const chartData = { data: [], colors: {} } as {
+		const newChartData = { data: [], colors: {} } as {
 			data: Record<string, number | string>[]
 			colors: Record<string, string>
 		}
 		const tempSums = {} as Record<string, number>
-		for (let data of systemChartData.systemStats) {
+		for (let data of chartData.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++) {
@@ -46,14 +37,14 @@ export default memo(function TemperatureChart({
 				newData[key] = data.stats.t![key]
 				tempSums[key] = (tempSums[key] ?? 0) + newData[key]
 			}
-			chartData.data.push(newData)
+			newChartData.data.push(newData)
 		}
 		const keys = Object.keys(tempSums).sort((a, b) => tempSums[b] - tempSums[a])
 		for (let key of keys) {
-			chartData.colors[key] = `hsl(${((keys.indexOf(key) * 360) / keys.length) % 360}, 60%, 55%)`
+			newChartData.colors[key] = `hsl(${((keys.indexOf(key) * 360) / keys.length) % 360}, 60%, 55%)`
 		}
-		return chartData
+		return newChartData
-	}, [systemChartData])
+	}, [chartData])
 
 	const colors = Object.keys(newChartData.colors)
 
@@ -81,15 +72,15 @@ export default memo(function TemperatureChart({
 					/>
 					<XAxis
 						dataKey="created"
-						domain={systemChartData.domain}
+						domain={chartData.domain}
-						ticks={systemChartData.ticks}
+						ticks={chartData.ticks}
 						allowDataOverflow
 						type="number"
 						scale="time"
 						minTickGap={30}
 						tickMargin={8}
 						axisLine={false}
-						tickFormatter={chartTimeData[systemChartData.chartTime].format}
+						tickFormatter={chartTimeData[chartData.chartTime].format}
 					/>
 					<ChartTooltip
 						animationEasing="ease-out"

beszel/site/src/components/routes/system.tsx

@@ -1,5 +1,11 @@
 import { $systems, pb, $chartTime, $containerFilter, $userSettings } from '@/lib/stores'
-import { ContainerStats, ContainerStatsRecord, SystemRecord, SystemStatsRecord } from '@/types'
+import {
+	ChartData,
+	ChartTimes,
+	ContainerStatsRecord,
+	SystemRecord,
+	SystemStatsRecord,
+} from '@/types'
 import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Card, CardHeader, CardTitle, CardDescription } from '../ui/card'
 import { useStore } from '@nanostores/react'
@@ -8,23 +14,85 @@ import { ClockArrowUp, CpuIcon, GlobeIcon, LayoutGridIcon, MonitorIcon, XIcon }
 import ChartTimeSelect from '../charts/chart-time-select'
 import { chartTimeData, cn, getPbTimestamp, useLocalStorage } from '@/lib/utils'
 import { Separator } from '../ui/separator'
-import { scaleTime } from 'd3-scale'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
 import { Button, buttonVariants } from '../ui/button'
 import { Input } from '../ui/input'
 import { ChartAverage, ChartMax, Rows, TuxIcon } from '../ui/icons'
 import { useIntersectionObserver } from '@/lib/use-intersection-observer'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { timeTicks } from 'd3-time'
 
 const AreaChartDefault = lazy(() => import('../charts/area-chart'))
-const ContainerChartDefault = lazy(() => import('../charts/container-chart'))
+const ContainerChart = lazy(() => import('../charts/container-chart'))
 const MemChart = lazy(() => import('../charts/mem-chart'))
 const DiskChart = lazy(() => import('../charts/disk-chart'))
-const ContainerNetChart = lazy(() => import('../charts/container-net-chart'))
 const SwapChart = lazy(() => import('../charts/swap-chart'))
 const TemperatureChart = lazy(() => import('../charts/temperature-chart'))
 
-const cache = new Map<string, SystemStatsRecord[] | ContainerStatsRecord[]>()
+const cache = new Map<string, any>()
+
+// create ticks and domain for charts
+function getTimeData(chartTime: ChartTimes, lastCreated: number) {
+	const cached = cache.get('td')
+	if (cached && cached.chartTime === chartTime) {
+		if (!lastCreated || cached.time >= lastCreated) {
+			return cached.data
+		}
+	}
+
+	const now = new Date()
+	const startTime = chartTimeData[chartTime].getOffset(now)
+	const ticks = timeTicks(startTime, now, chartTimeData[chartTime].ticks ?? 12).map((date) =>
+		date.getTime()
+	)
+	const data = {
+		ticks,
+		domain: [chartTimeData[chartTime].getOffset(now).getTime(), now.getTime()],
+	}
+	cache.set('td', { time: now.getTime(), data, chartTime })
+	return data
+}
+
+// add empty values between records to make gaps if interval is too large
+function addEmptyValues<T extends SystemStatsRecord | ContainerStatsRecord>(
+	records: T[],
+	expectedInterval: number
+) {
+	const modifiedRecords: T[] = []
+	let prevTime = 0
+	for (let i = 0; i < records.length; i++) {
+		const record = records[i]
+		record.created = new Date(record.created).getTime()
+		if (prevTime) {
+			const interval = record.created - prevTime
+			// if interval is too large, add a null record
+			if (interval > expectedInterval / 2 + expectedInterval) {
+				// @ts-ignore
+				modifiedRecords.push({ created: null, stats: null })
+			}
+		}
+		prevTime = record.created
+		modifiedRecords.push(record)
+	}
+	return modifiedRecords
+}
+
+async function getStats<T>(
+	collection: string,
+	system: SystemRecord,
+	chartTime: ChartTimes
+): Promise<T[]> {
+	const lastCached = cache.get(`${system.id}_${chartTime}_${collection}`)?.at(-1)?.created as number
+	return await pb.collection<T>(collection).getFullList({
+		filter: pb.filter('system={:id} && created > {:created} && type={:type}', {
+			id: system.id,
+			created: getPbTimestamp(chartTime, lastCached ? new Date(lastCached + 1000) : undefined),
+			type: chartTimeData[chartTime].type,
+		}),
+		fields: 'created,stats',
+		sort: 'created',
+	})
+}
 
 export default function SystemDetail({ name }: { name: string }) {
 	const systems = useStore($systems)
@@ -36,9 +104,7 @@ export default function SystemDetail({ name }: { name: string }) {
 	const [grid, setGrid] = useLocalStorage('grid', true)
 	const [system, setSystem] = useState({} as SystemRecord)
 	const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
-	const [containerData, setContainerData] = useState(
+	const [containerData, setContainerData] = useState([] as ChartData['containerData'])
-		[] as Record<string, ContainerStats | number>[]
-	)
 	const netCardRef = useRef<HTMLDivElement>(null)
 	const [containerFilterBar, setContainerFilterBar] = useState(null as null | JSX.Element)
 	const isLongerChart = chartTime !== '1h'
@@ -89,70 +155,18 @@ export default function SystemDetail({ name }: { name: string }) {
 		}
 	}, [system])
 
-	function getTimeData() {
+	const chartData: ChartData = useMemo(() => {
-		const now = new Date()
+		const lastCreated = Math.max(
-		const startTime = chartTimeData[chartTime].getOffset(now)
+			(systemStats.at(-1)?.created as number) ?? 0,
-		const scale = scaleTime([startTime.getTime(), now], [0, systemStats.length])
+			(containerData.at(-1)?.created as number) ?? 0
-		const ticks = scale.ticks(chartTimeData[chartTime].ticks).map((d) => d.getTime())
+		)
-
-		return {
-			ticks,
-			chartTime,
-			domain: [chartTimeData[chartTime].getOffset(now).getTime(), now.getTime()],
-		}
-	}
-
-	const systemChartData = useMemo(() => {
 		return {
 			systemStats,
-			...getTimeData(),
-		}
-	}, [systemStats])
-
-	const containerChartData = useMemo(() => {
-		return {
 			containerData,
-			...getTimeData(),
+			chartTime,
-		}
+			...getTimeData(chartTime, lastCreated),
-	}, [containerData])
-
-	async function getStats<T>(collection: string): Promise<T[]> {
-		const lastCached = cache.get(`${system.id}_${chartTime}_${collection}`)?.at(-1)
-			?.created as number
-		return await pb.collection<T>(collection).getFullList({
-			filter: pb.filter('system={:id} && created > {:created} && type={:type}', {
-				id: system.id,
-				created: getPbTimestamp(chartTime, lastCached ? new Date(lastCached + 1000) : undefined),
-				type: chartTimeData[chartTime].type,
-			}),
-			fields: 'created,stats',
-			sort: 'created',
-		})
-	}
-
-	// add empty values between records to make gaps if interval is too large
-	function addEmptyValues<T extends SystemStatsRecord | ContainerStatsRecord>(
-		records: T[],
-		expectedInterval: number
-	) {
-		const modifiedRecords: T[] = []
-		let prevTime = 0
-		for (let i = 0; i < records.length; i++) {
-			const record = records[i]
-			record.created = new Date(record.created).getTime()
-			if (prevTime) {
-				const interval = record.created - prevTime
-				// if interval is too large, add a null record
-				if (interval > expectedInterval / 2 + expectedInterval) {
-					// @ts-ignore
-					modifiedRecords.push({ created: null, stats: null })
-				}
-			}
-			prevTime = record.created
-			modifiedRecords.push(record)
-		}
-		return modifiedRecords
 		}
+	}, [systemStats, containerData])
 
 	// get stats
 	useEffect(() => {
@@ -160,8 +174,8 @@ export default function SystemDetail({ name }: { name: string }) {
 			return
 		}
 		Promise.allSettled([
-			getStats<SystemStatsRecord>('system_stats'),
+			getStats<SystemStatsRecord>('system_stats', system, chartTime),
-			getStats<ContainerStatsRecord>('container_stats'),
+			getStats<ContainerStatsRecord>('container_stats', system, chartTime),
 		]).then(([systemStats, containerStats]) => {
 			const { expectedInterval } = chartTimeData[chartTime]
 			// make new system stats
@@ -196,16 +210,16 @@ export default function SystemDetail({ name }: { name: string }) {
 
 	// make container stats for charts
 	const makeContainerData = useCallback((containers: ContainerStatsRecord[]) => {
-		// console.log('containers', containers)
+		const containerData = [] as ChartData['containerData']
-		const containerData = [] as Record<string, ContainerStats | number>[]
 		for (let { created, stats } of containers) {
 			if (!created) {
-				let nullData = { created: null } as unknown
+				// @ts-ignore add null value for gaps
-				containerData.push(nullData as Record<string, ContainerStats | number>)
+				containerData.push({ created: null })
 				continue
 			}
 			created = new Date(created).getTime()
-			let containerStats = { created } as Record<string, number | ContainerStats>
+			// @ts-ignore not dealing with this rn
+			let containerStats: ChartData['containerData'][0] = { created }
 			for (let container of stats) {
 				containerStats[container.n] = container
 			}
@@ -329,10 +343,9 @@ export default function SystemDetail({ name }: { name: string }) {
 									<TooltipTrigger asChild>
 										<Button
 											aria-label="Toggle grid"
-											className={cn(
+											variant="outline"
-												buttonVariants({ variant: 'outline', size: 'icon' }),
+											size="icon"
-												'hidden lg:flex p-0 text-primary'
+											className="hidden lg:flex p-0 text-primary"
-											)}
 											onClick={() => setGrid(!grid)}
 										>
 											{grid ? (
@@ -360,7 +373,7 @@ export default function SystemDetail({ name }: { name: string }) {
 						cornerEl={isLongerChart ? <SelectAvgMax store={cpuMaxStore} /> : null}
 					>
 						<AreaChartDefault
-							systemChartData={systemChartData}
+							chartData={chartData}
 							chartName="CPU Usage"
 							maxToggled={cpuMaxStore[0]}
 							unit="%"
@@ -374,7 +387,7 @@ export default function SystemDetail({ name }: { name: string }) {
 							description="Average CPU utilization of containers"
 							cornerEl={containerFilterBar}
 						>
-							<ContainerChartDefault dataKey="c" containerChartData={containerChartData} />
+							<ContainerChart chartData={chartData} dataKey="c" chartName="cpu" />
 						</ChartCard>
 					)}
 
@@ -383,7 +396,7 @@ export default function SystemDetail({ name }: { name: string }) {
 						title="Total Memory Usage"
 						description="Precise utilization at the recorded time"
 					>
-						<MemChart systemChartData={systemChartData} />
+						<MemChart chartData={chartData} />
 					</ChartCard>
 
 					{containerFilterBar && (
@@ -393,17 +406,13 @@ export default function SystemDetail({ name }: { name: string }) {
 							description="Memory usage of docker containers"
 							cornerEl={containerFilterBar}
 						>
-							<ContainerChartDefault
+							<ContainerChart chartData={chartData} chartName="mem" dataKey="m" unit=" MB" />
-								containerChartData={containerChartData}
-								dataKey="m"
-								unit=" MB"
-							/>
 						</ChartCard>
 					)}
 
 					<ChartCard grid={grid} title="Disk Space" description="Usage of root partition">
 						<DiskChart
-							systemChartData={systemChartData}
+							chartData={chartData}
 							dataKey="stats.du"
 							diskSize={Math.round(systemStats.at(-1)?.stats.d ?? NaN)}
 						/>
@@ -416,7 +425,7 @@ export default function SystemDetail({ name }: { name: string }) {
 						cornerEl={isLongerChart ? <SelectAvgMax store={diskIoMaxStore} /> : null}
 					>
 						<AreaChartDefault
-							systemChartData={systemChartData}
+							chartData={chartData}
 							maxToggled={diskIoMaxStore[0]}
 							chartName="dio"
 						/>
@@ -429,7 +438,7 @@ export default function SystemDetail({ name }: { name: string }) {
 						description="Network traffic of public interfaces"
 					>
 						<AreaChartDefault
-							systemChartData={systemChartData}
+							chartData={chartData}
 							maxToggled={bandwidthMaxStore[0]}
 							chartName="bw"
 						/>
@@ -448,20 +457,20 @@ export default function SystemDetail({ name }: { name: string }) {
 								cornerEl={containerFilterBar}
 							>
 								{/* @ts-ignore */}
-								<ContainerNetChart containerChartData={containerChartData} />
+								<ContainerChart chartData={chartData} chartName="net" dataKey="n" />
 							</ChartCard>
 						</div>
 					)}
 
 					{(systemStats.at(-1)?.stats.su ?? 0) > 0 && (
 						<ChartCard grid={grid} title="Swap Usage" description="Swap space used by the system">
-							<SwapChart systemChartData={systemChartData} />
+							<SwapChart chartData={chartData} />
 						</ChartCard>
 					)}
 
 					{systemStats.at(-1)?.stats.t && (
 						<ChartCard grid={grid} title="Temperature" description="Temperatures of system sensors">
-							<TemperatureChart systemChartData={systemChartData} />
+							<TemperatureChart chartData={chartData} />
 						</ChartCard>
 					)}
 				</div>
@@ -478,7 +487,7 @@ export default function SystemDetail({ name }: { name: string }) {
 										description={`Disk usage of ${extraFsName}`}
 									>
 										<DiskChart
-											systemChartData={systemChartData}
+											chartData={chartData}
 											dataKey={`stats.efs.${extraFsName}.du`}
 											diskSize={Math.round(systemStats.at(-1)?.stats.efs?.[extraFsName].d ?? NaN)}
 										/>
@@ -490,7 +499,7 @@ export default function SystemDetail({ name }: { name: string }) {
 										cornerEl={isLongerChart ? <SelectAvgMax store={diskIoMaxStore} /> : null}
 									>
 										<AreaChartDefault
-											systemChartData={systemChartData}
+											chartData={chartData}
 											maxToggled={diskIoMaxStore[0]}
 											chartName={`efs.${extraFsName}`}
 										/>

beszel/site/src/lib/utils.ts

@@ -277,17 +277,20 @@ export async function updateUserSettings() {
 }
 
 /**
- * Get the unit of size (TB or GB) for a given size in gigabytes
+ * Get the value and unit of size (TB, GB, or MB) for a given size
- * @param n size in gigabytes
+ * @param n size in gigabytes or megabytes
- * @returns unit of size (TB or GB)
+ * @param isGigabytes boolean indicating if n represents gigabytes (true) or megabytes (false)
+ * @returns an object containing the value and unit of size
  */
-export const getSizeUnit = (n: number) => (n >= 1_000 ? ' TB' : ' GB')
+export const getSizeAndUnit = (n: number, isGigabytes = true) => {
+	const sizeInGB = isGigabytes ? n : n / 1_000
 
-/**
+	if (sizeInGB >= 1_000) {
- * Get the value of number in gigabytes if less than 1000, otherwise in terabytes
+		return { v: sizeInGB / 1_000, u: ' TB' }
- * @param n size in gigabytes
+	} else if (sizeInGB >= 1) {
- * @returns value in GB if less than 1000, otherwise value in TB
+		return { v: sizeInGB, u: ' GB' }
- */
+	}
-export const getSizeVal = (n: number) => (n >= 1_000 ? n / 1_000 : n)
+	return { v: n, u: ' MB' }
+}
 
 export const chartMargin = { top: 12 }

beszel/site/src/types.d.ts

@@ -149,3 +149,17 @@ export type UserSettings = {
 	emails?: string[]
 	webhooks?: string[]
 }
+
+type ChartDataContainer = {
+	created: number | null
+} & {
+	[key: string]: key extends 'created' ? never : ContainerStats
+}
+
+export interface ChartData {
+	systemStats: SystemStatsRecord[]
+	containerData: ChartDataContainer[]
+	ticks: number[]
+	domain: number[]
+	chartTime: ChartTimes
+}