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: {
-		systemStats: SystemStatsRecord[]
-		ticks: number[]
-		domain: number[]
-		chartTime: ChartTimes
-	}
+	chartData: ChartData
 }) {
 	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}
-						ticks={systemChartData.ticks}
+						domain={chartData.domain}
+						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,14 +52,18 @@ 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
 				}
-				// @ts-ignore
-				totalUsage[key] += stats[key]?.[dataKey] ?? 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)
@@ -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) => {
-							const val = toFixedWithoutTrailingZeros(value, 2) + unit
-							return updateYAxisWidth(val)
+							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}
-								// indicator="line"
+								contentFormatter={(item, key) => {
+									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: {
-		systemStats: SystemStatsRecord[]
-		ticks: number[]
-		domain: number[]
-		chartTime: ChartTimes
-	}
+	chartData: ChartData
 }) {
 	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) =>
-							updateYAxisWidth(toFixedFloat(getSizeVal(value), 2) + getSizeUnit(value))
-						}
+						tickFormatter={(value) => {
+							const { v, u } = getSizeAndUnit(value)
+							return updateYAxisWidth(toFixedFloat(v, 2) + u)
+						}}
 					/>
 					<XAxis
 						dataKey="created"
-						domain={systemChartData.domain}
-						ticks={systemChartData.ticks}
+						domain={chartData.domain}
+						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 }) =>
-									decimalString(getSizeVal(value)) + getSizeUnit(value)
-								}
-								// indicator="line"
+								contentFormatter={({ value }) => {
+									const { v, u } = getSizeAndUnit(value)
+									return decimalString(v) + u
+								}}
 							/>
 						}
 					/>

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({
-	systemChartData,
-}: {
-	systemChartData: {
-		systemStats: SystemStatsRecord[]
-		ticks: number[]
-		domain: number[]
-		chartTime: ChartTimes
-	}
-}) {
+export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 	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}
-						ticks={systemChartData.ticks}
+						domain={chartData.domain}
+						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({
-	systemChartData,
-}: {
-	systemChartData: {
-		systemStats: SystemStatsRecord[]
-		ticks: number[]
-		domain: number[]
-		chartTime: ChartTimes
-	}
-}) {
+export default memo(function SwapChart({ chartData }: { chartData: ChartData }) {
 	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(systemChartData.systemStats.at(-1)?.stats.s ?? 0.04, 2),
+							() => toFixedWithoutTrailingZeros(chartData.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}
-						ticks={systemChartData.ticks}
+						domain={chartData.domain}
+						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({
-	systemChartData,
-}: {
-	systemChartData: {
-		systemStats: SystemStatsRecord[]
-		ticks: number[]
-		domain: number[]
-		chartTime: ChartTimes
-	}
-}) {
+export default memo(function TemperatureChart({ chartData }: { chartData: ChartData }) {
 	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
-	}, [systemChartData])
+		return newChartData
+	}, [chartData])
 
 	const colors = Object.keys(newChartData.colors)
 
@@ -81,15 +72,15 @@ export default memo(function TemperatureChart({
 					/>
 					<XAxis
 						dataKey="created"
-						domain={systemChartData.domain}
-						ticks={systemChartData.ticks}
+						domain={chartData.domain}
+						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"