Add WH51Soil to dashboard

client/src/App.js

@@ -714,6 +714,51 @@ function Soil({name, sensorName, end, duration}) {
 }
 
 
+function WH51Soil({name, sensorName, end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('soil', sensorName, end, duration);
+
+	return (
+		<ChartContainer
+			name={name}
+			data={data}
+			lastFormatter={(x) => x.moisture?.toFixed(1)}
+			loading={loading}
+		>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={tickFormatter}
+			/>
+
+			<YAxis
+				yAxisId='soil'
+				domain={[0, 100]}
+			/>
+
+			<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='moisture'
+				name='Soil'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
+
 function Graphs({end, duration}) {
 	const api_key = localStorage.getItem('api_key', false);
 
@@ -745,6 +790,7 @@ 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} />
+			<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} />
 			<Soil name='Dracaena Soil Moisture' sensorName='Dracaena' end={end} duration={duration} />