From ef47ee3b26337fb50f42c2eea3e7264f9d0dde27 Mon Sep 17 00:00:00 2001
From: Tanner <git@tanner.vc>
Date: Tue, 25 Aug 2026 17:06:33 +0000
Subject: [PATCH] feat: add MultiLineChart component and merge pressure charts

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

diff --git a/client/src/App.js b/client/src/App.js
index 7f8520f..964bfad 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -669,46 +669,90 @@ function Lux({name, sensorName, end, duration}) {
 	);
 }
 
-function Pressure({name, sensorName, end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('hpa', sensorName, end, duration);
+function MultiLineChart({title, measurement, dataKey, sensors, colors, end, duration, yDomain, unitKey}) {
+	const [data, setData] = useState(false);
+	const [loading, setLoading] = useState(false);
+
+	useEffect(() => {
+		const get = async() => {
+			setLoading(true);
+			try {
+				const api_key = localStorage.getItem('api_key', 'null');
+				const params = { end: end.unix(), duration: duration.len.toLowerCase(), window: duration.win, api_key: api_key };
+				
+				const responses = await Promise.all(
+					sensors.map(name => axios.get(`https://sensors-api.dns.t0.vc/history/${measurement}/${name}`, { params }))
+				);
+
+				const timeMap = {};
+				responses.forEach((res, i) => {
+					const sensorName = sensors[i];
+					res.data.forEach(d => {
+						if (!timeMap[d.time]) timeMap[d.time] = { time: d.time };
+						timeMap[d.time][sensorName] = d[dataKey];
+					});
+				});
+
+				const merged = Object.values(timeMap).sort((a, b) => a.time.localeCompare(b.time));
+				setData(merged);
+				setLoading(false);
+			} catch (error) {
+				console.log(error);
+				setLoading(false);
+			}
+		};
+		get();
+	}, [end, duration, measurement, dataKey, JSON.stringify(sensors)]);
+
+	const memoConvertTZ = (isDST, timeStr, format) => {
+		if (!timeStr) return '?';
+		let lookUp, result = null;
+		const date = timeStr.slice(5, 10);
+		const hours = timeStr.slice(11, 13);
+		const minutes = timeStr.slice(14, 16);
+		if (format === 'HH') { lookUp = [isDST, hours, format]; }
+		else { lookUp = [isDST, date, format]; }
+		if (tzcache[lookUp] != undefined ) { result = tzcache[lookUp]; }
+		else { result = moment(timeStr).tz('America/Edmonton').format(format); tzcache[lookUp] = result; }
+		if (format === 'HH') { return result + ':' + minutes; }
+		else { return result; }
+	};
+
+	const isDST = end.tz('America/Edmonton').isDST();
+	const tickFormatter = (timeStr) => memoConvertTZ(isDST, timeStr, duration.format);
 
 	return (
 		<ChartContainer
-			name={name}
+			name={title}
 			data={data}
-			lastFormatter={(x) => x.hpa?.toFixed(1) + ' hpa'}
+			lastFormatter={(x) => {
+				const vals = sensors.map(s => x[s]).filter(v => v !== undefined);
+				return vals.length ? vals[0].toFixed(1) + (units[unitKey] || '') : 'No data';
+			}}
 			loading={loading}
 		>
-			<XAxis
-				dataKey='time'
-				minTickGap={10}
-				tickFormatter={tickFormatter}
-			/>
-
-			<YAxis
-				yAxisId='hpa'
-				domain={[850, 915]}
-			/>
-
+			<XAxis dataKey='time' minTickGap={10} tickFormatter={tickFormatter} />
+			<YAxis domain={yDomain} />
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
-				formatter={(v, name) => v.toFixed(1) + units[name]}
+				formatter={(v, name) => v.toFixed(1) + (units[unitKey] || '')}
 				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
 				separator=': '
 			/>
-
-			<ReferenceLine yAxisId='hpa' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
-
-			<Line
-				yAxisId='hpa'
-				type='monotone'
-				dataKey='hpa'
-				name='Hpa'
-				stroke='black'
-				strokeWidth={2}
-				dot={false}
-				isAnimationActive={false}
-			/>
+			<ReferenceLine x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+			<Legend />
+			{sensors.map((sensor, i) => (
+				<Line
+					key={sensor}
+					type='monotone'
+					dataKey={sensor}
+					name={sensor}
+					stroke={colors[i % colors.length]}
+					strokeWidth={2}
+					dot={false}
+					isAnimationActive={false}
+				/>
+			))}
 		</ChartContainer>
 	);
 }
@@ -835,9 +879,17 @@ function Graphs({end, 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} />
-			<Pressure name='Kitchen Pressure' sensorName='Kitchen' end={end} duration={duration} />
-			<Pressure name='Bedroom Pressure' sensorName='Bedroom' end={end} duration={duration} />
-			<Pressure name='Laundry Room Pressure' sensorName='Laundry Room' end={end} duration={duration} />
+			<MultiLineChart 
+				title='Pressure' 
+				measurement='hpa' 
+				dataKey='hpa' 
+				sensors={['Kitchen', 'Bedroom', 'Laundry Room']} 
+				colors={['black', 'red', 'blue']} 
+				end={end} 
+				duration={duration} 
+				yDomain={[850, 915]} 
+				unitKey='Hpa' 
+			/>
 			<WH51Soil name='Side Garden Soil Moisture' sensorName='Side Garden' end={end} duration={duration} />
 			<Soil name='Dumb Cane Soil Moisture' sensorName='Dumb Cane' end={end} duration={duration} />
 			<Soil name='Kitchen Pothos Soil Moisture' sensorName='Kitchen Pothos' end={end} duration={duration} />