Compare commits
No commits in common. "fcb860af293bc295276f201d56d139e0f70e200e" and "ae5a5aa0707e86f3a2755c30e6b71fe78c533415" have entirely different histories.
fcb860af29
...
ae5a5aa070
|
|
@ -8,7 +8,6 @@
|
||||||
"@testing-library/user-event": "^12.1.10",
|
"@testing-library/user-event": "^12.1.10",
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
"moment": "^2.29.1",
|
"moment": "^2.29.1",
|
||||||
"moment-timezone": "^0.5.34",
|
|
||||||
"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",
|
||||||
|
|
|
||||||
|
|
@ -6,16 +6,10 @@ body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
max-width: 40em;
|
||||||
flex-wrap: wrap;
|
margin: 0 auto 3rem auto;
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 38em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
|
|
|
||||||
|
|
@ -3,526 +3,84 @@ import { ComposedChart, Bar, Label, LineChart, ReferenceLine, Line, XAxis, YAxis
|
||||||
import Datetime from 'react-datetime';
|
import Datetime from 'react-datetime';
|
||||||
import 'react-datetime/css/react-datetime.css';
|
import 'react-datetime/css/react-datetime.css';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import moment from 'moment-timezone';
|
import moment from 'moment';
|
||||||
import './App.css';
|
import './App.css';
|
||||||
|
|
||||||
let tzcache = {};
|
|
||||||
|
|
||||||
const durations = [
|
const durations = [
|
||||||
{id: 0, len: 'Day', win: '10m', full: '10 min', delta: [1, 'days'], format: 'HH'},
|
{id: 0, len: 'Day', win: '10m', full: '10 min', delta: [1, 'days']},
|
||||||
{id: 1, len: 'Day', win: '1h', full: '1 hour', delta: [1, 'days'], format: 'HH'},
|
{id: 1, len: 'Day', win: '1h', full: '1 hour', delta: [1, 'days']},
|
||||||
{id: 2, len: 'Week', win: '1h', full: '1 hour', delta: [7, 'days'], format: 'HH'},
|
{id: 2, len: 'Week', win: '1h', full: '1 hour', delta: [7, 'days']},
|
||||||
{id: 3, len: 'Week', win: '1d', full: '1 day', delta: [7, 'days'], format: 'D'},
|
{id: 3, len: 'Week', win: '1d', full: '1 day', delta: [7, 'days']},
|
||||||
{id: 4, len: 'Month', win: '1d', full: '1 day', delta: [1, 'months'], format: 'D'},
|
{id: 4, len: 'Month', win: '1d', full: '1 day', delta: [1, 'months']},
|
||||||
{id: 5, len: 'Month', win: '7d', full: '7 day', delta: [1, 'months'], format: 'D'},
|
{id: 5, len: 'Month', win: '7d', full: '7 day', delta: [1, 'months']},
|
||||||
{id: 6, len: 'Year', win: '1d', full: '1 day', delta: [1, 'years'], format: 'M/D'},
|
{id: 6, len: 'Year', win: '1d', full: '1 day', delta: [1, 'years']},
|
||||||
{id: 7, len: 'Year', win: '30d', full: '30 day', delta: [1, 'years'], format: 'M'},
|
{id: 7, len: 'Year', win: '30d', full: '30 day', delta: [1, 'years']},
|
||||||
];
|
];
|
||||||
|
|
||||||
function useSensor(measurement, name, end, duration) {
|
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();
|
|
||||||
}, [end, duration]);
|
|
||||||
|
|
||||||
const memoConvertTZ = (isDST, timeStr, format) => {
|
|
||||||
if (!timeStr) return '?';
|
|
||||||
|
|
||||||
let lookUp, result = null;
|
|
||||||
const date = timeStr.slice(5, 10);
|
|
||||||
const hours = timeStr.slice(11, 13);
|
|
||||||
const minutes = timeStr.slice(14, 16);
|
|
||||||
|
|
||||||
if (format === 'HH') {
|
|
||||||
lookUp = [isDST, hours, format];
|
|
||||||
} else {
|
|
||||||
lookUp = [isDST, date, format];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (tzcache[lookUp] != undefined ) {
|
|
||||||
result = tzcache[lookUp];
|
|
||||||
} else {
|
|
||||||
result = moment(timeStr).tz('America/Edmonton').format(format);
|
|
||||||
tzcache[lookUp] = result;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (format === 'HH') {
|
|
||||||
return result + ':' + minutes;
|
|
||||||
} else {
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const isDST = end.tz('America/Edmonton').isDST();
|
|
||||||
const tickFormatter = (timeStr) => memoConvertTZ(isDST, timeStr, duration.format);
|
|
||||||
|
|
||||||
return [data, loading, tickFormatter];
|
|
||||||
};
|
|
||||||
|
|
||||||
function ChartContainer({name, data, lastFormatter, loading, children, topMargin}) {
|
|
||||||
topMargin = topMargin || 5;
|
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h2>{name}</h2>
|
<h2>Water Usage</h2>
|
||||||
|
|
||||||
<p>Loading...</p>
|
<p>Loading...</p>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const last = data.length ? lastFormatter(data.slice(-1)[0]) : null;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='chart'>
|
<>
|
||||||
<h2>{name}: {loading ? 'Loading...' : last || 'No data'}</h2>
|
<h2>Water Usage {loading ? 'Loading...' : ''}</h2>
|
||||||
|
|
||||||
<ResponsiveContainer width='100%' height={300}>
|
<ResponsiveContainer width='100%' height={300}>
|
||||||
<ComposedChart syncId={1} data={data} margin={{ top: topMargin, left: 0, right: 30, bottom: 0 }}>
|
<ComposedChart syncId={1} data={data} margin={{ top: 5, left: 0, right: 30, bottom: 0 }}>
|
||||||
{children}
|
<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>
|
</ComposedChart>
|
||||||
</ResponsiveContainer>
|
</ResponsiveContainer>
|
||||||
</div>
|
</>
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function SolarPower({end, duration}) {
|
|
||||||
const [data, loading, tickFormatter] = useSensor('solar', 'Solar', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Solar Power'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => x.actual_total + ' W'}
|
|
||||||
loading={loading}
|
|
||||||
topMargin={25}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
domain={[0, 6000]}
|
|
||||||
/>
|
|
||||||
<CartesianGrid strokeDasharray='3 3'/>
|
|
||||||
<Tooltip
|
|
||||||
formatter={v => v + ' W'}
|
|
||||||
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
|
|
||||||
separator=': '
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue'>
|
|
||||||
<Label value='Midnight' offset={7} position='top' />
|
|
||||||
</ReferenceLine>
|
|
||||||
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='actual_total'
|
|
||||||
name='Total Power'
|
|
||||||
stroke='black'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
isAnimationActive={false}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function OutsideTemperature({end, duration}) {
|
|
||||||
const [data, loading, tickFormatter] = useSensor('temperature', 'Outside', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Outside Temperature'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
domain={[-40, 40]}
|
|
||||||
/>
|
|
||||||
<CartesianGrid strokeDasharray='3 3'/>
|
|
||||||
<Tooltip
|
|
||||||
formatter={v => v.toFixed(1) + ' °C'}
|
|
||||||
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').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}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function NookTemperature({end, duration}) {
|
|
||||||
const [data, loading, tickFormatter] = useSensor('temperature', 'Nook', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Nook Temperature'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
domain={[15, 25]}
|
|
||||||
/>
|
|
||||||
<CartesianGrid strokeDasharray='3 3'/>
|
|
||||||
<Tooltip
|
|
||||||
formatter={v => v.toFixed(1) + ' °C'}
|
|
||||||
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').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}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function BedroomTemperature({end, duration}) {
|
|
||||||
const [data, loading, tickFormatter] = useSensor('temperature', 'Bedroom', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Bedroom Temperature'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
domain={[15, 25]}
|
|
||||||
/>
|
|
||||||
<CartesianGrid strokeDasharray='3 3'/>
|
|
||||||
<Tooltip
|
|
||||||
formatter={v => v.toFixed(1) + ' °C'}
|
|
||||||
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').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}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Thermostat({end, duration}) {
|
|
||||||
const [data, loading, tickFormatter] = useSensor('thermostat', 'Venstar', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Nook Thermostat'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => x.spacetemp?.toFixed(1) + ' °C'}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
domain={[15, 25]}
|
|
||||||
/>
|
|
||||||
<CartesianGrid strokeDasharray='3 3'/>
|
|
||||||
<Tooltip
|
|
||||||
formatter={v => v.toFixed(1) + ' °C'}
|
|
||||||
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').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}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Gas({end, duration}) {
|
|
||||||
const [data, loading, tickFormatter] = useSensor('ertscm', 'Gas', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Gas Usage'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => (x.max / 1000)?.toFixed(1) + ' GJ'}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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.toFixed(1) + ' MJ'}
|
|
||||||
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').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}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Water({end, duration}) {
|
|
||||||
const [data, loading, tickFormatter] = useSensor('ertscm', 'Water', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Water Usage'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => (x.max / 1000)?.toFixed(1) + ' m³'}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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).tz('America/Edmonton').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}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function LivingRoomDust({end, duration}) {
|
|
||||||
const [data, loading, tickFormatter] = useSensor('dust', 'Living Room', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Living Room Dust'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => x.max_p10?.toFixed(1) + ' ug/m³'}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
domain={[0, 20]}
|
|
||||||
/>
|
|
||||||
<CartesianGrid strokeDasharray='3 3'/>
|
|
||||||
<Tooltip
|
|
||||||
formatter={v => v.toFixed(1) + ' ug/m³'}
|
|
||||||
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
|
|
||||||
separator=': '
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
|
|
||||||
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='max_p10'
|
|
||||||
name='PM10'
|
|
||||||
stroke='black'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
isAnimationActive={false}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function BedroomSleep({end, duration}) {
|
|
||||||
const [data, loading, tickFormatter] = useSensor('sleep', 'Bedroom', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Sleep Movement'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => x.max_mag?.toFixed(1) + ' m/s²'}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
domain={[5, 20]}
|
|
||||||
/>
|
|
||||||
<CartesianGrid strokeDasharray='3 3'/>
|
|
||||||
<Tooltip
|
|
||||||
formatter={v => v.toFixed(1) + ' m/s²'}
|
|
||||||
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
|
|
||||||
separator=': '
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
|
|
||||||
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='max_mag'
|
|
||||||
name='Movement'
|
|
||||||
stroke='black'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
isAnimationActive={false}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -530,15 +88,11 @@ function BedroomSleep({end, duration}) {
|
||||||
function Graphs({end, duration}) {
|
function Graphs({end, duration}) {
|
||||||
return (
|
return (
|
||||||
<div className='container'>
|
<div className='container'>
|
||||||
<SolarPower end={end} duration={duration} />
|
|
||||||
<OutsideTemperature end={end} duration={duration} />
|
<OutsideTemperature end={end} duration={duration} />
|
||||||
<BedroomTemperature end={end} duration={duration} />
|
<BedroomTemperature end={end} duration={duration} />
|
||||||
<NookTemperature end={end} duration={duration} />
|
|
||||||
<Thermostat end={end} duration={duration} />
|
<Thermostat end={end} duration={duration} />
|
||||||
<Gas end={end} duration={duration} />
|
<Gas end={end} duration={duration} />
|
||||||
<Water end={end} duration={duration} />
|
<Water end={end} duration={duration} />
|
||||||
<LivingRoomDust end={end} duration={duration} />
|
|
||||||
<BedroomSleep end={end} duration={duration} />
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -557,11 +111,6 @@ function Menu({duration, setDuration, end, setEnd}) {
|
||||||
setEnd(newEnd);
|
setEnd(newEnd);
|
||||||
};
|
};
|
||||||
|
|
||||||
const chooseNow = (x) => {
|
|
||||||
setSubmenu(false);
|
|
||||||
setEnd(moment());
|
|
||||||
};
|
|
||||||
|
|
||||||
const next = () => {
|
const next = () => {
|
||||||
setSubmenu(false);
|
setSubmenu(false);
|
||||||
setEnd(prevEnd => moment(prevEnd).add(...duration.delta));
|
setEnd(prevEnd => moment(prevEnd).add(...duration.delta));
|
||||||
|
|
@ -569,7 +118,7 @@ function Menu({duration, setDuration, end, setEnd}) {
|
||||||
|
|
||||||
const prev = () => {
|
const prev = () => {
|
||||||
setSubmenu(false);
|
setSubmenu(false);
|
||||||
setEnd(prevEnd => moment(prevEnd).subtract(...duration.delta));
|
setEnd(prevEnd => moment(prevEnd).subtract(duration.delta[0], duration.delta[1]));
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -589,8 +138,6 @@ function Menu({duration, setDuration, end, setEnd}) {
|
||||||
onChange={(x) => chooseEnd(x)}
|
onChange={(x) => chooseEnd(x)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button onClick={chooseNow}>Jump to Now</button>
|
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -635,15 +182,6 @@ function App() {
|
||||||
const [duration, setDuration] = useState(durations[0]);
|
const [duration, setDuration] = useState(durations[0]);
|
||||||
const [end, setEnd] = useState(moment());
|
const [end, setEnd] = useState(moment());
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const updateEnd = () => {
|
|
||||||
setEnd(prevEnd => moment(prevEnd).add(1, 'minutes'));
|
|
||||||
}
|
|
||||||
|
|
||||||
const interval = setInterval(updateEnd, 60000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Menu
|
<Menu
|
||||||
|
|
|
||||||
|
|
@ -7380,14 +7380,7 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
|
||||||
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
|
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
|
||||||
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
|
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
|
||||||
|
|
||||||
moment-timezone@^0.5.34:
|
moment@^2.29.1:
|
||||||
version "0.5.34"
|
|
||||||
resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.34.tgz#a75938f7476b88f155d3504a9343f7519d9a405c"
|
|
||||||
integrity sha512-3zAEHh2hKUs3EXLESx/wsgw6IQdusOT8Bxm3D9UrHPQR7zlMmzwybC8zHEM1tQ4LJwP7fcxrWr8tuBg05fFCbg==
|
|
||||||
dependencies:
|
|
||||||
moment ">= 2.9.0"
|
|
||||||
|
|
||||||
"moment@>= 2.9.0", moment@^2.29.1:
|
|
||||||
version "2.29.1"
|
version "2.29.1"
|
||||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
|
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
|
||||||
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
|
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user