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": "^17.0.2",
"react-datetime": "^3.1.1", "react-datetime": "^3.1.1",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-is": "^17.0.2",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"recharts": "^2.0.9", "recharts": "^2.0.9",
"web-vitals": "^1.0.1" "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. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>Solar Display</title> <title>Tanner's Sensors</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <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; background-color: #666;
max-width: 40em; max-width: 40em;
margin: 0 auto; margin: 0 auto;
padding-bottom: 0.5rem; padding: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.submenu p { .submenu h2 {
margin: 0 1rem 1rem 1rem;
color: white; color: white;
font-size: 1.5rem;
font-family: sans-serif;
} }
.submenu-close { .submenu-header {
display: flex; display: flex;
justify-content: right; justify-content: space-between;
} }
.menu-container { .menu-container {
@ -83,3 +80,17 @@ h2 {
.submenu button { .submenu button {
background-color: #666; 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;
}

424
client/src/App.js
View File

@ -1,305 +1,168 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { ComposedChart, Bar, Label, LineChart, ReferenceLine, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; 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 axios from 'axios';
import moment from 'moment'; import moment from 'moment';
import './App.css'; import './App.css';
const durations = [ const durations = [
{id: 0, len: 'Day', win: '10m', full: '10 min'}, {id: 0, len: 'Day', win: '10m', full: '10 min', delta: [1, 'days']},
{id: 1, len: 'Day', win: '1h', full: '1 hour'}, {id: 1, len: 'Day', win: '1h', full: '1 hour', delta: [1, 'days']},
{id: 2, len: 'Week', win: '1h', full: '1 hour'}, {id: 2, len: 'Week', win: '1h', full: '1 hour', delta: [7, 'days']},
{id: 3, len: 'Week', win: '1d', full: '1 day'}, {id: 3, len: 'Week', win: '1d', full: '1 day', delta: [7, 'days']},
{id: 4, len: 'Month', win: '1d', full: '1 day'}, {id: 4, len: 'Month', win: '1d', full: '1 day', delta: [1, 'months']},
{id: 5, len: 'Month', win: '7d', full: '7 day'}, {id: 5, len: 'Month', win: '7d', full: '7 day', delta: [1, 'months']},
{id: 6, len: 'Year', win: '1d', full: '1 day'}, {id: 6, len: 'Year', win: '1d', full: '1 day', delta: [1, 'years']},
{id: 7, len: 'Year', win: '30d', full: '30 day'}, {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 (
<>
<h2>Water Usage</h2>
<p>Loading...</p>
</>
);
}
return ( return (
<div className='container'> <>
<h2>Outside Temperature {loading ? 'Loading...' : ''}</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>
}
<h2>Water Usage {loading ? 'Loading...' : ''}</h2> <h2>Water Usage {loading ? 'Loading...' : ''}</h2>
{data.Water ? <ResponsiveContainer width='100%' height={300}>
<ResponsiveContainer width='100%' height={300}> <ComposedChart syncId={1} data={data} margin={{ top: 5, left: 0, right: 30, bottom: 0 }}>
<ComposedChart syncId={1} data={data.Water} margin={{ top: 5, left: 0, right: 30, bottom: 0 }}> <XAxis
<XAxis dataKey='time'
dataKey='time' minTickGap={10}
minTickGap={10} tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
tickFormatter={timeStr => moment(timeStr).format('HH:mm')} />
/>
<YAxis <YAxis
yAxisId="right" yAxisId='right'
domain={[data.Water[0].consumption_data, data.Water.slice(-1)[0].consumption_data]} domain={data.length ? [data[0].consumption_data, data.slice(-1)[0].consumption_data] : [100, 0]}
orientation="right" orientation='right'
hide={true} hide={true}
/> />
<YAxis <YAxis
yAxisId="left" yAxisId='left'
/> />
<CartesianGrid strokeDasharray='3 3'/> <CartesianGrid strokeDasharray='3 3'/>
<Tooltip <Tooltip
formatter={v => v + ' L'} formatter={v => v + ' L'}
labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')} labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
separator=': ' 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 <Bar
yAxisId="left" yAxisId='left'
type='monotone' type='monotone'
dataKey='delta' dataKey='delta'
name='Delta' name='Delta'
fill='green' fill='green'
isAnimationActive={false} isAnimationActive={false}
/> />
<Line <Line
yAxisId="right" yAxisId='right'
type='monotone' type='monotone'
dataKey='max' dataKey='max'
name='Total' name='Total'
stroke='black' stroke='black'
strokeWidth={2} strokeWidth={2}
dot={false} dot={false}
isAnimationActive={false} isAnimationActive={false}
/> />
</ComposedChart> </ComposedChart>
</ResponsiveContainer> </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> </div>
); );
} }
function Menu({duration, setDuration, end, setEnd, setLoading}) { function Menu({duration, setDuration, end, setEnd}) {
const [submenu, setSubmenu] = useState(false); const [submenu, setSubmenu] = useState(false);
const chooseDuration = (x) => { const chooseDuration = (x) => {
setLoading(true);
setSubmenu(false); setSubmenu(false);
setDuration(x); 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 ( return (
<div className='menu'> <div className='menu'>
{!!submenu &&<div className='submenu'> {!!submenu &&<div className='submenu'>
<div className='submenu-close'>
<button onClick={() => setSubmenu(false)}>×</button>
</div>
{submenu === 'end' && {submenu === 'end' &&
<> <>
<p>Choose end date:</p> <div className='submenu-header'>
<p>epic date picker</p> <h2>Choose start date:</h2>
<button onClick={() => setSubmenu(false)}>×</button>
</div>
<div className='datepicker'>
<Datetime
input={false}
timeFormat={false}
onChange={(x) => chooseEnd(x)}
/>
</div>
</> </>
} }
{submenu === 'duration' && {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>}
<div className='menu-container'> <div className='menu-container'>
<button onClick={() => setDuration('day')}>&lt;</button> <button onClick={() => prev()}>&lt;</button>
<button <button
onClick={() => setSubmenu('end')} onClick={() => setSubmenu('end')}
className={submenu === 'end' ? 'active' : ''} className={submenu === 'end' ? 'active' : ''}
> >
{end.format('ddd MMM DD')} {moment(end).subtract(duration.delta[0], duration.delta[1]).format('ddd MMM DD')}
</button> </button>
<button <button
@ -309,7 +172,7 @@ function Menu({duration, setDuration, end, setEnd, setLoading}) {
{duration.len} / {duration.win} {duration.len} / {duration.win}
</button> </button>
<button onClick={() => setDuration('day')}>&gt;</button> <button onClick={() => next()}>&gt;</button>
</div> </div>
</div> </div>
); );
@ -317,49 +180,7 @@ function Menu({duration, setDuration, end, setEnd, setLoading}) {
function App() { function App() {
const [duration, setDuration] = useState(durations[0]); const [duration, setDuration] = useState(durations[0]);
const [loading, setLoading] = useState(false);
const [end, setEnd] = useState(moment()); 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 ( return (
<div> <div>
@ -368,12 +189,11 @@ function App() {
setDuration={setDuration} setDuration={setDuration}
end={end} end={end}
setEnd={setEnd} setEnd={setEnd}
setLoading={setLoading}
/> />
<Graphs <Graphs
data={data} end={end}
loading={loading} duration={duration}
/> />
</div> </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" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA== 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: react-lifecycles-compat@^3.0.4:
version "3.0.4" version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"