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

Compare commits

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

No commits in common. "94f023f70c28fe48e1f91e8b96fc22306feeb337" and "2b1be5344a48dff8e65f49779a6d6bdfbeb9ac10" have entirely different histories.
94f023f70c ... 2b1be5344a

1 changed files with 18 additions and 250 deletions
Show Stats Expand all files Collapse all files

268
client/src/App.js
View File

@ -19,20 +19,6 @@ 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);
@ -148,43 +134,24 @@ function SolarPower({end, duration}) {
minTickGap={10} minTickGap={10}
tickFormatter={tickFormatter} tickFormatter={tickFormatter}
/> />
<YAxis <YAxis
yAxisId='right'
domain={[0, 10]}
orientation='right'
hide={true}
/>
<YAxis
yAxisId='left'
domain={[0, 6000]} domain={[0, 6000]}
/> />
<CartesianGrid strokeDasharray='3 3'/> <CartesianGrid strokeDasharray='3 3'/>
<Tooltip <Tooltip
formatter={(v, name) => v.toFixed(1) + units[name]} formatter={v => v + ' W'}
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 yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue'> <ReferenceLine 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='Power' name='Total Power'
stroke='black' stroke='black'
strokeWidth={2} strokeWidth={2}
dot={false} dot={false}
@ -219,7 +186,7 @@ function OutsideTemperature({end, duration}) {
separator=': ' separator=': '
/> />
<ReferenceLine y={0} stroke='purple'> <ReferenceLine y={0} stroke='blue'>
<Label value='Freezing' offset={7} position='bottom' /> <Label value='Freezing' offset={7} position='bottom' />
</ReferenceLine> </ReferenceLine>
@ -253,33 +220,23 @@ function NookTemperature({end, duration}) {
minTickGap={10} minTickGap={10}
tickFormatter={tickFormatter} tickFormatter={tickFormatter}
/> />
<YAxis <YAxis
yAxisId='right' domain={[15, 25]}
domain={[0, 100]}
orientation='right'
hide={true}
/> />
<YAxis
yAxisId='left'
domain={[15, 30]}
/>
<CartesianGrid strokeDasharray='3 3'/> <CartesianGrid strokeDasharray='3 3'/>
<Tooltip <Tooltip
formatter={(v, name) => v.toFixed(1) + units[name]} formatter={v => v.toFixed(1) + ' °C'}
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 yAxisId='left' y={0} stroke='blue'> <ReferenceLine y={0} stroke='blue'>
<Label value='Freezing' offset={7} position='bottom' /> <Label value='Freezing' offset={7} position='bottom' />
</ReferenceLine> </ReferenceLine>
<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' /> <ReferenceLine 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'
@ -288,17 +245,6 @@ 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>
); );
} }
@ -318,33 +264,23 @@ function BedroomTemperature({end, duration}) {
minTickGap={10} minTickGap={10}
tickFormatter={tickFormatter} tickFormatter={tickFormatter}
/> />
<YAxis <YAxis
yAxisId='right' domain={[15, 25]}
domain={[0, 100]}
orientation='right'
hide={true}
/> />
<YAxis
yAxisId='left'
domain={[15, 30]}
/>
<CartesianGrid strokeDasharray='3 3'/> <CartesianGrid strokeDasharray='3 3'/>
<Tooltip <Tooltip
formatter={(v, name) => v.toFixed(1) + units[name]} formatter={v => v.toFixed(1) + ' °C'}
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 yAxisId='left' y={0} stroke='blue'> <ReferenceLine y={0} stroke='blue'>
<Label value='Freezing' offset={7} position='bottom' /> <Label value='Freezing' offset={7} position='bottom' />
</ReferenceLine> </ReferenceLine>
<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' /> <ReferenceLine 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'
@ -353,17 +289,6 @@ 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>
); );
} }
@ -392,12 +317,12 @@ function SeedsTemperature({end, duration}) {
/> />
<YAxis <YAxis
yAxisId='left' yAxisId='left'
domain={[15, 30]} domain={[15, 25]}
/> />
<CartesianGrid strokeDasharray='3 3'/> <CartesianGrid strokeDasharray='3 3'/>
<Tooltip <Tooltip
formatter={(v, name) => v.toFixed(1) + units[name]} formatter={v => v.toFixed(1) + ' °C'}
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=': '
/> />
@ -444,40 +369,19 @@ function Thermostat({end, duration}) {
minTickGap={10} minTickGap={10}
tickFormatter={tickFormatter} tickFormatter={tickFormatter}
/> />
<YAxis <YAxis
yAxisId='right' domain={[15, 25]}
domain={[0, 6]}
orientation='right'
hide={true}
/> />
<YAxis
yAxisId='left'
domain={[12, 30]}
/>
<CartesianGrid strokeDasharray='3 3'/> <CartesianGrid strokeDasharray='3 3'/>
<Tooltip <Tooltip
formatter={(v, name) => v.toFixed(1) + units[name]} formatter={v => v.toFixed(1) + ' °C'}
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 yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' /> <ReferenceLine x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
<Line <Line
yAxisId='right'
type='monotone'
dataKey='state'
name='State'
stroke='green'
strokeWidth={2}
dot={false}
isAnimationActive={false}
/>
<Line
yAxisId='left'
type='monotone' type='monotone'
dataKey='heattemp' dataKey='heattemp'
name='Setpoint' name='Setpoint'
@ -488,7 +392,6 @@ function Thermostat({end, duration}) {
/> />
<Line <Line
yAxisId='left'
type='monotone' type='monotone'
dataKey='spacetemp' dataKey='spacetemp'
name='Temperature' name='Temperature'
@ -657,95 +560,6 @@ 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);
@ -786,57 +600,11 @@ 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} />
@ -844,8 +612,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>
); );
} }