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
2025-10-19 17:59:28 +08:00 · 2024-10-10 15:11:48 -04:00
parent 76cea9d3c3
commit cedf80a869
18 changed files with 441 additions and 425 deletions
--- a/beszel/site/src/components/charts/area-chart.tsx
+++ b/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>
+	)
+}
--- a/beszel/site/src/components/charts/bandwidth-chart.tsx
+++ b/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>
-	)
-}
--- a/beszel/site/src/components/charts/container-cpu-chart.tsx
+++ b/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} />
--- a/beszel/site/src/components/charts/container-mem-chart.tsx
+++ b/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
--- a/beszel/site/src/components/charts/container-net-chart.tsx
+++ b/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} />
--- a/beszel/site/src/components/charts/cpu-chart.tsx
+++ b/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>
--- a/beszel/site/src/components/charts/disk-chart.tsx
+++ b/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"
--- a/beszel/site/src/components/charts/disk-io-chart.tsx
+++ b/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>
-	)
-}
--- a/beszel/site/src/components/charts/mem-chart.tsx
+++ b/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
--- a/beszel/site/src/components/charts/swap-chart.tsx
+++ b/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"
--- a/beszel/site/src/components/charts/temperature-chart.tsx
+++ b/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"
--- a/beszel/site/src/components/routes/system.tsx
+++ b/beszel/site/src/components/routes/system.tsx
@@ -1,7 +1,7 @@
 import { $systems, pb, $chartTime, $containerFilter, $userSettings } from '@/lib/stores'
 import { ContainerStatsRecord, SystemRecord, SystemStatsRecord } from '@/types'
-import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '../ui/card'
+import React, { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Card, CardHeader, CardTitle, CardDescription } from '../ui/card'
 import { useStore } from '@nanostores/react'
 import Spinner from '../spinner'
 import { ClockArrowUp, CpuIcon, GlobeIcon, LayoutGridIcon, MonitorIcon, XIcon } from 'lucide-react'
@@ -12,16 +12,15 @@ 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 { Rows, TuxIcon } from '../ui/icons'
+import { ChartAverage, ChartMax, Rows, TuxIcon } from '../ui/icons'
 import { useIntersectionObserver } from '@/lib/use-intersection-observer'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'

-const CpuChart = lazy(() => import('../charts/cpu-chart'))
 const ContainerCpuChart = lazy(() => import('../charts/container-cpu-chart'))
 const MemChart = lazy(() => import('../charts/mem-chart'))
 const ContainerMemChart = lazy(() => import('../charts/container-mem-chart'))
 const DiskChart = lazy(() => import('../charts/disk-chart'))
-const DiskIoChart = lazy(() => import('../charts/disk-io-chart'))
-const BandwidthChart = lazy(() => import('../charts/bandwidth-chart'))
+const AreaChartDefault = lazy(() => import('../charts/area-chart'))
 const ContainerNetChart = lazy(() => import('../charts/container-net-chart'))
 const SwapChart = lazy(() => import('../charts/swap-chart'))
 const TemperatureChart = lazy(() => import('../charts/temperature-chart'))
@@ -29,11 +28,16 @@ const TemperatureChart = lazy(() => import('../charts/temperature-chart'))
 export default function SystemDetail({ name }: { name: string }) {
 	const systems = useStore($systems)
 	const chartTime = useStore($chartTime)
+	/** Max CPU toggle value */
+	const cpuMaxStore = useState(false)
+	const bandwidthMaxStore = useState(false)
+	const diskIoMaxStore = useState(false)
 	const [grid, setGrid] = useLocalStorage('grid', true)
 	const [ticks, setTicks] = useState([] as number[])
 	const [system, setSystem] = useState({} as SystemRecord)
 	const [systemStats, setSystemStats] = useState([] as SystemStatsRecord[])
 	const netCardRef = useRef<HTMLDivElement>(null)
+	const [containerFilterBar, setContainerFilterBar] = useState(null as null | JSX.Element)
 	const [dockerCpuChartData, setDockerCpuChartData] = useState<Record<string, number | string>[]>(
 		[]
 	)
@@ -43,15 +47,18 @@ export default function SystemDetail({ name }: { name: string }) {
 	const [dockerNetChartData, setDockerNetChartData] = useState<Record<string, number | number[]>[]>(
 		[]
 	)
-	const hasDockerStats = dockerCpuChartData.length > 0
+	const isLongerChart = chartTime !== '1h'

 	useEffect(() => {
 		document.title = `${name} / Beszel`
 		return () => {
 			resetCharts()
 			$chartTime.set($userSettings.get().chartTime)
+			setContainerFilterBar(null)
 			$containerFilter.set('')
-			// setHasDocker(false)
+			cpuMaxStore[1](false)
+			bandwidthMaxStore[1](false)
+			diskIoMaxStore[1](false)
 		}
 	}, [name])

@@ -133,12 +140,15 @@ export default function SystemDetail({ name }: { name: string }) {
 			getStats<ContainerStatsRecord>('container_stats'),
 		]).then(([systemStats, containerStats]) => {
 			const expectedInterval = chartTimeData[chartTime].expectedInterval
-			if (containerStats.status === 'fulfilled' && containerStats.value.length) {
-				makeContainerData(addEmptyValues(containerStats.value, expectedInterval))
-			}
 			if (systemStats.status === 'fulfilled') {
 				setSystemStats(addEmptyValues(systemStats.value, expectedInterval))
 			}
+			if (containerStats.status === 'fulfilled' && containerStats.value.length) {
+				!containerFilterBar && setContainerFilterBar(<ContainerFilterBar />)
+				makeContainerData(addEmptyValues(containerStats.value, expectedInterval))
+			} else {
+				setContainerFilterBar(null)
+			}
 		})
 	}, [system, chartTime])

