Add Air quality and proper units
This commit is contained in:
parent
2b1be5344a
commit
2eb1cb7e4b
|
|
@ -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
|
||||
yAxisId='left'
|
||||
domain={[15, 25]}
|
||||
/>
|
||||
|
||||
<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
|
||||
yAxisId='left'
|
||||
domain={[15, 25]}
|
||||
/>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
@ -322,7 +397,7 @@ function SeedsTemperature({end, duration}) {
|
|||
|
||||
<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
|
||||
domain={[15, 25]}
|
||||
yAxisId='right'
|
||||
domain={[0, 6]}
|
||||
orientation='right'
|
||||
hide={true}
|
||||
/>
|
||||
<YAxis
|
||||
yAxisId='left'
|
||||
domain={[12, 25]}
|
||||
/>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user