diff --git a/client/src/App.js b/client/src/App.js
index f83ebab..10313bd 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -18,10 +18,40 @@ const durations = [
];
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();
+ const interval = setInterval(get, 30000);
+ return () => clearInterval(interval);
+ }, [end, duration]);
+
+ return [data, loading];
+};
+
+function ChartContainer({name, data, loading, children, topMargin}) {
+ topMargin = topMargin || 5;
+
if (!data) {
return (
<>
- Water Usage
+ {name}
Loading...
@@ -30,54 +60,11 @@ function useSensor(measurement, name, end, duration) {
return (
<>
- Water Usage {loading ? 'Loading...' : ''}
+ {name} {loading ? 'Loading...' : ''}
-
- moment(timeStr).format('HH:mm')}
- />
-
-
-
-
-
- v + ' L'}
- labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
- separator=': '
- />
-
-
-
-
-
-
+
+ {children}
@@ -85,11 +72,283 @@ function useSensor(measurement, name, end, duration) {
}
+function OutsideTemperature({end, duration}) {
+ const [data, loading] = useSensor('temperature', 'Outside', end, duration);
+
+ return (
+
+ moment(timeStr).format('HH:mm')}
+ />
+
+
+ v.toFixed(1) + ' °C'}
+ labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+ separator=': '
+ />
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function NookTemperature({end, duration}) {
+ const [data, loading] = useSensor('temperature', 'Nook', end, duration);
+
+ return (
+
+ moment(timeStr).format('HH:mm')}
+ />
+
+
+ v.toFixed(1) + ' °C'}
+ labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+ separator=': '
+ />
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function BedroomTemperature({end, duration}) {
+ const [data, loading] = useSensor('temperature', 'Bedroom', end, duration);
+
+ return (
+
+ moment(timeStr).format('HH:mm')}
+ />
+
+
+ v.toFixed(1) + ' °C'}
+ labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+ separator=': '
+ />
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function Thermostat({end, duration}) {
+ const [data, loading] = useSensor('thermostat', 'Venstar', end, duration);
+
+ return (
+
+ moment(timeStr).format('HH:mm')}
+ />
+
+
+ v.toFixed(1) + ' °C'}
+ labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+ separator=': '
+ />
+
+
+
+
+
+
+
+ );
+}
+
+function Gas({end, duration}) {
+ const [data, loading] = useSensor('ertscm', 'Gas', end, duration);
+
+ return (
+
+ moment(timeStr).format('HH:mm')}
+ />
+
+
+
+
+
+ v.toFixed(1) + ' MJ'}
+ labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+ separator=': '
+ />
+
+
+
+
+
+
+
+ );
+}
+
+function Water({end, duration}) {
+ const [data, loading] = useSensor('ertscm', 'Water', end, duration);
+
+ return (
+
+ moment(timeStr).format('HH:mm')}
+ />
+
+
+
+
+
+ v + ' L'}
+ labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
+ separator=': '
+ />
+
+
+
+
+
+
+
+ );
+}
+
+
function Graphs({end, duration}) {
return (
+