Add seeds, fix last value bug

client/src/App.js

@@ -89,7 +89,20 @@ function ChartContainer({name, data, lastFormatter, loading, children, topMargin
 		);
 	}
 
-	const last = data.length ? lastFormatter(data.slice(-1)[0]) : null;
+	if (data.length === 0) {
+		return false;
+	}
+
+	const dataGood = (x) => !['undefined', 'null'].some(y => lastFormatter(x).includes(y));
+	let last = null;
+	if (data.length) {
+		const data_end = data.slice(-2);
+		if (dataGood(data_end[1])) {
+			last = lastFormatter(data_end[1]);
+		} else if (dataGood(data_end[0])) {
+			last = lastFormatter(data_end[0]);
+		}
+	}
 
 	return (
 		<div className='chart'>
@@ -280,6 +293,67 @@ function BedroomTemperature({end, duration}) {
 	);
 }
 
+function SeedsTemperature({end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('temperature', 'Seeds', end, duration);
+
+	return (
+		<ChartContainer
+			name='Seeds Temperature'
+			data={data}
+			lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
+			loading={loading}
+		>
+			<XAxis
+				dataKey='time'
+				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'}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
+				separator=': '
+			/>
+
+			<ReferenceLine yAxisId='left' x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+
+			<Line
+				type='monotone'
+				dataKey='temperature_C'
+				yAxisId='left'
+				name='Temperature'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+
+			<Line
+				type='monotone'
+				dataKey='humidity'
+				yAxisId='right'
+				name='Humidity'
+				stroke='blue'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
 function Thermostat({end, duration}) {
 	const [data, loading, tickFormatter] = useSensor('thermostat', 'Venstar', end, duration);
 
@@ -534,6 +608,7 @@ function Graphs({end, duration}) {
 			<OutsideTemperature end={end} duration={duration} />
 			<BedroomTemperature end={end} duration={duration} />
 			<NookTemperature end={end} duration={duration} />
+			<SeedsTemperature end={end} duration={duration} />
 			<Thermostat end={end} duration={duration} />
 			<Gas end={end} duration={duration} />
 			<Water end={end} duration={duration} />