From 90c3c9eb44636d37ed2d6788763fed905c02c907 Mon Sep 17 00:00:00 2001
From: Tanner <git@tanner.vc>
Date: Thu, 27 Aug 2026 21:26:12 +0000
Subject: [PATCH] refactor: replace individual Lux charts with a single
 MultiLineChart

Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>
---
 client/src/App.js | 61 +++++++++--------------------------------------
 1 file changed, 11 insertions(+), 50 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 20d8231..5ea73a7 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -634,52 +634,6 @@ function BedroomSleep({end, duration}) {
 	);
 }
 
-function Lux({name, sensorName, end, duration}) {
-	const [data, loading, tickFormatter, ticks] = useSensor('lux', sensorName, end, duration);
-
-	return (
-		<ChartContainer
-			name={name}
-			data={data}
-			lastFormatter={(x) => x.lux?.toFixed(1) + ' lx'}
-			loading={loading}
-		>
-			<XAxis
-				dataKey='time'
-				minTickGap={0}
-				tickFormatter={tickFormatter}
-				ticks={ticks}
-			/>
-
-			<YAxis
-				yAxisId='lux'
-				domain={[0, 250]}
-				width={40}
-			/>
-
-			<CartesianGrid strokeDasharray='3 3'/>
-			<Tooltip
-				formatter={(v, name) => v.toFixed(1) + units[name]}
-				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD HH:mm')}
-				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 MultiLineChart({title, measurement, dataKey, sensors, colors, end, duration, yDomain, unitKey, transform}) {
 	const [data, setData] = useState(false);
 	const [loading, setLoading] = useState(false);
@@ -904,10 +858,17 @@ function Graphs({end, duration}) {
 			<Gas end={end} duration={duration} />
 			<Water end={end} duration={duration} />
 			<BedroomSleep end={end} duration={duration} />
-			<Lux name='Living Room Lux' sensorName='Living Room' end={end} duration={duration} />
-			<Lux name='Kitchen Lux' sensorName='Kitchen' end={end} duration={duration} />
-			<Lux name='Bedroom Lux' sensorName='Bedroom' end={end} duration={duration} />
-			<Lux name='Laundry Room Lux' sensorName='Laundry Room' end={end} duration={duration} />
+			<MultiLineChart
+				title='Lux'
+				measurement='lux'
+				dataKey='lux'
+				sensors={['Living Room', 'Kitchen', 'Bedroom', 'Laundry Room']}
+				colors={['green', 'black', 'red', 'blue']}
+				end={end}
+				duration={duration}
+				yDomain={[0, 250]}
+				unitKey='Lux'
+			/>
 			<MultiLineChart
 				title='Absolute Pressure'
 				measurement='hpa'