feat: add pressure graphs

client/src/App.js

@@ -31,6 +31,7 @@ const units = {
 	'Setpoint': ' °C',
 	'State': '',
 	'Lux': ' lx',
+	'Hpa': ' hpa',
 	'Soil': '',
 };
 
@@ -668,6 +669,50 @@ function Lux({name, sensorName, end, duration}) {
 	);
 }
 
+function Pressure({name, sensorName, end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('hpa', sensorName, end, duration);
+
+	return (
+		<ChartContainer
+			name={name}
+			data={data}
+			lastFormatter={(x) => x.hpa?.toFixed(1) + ' hpa'}
+			loading={loading}
+		>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={tickFormatter}
+			/>
+
+			<YAxis
+				yAxisId='hpa'
+				domain={[850, 915]}
+			/>
+
+			<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='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}
+			/>
+		</ChartContainer>
+	);
+}
+
 
 function Soil({name, sensorName, end, duration}) {
 	const [data, loading, tickFormatter] = useSensor('soil', sensorName, end, duration);
@@ -790,6 +835,9 @@ 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} />
 			<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} />