Abstract chart container

client/src/App.js

@@ -18,10 +18,40 @@ const durations = [
 ];
 
 function useSensor(measurement, name, end, duration) {
+	const [data, setData] = useState(false);
+	const [loading, setLoading] = useState(false);
+
+	useEffect(() => {
+		const get = async() => {
+			setLoading(true);
+			try {
+				const params = { end: end.unix(), duration: duration.len.toLowerCase(), window: duration.win };
+				const res = await axios.get(
+					'https://sensors-api.dns.t0.vc/history/'+measurement+'/'+name,
+					{ params: params },
+				);
+				setData((d) => (res.data));
+				setLoading(false);
+			} catch (error) {
+				console.log(error);
+			}
+		};
+
+		get();
+		const interval = setInterval(get, 30000);
+		return () => clearInterval(interval);
+	}, [end, duration]);
+
+	return [data, loading];
+};
+
+function ChartContainer({name, data, loading, children, topMargin}) {
+	topMargin = topMargin || 5;
+
 	if (!data) {
 		return (
 			<>
-				<h2>Water Usage</h2>
+				<h2>{name}</h2>
 
 				<p>Loading...</p>
 			</>
@@ -30,10 +60,240 @@ function useSensor(measurement, name, end, duration) {
 
 	return (
 		<>
-			<h2>Water Usage {loading ? 'Loading...' : ''}</h2>
+			<h2>{name} {loading ? 'Loading...' : ''}</h2>
 
 			<ResponsiveContainer width='100%' height={300}>
-				<ComposedChart syncId={1} data={data} margin={{ top: 5, left: 0, right: 30, bottom: 0 }}>
+				<ComposedChart syncId={1} data={data} margin={{ top: topMargin, left: 0, right: 30, bottom: 0 }}>
+					{children}
+				</ComposedChart>
+			</ResponsiveContainer>
+		</>
+	);
+}
+
+
+function OutsideTemperature({end, duration}) {
+	const [data, loading] = useSensor('temperature', 'Outside', end, duration);
+
+	return (
+		<ChartContainer name='Outside Temperature' data={data} loading={loading} topMargin={25}>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
+			/>
+			<YAxis
+				domain={[-40, 40]}
+			/>
+			<CartesianGrid strokeDasharray='3 3'/>
+			<Tooltip
+				formatter={v => v.toFixed(1) + ' °C'}
+				labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+				separator=': '
+			/>
+
+			<ReferenceLine y={0} stroke='blue'>
+				<Label value='Freezing' offset={7} position='bottom' />
+			</ReferenceLine>
+
+			<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue'>
+				<Label value='Midnight' offset={7} position='top' />
+			</ReferenceLine>
+
+			<Line
+				type='monotone'
+				dataKey='temperature_C'
+				name='Temperature'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
+function NookTemperature({end, duration}) {
+	const [data, loading] = useSensor('temperature', 'Nook', end, duration);
+
+	return (
+		<ChartContainer name='Nook Temperature' data={data} loading={loading}>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
+			/>
+			<YAxis
+				domain={[15, 25]}
+			/>
+			<CartesianGrid strokeDasharray='3 3'/>
+			<Tooltip
+				formatter={v => v.toFixed(1) + ' °C'}
+				labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+				separator=': '
+			/>
+
+			<ReferenceLine y={0} stroke='blue'>
+				<Label value='Freezing' offset={7} position='bottom' />
+			</ReferenceLine>
+
+			<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+
+			<Line
+				type='monotone'
+				dataKey='temperature_C'
+				name='Temperature'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
+function BedroomTemperature({end, duration}) {
+	const [data, loading] = useSensor('temperature', 'Bedroom', end, duration);
+
+	return (
+		<ChartContainer name='Bedroom Temperature' data={data} loading={loading}>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
+			/>
+			<YAxis
+				domain={[15, 25]}
+			/>
+			<CartesianGrid strokeDasharray='3 3'/>
+			<Tooltip
+				formatter={v => v.toFixed(1) + ' °C'}
+				labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+				separator=': '
+			/>
+
+			<ReferenceLine y={0} stroke='blue'>
+				<Label value='Freezing' offset={7} position='bottom' />
+			</ReferenceLine>
+
+			<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+
+			<Line
+				type='monotone'
+				dataKey='temperature_C'
+				name='Temperature'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
+function Thermostat({end, duration}) {
+	const [data, loading] = useSensor('thermostat', 'Venstar', end, duration);
+
+	return (
+		<ChartContainer name='Thermostat' data={data} loading={loading}>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
+			/>
+			<YAxis
+				domain={[15, 25]}
+			/>
+			<CartesianGrid strokeDasharray='3 3'/>
+			<Tooltip
+				formatter={v => v.toFixed(1) + ' °C'}
+				labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+				separator=': '
+			/>
+
+			<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+
+			<Line
+				type='monotone'
+				dataKey='heattemp'
+				name='Setpoint'
+				stroke='red'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+
+			<Line
+				type='monotone'
+				dataKey='spacetemp'
+				name='Temperature'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
+function Gas({end, duration}) {
+	const [data, loading] = useSensor('ertscm', 'Gas', end, duration);
+
+	return (
+		<ChartContainer name='Gas Usage' data={data} loading={loading}>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
+			/>
+
+			<YAxis
+				yAxisId='right'
+				domain={data.length ? [data[0].consumption_data, data.slice(-1)[0].consumption_data] : [100, 0]}
+				orientation='right'
+				hide={true}
+			/>
+			<YAxis
+				yAxisId='left'
+			/>
+
+			<CartesianGrid strokeDasharray='3 3'/>
+			<Tooltip
+				formatter={v => v.toFixed(1) + ' MJ'}
+				labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+				separator=': '
+			/>
+
+			<ReferenceLine yAxisId='right' x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+
+			<Bar
+				yAxisId='left'
+				type='monotone'
+				dataKey='delta'
+				name='Delta'
+				fill='green'
+				isAnimationActive={false}
+			/>
+
+			<Line
+				yAxisId='right'
+				type='monotone'
+				dataKey='max'
+				name='Total'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
+function Water({end, duration}) {
+	const [data, loading] = useSensor('ertscm', 'Water', end, duration);
+
+	return (
+		<ChartContainer name='Water Usage' data={data} loading={loading}>
 			<XAxis
 				dataKey='time'
 				minTickGap={10}
@@ -78,9 +338,7 @@ function useSensor(measurement, name, end, duration) {
 				dot={false}
 				isAnimationActive={false}
 			/>
-				</ComposedChart>
+		</ChartContainer>
-			</ResponsiveContainer>
-		</>
 	);
 }
 
@@ -90,6 +348,7 @@ function Graphs({end, duration}) {
 		<div className='container'>
 			<OutsideTemperature end={end} duration={duration} />
 			<BedroomTemperature end={end} duration={duration} />
+			<NookTemperature end={end} duration={duration} />
 			<Thermostat end={end} duration={duration} />
 			<Gas end={end} duration={duration} />
 			<Water end={end} duration={duration} />