use same disk I/O chart component for root and extra fs

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

@@ -17,9 +17,11 @@ 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()
@@ -77,26 +79,21 @@ export default function DiskIoChart({
 							/>
 						}
 					/>
+					{dataKeys.map((dataKey, i) => {
+						const action = i ? 'Read' : 'Write'
+						const color = i ? 'hsl(var(--chart-1))' : 'hsl(var(--chart-3))'
+						return (
 							<Area
-						dataKey="stats.dw"
+								dataKey={dataKey}
-						name="Write"
+								name={action}
 								type="monotoneX"
-						fill="hsl(var(--chart-3))"
+								fill={color}
 								fillOpacity={0.3}
-						stroke="hsl(var(--chart-3))"
+								stroke={color}
-						// animationDuration={1200}
-						isAnimationActive={false}
-					/>
-					<Area
-						dataKey="stats.dr"
-						name="Read"
-						type="monotoneX"
-						fill="hsl(var(--chart-1))"
-						fillOpacity={0.3}
-						stroke="hsl(var(--chart-1))"
-						// animationDuration={1200}
 								isAnimationActive={false}
 							/>
+						)
+					})}
 				</AreaChart>
 			</ChartContainer>
 		</div>

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

@@ -1,106 +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 ExFsDiskIoChart({
-	ticks,
-	systemData,
-	fs,
-}: {
-	ticks: number[]
-	systemData: SystemStatsRecord[]
-	fs: 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)
-							return updateYAxisWidth(val + ' MB/s')
-						}}
-						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"
-							/>
-						}
-					/>
-					<Area
-						dataKey={`stats.efs.${fs}.w`}
-						name="Write"
-						type="monotoneX"
-						fill="hsl(var(--chart-3))"
-						fillOpacity={0.3}
-						stroke="hsl(var(--chart-3))"
-						// animationDuration={1200}
-						isAnimationActive={false}
-					/>
-					<Area
-						dataKey={`stats.efs.${fs}.r`}
-						name="Read"
-						type="monotoneX"
-						fill="hsl(var(--chart-1))"
-						fillOpacity={0.3}
-						stroke="hsl(var(--chart-1))"
-						// animationDuration={1200}
-						isAnimationActive={false}
-					/>
-				</AreaChart>
-			</ChartContainer>
-		</div>
-	)
-}

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

@@ -38,7 +38,6 @@ const BandwidthChart = lazy(() => import('../charts/bandwidth-chart'))
 const ContainerNetChart = lazy(() => import('../charts/container-net-chart'))
 const SwapChart = lazy(() => import('../charts/swap-chart'))
 const TemperatureChart = lazy(() => import('../charts/temperature-chart'))
-const ExFsDiskIoChart = lazy(() => import('../charts/extra-fs-disk-io-chart'))
 
 export default function SystemDetail({ name }: { name: string }) {
 	const systems = useStore($systems)
@@ -385,7 +384,11 @@ export default function SystemDetail({ name }: { name: string }) {
 					</ChartCard>
 
 					<ChartCard grid={grid} title="Disk I/O" description="Throughput of root filesystem">
-						<DiskIoChart ticks={ticks} systemData={systemStats} />
+						<DiskIoChart
+							ticks={ticks}
+							systemData={systemStats}
+							dataKeys={['stats.dw', 'stats.dr']}
+						/>
 					</ChartCard>
 
 					<ChartCard
@@ -443,7 +446,11 @@ export default function SystemDetail({ name }: { name: string }) {
 										title={`${extraFsName} I/O`}
 										description={`Throughput of of ${extraFsName}`}
 									>
-										<ExFsDiskIoChart ticks={ticks} systemData={systemStats} fs={extraFsName} />
+										<DiskIoChart
+											ticks={ticks}
+											systemData={systemStats}
+											dataKeys={[`stats.efs.${extraFsName}.w`, `stats.efs.${extraFsName}.r`]}
+										/>
 									</ChartCard>
 								</div>
 							)