tanner
/
sensors
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: tanner:2b1be5344a48dff8e65f49779a6d6bdfbeb9ac10
Branches Tags
tanner:master
...
compare: tanner:94f023f70c28fe48e1f91e8b96fc22306feeb337
Branches Tags
tanner:master

2 Commits
2b1be5344a ... 94f023f70c

Author SHA1 Message Date
Tanner Collin 94f023f70c Change domains
2 years ago
Tanner Collin 2eb1cb7e4b Add Air quality and proper units
2 years ago
1 changed files with 250 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. 268
      client/src/App.js

268
client/src/App.js
Unescape View File

@ -19,6 +19,20 @@ const durations = [
{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'], 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) { function useSensor(measurement, name, end, duration) {
const [data, setData] = useState(false); const [data, setData] = useState(false);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@ -134,24 +148,43 @@ function SolarPower({end, duration}) {
minTickGap={10} minTickGap={10}
tickFormatter={tickFormatter} tickFormatter={tickFormatter}
/> />
<YAxis
yAxisId='right'
domain={[0, 10]}
orientation='right'
hide={true}
/>
<YAxis <YAxis
yAxisId='left'
domain={[0, 6000]} domain={[0, 6000]}
/> />
<CartesianGrid strokeDasharray='3 3'/> <CartesianGrid strokeDasharray='3 3'/>
<Tooltip <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')} labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
separator=': ' 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' /> <Label value='Midnight' offset={7} position='top' />
</ReferenceLine> </ReferenceLine>
<Bar
yAxisId='right'
type='monotone'
dataKey='lifetime_energy'
name='Energy'
fill='green'
isAnimationActive={false}
/>
<Line <Line
yAxisId='left'
type='monotone' type='monotone'
dataKey='actual_total' dataKey='actual_total'
name='Total Power' name='Power'
stroke='black' stroke='black'
strokeWidth={2} strokeWidth={2}
dot={false} dot={false}
@ -186,7 +219,7 @@ function OutsideTemperature({end, duration}) {
separator=': ' separator=': '
/> />
<ReferenceLine y={0} stroke='blue'> <ReferenceLine y={0} stroke='purple'>
<Label value='Freezing' offset={7} position='bottom' /> <Label value='Freezing' offset={7} position='bottom' />
</ReferenceLine> </ReferenceLine>
@ -220,23 +253,33 @@ function NookTemperature({end, duration}) {
minTickGap={10} minTickGap={10}
tickFormatter={tickFormatter} tickFormatter={tickFormatter}
/> />
<YAxis
yAxisId='right'
domain={[0, 100]}
orientation='right'
hide={true}
/>
<YAxis <YAxis
domain={[15, 25]} yAxisId='left'
domain={[15, 30]}
/> />
<CartesianGrid strokeDasharray='3 3'/> <CartesianGrid strokeDasharray='3 3'/>
<Tooltip <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')} labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
separator=': ' separator=': '
/> />
<ReferenceLine y={0} stroke='blue'> <ReferenceLine yAxisId='left' y={0} stroke='blue'>
<Label value='Freezing' offset={7} position='bottom' /> <Label value='Freezing' offset={7} position='bottom' />
</ReferenceLine> </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 <Line
yAxisId='left'
type='monotone' type='monotone'
dataKey='temperature_C' dataKey='temperature_C'
name='Temperature' name='Temperature'
@ -245,6 +288,17 @@ function NookTemperature({end, duration}) {
dot={false} dot={false}
isAnimationActive={false} isAnimationActive={false}
/> />
<Line
yAxisId='right'
type='monotone'
dataKey='humidity'
name='Humidity'
stroke='blue'
strokeWidth={2}
dot={false}
isAnimationActive={false}
/>
</ChartContainer> </ChartContainer>
); );
} }
@ -264,23 +318,33 @@ function BedroomTemperature({end, duration}) {
minTickGap={10} minTickGap={10}
tickFormatter={tickFormatter} tickFormatter={tickFormatter}
/> />
<YAxis
yAxisId='right'
domain={[0, 100]}
orientation='right'
hide={true}
/>
<YAxis <YAxis
domain={[15, 25]} yAxisId='left'
domain={[15, 30]}
/> />
<CartesianGrid strokeDasharray='3 3'/> <CartesianGrid strokeDasharray='3 3'/>
<Tooltip <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')} labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
separator=': ' separator=': '
/> />
<ReferenceLine y={0} stroke='blue'> <ReferenceLine yAxisId='left' y={0} stroke='blue'>
<Label value='Freezing' offset={7} position='bottom' /> <Label value='Freezing' offset={7} position='bottom' />
</ReferenceLine> </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 <Line
yAxisId='left'
type='monotone' type='monotone'
dataKey='temperature_C' dataKey='temperature_C'
name='Temperature' name='Temperature'
@ -289,6 +353,17 @@ function BedroomTemperature({end, duration}) {
dot={false} dot={false}
isAnimationActive={false} isAnimationActive={false}
/> />
<Line
yAxisId='right'
type='monotone'
dataKey='humidity'
name='Humidity'
stroke='blue'
strokeWidth={2}
dot={false}
isAnimationActive={false}
/>
</ChartContainer> </ChartContainer>
); );
} }
@ -317,12 +392,12 @@ function SeedsTemperature({end, duration}) {
/> />
<YAxis <YAxis
yAxisId='left' yAxisId='left'
domain={[15, 25]} domain={[15, 30]}
/> />
<CartesianGrid strokeDasharray='3 3'/> <CartesianGrid strokeDasharray='3 3'/>
<Tooltip <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')} labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
separator=': ' separator=': '
/> />
@ -369,19 +444,40 @@ function Thermostat({end, duration}) {
minTickGap={10} minTickGap={10}
tickFormatter={tickFormatter} tickFormatter={tickFormatter}
/> />
<YAxis
yAxisId='right'
domain={[0, 6]}
orientation='right'
hide={true}
/>
<YAxis <YAxis
domain={[15, 25]} yAxisId='left'
domain={[12, 30]}
/> />
<CartesianGrid strokeDasharray='3 3'/> <CartesianGrid strokeDasharray='3 3'/>
<Tooltip <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')} labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
separator=': ' 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 <Line
yAxisId='left'
type='monotone' type='monotone'
dataKey='heattemp' dataKey='heattemp'
name='Setpoint' name='Setpoint'
@ -392,6 +488,7 @@ function Thermostat({end, duration}) {
/> />
<Line <Line
yAxisId='left'
type='monotone' type='monotone'
dataKey='spacetemp' dataKey='spacetemp'
name='Temperature' 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}) { function BedroomSleep({end, duration}) {
const [data, loading, tickFormatter] = useSensor('sleep', 'Bedroom', 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}) { function Graphs({end, duration}) {
return ( return (
<div className='container'> <div className='container'>
<SolarPower end={end} duration={duration} /> <SolarPower end={end} duration={duration} />
<LivingRoomDust end={end} duration={duration} />
<LivingRoomAir 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} /> <NookTemperature end={end} duration={duration} />
@ -612,8 +844,8 @@ function Graphs({end, 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} /> <BedroomSleep end={end} duration={duration} />
<LivingRoomLux end={end} duration={duration} />
</div> </div>
); );
} }

Write Preview
Loading…
Cancel
Save