@@ -149,7 +159,10 @@ export default function SystemDetail({ name }: { name: string }) {
 		const now = new Date()
 		const startTime = chartTimeData[chartTime].getOffset(now)
 		const scale = scaleTime([startTime.getTime(), now], [0, systemStats.length])
-		setTicks(scale.ticks(chartTimeData[chartTime].ticks).map((d) => d.getTime()))
+		const newTicks = scale.ticks(chartTimeData[chartTime].ticks).map((d) => d.getTime())
+		if (newTicks[0] !== ticks[0]) {
+			setTicks(newTicks)
+		}
 	}, [chartTime, systemStats])

 	// make container stats for charts
@@ -192,7 +205,7 @@ export default function SystemDetail({ name }: { name: string }) {
 		let uptime: number | string = system.info.u
 		if (system.info.u < 172800) {
 			const hours = Math.trunc(uptime / 3600)
-			uptime = `${hours} hour${hours > 1 ? 's' : ''}`
+			uptime = `${hours} hour${hours == 1 ? '' : 's'}`
 		} else {
 			uptime = `${Math.trunc(system.info?.u / 86400)} days`
 		}
@@ -239,7 +252,7 @@ export default function SystemDetail({ name }: { name: string }) {

 	return (
 		<>
-			<div id="chartwrap" className="grid gap-4 mb-10">
+			<div id="chartwrap" className="grid gap-4 mb-10 overflow-x-clip">
 				{/* system info */}
 				<Card>
 					<div className="grid lg:flex items-center gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
@@ -324,17 +337,27 @@ export default function SystemDetail({ name }: { name: string }) {
 					<ChartCard
 						grid={grid}
 						title="Total CPU Usage"
-						description="Average system-wide CPU utilization"
+						description={`${
+							cpuMaxStore[0] && isLongerChart ? 'Max 1 min ' : 'Average'
+						} system-wide CPU utilization`}
+						cornerEl={isLongerChart ? <SelectAvgMax store={cpuMaxStore} /> : null}
 					>
-						<CpuChart ticks={ticks} systemData={systemStats} />
+						<AreaChartDefault
+							ticks={ticks}
+							systemData={systemStats}
+							chartName="CPU Usage"
+							showMax={isLongerChart && cpuMaxStore[0]}
+							unit="%"
+							chartTime={chartTime}
+						/>
 					</ChartCard>

-					{hasDockerStats && (
+					{containerFilterBar && (
 						<ChartCard
 							grid={grid}
 							title="Docker CPU Usage"
-							description="CPU utilization of docker containers"
-							isContainerChart={true}
+							description="Average CPU utilization of containers"
+							cornerEl={containerFilterBar}
 						>
 							<ContainerCpuChart chartData={dockerCpuChartData} ticks={ticks} />
 						</ChartCard>
@@ -348,12 +371,12 @@ export default function SystemDetail({ name }: { name: string }) {
 						<MemChart ticks={ticks} systemData={systemStats} />
 					</ChartCard>

-					{hasDockerStats && (
+					{containerFilterBar && (
 						<ChartCard
 							grid={grid}
 							title="Docker Memory Usage"
 							description="Memory usage of docker containers"
-							isContainerChart={true}
+							cornerEl={containerFilterBar}
 						>
 							<ContainerMemChart chartData={dockerMemChartData} ticks={ticks} />
 						</ChartCard>
@@ -368,23 +391,37 @@ export default function SystemDetail({ name }: { name: string }) {
 						/>
 					</ChartCard>

-					<ChartCard grid={grid} title="Disk I/O" description="Throughput of root filesystem">
-						<DiskIoChart
+					<ChartCard
+						grid={grid}
+						title="Disk I/O"
+						description="Throughput of root filesystem"
+						cornerEl={isLongerChart ? <SelectAvgMax store={diskIoMaxStore} /> : null}
+					>
+						<AreaChartDefault
 							ticks={ticks}
 							systemData={systemStats}
-							dataKeys={['stats.dw', 'stats.dr']}
+							showMax={isLongerChart && diskIoMaxStore[0]}
+							chartName="dio"
+							chartTime={chartTime}
 						/>
 					</ChartCard>

 					<ChartCard
 						grid={grid}
 						title="Bandwidth"
+						cornerEl={isLongerChart ? <SelectAvgMax store={bandwidthMaxStore} /> : null}
 						description="Network traffic of public interfaces"
 					>
-						<BandwidthChart ticks={ticks} systemData={systemStats} />
+						<AreaChartDefault
+							ticks={ticks}
+							systemData={systemStats}
+							showMax={isLongerChart && bandwidthMaxStore[0]}
+							chartName="bw"
+							chartTime={chartTime}
+						/>
 					</ChartCard>

-					{hasDockerStats && dockerNetChartData.length > 0 && (
+					{containerFilterBar && dockerNetChartData.length > 0 && (
 						<div
 							ref={netCardRef}
 							className={cn({
@@ -394,7 +431,7 @@ export default function SystemDetail({ name }: { name: string }) {
 							<ChartCard
 								title="Docker Network I/O"
 								description="Includes traffic between internal services"
-								isContainerChart={true}
+								cornerEl={containerFilterBar}
 							>
 								<ContainerNetChart chartData={dockerNetChartData} ticks={ticks} />
 							</ChartCard>
@@ -436,11 +473,14 @@ export default function SystemDetail({ name }: { name: string }) {
 										grid={grid}
 										title={`${extraFsName} I/O`}
 										description={`Throughput of ${extraFsName}`}
+										cornerEl={isLongerChart ? <SelectAvgMax store={diskIoMaxStore} /> : null}
 									>
-										<DiskIoChart
+										<AreaChartDefault
 											ticks={ticks}
 											systemData={systemStats}
-											dataKeys={[`stats.efs.${extraFsName}.w`, `stats.efs.${extraFsName}.r`]}
+											showMax={isLongerChart && diskIoMaxStore[0]}
+											chartName={`efs.${extraFsName}`}
+											chartTime={chartTime}
 										/>
 									</ChartCard>
 								</div>
@@ -461,10 +501,10 @@ function ContainerFilterBar() {

 	const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
 		$containerFilter.set(e.target.value)
-	}, []) // Use an empty dependency array to prevent re-creation
+	}, [])

 	return (
-		<div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:right-3.5">
+		<>
 			<Input
 				placeholder="Filter..."
 				className="pl-4 pr-8"
@@ -483,7 +523,33 @@ function ContainerFilterBar() {
 					<XIcon className="h-4 w-4" />
 				</Button>
 			)}
-		</div>
+		</>
+	)
+}
+
+function SelectAvgMax({
+	store,
+}: {
+	store: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
+}) {
+	const [max, setMax] = store
+	const Icon = max ? ChartMax : ChartAverage
+
+	return (
+		<Select value={max ? 'max' : 'avg'} onValueChange={(e) => setMax(e === 'max')}>
+			<SelectTrigger className="relative pl-10 pr-5">
+				<Icon className="h-4 w-4 absolute left-4 top-1/2 -translate-y-1/2 opacity-85" />
+				<SelectValue />
+			</SelectTrigger>
+			<SelectContent>
+				<SelectItem key="avg" value="avg">
+					Average
+				</SelectItem>
+				<SelectItem key="max" value="max">
+					Max 1 min
+				</SelectItem>
+			</SelectContent>
+		</Select>
 	)
 }

@@ -492,13 +558,13 @@ function ChartCard({
 	description,
 	children,
 	grid,
-	isContainerChart,
+	cornerEl,
 }: {
 	title: string
 	description: string
 	children: React.ReactNode
 	grid?: boolean
-	isContainerChart?: boolean
+	cornerEl?: JSX.Element | null
 }) {
 	const { isIntersecting, ref } = useIntersectionObserver()

@@ -510,12 +576,16 @@ function ChartCard({
 			<CardHeader className="pb-5 pt-4 relative space-y-1 max-sm:py-3 max-sm:px-4">
 				<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
 				<CardDescription>{description}</CardDescription>
-				{isContainerChart && <ContainerFilterBar />}
+				{cornerEl && (
+					<div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:right-3.5">
+						{cornerEl}
+					</div>
+				)}
 			</CardHeader>
-			<CardContent className="pl-0 w-[calc(100%-1.6em)] h-52 relative">
+			<div className="pl-0 w-[calc(100%-1.6em)] h-52 relative">
 				{<Spinner />}
 				{isIntersecting && <Suspense>{children}</Suspense>}
-			</CardContent>
+			</div>
 		</Card>
 	)
 }
--- a/beszel/site/src/components/ui/chart.tsx
+++ b/beszel/site/src/components/ui/chart.tsx
@@ -16,77 +16,77 @@ export type ChartConfig = {
 	)
 }

-type ChartContextProps = {
-	config: ChartConfig
-}
+// type ChartContextProps = {
+// 	config: ChartConfig
+// }

-const ChartContext = React.createContext<ChartContextProps | null>(null)
+// const ChartContext = React.createContext<ChartContextProps | null>(null)

-function useChart() {
-	const context = React.useContext(ChartContext)
+// function useChart() {
+// 	const context = React.useContext(ChartContext)

-	if (!context) {
-		throw new Error('useChart must be used within a <ChartContainer />')
-	}
+// 	if (!context) {
+// 		throw new Error('useChart must be used within a <ChartContainer />')
+// 	}

-	return context
-}
+// 	return context
+// }

 const ChartContainer = React.forwardRef<
 	HTMLDivElement,
 	React.ComponentProps<'div'> & {
-		config: ChartConfig
+		// config: ChartConfig
 		children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']
 	}
->(({ id, className, children, config, ...props }, ref) => {
+>(({ id, className, children, ...props }, ref) => {
 	const uniqueId = React.useId()
 	const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`

 	return (
-		<ChartContext.Provider value={{ config }}>
-			<div
-				data-chart={chartId}
-				ref={ref}
-				className={cn(
-					"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-					className
-				)}
-				{...props}
-			>
-				<ChartStyle id={chartId} config={config} />
-				<RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
-			</div>
-		</ChartContext.Provider>
+		//<ChartContext.Provider value={{ config }}>
+		<div
+			data-chart={chartId}
+			ref={ref}
+			className={cn(
+				"text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+				className
+			)}
+			{...props}
+		>
+			{/* <ChartStyle id={chartId} config={config} /> */}
+			<RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+		</div>
+		//</ChartContext.Provider>
 	)
 })
 ChartContainer.displayName = 'Chart'

-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-	const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color)
+// const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+// 	const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color)

-	if (!colorConfig.length) {
-		return null
-	}
+// 	if (!colorConfig.length) {
+// 		return null
+// 	}

-	return (
-		<style
-			dangerouslySetInnerHTML={{
-				__html: Object.entries(THEMES).map(
-					([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-	.map(([key, itemConfig]) => {
-		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
-		return color ? `  --color-${key}: ${color};` : null
-	})
-	.join('\n')}
-}
-`
-				),
-			}}
-		/>
-	)
-}
+// 	return (
+// 		<style
+// 			dangerouslySetInnerHTML={{
+// 				__html: Object.entries(THEMES).map(
+// 					([theme, prefix]) => `
+// ${prefix} [data-chart=${id}] {
+// ${colorConfig
+// 	.map(([key, itemConfig]) => {
+// 		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
+// 		return color ? `  --color-${key}: ${color};` : null
+// 	})
+// 	.join('\n')}
+// }
+// `
+// 				),
+// 			}}
+// 		/>
+// 	)
+// }

 const ChartTooltip = RechartsPrimitive.Tooltip

@@ -126,7 +126,8 @@ const ChartTooltipContent = React.forwardRef<
 		},
 		ref
 	) => {
-		const { config } = useChart()
+		// const { config } = useChart()
+		const config = {}

 		React.useMemo(() => {
 			if (filter) {
@@ -146,10 +147,7 @@ const ChartTooltipContent = React.forwardRef<
 			const [item] = payload
 			const key = `${labelKey || item.dataKey || item.name || 'value'}`
 			const itemConfig = getPayloadConfigFromPayload(config, item, key)
-			const value =
-				!labelKey && typeof label === 'string'
-					? config[label as keyof typeof config]?.label || label
-					: itemConfig?.label
+			const value = !labelKey && typeof label === 'string' ? label : itemConfig?.label

 			if (labelFormatter) {
 				return (
@@ -262,7 +260,7 @@ const ChartLegendContent = React.forwardRef<
 			hideIcon?: boolean
 			nameKey?: string
 		}
->(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {
+>(({ className, payload, verticalAlign = 'bottom' }, ref) => {
 	// const { config } = useChart()

 	if (!payload?.length) {
@@ -342,5 +340,5 @@ export {
 	ChartTooltipContent,
 	ChartLegend,
 	ChartLegendContent,
-	ChartStyle,
+	// ChartStyle,
 }
--- a/beszel/site/src/components/ui/icons.tsx
+++ b/beszel/site/src/components/ui/icons.tsx
@@ -23,3 +23,25 @@ export function Rows(props: SVGProps<SVGSVGElement>) {
 		</svg>
 	)
 }
+
+// IconPark Apache License 2.0 https://github.com/bytedance/IconPark
+export function ChartAverage(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg fill="none" viewBox="0 0 48 48" stroke="currentColor" {...props}>
+			<path strokeWidth="3" d="M4 4v40h40" />
+			<path strokeWidth="3" d="M10 38S15.3 4 27 4s17 34 17 34" />
+			<path strokeWidth="4" d="M10 24h34" />
+		</svg>
+	)
+}
+
+// IconPark Apache License 2.0 https://github.com/bytedance/IconPark
+export function ChartMax(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg fill="none" viewBox="0 0 48 48" stroke="currentColor" {...props}>
+			<path strokeWidth="3" d="M4 4v40h40" />
+			<path strokeWidth="3" d="M10 38S15.3 4 27 4s17 34 17 34" />
+			<path strokeWidth="4" d="M10 4h34" />
+		</svg>
+	)
+}
--- a/beszel/site/src/lib/utils.ts
+++ b/beszel/site/src/lib/utils.ts
@@ -204,7 +204,10 @@ export function useYAxisWidth() {
 			clearTimeout(timeout)
 			timeout = setTimeout(() => {
 				document.body.appendChild(div)
-				setYAxisWidth(div.offsetWidth + 24)
+				const width = div.offsetWidth + 24
+				if (width > yAxisWidth) {
+					setYAxisWidth(div.offsetWidth + 24)
+				}
 				document.body.removeChild(div)
 			})
 		}
@@ -285,3 +288,5 @@ export const getSizeUnit = (n: number) => (n >= 1_000 ? ' TB' : ' GB')
 * @returns value in GB if less than 1000, otherwise value in TB
 */
 export const getSizeVal = (n: number) => (n >= 1_000 ? n / 1_000 : n)
+
+export const chartMargin = { top: 12 }
--- a/beszel/site/src/types.d.ts
+++ b/beszel/site/src/types.d.ts
@@ -36,7 +36,7 @@ export interface SystemStats {
 	/** cpu percent */
 	cpu: number
 	/** peak cpu */
-	pcpu?: number
+	cpum?: number
 	/** total memory (gb) */
 	m: number
 	/** memory used (gb) */
@@ -61,14 +61,18 @@ export interface SystemStats {
 	dr: number
 	/** disk write (mb) */
 	dw: number
+	/** max disk read (mb) */
+	drm?: number
+	/** max disk write (mb) */
+	dwm?: number
 	/** network sent (mb) */
 	ns: number
-	/** peak network sent (mb) */
-	pns?: number
 	/** network received (mb) */
 	nr: number
-	/** peak network received (mb) */
-	pnr?: number
+	/** max network sent (mb) */
+	nsm?: number
+	/** max network received (mb) */
+	nrm?: number
 	/** temperatures */
 	t?: Record<string, number>
 	/** extra filesystems */
@@ -84,6 +88,10 @@ export interface ExtraFsStats {
 	r: number
 	/** total write (mb) */
 	w: number
+	/** max read (mb) */
+	rm: number
+	/** max write (mb) */
+	wm: number
 }

 export interface ContainerStatsRecord extends RecordModel {