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', 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 useSensor(measurement, name, end, duration) { if (!data) { return ( <>

Water Usage

Loading...

); } return ( <>

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

moment(timeStr).format('HH:mm')} /> v + ' L'} labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')} separator=': ' /> ); } function Graphs({end, duration}) { return (
); } function Menu({duration, setDuration, end, setEnd}) { const [submenu, setSubmenu] = useState(false); const chooseDuration = (x) => { 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 start date:

chooseEnd(x)} />
} {submenu === 'duration' && <>

Choose duration:

{durations.map(x => )} }
}
); } function App() { const [duration, setDuration] = useState(durations[0]); const [end, setEnd] = useState(moment()); return (
); } export default App;