|
|
|
@ -19,6 +19,20 @@ const durations = [ |
|
|
|
|
{id: 7, len: 'Year', win: '30d', full: '30 day', delta: [1, 'years'], format: 'M'}, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const units = { |
|
|
|
|
'PM10': ' ug/m³', |
|
|
|
|
'PM2.5': ' ug/m³', |
|
|
|
|
'VOC': ' / 500', |
|
|
|
|
'CO2': ' ppm', |
|
|
|
|
'Energy': ' kWh', |
|
|
|
|
'Power': ' W', |
|
|
|
|
'Temperature': ' °C', |
|
|
|
|
'Humidity': '%', |
|
|
|
|
'Setpoint': ' °C', |
|
|
|
|
'State': '', |
|
|
|
|
'Lux': ' lx', |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
function useSensor(measurement, name, end, duration) { |
|
|
|
|
const [data, setData] = useState(false); |
|
|
|
|
const [loading, setLoading] = useState(false); |
|
|
|
@ -134,24 +148,43 @@ function SolarPower({end, duration}) { |
|
|
|
|
minTickGap={10} |
|
|
|
|
tickFormatter={tickFormatter} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<YAxis |
|
|
|
|
yAxisId='right' |
|
|
|
|
domain={[0, 10]} |
|
|
|
|
orientation='right' |
|
|
|
|
hide={true} |
|
|
|
|
/> |
|
|
|
|
<YAxis |
|
|
|
|
yAxisId='left' |
|
|
|
|
domain={[0, 6000]} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<CartesianGrid strokeDasharray='3 3'/> |
|
|
|
|
<Tooltip |
|
|
|
|
formatter={v => v + ' W'} |
|
|
|
|
formatter={(v, name) => v.toFixed(1) + units[name]} |
|
|
|
|
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')} |
|
|
|
|
separator=': ' |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<ReferenceLine x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue'> |
|
|
|
|
<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue'> |
|
|
|
|
<Label value='Midnight' offset={7} position='top' /> |
|
|
|
|
</ReferenceLine> |
|
|
|
|
|
|
|
|
|
<Bar |
|
|
|
|
yAxisId='right' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='lifetime_energy' |
|
|
|
|
name='Energy' |
|
|
|
|
fill='green' |
|
|
|
|
isAnimationActive={false} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<Line |
|
|
|
|
yAxisId='left' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='actual_total' |
|
|
|
|
name='Total Power' |
|
|
|
|
name='Power' |
|
|
|
|
stroke='black' |
|
|
|
|
strokeWidth={2} |
|
|
|
|
dot={false} |
|
|
|
@ -186,7 +219,7 @@ function OutsideTemperature({end, duration}) { |
|
|
|
|
separator=': ' |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<ReferenceLine y={0} stroke='blue'> |
|
|
|
|
<ReferenceLine y={0} stroke='purple'> |
|
|
|
|
<Label value='Freezing' offset={7} position='bottom' /> |
|
|
|
|
</ReferenceLine> |
|
|
|
|
|
|
|
|
@ -220,23 +253,33 @@ function NookTemperature({end, duration}) { |
|
|
|
|
minTickGap={10} |
|
|
|
|
tickFormatter={tickFormatter} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<YAxis |
|
|
|
|
yAxisId='right' |
|
|
|
|
domain={[0, 100]} |
|
|
|
|
orientation='right' |
|
|
|
|
hide={true} |
|
|
|
|
/> |
|
|
|
|
<YAxis |
|
|
|
|
domain={[15, 25]} |
|
|
|
|
yAxisId='left' |
|
|
|
|
domain={[15, 30]} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<CartesianGrid strokeDasharray='3 3'/> |
|
|
|
|
<Tooltip |
|
|
|
|
formatter={v => v.toFixed(1) + ' °C'} |
|
|
|
|
formatter={(v, name) => v.toFixed(1) + units[name]} |
|
|
|
|
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')} |
|
|
|
|
separator=': ' |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<ReferenceLine y={0} stroke='blue'> |
|
|
|
|
<ReferenceLine yAxisId='left' y={0} stroke='blue'> |
|
|
|
|
<Label value='Freezing' offset={7} position='bottom' /> |
|
|
|
|
</ReferenceLine> |
|
|
|
|
|
|
|
|
|
<ReferenceLine x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' /> |
|
|
|
|
<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' /> |
|
|
|
|
|
|
|
|
|
<Line |
|
|
|
|
yAxisId='left' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='temperature_C' |
|
|
|
|
name='Temperature' |
|
|
|
@ -245,6 +288,17 @@ function NookTemperature({end, duration}) { |
|
|
|
|
dot={false} |
|
|
|
|
isAnimationActive={false} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<Line |
|
|
|
|
yAxisId='right' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='humidity' |
|
|
|
|
name='Humidity' |
|
|
|
|
stroke='blue' |
|
|
|
|
strokeWidth={2} |
|
|
|
|
dot={false} |
|
|
|
|
isAnimationActive={false} |
|
|
|
|
/> |
|
|
|
|
</ChartContainer> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
@ -264,23 +318,33 @@ function BedroomTemperature({end, duration}) { |
|
|
|
|
minTickGap={10} |
|
|
|
|
tickFormatter={tickFormatter} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<YAxis |
|
|
|
|
yAxisId='right' |
|
|
|
|
domain={[0, 100]} |
|
|
|
|
orientation='right' |
|
|
|
|
hide={true} |
|
|
|
|
/> |
|
|
|
|
<YAxis |
|
|
|
|
domain={[15, 25]} |
|
|
|
|
yAxisId='left' |
|
|
|
|
domain={[15, 30]} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<CartesianGrid strokeDasharray='3 3'/> |
|
|
|
|
<Tooltip |
|
|
|
|
formatter={v => v.toFixed(1) + ' °C'} |
|
|
|
|
formatter={(v, name) => v.toFixed(1) + units[name]} |
|
|
|
|
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')} |
|
|
|
|
separator=': ' |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<ReferenceLine y={0} stroke='blue'> |
|
|
|
|
<ReferenceLine yAxisId='left' y={0} stroke='blue'> |
|
|
|
|
<Label value='Freezing' offset={7} position='bottom' /> |
|
|
|
|
</ReferenceLine> |
|
|
|
|
|
|
|
|
|
<ReferenceLine x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' /> |
|
|
|
|
<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' /> |
|
|
|
|
|
|
|
|
|
<Line |
|
|
|
|
yAxisId='left' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='temperature_C' |
|
|
|
|
name='Temperature' |
|
|
|
@ -289,6 +353,17 @@ function BedroomTemperature({end, duration}) { |
|
|
|
|
dot={false} |
|
|
|
|
isAnimationActive={false} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<Line |
|
|
|
|
yAxisId='right' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='humidity' |
|
|
|
|
name='Humidity' |
|
|
|
|
stroke='blue' |
|
|
|
|
strokeWidth={2} |
|
|
|
|
dot={false} |
|
|
|
|
isAnimationActive={false} |
|
|
|
|
/> |
|
|
|
|
</ChartContainer> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
@ -317,12 +392,12 @@ function SeedsTemperature({end, duration}) { |
|
|
|
|
/> |
|
|
|
|
<YAxis |
|
|
|
|
yAxisId='left' |
|
|
|
|
domain={[15, 25]} |
|
|
|
|
domain={[15, 30]} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<CartesianGrid strokeDasharray='3 3'/> |
|
|
|
|
<Tooltip |
|
|
|
|
formatter={v => v.toFixed(1) + ' °C'} |
|
|
|
|
formatter={(v, name) => v.toFixed(1) + units[name]} |
|
|
|
|
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')} |
|
|
|
|
separator=': ' |
|
|
|
|
/> |
|
|
|
@ -369,19 +444,40 @@ function Thermostat({end, duration}) { |
|
|
|
|
minTickGap={10} |
|
|
|
|
tickFormatter={tickFormatter} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<YAxis |
|
|
|
|
yAxisId='right' |
|
|
|
|
domain={[0, 6]} |
|
|
|
|
orientation='right' |
|
|
|
|
hide={true} |
|
|
|
|
/> |
|
|
|
|
<YAxis |
|
|
|
|
domain={[15, 25]} |
|
|
|
|
yAxisId='left' |
|
|
|
|
domain={[12, 30]} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<CartesianGrid strokeDasharray='3 3'/> |
|
|
|
|
<Tooltip |
|
|
|
|
formatter={v => v.toFixed(1) + ' °C'} |
|
|
|
|
formatter={(v, name) => v.toFixed(1) + units[name]} |
|
|
|
|
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')} |
|
|
|
|
separator=': ' |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<ReferenceLine x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' /> |
|
|
|
|
<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' /> |
|
|
|
|
|
|
|
|
|
<Line |
|
|
|
|
yAxisId='right' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='state' |
|
|
|
|
name='State' |
|
|
|
|
stroke='green' |
|
|
|
|
strokeWidth={2} |
|
|
|
|
dot={false} |
|
|
|
|
isAnimationActive={false} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<Line |
|
|
|
|
yAxisId='left' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='heattemp' |
|
|
|
|
name='Setpoint' |
|
|
|
@ -392,6 +488,7 @@ function Thermostat({end, duration}) { |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<Line |
|
|
|
|
yAxisId='left' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='spacetemp' |
|
|
|
|
name='Temperature' |
|
|
|
@ -560,6 +657,95 @@ function LivingRoomDust({end, duration}) { |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function LivingRoomAir({end, duration}) { |
|
|
|
|
const [data, loading, tickFormatter] = useSensor('air', 'Living Room', end, duration); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<ChartContainer |
|
|
|
|
name='Living Room Air' |
|
|
|
|
data={data} |
|
|
|
|
lastFormatter={(x) => x.max_p10?.toFixed(1) + ' ug/m³'} |
|
|
|
|
loading={loading} |
|
|
|
|
> |
|
|
|
|
<XAxis |
|
|
|
|
dataKey='time' |
|
|
|
|
minTickGap={10} |
|
|
|
|
tickFormatter={tickFormatter} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<YAxis |
|
|
|
|
yAxisId='co2' |
|
|
|
|
domain={[400, 1000]} |
|
|
|
|
orientation='right' |
|
|
|
|
hide={true} |
|
|
|
|
/> |
|
|
|
|
<YAxis |
|
|
|
|
yAxisId='voc' |
|
|
|
|
domain={[0, 250]} |
|
|
|
|
orientation='right' |
|
|
|
|
hide={true} |
|
|
|
|
/> |
|
|
|
|
<YAxis |
|
|
|
|
yAxisId='pm' |
|
|
|
|
domain={[0, 20]} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<CartesianGrid strokeDasharray='3 3'/> |
|
|
|
|
<Tooltip |
|
|
|
|
formatter={(v, name) => v + units[name]} |
|
|
|
|
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')} |
|
|
|
|
separator=': ' |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<ReferenceLine yAxisId='pm' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' /> |
|
|
|
|
|
|
|
|
|
<Line |
|
|
|
|
yAxisId='pm' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='max_p10' |
|
|
|
|
name='PM10' |
|
|
|
|
stroke='black' |
|
|
|
|
strokeWidth={2} |
|
|
|
|
dot={false} |
|
|
|
|
isAnimationActive={false} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<Line |
|
|
|
|
yAxisId='pm' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='max_p25' |
|
|
|
|
name='PM2.5' |
|
|
|
|
stroke='red' |
|
|
|
|
strokeWidth={2} |
|
|
|
|
dot={false} |
|
|
|
|
isAnimationActive={false} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<Line |
|
|
|
|
yAxisId='co2' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='max_co2' |
|
|
|
|
name='CO2' |
|
|
|
|
stroke='blue' |
|
|
|
|
strokeWidth={2} |
|
|
|
|
dot={false} |
|
|
|
|
isAnimationActive={false} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<Line |
|
|
|
|
yAxisId='voc' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='max_voc' |
|
|
|
|
name='VOC' |
|
|
|
|
stroke='green' |
|
|
|
|
strokeWidth={2} |
|
|
|
|
dot={false} |
|
|
|
|
isAnimationActive={false} |
|
|
|
|
/> |
|
|
|
|
</ChartContainer> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function BedroomSleep({end, duration}) { |
|
|
|
|
const [data, loading, tickFormatter] = useSensor('sleep', 'Bedroom', end, duration); |
|
|
|
|
|
|
|
|
@ -600,11 +786,57 @@ function BedroomSleep({end, duration}) { |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function LivingRoomLux({end, duration}) { |
|
|
|
|
const [data, loading, tickFormatter] = useSensor('lux', 'Living Room', end, duration); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<ChartContainer |
|
|
|
|
name='Living Room Lux' |
|
|
|
|
data={data} |
|
|
|
|
lastFormatter={(x) => x.lux?.toFixed(1) + ' lx'} |
|
|
|
|
loading={loading} |
|
|
|
|
> |
|
|
|
|
<XAxis |
|
|
|
|
dataKey='time' |
|
|
|
|
minTickGap={10} |
|
|
|
|
tickFormatter={tickFormatter} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<YAxis |
|
|
|
|
yAxisId='lux' |
|
|
|
|
domain={[0, 250]} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<CartesianGrid strokeDasharray='3 3'/> |
|
|
|
|
<Tooltip |
|
|
|
|
formatter={(v, name) => v.toFixed(1) + units[name]} |
|
|
|
|
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')} |
|
|
|
|
separator=': ' |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<ReferenceLine yAxisId='lux' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' /> |
|
|
|
|
|
|
|
|
|
<Line |
|
|
|
|
yAxisId='lux' |
|
|
|
|
type='monotone' |
|
|
|
|
dataKey='lux' |
|
|
|
|
name='Lux' |
|
|
|
|
stroke='black' |
|
|
|
|
strokeWidth={2} |
|
|
|
|
dot={false} |
|
|
|
|
isAnimationActive={false} |
|
|
|
|
/> |
|
|
|
|
</ChartContainer> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function Graphs({end, duration}) { |
|
|
|
|
return ( |
|
|
|
|
<div className='container'> |
|
|
|
|
<SolarPower end={end} duration={duration} /> |
|
|
|
|
<LivingRoomDust end={end} duration={duration} /> |
|
|
|
|
<LivingRoomAir end={end} duration={duration} /> |
|
|
|
|
<OutsideTemperature end={end} duration={duration} /> |
|
|
|
|
<BedroomTemperature end={end} duration={duration} /> |
|
|
|
|
<NookTemperature end={end} duration={duration} /> |
|
|
|
@ -612,8 +844,8 @@ function Graphs({end, duration}) { |
|
|
|
|
<Thermostat end={end} duration={duration} /> |
|
|
|
|
<Gas end={end} duration={duration} /> |
|
|
|
|
<Water end={end} duration={duration} /> |
|
|
|
|
<LivingRoomDust end={end} duration={duration} /> |
|
|
|
|
<BedroomSleep end={end} duration={duration} /> |
|
|
|
|
<LivingRoomLux end={end} duration={duration} /> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|