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

Compare commits

base: tanner:ae5a5aa0707e86f3a2755c30e6b71fe78c533415
Branches Tags
tanner:master
...
compare: tanner:fcb860af293bc295276f201d56d139e0f70e200e
Branches Tags
tanner:master

2 Commits
ae5a5aa070 ... fcb860af29

Author SHA1 Message Date
Tanner Collin fcb860af29 Memoize x axis, add solar, dust, sleep charts
2 years ago
Tanner Collin 757ce37dbc Abstract chart container
2 years ago
4 changed files with 539 additions and 63 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
  1. 1
      client/package.json
  2. 12
      client/src/App.css
  3. 580
      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 {

580
client/src/App.js
Unescape View File

@ -3,84 +3,526 @@ 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) {
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();
}, [end, duration]);
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, lastFormatter, loading, children, topMargin}) {
topMargin = topMargin || 5;
if (!data) {
return (
<>
<h2>Water Usage</h2>
<h2>{name}</h2>
<p>Loading...</p>
</>
);
}
const last = data.length ? lastFormatter(data.slice(-1)[0]) : null;
return (
<>
<h2>Water Usage {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: 5, left: 0, right: 30, bottom: 0 }}>
<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 + ' L'}
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}
/>
<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, 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]}
/>
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
formatter={v => v.toFixed(1) + ' °C'}
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').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 NookTemperature({end, duration}) {
const [data, loading, tickFormatter] = useSensor('temperature', 'Nook', end, duration);
return (
<ChartContainer
name='Nook Temperature'
data={data}
lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
loading={loading}
>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={tickFormatter}
/>
<YAxis
domain={[15, 25]}
/>
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
formatter={v => v.toFixed(1) + ' °C'}
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').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, tickFormatter] = useSensor('temperature', 'Bedroom', end, duration);
return (
<ChartContainer
name='Bedroom Temperature'
data={data}
lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
loading={loading}
>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={tickFormatter}
/>
<YAxis
domain={[15, 25]}
/>
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
formatter={v => v.toFixed(1) + ' °C'}
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').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, tickFormatter] = useSensor('thermostat', 'Venstar', end, duration);
return (
<ChartContainer
name='Nook Thermostat'
data={data}
lastFormatter={(x) => x.spacetemp?.toFixed(1) + ' °C'}
loading={loading}
>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={tickFormatter}
/>
<YAxis
domain={[15, 25]}
/>
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
formatter={v => v.toFixed(1) + ' °C'}
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='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, tickFormatter] = useSensor('ertscm', 'Gas', end, duration);
return (
<ChartContainer
name='Gas Usage'
data={data}
lastFormatter={(x) => (x.max / 1000)?.toFixed(1) + ' GJ'}
loading={loading}
>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={tickFormatter}
/>
<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).tz('America/Edmonton').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, tickFormatter] = useSensor('ertscm', 'Water', end, duration);
return (
<ChartContainer
name='Water Usage'
data={data}
lastFormatter={(x) => (x.max / 1000)?.toFixed(1) + ' m³'}
loading={loading}
>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={tickFormatter}
/>
<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 + ' L'}
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').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 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>
);
}
@ -88,11 +530,15 @@ function useSensor(measurement, name, end, duration) {
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>
);
}
@ -111,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));
@ -118,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 (
@ -138,6 +589,8 @@ function Menu({duration, setDuration, end, setEnd}) {
onChange={(x) => chooseEnd(x)}
/>
</div>
<button onClick={chooseNow}>Jump to Now</button>
</>
}
@ -182,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