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

Add datepicker, make each graph a component

Browse Source
master
Tanner Collin 2 years ago
parent d169f72327
commit ae5a5aa070
5 changed files with 148 additions and 311 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. 2
      client/public/index.html
  3. 25
      client/src/App.css
  4. 426
      client/src/App.js
  5. 5
      client/yarn.lock

1
client/package.json
Unescape 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
Unescape 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
Unescape 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;
}

426
client/src/App.js
Unescape View File

@ -1,305 +1,168 @@
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}) {
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>
}
function useSensor(measurement, name, end, duration) {
if (!data) {
return (
<>
<h2>Water Usage</h2>
<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 }}>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
/>
<YAxis
yAxisId="right"
domain={[data.Water[0].consumption_data, data.Water.slice(-1)[0].consumption_data]}
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' />
<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>
</ResponsiveContainer>
</>
);
}
<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>
}
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'>
<button onClick={() => setSubmenu(false)}>×</button>
</div>
{submenu === 'end' &&
<>
<p>Choose end date:</p>
<p>epic date picker</p>
<div className='submenu-header'>
<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' &&
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
Unescape 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"

Write Preview
Loading…
Cancel
Save