From 49f9ee120ba93e69b827022514be5cb14e621edf Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Tue, 13 May 2025 19:16:55 +0000
Subject: [PATCH] Add Kitchen and Bedroom air / lux sensors

---
 .gitignore        |   1 +
 client/src/App.js | 270 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 271 insertions(+)

diff --git a/.gitignore b/.gitignore
index 69fdc0b..81b5bec 100644
--- a/.gitignore
+++ b/.gitignore
@@ -104,3 +104,4 @@ ENV/
 
 settings.py
 *.csv
+.aider*
diff --git a/client/src/App.js b/client/src/App.js
index e5817fc..bd2edac 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -869,6 +869,184 @@ 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);
 
@@ -953,6 +1131,94 @@ function LivingRoomLux({end, duration}) {
 	);
 }
 
+function KitchenLux({end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('lux', 'Kitchen', end, duration);
+
+	return (
+		<ChartContainer
+			name='Kitchen Lux'
+			data={data}
+			lastFormatter={(x) => x.lux?.toFixed(1) + ' lx'}
+			loading={loading}
+		>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={tickFormatter}
+			/>
+
+			<YAxis
+				yAxisId='lux'
+				domain={[0, 250]}
+			/>
+
+			<CartesianGrid strokeDasharray='3 3'/>
+			<Tooltip
+				formatter={(v, name) => v.toFixed(1) + units[name]}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
+				separator=': '
+			/>
+
+			<ReferenceLine yAxisId='lux' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+
+			<Line
+				yAxisId='lux'
+				type='monotone'
+				dataKey='lux'
+				name='Lux'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
+function BedroomLux({end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('lux', 'Bedroom', end, duration);
+
+	return (
+		<ChartContainer
+			name='Bedroom Lux'
+			data={data}
+			lastFormatter={(x) => x.lux?.toFixed(1) + ' lx'}
+			loading={loading}
+		>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={tickFormatter}
+			/>
+
+			<YAxis
+				yAxisId='lux'
+				domain={[0, 250]}
+			/>
+
+			<CartesianGrid strokeDasharray='3 3'/>
+			<Tooltip
+				formatter={(v, name) => v.toFixed(1) + units[name]}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
+				separator=': '
+			/>
+
+			<ReferenceLine yAxisId='lux' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+
+			<Line
+				yAxisId='lux'
+				type='monotone'
+				dataKey='lux'
+				name='Lux'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
 
 function Graphs({end, duration}) {
 	const api_key = localStorage.getItem('api_key', false);
@@ -968,6 +1234,8 @@ function Graphs({end, duration}) {
 			<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} />
 			<OutsideTemperature end={end} duration={duration} />
 			<BedroomTemperature end={end} duration={duration} />
 			<NookTemperature end={end} duration={duration} />
@@ -979,6 +1247,8 @@ function Graphs({end, duration}) {
 			<Water end={end} duration={duration} />
 			<BedroomSleep end={end} duration={duration} />
 			<LivingRoomLux end={end} duration={duration} />
+			<KitchenLux end={end} duration={duration} />
+			<BedroomLux end={end} duration={duration} />
 
 			{!!api_key ||
 				<div>