From 1052cf9bb9a528c05f99618ecc1488fb14d0896f Mon Sep 17 00:00:00 2001
From: "Tanner Collin (aider)" <git@tannercollin.com>
Date: Thu, 3 Jul 2025 22:32:46 +0000
Subject: [PATCH] refactor: abstract air quality components

---
 client/src/App.js | 188 ++--------------------------------------------
 1 file changed, 6 insertions(+), 182 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 9f48d30..652d5a4 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -781,12 +781,12 @@ function LivingRoomDust({end, duration}) {
 	);
 }
 
-function LivingRoomAir({end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('air', 'Living Room', end, duration);
+function Air({name, sensorName, end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('air', sensorName, end, duration);
 
 	return (
 		<ChartContainer
-			name='Living Room Air'
+			name={name}
 			data={data}
 			lastFormatter={(x) => x.max_p10?.toFixed(1) + ' ug/m³'}
 			loading={loading}
@@ -870,183 +870,7 @@ function LivingRoomAir({end, duration}) {
 	);
 }
 
-function KitchenAir({end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('air', 'Kitchen', end, duration);
 
-	return (
-		<ChartContainer
-			name='Kitchen Air'
-			data={data}
-			lastFormatter={(x) => x.max_p10?.toFixed(1) + ' ug/m³'}
-			loading={loading}
-		>
-			<XAxis
-				dataKey='time'
-				minTickGap={10}
-				tickFormatter={tickFormatter}
-			/>
-
-			<YAxis
-				yAxisId='co2'
-				domain={[400, 1000]}
-				orientation='right'
-				hide={true}
-			/>
-			<YAxis
-				yAxisId='voc'
-				domain={[0, 250]}
-				orientation='right'
-				hide={true}
-			/>
-			<YAxis
-				yAxisId='pm'
-				domain={[0, 20]}
-			/>
-
-			<CartesianGrid strokeDasharray='3 3'/>
-			<Tooltip
-				formatter={(v, name) => v + units[name]}
-				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
-				separator=': '
-			/>
-
-			<ReferenceLine yAxisId='pm' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
-
-			<Line
-				yAxisId='pm'
-				type='monotone'
-				dataKey='max_p10'
-				name='PM10'
-				stroke='black'
-				strokeWidth={2}
-				dot={false}
-				isAnimationActive={false}
-			/>
-
-			<Line
-				yAxisId='pm'
-				type='monotone'
-				dataKey='max_p25'
-				name='PM2.5'
-				stroke='red'
-				strokeWidth={2}
-				dot={false}
-				isAnimationActive={false}
-			/>
-
-			<Line
-				yAxisId='co2'
-				type='monotone'
-				dataKey='max_co2'
-				name='CO2'
-				stroke='blue'
-				strokeWidth={2}
-				dot={false}
-				isAnimationActive={false}
-			/>
-
-			<Line
-				yAxisId='voc'
-				type='monotone'
-				dataKey='max_voc'
-				name='VOC'
-				stroke='green'
-				strokeWidth={2}
-				dot={false}
-				isAnimationActive={false}
-			/>
-		</ChartContainer>
-	);
-}
-
-function BedroomAir({end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('air', 'Bedroom', end, duration);
-
-	return (
-		<ChartContainer
-			name='Bedroom Air'
-			data={data}
-			lastFormatter={(x) => x.max_p10?.toFixed(1) + ' ug/m³'}
-			loading={loading}
-		>
-			<XAxis
-				dataKey='time'
-				minTickGap={10}
-				tickFormatter={tickFormatter}
-			/>
-
-			<YAxis
-				yAxisId='co2'
-				domain={[400, 1000]}
-				orientation='right'
-				hide={true}
-			/>
-			<YAxis
-				yAxisId='voc'
-				domain={[0, 250]}
-				orientation='right'
-				hide={true}
-			/>
-			<YAxis
-				yAxisId='pm'
-				domain={[0, 20]}
-			/>
-
-			<CartesianGrid strokeDasharray='3 3'/>
-			<Tooltip
-				formatter={(v, name) => v + units[name]}
-				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
-				separator=': '
-			/>
-
-			<ReferenceLine yAxisId='pm' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
-
-			<Line
-				yAxisId='pm'
-				type='monotone'
-				dataKey='max_p10'
-				name='PM10'
-				stroke='black'
-				strokeWidth={2}
-				dot={false}
-				isAnimationActive={false}
-			/>
-
-			<Line
-				yAxisId='pm'
-				type='monotone'
-				dataKey='max_p25'
-				name='PM2.5'
-				stroke='red'
-				strokeWidth={2}
-				dot={false}
-				isAnimationActive={false}
-			/>
-
-			<Line
-				yAxisId='co2'
-				type='monotone'
-				dataKey='max_co2'
-				name='CO2'
-				stroke='blue'
-				strokeWidth={2}
-				dot={false}
-				isAnimationActive={false}
-			/>
-
-			<Line
-				yAxisId='voc'
-				type='monotone'
-				dataKey='max_voc'
-				name='VOC'
-				stroke='green'
-				strokeWidth={2}
-				dot={false}
-				isAnimationActive={false}
-			/>
-		</ChartContainer>
-	);
-}
 
 function BedroomSleep({end, duration}) {
 	const [data, loading, tickFormatter] = useSensor('sleep', 'Bedroom', end, duration);
@@ -1191,9 +1015,9 @@ function Graphs({end, duration}) {
 		<div className='container'>
 			<SolarPower end={end} duration={duration} />
 			<LivingRoomDust end={end} duration={duration} />
-			<LivingRoomAir end={end} duration={duration} />
-			<KitchenAir end={end} duration={duration} />
-			<BedroomAir end={end} duration={duration} />
+			<Air name='Living Room Air' sensorName='Living Room' end={end} duration={duration} />
+			<Air name='Kitchen Air' sensorName='Kitchen' end={end} duration={duration} />
+			<Air name='Bedroom Air' sensorName='Bedroom' end={end} duration={duration} />
 			<OutsideTemperature end={end} duration={duration} />
 			<BedroomTemperature end={end} duration={duration} />
 			<NookTemperature end={end} duration={duration} />