Add Dumb Cane soil sensor

client/src/App.js

@@ -31,6 +31,7 @@ const units = {
 	'Setpoint': ' °C',
 	'State': '',
 	'Lux': ' lx',
+	'Soil': '',
 };
 
 function useSensor(measurement, name, end, duration) {
@@ -108,7 +109,7 @@ function ChartContainer({name, data, lastFormatter, loading, children, topMargin
 		return false;
 	}
 
-	const dataGood = (x) => !['undefined', 'null'].some(y => lastFormatter(x).includes(y));
+	const dataGood = (x) => !['undefined', 'null'].some(y => String(lastFormatter(x)).includes(y));
 	let last = null;
 	if (data.length) {
 		const data_end = data.slice(-2);
@@ -1220,6 +1221,51 @@ function BedroomLux({end, duration}) {
 }
 
 
+function DumbCaneSoil({end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('soil', 'Dumb Cane', end, duration);
+
+	return (
+		<ChartContainer
+			name='Dumb Cane Soil Moisture'
+			data={data}
+			lastFormatter={(x) => x.soil?.toFixed(1)}
+			loading={loading}
+		>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={tickFormatter}
+			/>
+
+			<YAxis
+				yAxisId='soil'
+				domain={[0, 1000]}
+			/>
+
+			<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='soil' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+
+			<Line
+				yAxisId='soil'
+				type='monotone'
+				dataKey='soil'
+				name='Soil'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
+
 function Graphs({end, duration}) {
 	const api_key = localStorage.getItem('api_key', false);
 
@@ -1249,6 +1295,7 @@ function Graphs({end, duration}) {
 			<LivingRoomLux end={end} duration={duration} />
 			<KitchenLux end={end} duration={duration} />
 			<BedroomLux end={end} duration={duration} />
+			<DumbCaneSoil end={end} duration={duration} />
 
 			{!!api_key ||
 				<div>