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

refactor: abstract air quality components

Browse Source
This commit is contained in:
Tanner Collin (aider) 2025-07-03 22:32:46 +00:00 committed by Tanner Collin
parent 3c8393b14c
commit 1052cf9bb9
1 changed files with 6 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
client/src/App.js
View File

@ -781,12 +781,12 @@ function LivingRoomDust({end, duration}) {
); );
} }
function LivingRoomAir({end, duration}) { function Air({name, sensorName, end, duration}) {
const [data, loading, tickFormatter] = useSensor('air', 'Living Room', end, duration); const [data, loading, tickFormatter] = useSensor('air', sensorName, end, duration);
return ( return (
<ChartContainer <ChartContainer
name='Living Room Air' name={name}
data={data} data={data}
lastFormatter={(x) => x.max_p10?.toFixed(1) + ' ug/m³'} lastFormatter={(x) => x.max_p10?.toFixed(1) + ' ug/m³'}
loading={loading} loading={loading}
@ -870,183 +870,7 @@ function LivingRoomAir({end, duration}) {
); );
} }
function KitchenAir({end, duration}) {
const [data, loading, tickFormatter] = useSensor('air', 'Kitchen', end, duration);
return (
<ChartContainer
name='Kitchen 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 BedroomAir({end, duration}) {
const [data, loading, tickFormatter] = useSensor('air', 'Bedroom', end, duration);
return (
<ChartContainer
name='Bedroom 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);
@ -1191,9 +1015,9 @@ function Graphs({end, duration}) {
<div className='container'> <div className='container'>
<SolarPower end={end} duration={duration} /> <SolarPower end={end} duration={duration} />
<LivingRoomDust end={end} duration={duration} /> <LivingRoomDust end={end} duration={duration} />
<LivingRoomAir end={end} duration={duration} /> <Air name='Living Room Air' sensorName='Living Room' end={end} duration={duration} />
<KitchenAir end={end} duration={duration} /> <Air name='Kitchen Air' sensorName='Kitchen' end={end} duration={duration} />
<BedroomAir end={end} duration={duration} /> <Air name='Bedroom Air' sensorName='Bedroom' 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} />