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

Add datepicker, make each graph a component

Browse Source
This commit is contained in:
Tanner Collin 2022-01-11 07:27:04 +00:00
parent d169f72327
commit ae5a5aa070
5 changed files with 147 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/package.json
View File

@ -11,6 +11,7 @@
"react": "^17.0.2",
"react-datetime": "^3.1.1",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"react-scripts": "4.0.3",
"recharts": "^2.0.9",
"web-vitals": "^1.0.1"

2
client/public/index.html
View File

@ -17,7 +17,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Solar Display</title>
<title>Tanner's Sensors</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

25
client/src/App.css
View File

@ -38,21 +38,18 @@ h2 {
background-color: #666;
max-width: 40em;
margin: 0 auto;
padding-bottom: 0.5rem;
padding: 0.5rem;
display: flex;
flex-direction: column;
}
.submenu p {
margin: 0 1rem 1rem 1rem;
.submenu h2 {
color: white;
font-size: 1.5rem;
font-family: sans-serif;
}
.submenu-close {
.submenu-header {
display: flex;
justify-content: right;
justify-content: space-between;
}
.menu-container {
@ -83,3 +80,17 @@ h2 {
.submenu button {
background-color: #666;
}
.datepicker .rdtPicker {
background: none;
border: none;
color: white;
font-size: 1rem;
font-family: sans-serif;
}
.datepicker th:hover,
.datepicker td:hover {
background-color: #999!important;
}

342
client/src/App.js
View File

@ -1,214 +1,39 @@
import React, { useState, useEffect } from 'react';
import { ComposedChart, Bar, Label, LineChart, ReferenceLine, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';
import axios from 'axios';
import moment from 'moment';
import './App.css';
const durations = [
{id: 0, len: 'Day', win: '10m', full: '10 min'},
{id: 1, len: 'Day', win: '1h', full: '1 hour'},
{id: 2, len: 'Week', win: '1h', full: '1 hour'},
{id: 3, len: 'Week', win: '1d', full: '1 day'},
{id: 4, len: 'Month', win: '1d', full: '1 day'},
{id: 5, len: 'Month', win: '7d', full: '7 day'},
{id: 6, len: 'Year', win: '1d', full: '1 day'},
{id: 7, len: 'Year', win: '30d', full: '30 day'},
{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']},
];
function Graphs({data, loading}) {
function useSensor(measurement, name, end, duration) {
if (!data) {
return (
<div className='container'>
<h2>Outside Temperature {loading ? 'Loading...' : ''}</h2>
<>
<h2>Water Usage</h2>
{data.Outside ?
<ResponsiveContainer width='100%' height={300}>
<LineChart syncId={1} data={data.Outside} margin={{ top: 25, left: 0, right: 30, bottom: 0 }}>
<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}
/>
</LineChart>
</ResponsiveContainer>
:
<p>Loading...</p>
}
<h2>Bedroom Temperature {loading ? 'Loading...' : ''}</h2>
{data.Bedroom ?
<ResponsiveContainer width='100%' height={300}>
<LineChart syncId={1} data={data.Bedroom} margin={{ top: 5, left: 0, right: 30, bottom: 0 }}>
<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}
/>
</LineChart>
</ResponsiveContainer>
:
<p>Loading...</p>
}
<h2>Thermostat {loading ? 'Loading...' : ''}</h2>
{data.Venstar ?
<ResponsiveContainer width='100%' height={300}>
<LineChart syncId={1} data={data.Venstar} margin={{ top: 5, left: 0, right: 30, bottom: 0 }}>
<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}
/>
</LineChart>
</ResponsiveContainer>
:
<p>Loading...</p>
}
<h2>Gas Usage {loading ? 'Loading...' : ''}</h2>
{data.Gas ?
<ResponsiveContainer width='100%' height={300}>
<ComposedChart syncId={1} data={data.Gas} 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.Gas[0].consumption_data, data.Gas.slice(-1)[0].consumption_data]}
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}
/>
</ComposedChart>
</ResponsiveContainer>
:
<p>Loading...</p>
</>
);
}
return (
<>
<h2>Water Usage {loading ? 'Loading...' : ''}</h2>
{data.Water ?
<ResponsiveContainer width='100%' height={300}>
<ComposedChart syncId={1} data={data.Water} margin={{ top: 5, left: 0, right: 30, bottom: 0 }}>
<ComposedChart syncId={1} data={data} margin={{ top: 5, left: 0, right: 30, bottom: 0 }}>
<XAxis
dataKey='time'
minTickGap={10}
@ -216,13 +41,13 @@ function Graphs({data, loading}) {
/>
<YAxis
yAxisId="right"
domain={[data.Water[0].consumption_data, data.Water.slice(-1)[0].consumption_data]}
orientation="right"
yAxisId='right'
domain={data.length ? [data[0].consumption_data, data.slice(-1)[0].consumption_data] : [100, 0]}
orientation='right'
hide={true}
/>
<YAxis
yAxisId="left"
yAxisId='left'
/>
<CartesianGrid strokeDasharray='3 3'/>
@ -232,10 +57,10 @@ function Graphs({data, loading}) {
separator=': '
/>
<ReferenceLine yAxisId="right" x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
<ReferenceLine yAxisId='right' x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
<Bar
yAxisId="left"
yAxisId='left'
type='monotone'
dataKey='delta'
name='Delta'
@ -244,7 +69,7 @@ function Graphs({data, loading}) {
/>
<Line
yAxisId="right"
yAxisId='right'
type='monotone'
dataKey='max'
name='Total'
@ -255,51 +80,89 @@ function Graphs({data, loading}) {
/>
</ComposedChart>
</ResponsiveContainer>
:
<p>Loading...</p>
</>
);
}
function Graphs({end, duration}) {
return (
<div className='container'>
<OutsideTemperature end={end} duration={duration} />
<BedroomTemperature end={end} duration={duration} />
<Thermostat end={end} duration={duration} />
<Gas end={end} duration={duration} />
<Water end={end} duration={duration} />
</div>
);
}
function Menu({duration, setDuration, end, setEnd, setLoading}) {
function Menu({duration, setDuration, end, setEnd}) {
const [submenu, setSubmenu] = useState(false);
const chooseDuration = (x) => {
setLoading(true);
setSubmenu(false);
setDuration(x);
};
const chooseEnd = (x) => {
setSubmenu(false);
const newEnd = x.add(...duration.delta);
setEnd(newEnd);
};
const next = () => {
setSubmenu(false);
setEnd(prevEnd => moment(prevEnd).add(...duration.delta));
}
const prev = () => {
setSubmenu(false);
setEnd(prevEnd => moment(prevEnd).subtract(duration.delta[0], duration.delta[1]));
}
return (
<div className='menu'>
{!!submenu &&<div className='submenu'>
<div className='submenu-close'>
{submenu === 'end' &&
<>
<div className='submenu-header'>
<h2>Choose start date:</h2>
<button onClick={() => setSubmenu(false)}>×</button>
</div>
{submenu === 'end' &&
<>
<p>Choose end date:</p>
<p>epic date picker</p>
<div className='datepicker'>
<Datetime
input={false}
timeFormat={false}
onChange={(x) => chooseEnd(x)}
/>
</div>
</>
}
{submenu === 'duration' &&
durations.map(x =>
<button id={x.id} onClick={() => chooseDuration(x)}>Last {x.len} / {x.full} data</button>
)
<>
<div className='submenu-header'>
<h2>Choose duration:</h2>
<button onClick={() => setSubmenu(false)}>×</button>
</div>
{durations.map(x =>
<button key={x.id} onClick={() => chooseDuration(x)}>Last {x.len} / {x.full} data</button>
)}
</>
}
</div>}
<div className='menu-container'>
<button onClick={() => setDuration('day')}>&lt;</button>
<button onClick={() => prev()}>&lt;</button>
<button
onClick={() => setSubmenu('end')}
className={submenu === 'end' ? 'active' : ''}
>
{end.format('ddd MMM DD')}
{moment(end).subtract(duration.delta[0], duration.delta[1]).format('ddd MMM DD')}
</button>
<button
@ -309,7 +172,7 @@ function Menu({duration, setDuration, end, setEnd, setLoading}) {
{duration.len} / {duration.win}
</button>
<button onClick={() => setDuration('day')}>&gt;</button>
<button onClick={() => next()}>&gt;</button>
</div>
</div>
);
@ -317,49 +180,7 @@ function Menu({duration, setDuration, end, setEnd, setLoading}) {
function App() {
const [duration, setDuration] = useState(durations[0]);
const [loading, setLoading] = useState(false);
const [end, setEnd] = useState(moment());
const [data, setData] = useState(false);
const setupGetter = (measurement, name) => {
const get = async() => {
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) => ({ ...d, [name]: res.data }));
setLoading(false);
} catch (error) {
console.log(error);
}
};
get();
const interval = setInterval(get, 30000);
return () => clearInterval(interval);
};
useEffect(() => {
return setupGetter('temperature', 'Outside');
}, [duration]);
useEffect(() => {
return setupGetter('temperature', 'Bedroom');
}, [duration]);
useEffect(() => {
return setupGetter('thermostat', 'Venstar');
}, [duration]);
useEffect(() => {
return setupGetter('ertscm', 'Gas');
}, [duration]);
useEffect(() => {
return setupGetter('ertscm', 'Water');
}, [duration]);
return (
<div>
@ -368,12 +189,11 @@ function App() {
setDuration={setDuration}
end={end}
setEnd={setEnd}
setLoading={setLoading}
/>
<Graphs
data={data}
loading={loading}
end={end}
duration={duration}
/>
</div>
);

5
client/yarn.lock
View File

@ -9146,6 +9146,11 @@ react-is@^17.0.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
react-is@^17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"