Memoize x axis, add solar, dust, sleep charts

client/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
     "moment": "^2.29.1",
+    "moment-timezone": "^0.5.34",
     "react": "^17.0.2",
     "react-datetime": "^3.1.1",
     "react-dom": "^17.0.2",

client/src/App.css

@@ -6,10 +6,16 @@ body {
 	margin: 0;
 }
 
-	
 .container {
-	max-width: 40em;
+	display: flex;
-	margin: 0 auto 3rem auto;
+	flex-wrap: wrap;
+	justify-content: center;
+	margin-bottom: 3rem;
+}
+
+.chart {
+	width: 100%;
+	max-width: 38em;
 }
 
 h2 {

client/src/App.js

@@ -3,18 +3,20 @@ import { ComposedChart, Bar, Label, LineChart, ReferenceLine, Line, XAxis, YAxis
 import Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';
 import axios from 'axios';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import './App.css';
 
+let tzcache = {};
+
 const durations = [
-	{id: 0, len: 'Day', win: '10m', full: '10 min', delta: [1, 'days']},
+	{id: 0, len: 'Day', win: '10m', full: '10 min', delta: [1, 'days'], format: 'HH'},
-	{id: 1, len: 'Day', win: '1h', full: '1 hour', delta: [1, 'days']},
+	{id: 1, len: 'Day', win: '1h', full: '1 hour', delta: [1, 'days'], format: 'HH'},
-	{id: 2, len: 'Week', win: '1h', full: '1 hour', delta: [7, 'days']},
+	{id: 2, len: 'Week', win: '1h', full: '1 hour', delta: [7, 'days'], format: 'HH'},
-	{id: 3, len: 'Week', win: '1d', full: '1 day', delta: [7, 'days']},
+	{id: 3, len: 'Week', win: '1d', full: '1 day', delta: [7, 'days'], format: 'D'},
-	{id: 4, len: 'Month', win: '1d', full: '1 day', delta: [1, 'months']},
+	{id: 4, len: 'Month', win: '1d', full: '1 day', delta: [1, 'months'], format: 'D'},
-	{id: 5, len: 'Month', win: '7d', full: '7 day', delta: [1, 'months']},
+	{id: 5, len: 'Month', win: '7d', full: '7 day', delta: [1, 'months'], format: 'D'},
-	{id: 6, len: 'Year', win: '1d', full: '1 day', delta: [1, 'years']},
+	{id: 6, len: 'Year', win: '1d', full: '1 day', delta: [1, 'years'], format: 'M/D'},
-	{id: 7, len: 'Year', win: '30d', full: '30 day', delta: [1, 'years']},
+	{id: 7, len: 'Year', win: '30d', full: '30 day', delta: [1, 'years'], format: 'M'},
 ];
 
 function useSensor(measurement, name, end, duration) {
@@ -38,14 +40,43 @@ function useSensor(measurement, name, end, duration) {
 		};
 
 		get();
-		const interval = setInterval(get, 30000);
-		return () => clearInterval(interval);
 	}, [end, duration]);
 
-	return [data, loading];
+	const memoConvertTZ = (isDST, timeStr, format) => {
+		if (!timeStr) return '?';
+
+		let lookUp, result = null;
+		const date = timeStr.slice(5, 10);
+		const hours = timeStr.slice(11, 13);
+		const minutes = timeStr.slice(14, 16);
+
+		if (format === 'HH') {
+			lookUp = [isDST, hours, format];
+		} else {
+			lookUp = [isDST, date, format];
+		}
+
+		if (tzcache[lookUp] != undefined ) {
+			result = tzcache[lookUp];
+		} else {
+			result = moment(timeStr).tz('America/Edmonton').format(format);
+			tzcache[lookUp] = result;
+		}
+
+		if (format === 'HH') {
+			return result + ':' + minutes;
+		} else {
+			return result;
+		}
 	};
 
-function ChartContainer({name, data, loading, children, topMargin}) {
+	const isDST = end.tz('America/Edmonton').isDST();
+	const tickFormatter = (timeStr) => memoConvertTZ(isDST, timeStr, duration.format);
+
+	return [data, loading, tickFormatter];
+};
+
+function ChartContainer({name, data, lastFormatter, loading, children, topMargin}) {
 	topMargin = topMargin || 5;
 
 	if (!data) {
@@ -58,29 +89,79 @@ function ChartContainer({name, data, loading, children, topMargin}) {
 		);
 	}
 
+	const last = data.length ? lastFormatter(data.slice(-1)[0]) : null;
+
 	return (
-		<>
+		<div className='chart'>
-			<h2>{name} {loading ? 'Loading...' : ''}</h2>
+			<h2>{name}: {loading ? 'Loading...' : last || 'No data'}</h2>
 
 			<ResponsiveContainer width='100%' height={300}>
 				<ComposedChart syncId={1} data={data} margin={{ top: topMargin, left: 0, right: 30, bottom: 0 }}>
 					{children}
 				</ComposedChart>
 			</ResponsiveContainer>
-		</>
+		</div>
 	);
 }
 
 
-function OutsideTemperature({end, duration}) {
+function SolarPower({end, duration}) {
-	const [data, loading] = useSensor('temperature', 'Outside', end, duration);
+	const [data, loading, tickFormatter] = useSensor('solar', 'Solar', end, duration);
 
 	return (
-		<ChartContainer name='Outside Temperature' data={data} loading={loading} topMargin={25}>
+		<ChartContainer
+			name='Solar Power'
+			data={data}
+			lastFormatter={(x) => x.actual_total + ' W'}
+			loading={loading}
+			topMargin={25}
+		>
 			<XAxis
 				dataKey='time'
 				minTickGap={10}
-				tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
+				tickFormatter={tickFormatter}
+			/>
+			<YAxis
+				domain={[0, 6000]}
+			/>
+			<CartesianGrid strokeDasharray='3 3'/>
+			<Tooltip
+				formatter={v => v + ' W'}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
+				separator=': '
+			/>
+
+			<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue'>
+				<Label value='Midnight' offset={7} position='top' />
+			</ReferenceLine>
+
+			<Line
+				type='monotone'
+				dataKey='actual_total'
+				name='Total Power'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
+function OutsideTemperature({end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('temperature', 'Outside', end, duration);
+
+	return (
+		<ChartContainer
+			name='Outside Temperature'
+			data={data}
+			lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
+			loading={loading}
+		>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={tickFormatter}
 			/>
 			<YAxis
 				domain={[-40, 40]}
@@ -88,7 +169,7 @@ function OutsideTemperature({end, duration}) {
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
 				formatter={v => v.toFixed(1) + ' °C'}
-				labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
 				separator=': '
 			/>
 
@@ -96,9 +177,7 @@ function OutsideTemperature({end, duration}) {
 				<Label value='Freezing' offset={7} position='bottom' />
 			</ReferenceLine>
 
-			<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue'>
+			<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
-				<Label value='Midnight' offset={7} position='top' />
-			</ReferenceLine>
 
 			<Line
 				type='monotone'
@@ -114,14 +193,19 @@ function OutsideTemperature({end, duration}) {
 }
 
 function NookTemperature({end, duration}) {
-	const [data, loading] = useSensor('temperature', 'Nook', end, duration);
+	const [data, loading, tickFormatter] = useSensor('temperature', 'Nook', end, duration);
 
 	return (
-		<ChartContainer name='Nook Temperature' data={data} loading={loading}>
+		<ChartContainer
+			name='Nook Temperature'
+			data={data}
+			lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
+			loading={loading}
+		>
 			<XAxis
 				dataKey='time'
 				minTickGap={10}
-				tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
+				tickFormatter={tickFormatter}
 			/>
 			<YAxis
 				domain={[15, 25]}
@@ -129,7 +213,7 @@ function NookTemperature({end, duration}) {
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
 				formatter={v => v.toFixed(1) + ' °C'}
-				labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
 				separator=': '
 			/>
 
@@ -153,14 +237,19 @@ function NookTemperature({end, duration}) {
 }
 
 function BedroomTemperature({end, duration}) {
-	const [data, loading] = useSensor('temperature', 'Bedroom', end, duration);
+	const [data, loading, tickFormatter] = useSensor('temperature', 'Bedroom', end, duration);
 
 	return (
-		<ChartContainer name='Bedroom Temperature' data={data} loading={loading}>
+		<ChartContainer
+			name='Bedroom Temperature'
+			data={data}
+			lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
+			loading={loading}
+		>
 			<XAxis
 				dataKey='time'
 				minTickGap={10}
-				tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
+				tickFormatter={tickFormatter}
 			/>
 			<YAxis
 				domain={[15, 25]}
@@ -168,7 +257,7 @@ function BedroomTemperature({end, duration}) {
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
 				formatter={v => v.toFixed(1) + ' °C'}
-				labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
 				separator=': '
 			/>
 
@@ -192,14 +281,19 @@ function BedroomTemperature({end, duration}) {
 }
 
 function Thermostat({end, duration}) {
-	const [data, loading] = useSensor('thermostat', 'Venstar', end, duration);
+	const [data, loading, tickFormatter] = useSensor('thermostat', 'Venstar', end, duration);
 
 	return (
-		<ChartContainer name='Thermostat' data={data} loading={loading}>
+		<ChartContainer
+			name='Nook Thermostat'
+			data={data}
+			lastFormatter={(x) => x.spacetemp?.toFixed(1) + ' °C'}
+			loading={loading}
+		>
 			<XAxis
 				dataKey='time'
 				minTickGap={10}
-				tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
+				tickFormatter={tickFormatter}
 			/>
 			<YAxis
 				domain={[15, 25]}
@@ -207,7 +301,7 @@ function Thermostat({end, duration}) {
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
 				formatter={v => v.toFixed(1) + ' °C'}
-				labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
 				separator=': '
 			/>
 
@@ -237,14 +331,19 @@ function Thermostat({end, duration}) {
 }
 
 function Gas({end, duration}) {
-	const [data, loading] = useSensor('ertscm', 'Gas', end, duration);
+	const [data, loading, tickFormatter] = useSensor('ertscm', 'Gas', end, duration);
 
 	return (
-		<ChartContainer name='Gas Usage' data={data} loading={loading}>
+		<ChartContainer
+			name='Gas Usage'
+			data={data}
+			lastFormatter={(x) => (x.max / 1000)?.toFixed(1) + ' GJ'}
+			loading={loading}
+		>
 			<XAxis
 				dataKey='time'
 				minTickGap={10}
-				tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
+				tickFormatter={tickFormatter}
 			/>
 
 			<YAxis
@@ -260,7 +359,7 @@ function Gas({end, duration}) {
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
 				formatter={v => v.toFixed(1) + ' MJ'}
-				labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
 				separator=': '
 			/>
 
@@ -290,14 +389,19 @@ function Gas({end, duration}) {
 }
 
 function Water({end, duration}) {
-	const [data, loading] = useSensor('ertscm', 'Water', end, duration);
+	const [data, loading, tickFormatter] = useSensor('ertscm', 'Water', end, duration);
 
 	return (
-		<ChartContainer name='Water Usage' data={data} loading={loading}>
+		<ChartContainer
+			name='Water Usage'
+			data={data}
+			lastFormatter={(x) => (x.max / 1000)?.toFixed(1) + ' m³'}
+			loading={loading}
+		>
 			<XAxis
 				dataKey='time'
 				minTickGap={10}
-				tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
+				tickFormatter={tickFormatter}
 			/>
 
 			<YAxis
@@ -313,7 +417,7 @@ function Water({end, duration}) {
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
 				formatter={v => v + ' L'}
-				labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
 				separator=': '
 			/>
 
@@ -342,16 +446,99 @@ function Water({end, duration}) {
 	);
 }
 
+function LivingRoomDust({end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('dust', 'Living Room', end, duration);
+
+	return (
+		<ChartContainer
+			name='Living Room Dust'
+			data={data}
+			lastFormatter={(x) => x.max_p10?.toFixed(1) + ' ug/m³'}
+			loading={loading}
+		>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={tickFormatter}
+			/>
+			<YAxis
+				domain={[0, 20]}
+			/>
+			<CartesianGrid strokeDasharray='3 3'/>
+			<Tooltip
+				formatter={v => v.toFixed(1) + ' ug/m³'}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
+				separator=': '
+			/>
+
+			<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+
+			<Line
+				type='monotone'
+				dataKey='max_p10'
+				name='PM10'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
+function BedroomSleep({end, duration}) {
+	const [data, loading, tickFormatter] = useSensor('sleep', 'Bedroom', end, duration);
+
+	return (
+		<ChartContainer
+			name='Sleep Movement'
+			data={data}
+			lastFormatter={(x) => x.max_mag?.toFixed(1) + ' m/s²'}
+			loading={loading}
+		>
+			<XAxis
+				dataKey='time'
+				minTickGap={10}
+				tickFormatter={tickFormatter}
+			/>
+			<YAxis
+				domain={[5, 20]}
+			/>
+			<CartesianGrid strokeDasharray='3 3'/>
+			<Tooltip
+				formatter={v => v.toFixed(1) + ' m/s²'}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
+				separator=': '
+			/>
+
+			<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+
+			<Line
+				type='monotone'
+				dataKey='max_mag'
+				name='Movement'
+				stroke='black'
+				strokeWidth={2}
+				dot={false}
+				isAnimationActive={false}
+			/>
+		</ChartContainer>
+	);
+}
+
 
 function Graphs({end, duration}) {
 	return (
 		<div className='container'>
+			<SolarPower end={end} duration={duration} />
 			<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} />
+			<LivingRoomDust end={end} duration={duration} />
+			<BedroomSleep end={end} duration={duration} />
 		</div>
 	);
 }
@@ -370,6 +557,11 @@ function Menu({duration, setDuration, end, setEnd}) {
 		setEnd(newEnd);
 	};
 
+	const chooseNow = (x) => {
+		setSubmenu(false);
+		setEnd(moment());
+	};
+
 	const next = () => {
 		setSubmenu(false);
 		setEnd(prevEnd => moment(prevEnd).add(...duration.delta));
@@ -377,7 +569,7 @@ function Menu({duration, setDuration, end, setEnd}) {
 
 	const prev = () => {
 		setSubmenu(false);
-		setEnd(prevEnd => moment(prevEnd).subtract(duration.delta[0], duration.delta[1]));
+		setEnd(prevEnd => moment(prevEnd).subtract(...duration.delta));
 	}
 
 	return (
@@ -397,6 +589,8 @@ function Menu({duration, setDuration, end, setEnd}) {
 								onChange={(x) => chooseEnd(x)}
 							/>
 						</div>
+
+						<button onClick={chooseNow}>Jump to Now</button>
 					</>
 				}
 
@@ -441,6 +635,15 @@ function App() {
 	const [duration, setDuration] = useState(durations[0]);
 	const [end, setEnd] = useState(moment());
 
+	useEffect(() => {
+		const updateEnd = () => {
+			setEnd(prevEnd => moment(prevEnd).add(1, 'minutes'));
+		}
+
+		const interval = setInterval(updateEnd, 60000);
+		return () => clearInterval(interval);
+	}, []);
+
 	return (
 		<div>
 			<Menu

client/yarn.lock

@@ -7380,7 +7380,14 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-moment@^2.29.1:
+moment-timezone@^0.5.34:
+  version "0.5.34"
+  resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.34.tgz#a75938f7476b88f155d3504a9343f7519d9a405c"
+  integrity sha512-3zAEHh2hKUs3EXLESx/wsgw6IQdusOT8Bxm3D9UrHPQR7zlMmzwybC8zHEM1tQ4LJwP7fcxrWr8tuBg05fFCbg==
+  dependencies:
+    moment ">= 2.9.0"
+
+"moment@>= 2.9.0", moment@^2.29.1:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==