From ae5a5aa0707e86f3a2755c30e6b71fe78c533415 Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Tue, 11 Jan 2022 07:27:04 +0000 Subject: [PATCH] Add datepicker, make each graph a component --- client/package.json | 1 + client/public/index.html | 2 +- client/src/App.css | 25 ++- client/src/App.js | 426 +++++++++++---------------------------- client/yarn.lock | 5 + 5 files changed, 148 insertions(+), 311 deletions(-) diff --git a/client/package.json b/client/package.json index 4b69488..6796c13 100644 --- a/client/package.json +++ b/client/package.json @@ -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" diff --git a/client/public/index.html b/client/public/index.html index 9632993..991eaed 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -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`. --> - Solar Display + Tanner's Sensors diff --git a/client/src/App.css b/client/src/App.css index 66e293f..e914c32 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -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; +} + diff --git a/client/src/App.js b/client/src/App.js index 91d701a..f83ebab 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -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 ( -
-

Outside Temperature {loading ? 'Loading...' : ''}

- - {data.Outside ? - - - moment(timeStr).format('HH:mm')} - /> - - - v.toFixed(1) + ' °C'} - labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')} - separator=': ' - /> - - - - - - - - - - - : -

Loading...

- } +function useSensor(measurement, name, end, duration) { + if (!data) { + return ( + <> +

Water Usage

-

Bedroom Temperature {loading ? 'Loading...' : ''}

- - {data.Bedroom ? - - - moment(timeStr).format('HH:mm')} - /> - - - v.toFixed(1) + ' °C'} - labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')} - separator=': ' - /> - - - - - - - - - - :

Loading...

- } - -

Thermostat {loading ? 'Loading...' : ''}

- - {data.Venstar ? - - - moment(timeStr).format('HH:mm')} - /> - - - v.toFixed(1) + ' °C'} - labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')} - separator=': ' - /> - - - - - - - - - : -

Loading...

- } - -

Gas Usage {loading ? 'Loading...' : ''}

- - {data.Gas ? - - - moment(timeStr).format('HH:mm')} - /> - - - - - - v.toFixed(1) + ' MJ'} - labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')} - separator=': ' - /> - - - - - - - - - : -

Loading...

- } + + ); + } + return ( + <>

Water Usage {loading ? 'Loading...' : ''}

- {data.Water ? - - - moment(timeStr).format('HH:mm')} - /> - - - - - - v + ' L'} - labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')} - separator=': ' - /> - - + + + moment(timeStr).format('HH:mm')} + /> + + + + + + v + ' L'} + labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')} + separator=': ' + /> + + + + + + + + + + ); +} - - - - - : -

Loading...

- } +function Graphs({end, duration}) { + return ( +
+ + + + +
); } -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 (
{!!submenu &&
-
- -
- {submenu === 'end' && <> -

Choose end date:

-

epic date picker

+
+

Choose start date:

+ +
+ +
+ chooseEnd(x)} + /> +
} {submenu === 'duration' && - durations.map(x => - - ) + <> +
+

Choose duration:

+ +
+ + {durations.map(x => + + )} + }
}
- + +
); @@ -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 (
@@ -368,12 +189,11 @@ function App() { setDuration={setDuration} end={end} setEnd={setEnd} - setLoading={setLoading} />
); diff --git a/client/yarn.lock b/client/yarn.lock index cc512e0..ebd726a 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -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"