add max 1m values for cpu, bandwidth, disk io

* removes unused things from chart.tsx
* updates y axis width only if it grows
* add generic area chart component and remove individual cpu, bandwidth, disk io charts

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

@@ -0,0 +1,131 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
+import {
+	useYAxisWidth,
+	chartTimeData,
+	cn,
+	formatShortDate,
+	toFixedWithoutTrailingZeros,
+	twoDecimalString,
+	chartMargin,
+} from '@/lib/utils'
+// import Spinner from '../spinner'
+import { ChartTimes, SystemStatsRecord } from '@/types'
+import { useMemo } from 'react'
+
+/** [label, key, color, opacity] */
+type DataKeys = [string, string, number, number]
+
+const getNestedValue = (path: string, max = false, data: any): number | null => {
+	// fallback value (obj?.stats?.cpum ? 0 : null) should only come into play when viewing
+	// a max value which doesn't exist, or the value was zero and omitted from the stats object.
+	// so we check if cpum is present. if so, return 0 to make sure the zero value is displayed.
+	// if not, return null - there is no max data so do not display anything.
+	return `stats.${path}${max ? 'm' : ''}`
+		.split('.')
+		.reduce((acc: any, key: string) => acc?.[key] ?? (data.stats?.cpum ? 0 : null), data)
+}
+
+export default function AreaChartDefault({
+	ticks,
+	systemData,
+	showMax = false,
+	unit = ' MB/s',
+	chartName,
+	chartTime,
+}: {
+	ticks: number[]
+	systemData: SystemStatsRecord[]
+	showMax?: boolean
+	unit?: string
+	chartName: string
+	chartTime: ChartTimes
+}) {
+	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+
+	const dataKeys: DataKeys[] = useMemo(() => {
+		// [label, key, color, opacity]
+		if (chartName === 'CPU Usage') {
+			return [[chartName, 'cpu', 1, 0.4]]
+		} else if (chartName === 'dio') {
+			return [
+				['Write', 'dw', 3, 0.3],
+				['Read', 'dr', 1, 0.3],
+			]
+		} else if (chartName === 'bw') {
+			return [
+				['Sent', 'ns', 5, 0.2],
+				['Received', 'nr', 2, 0.2],
+			]
+		} else if (chartName.startsWith('efs')) {
+			return [
+				['Write', `${chartName}.w`, 3, 0.3],
+				['Read', `${chartName}.r`, 1, 0.3],
+			]
+		}
+		return []
+	}, [])
+
+	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}>
+					<CartesianGrid vertical={false} />
+					<YAxis
+						className="tracking-tighter"
+						width={yAxisWidth}
+						tickFormatter={(value) => {
+							const val = toFixedWithoutTrailingZeros(value, 2) + unit
+							return updateYAxisWidth(val)
+						}}
+						tickLine={false}
+						axisLine={false}
+					/>
+					<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) => twoDecimalString(item.value) + unit}
+								indicator="line"
+							/>
+						}
+					/>
+					{dataKeys.map((key, i) => {
+						const color = `hsl(var(--chart-${key[2]}))`
+						return (
+							<Area
+								key={i}
+								dataKey={getNestedValue.bind(null, key[1], showMax)}
+								name={key[0]}
+								type="monotoneX"
+								fill={color}
+								fillOpacity={key[3]}
+								stroke={color}
+								isAnimationActive={false}
+							/>
+						)
+					})}
+					{/* <ChartLegend content={<ChartLegendContent />} /> */}
+				</AreaChart>
+			</ChartContainer>
+		</div>
+	)
+}

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

@@ -1,105 +0,0 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import {
-	useYAxisWidth,
-	chartTimeData,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	twoDecimalString,
-} from '@/lib/utils'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
-
-export default function BandwidthChart({
-	ticks,
-	systemData,
-}: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
-}) {
-	const chartTime = useStore($chartTime)
-	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-
-	return (
-		<div>
-			{/* {!yAxisSet && <Spinner />} */}
-			<ChartContainer
-				config={{}}
-				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisWidth,
-				})}
-			>
-				<AreaChart
-					accessibilityLayer
-					data={systemData}
-					margin={{
-						left: 0,
-						right: 0,
-						top: 10,
-						bottom: 0,
-					}}
-				>
-					<CartesianGrid vertical={false} />
-					<YAxis
-						className="tracking-tighter"
-						width={yAxisWidth}
-						// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-						tickFormatter={(value) => {
-							const val = toFixedWithoutTrailingZeros(value, 2) + ' MB/s'
-							return updateYAxisWidth(val)
-						}}
-						tickLine={false}
-						axisLine={false}
-						// unit={' MB/s'}
-					/>
-					<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) => twoDecimalString(item.value) + ' MB/s'}
-								indicator="line"
-							/>
-						}
-					/>
-					<Area
-						dataKey="stats.ns"
-						name="Sent"
-						type="monotoneX"
-						fill="hsl(var(--chart-5))"
-						fillOpacity={0.2}
-						stroke="hsl(var(--chart-5))"
-						// animationDuration={1200}
-						isAnimationActive={false}
-					/>
-					<Area
-						dataKey="stats.nr"
-						name="Received"
-						type="monotoneX"
-						fill="hsl(var(--chart-2))"
-						fillOpacity={0.2}
-						stroke="hsl(var(--chart-2))"
-						// animationDuration={1200}
-						isAnimationActive={false}
-					/>
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-}

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

