tanner
/
sensors
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Memoize x axis, add solar, dust, sleep charts

Browse Source
master
Tanner Collin 2 years ago
parent 757ce37dbc
commit fcb860af29
4 changed files with 265 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      client/package.json
  2. 12
      client/src/App.css
  3. 291
      client/src/App.js
  4. 9
      client/yarn.lock

1
client/package.json
Unescape View File

@ -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",

12
client/src/App.css
Unescape View File

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

291
client/src/App.js
Unescape View File

@ -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: 1, len: 'Day', win: '1h', full: '1 hour', delta: [1, 'days']},
{id: 2, len: 'Week', win: '1h', full: '1 hour', delta: [7, 'days']},
{id: 3, len: 'Week', win: '1d', full: '1 day', delta: [7, 'days']},
{id: 4, len: 'Month', win: '1d', full: '1 day', delta: [1, 'months']},
{id: 5, len: 'Month', win: '7d', full: '7 day', delta: [1, 'months']},
{id: 6, len: 'Year', win: '1d', full: '1 day', delta: [1, 'years']},
{id: 7, len: 'Year', win: '30d', full: '30 day', delta: [1, 'years']},
{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'], format: 'HH'},
{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'], format: 'D'},
{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'], format: 'D'},
{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'], 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;
}
};
const isDST = end.tz('America/Edmonton').isDST();
const tickFormatter = (timeStr) => memoConvertTZ(isDST, timeStr, duration.format);
return [data, loading, tickFormatter];
};
function ChartContainer({name, data, loading, children, topMargin}) {
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 (
<>
<h2>{name} {loading ? 'Loading...' : ''}</h2>
<div className='chart'>
<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 SolarPower({end, duration}) {
const [data, loading, tickFormatter] = useSensor('solar', 'Solar', end, duration);
return (
<ChartContainer
name='Solar Power'
data={data}
lastFormatter={(x) => x.actual_total + ' W'}
loading={loading}
topMargin={25}
>
<XAxis
dataKey='time'
minTickGap={10}
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] = useSensor('temperature', 'Outside', end, duration);
const [data, loading, tickFormatter] = useSensor('temperature', 'Outside', end, duration);
return (
<ChartContainer name='Outside Temperature' data={data} loading={loading} topMargin={25}>
<ChartContainer
name='Outside 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={[-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'>
<Label value='Midnight' offset={7} position='top' />
</ReferenceLine>
<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
<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

9
client/yarn.lock
Unescape View File

@ -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==

Write Preview
Loading…
Cancel
Save