Add Air quality and proper units

client/src/App.js

@@ -19,6 +19,20 @@ const durations = [
 	{id: 7, len: 'Year', win: '30d', full: '30 day', delta: [1, 'years'], format: 'M'},
 ];
 
+const units = {
+	'PM10': ' ug/m³',
+	'PM2.5': ' ug/m³',
+	'VOC': ' / 500',
+	'CO2': ' ppm',
+	'Energy': ' kWh',
+	'Power': ' W',
+	'Temperature': ' °C',
+	'Humidity': '%',
+	'Setpoint': ' °C',
+	'State': '',
+	'Lux': ' lx',
+};
+
 function useSensor(measurement, name, end, duration) {
 	const [data, setData] = useState(false);
 	const [loading, setLoading] = useState(false);
@@ -134,24 +148,43 @@ function SolarPower({end, duration}) {
 				minTickGap={10}
 				tickFormatter={tickFormatter}
 			/>
+
 			<YAxis
+				yAxisId='right'
+				domain={[0, 10]}
+				orientation='right'
+				hide={true}
+			/>
+			<YAxis
+				yAxisId='left'
 				domain={[0, 6000]}
 			/>
+
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
-				formatter={v => v + ' W'}
+				formatter={(v, name) => v.toFixed(1) + units[name]}
 				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
 				separator=': '
 			/>
 
-			<ReferenceLine x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue'>
+			<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue'>
 				<Label value='Midnight' offset={7} position='top' />
 			</ReferenceLine>
 
+			<Bar
+				yAxisId='right'
+				type='monotone'
+				dataKey='lifetime_energy'
+				name='Energy'
+				fill='green'
+				isAnimationActive={false}
+			/>
+
 			<Line
+				yAxisId='left'
 				type='monotone'
 				dataKey='actual_total'
-				name='Total Power'
+				name='Power'
 				stroke='black'
 				strokeWidth={2}
 				dot={false}
@@ -186,7 +219,7 @@ function OutsideTemperature({end, duration}) {
 				separator=': '
 			/>
 
-			<ReferenceLine y={0} stroke='blue'>
+			<ReferenceLine y={0} stroke='purple'>
 				<Label value='Freezing' offset={7} position='bottom' />
 			</ReferenceLine>
 
@@ -220,23 +253,33 @@ function NookTemperature({end, duration}) {
 				minTickGap={10}
 				tickFormatter={tickFormatter}
 			/>
+
 			<YAxis
+				yAxisId='right'
+				domain={[0, 100]}
+				orientation='right'
+				hide={true}
+			/>
+			<YAxis
+				yAxisId='left'
 				domain={[15, 25]}
 			/>
+
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
-				formatter={v => v.toFixed(1) + ' °C'}
+				formatter={(v, name) => v.toFixed(1) + units[name]}
 				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
 				separator=': '
 			/>
 
-			<ReferenceLine y={0} stroke='blue'>
+			<ReferenceLine yAxisId='left' y={0} stroke='blue'>
 				<Label value='Freezing' offset={7} position='bottom' />
 			</ReferenceLine>
 
-			<ReferenceLine x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+			<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
 
 			<Line
+				yAxisId='left'
 				type='monotone'
 				dataKey='temperature_C'
 				name='Temperature'
@@ -245,6 +288,17 @@ function NookTemperature({end, duration}) {
 				dot={false}
 				isAnimationActive={false}
 			/>
+
+			<Line
+				yAxisId='right'
+				type='monotone'
+				dataKey='humidity'
+				name='Humidity'
+				stroke='blue'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
 		</ChartContainer>
 	);
 }
@@ -264,23 +318,33 @@ function BedroomTemperature({end, duration}) {
 				minTickGap={10}
 				tickFormatter={tickFormatter}
 			/>
+
 			<YAxis
+				yAxisId='right'
+				domain={[0, 100]}
+				orientation='right'
+				hide={true}
+			/>
+			<YAxis
+				yAxisId='left'
 				domain={[15, 25]}
 			/>
+
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
-				formatter={v => v.toFixed(1) + ' °C'}
+				formatter={(v, name) => v.toFixed(1) + units[name]}
 				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
 				separator=': '
 			/>
 
-			<ReferenceLine y={0} stroke='blue'>
+			<ReferenceLine yAxisId='left' y={0} stroke='blue'>
 				<Label value='Freezing' offset={7} position='bottom' />
 			</ReferenceLine>
 
-			<ReferenceLine x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+			<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
 
 			<Line
+				yAxisId='left'
 				type='monotone'
 				dataKey='temperature_C'
 				name='Temperature'
@@ -289,6 +353,17 @@ function BedroomTemperature({end, duration}) {
 				dot={false}
 				isAnimationActive={false}
 			/>
+
+			<Line
+				yAxisId='right'
+				type='monotone'
+				dataKey='humidity'
+				name='Humidity'
+				stroke='blue'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
 		</ChartContainer>
 	);
 }
@@ -322,7 +397,7 @@ function SeedsTemperature({end, duration}) {
 
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
-				formatter={v => v.toFixed(1) + ' °C'}
+				formatter={(v, name) => v.toFixed(1) + units[name]}
 				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
 				separator=': '
 			/>
@@ -369,19 +444,40 @@ function Thermostat({end, duration}) {
 				minTickGap={10}
 				tickFormatter={tickFormatter}
 			/>
+
 			<YAxis
-				domain={[15, 25]}
+				yAxisId='right'
+				domain={[0, 6]}
+				orientation='right'
+				hide={true}
 			/>
+			<YAxis
+				yAxisId='left'
+				domain={[12, 25]}
+			/>
+
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
-				formatter={v => v.toFixed(1) + ' °C'}
+				formatter={(v, name) => v.toFixed(1) + units[name]}
 				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
 				separator=': '
 			/>
 
-			<ReferenceLine x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+			<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
 
 			<Line
+				yAxisId='right'
+				type='monotone'
+				dataKey='state'
+				name='State'
+				stroke='green'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+
+			<Line
+				yAxisId='left'
 				type='monotone'
 				dataKey='heattemp'
 				name='Setpoint'
@@ -392,6 +488,7 @@ function Thermostat({end, duration}) {
 			/>
 
 			<Line
+				yAxisId='left'
 				type='monotone'
 				dataKey='spacetemp'
 				name='Temperature'
@@ -560,6 +657,95 @@ function LivingRoomDust({end, duration}) {
 	);
 }
 
+function LivingRoomAir({end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('air', 'Living Room', end, duration);
+
+	return (
+		<ChartContainer
+			name='Living Room 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);
 
@@ -600,11 +786,57 @@ function BedroomSleep({end, duration}) {
 	);
 }
 
+function LivingRoomLux({end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('lux', 'Living Room', end, duration);
+
+	return (
+		<ChartContainer
+			name='Living Room 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}) {
 	return (
 		<div className='container'>
 			<SolarPower end={end} duration={duration} />
+			<LivingRoomDust end={end} duration={duration} />
+			<LivingRoomAir end={end} duration={duration} />
 			<OutsideTemperature end={end} duration={duration} />
 			<BedroomTemperature end={end} duration={duration} />
 			<NookTemperature end={end} duration={duration} />
@@ -612,8 +844,8 @@ function Graphs({end, duration}) {
 			<Thermostat end={end} duration={duration} />
 			<Gas end={end} duration={duration} />
 			<Water end={end} duration={duration} />
-			<LivingRoomDust end={end} duration={duration} />
 			<BedroomSleep end={end} duration={duration} />
+			<LivingRoomLux end={end} duration={duration} />
 		</div>
 	);
 }