@@ -6,7 +6,14 @@ import {
 	ChartTooltipContent,
 } from '@/components/ui/chart'
 import { useMemo } from 'react'
-import { useYAxisWidth, chartTimeData, cn, formatShortDate, twoDecimalString } from '@/lib/utils'
+import {
+	useYAxisWidth,
+	chartTimeData,
+	cn,
+	formatShortDate,
+	twoDecimalString,
+	chartMargin,
+} from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime, $containerFilter } from '@/lib/stores'
@@ -65,7 +72,6 @@ export default function ContainerCpuChart({
 		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
-				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
 					'opacity-100': yAxisWidth,
 				})}
@@ -74,9 +80,7 @@ export default function ContainerCpuChart({
 					accessibilityLayer
 					// syncId={'cpu'}
 					data={chartData}
-					margin={{
-						top: 10,
-					}}
+					margin={chartMargin}
 					reverseStackOrder={true}
 				>
 					<CartesianGrid vertical={false} />

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

@@ -13,6 +13,7 @@ import {
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
 	twoDecimalString,
+	chartMargin,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
@@ -72,7 +73,6 @@ export default function ContainerMemChart({
 		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
-				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
 					'opacity-100': yAxisWidth,
 				})}
@@ -81,9 +81,7 @@ export default function ContainerMemChart({
 					accessibilityLayer
 					data={chartData}
 					reverseStackOrder={true}
-					margin={{
-						top: 10,
-					}}
+					margin={chartMargin}
 				>
 					<CartesianGrid vertical={false} />
 					<YAxis

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

@@ -13,6 +13,7 @@ import {
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
 	twoDecimalString,
+	chartMargin,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
@@ -64,15 +65,10 @@ export default function ContainerCpuChart({
 		return config satisfies ChartConfig
 	}, [chartData])
 
-	// if (!chartData.length || !ticks.length) {
-	// 	return <Spinner />
-	// }
-
 	return (
 		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
-				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
 					'opacity-100': yAxisWidth,
 				})}
@@ -80,9 +76,7 @@ export default function ContainerCpuChart({
 				<AreaChart
 					accessibilityLayer
 					data={chartData}
-					margin={{
-						top: 10,
-					}}
+					margin={chartMargin}
 					reverseStackOrder={true}
 				>
 					<CartesianGrid vertical={false} />

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

@@ -1,11 +1,19 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { useYAxisWidth, chartTimeData, cn, formatShortDate, twoDecimalString } from '@/lib/utils'
+import {
+	useYAxisWidth,
+	chartTimeData,
+	cn,
+	formatShortDate,
+	twoDecimalString,
+	chartMargin,
+} from '@/lib/utils'
 // import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
+import { $chartTime, $cpuMax } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
+import { useMemo } from 'react'
 
 export default function CpuChart({
 	ticks,
@@ -16,11 +24,16 @@ export default function CpuChart({
 }) {
 	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
-				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
 					'opacity-100': yAxisWidth,
 				})}
@@ -28,7 +41,7 @@ export default function CpuChart({
 				<AreaChart
 					accessibilityLayer
 					data={systemData}
-					margin={{ top: 10 }}
+					margin={chartMargin}
 					// syncId={'cpu'}
 				>
 					<CartesianGrid vertical={false} />
@@ -63,16 +76,13 @@ export default function CpuChart({
 						}
 					/>
 					<Area
-						dataKey="stats.cpu"
+						dataKey={dataKey}
 						name="CPU Usage"
 						type="monotoneX"
 						fill="hsl(var(--chart-1))"
 						fillOpacity={0.4}
 						stroke="hsl(var(--chart-1))"
 						isAnimationActive={false}
-						// animationEasing="ease-out"
-						// animationDuration={1200}
-						// animateNewValues={true}
 					/>
 				</AreaChart>
 			</ChartContainer>

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

@@ -10,6 +10,7 @@ import {
 	toFixedFloat,
 	getSizeVal,
 	getSizeUnit,
+	chartMargin,
 } from '@/lib/utils'
 // import { useMemo } from 'react'
 // import Spinner from '../spinner'
@@ -35,21 +36,11 @@ export default function DiskChart({
 		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
-				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
 					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart
-					accessibilityLayer
-					data={systemData}
-					margin={{
-						left: 0,
-						right: 0,
-						top: 10,
-						bottom: 0,
-					}}
-				>
+				<AreaChart accessibilityLayer data={systemData} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"

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

@@ -1,102 +0,0 @@
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
-
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import {
-	useYAxisWidth,
-	chartTimeData,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	twoDecimalString,
-} from '@/lib/utils'
-// import Spinner from '../spinner'
-import { useStore } from '@nanostores/react'
-import { $chartTime } from '@/lib/stores'
-import { SystemStatsRecord } from '@/types'
-
-export default function DiskIoChart({
-	ticks,
-	systemData,
-	dataKeys,
-}: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
-	dataKeys: string[]
-}) {
-	const chartTime = useStore($chartTime)
-	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
-
-	return (
-		<div>
-			{/* {!yAxisSet && <Spinner />} */}
-			<ChartContainer
-				config={{}}
-				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
-					'opacity-100': yAxisWidth,
-				})}
-			>
-				<AreaChart
-					accessibilityLayer
-					data={systemData}
-					margin={{
-						left: 0,
-						right: 0,
-						top: 10,
-						bottom: 0,
-					}}
-				>
-					<CartesianGrid vertical={false} />
-					<YAxis
-						className="tracking-tighter"
-						width={yAxisWidth}
-						// domain={[0, (max: number) => (max <= 0.4 ? 0.4 : Math.ceil(max))]}
-						tickFormatter={(value) => {
-							const val = toFixedWithoutTrailingZeros(value, 2) + ' MB/s'
-							return updateYAxisWidth(val)
-						}}
-						tickLine={false}
-						axisLine={false}
-					/>
-					<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) => twoDecimalString(item.value) + ' MB/s'}
-								indicator="line"
-							/>
-						}
-					/>
-					{dataKeys.map((dataKey, i) => {
-						const action = i ? 'Read' : 'Write'
-						const color = i ? 'hsl(var(--chart-1))' : 'hsl(var(--chart-3))'
-						return (
-							<Area
-								key={i}
-								dataKey={dataKey}
-								name={action}
-								type="monotoneX"
-								fill={color}
-								fillOpacity={0.3}
-								stroke={color}
-								isAnimationActive={false}
-							/>
-						)
-					})}
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-}

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

@@ -8,6 +8,7 @@ import {
 	toFixedFloat,
 	twoDecimalString,
 	formatShortDate,
+	chartMargin,
 } from '@/lib/utils'
 import { useMemo } from 'react'
 import { useStore } from '@nanostores/react'
@@ -32,18 +33,11 @@ export default function MemChart({
 		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
-				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
 					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart
-					accessibilityLayer
-					data={systemData}
-					margin={{
-						top: 10,
-					}}
-				>
+				<AreaChart accessibilityLayer data={systemData} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					{totalMem && (
 						<YAxis

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

@@ -8,8 +8,8 @@ import {
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
 	twoDecimalString,
+	chartMargin,
 } from '@/lib/utils'
-// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
@@ -27,12 +27,11 @@ export default function SwapChart({
 	return (
 		<div>
 			<ChartContainer
-				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
 					'opacity-100': yAxisWidth,
 				})}
 			>
-				<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
+				<AreaChart accessibilityLayer data={systemData} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"

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

@@ -14,6 +14,7 @@ import {
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
 	twoDecimalString,
+	chartMargin,
 } from '@/lib/utils'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
@@ -60,21 +61,11 @@ export default function TemperatureChart({
 		<div>
 			{/* {!yAxisSet && <Spinner />} */}
 			<ChartContainer
-				config={{}}
 				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
 					'opacity-100': yAxisWidth,
 				})}
 			>
-				<LineChart
-					accessibilityLayer
-					data={newChartData.data}
-					margin={{
-						left: 0,
-						right: 0,
-						top: 10,
-						bottom: 0,
-					}}
-				>
+				<LineChart accessibilityLayer data={newChartData.data} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
 						className="tracking-tighter"