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

refactor: Abstract Lux components into single component

Browse Source
This commit is contained in:
Tanner Collin (aider) 2025-07-03 22:27:39 +00:00 committed by Tanner Collin
parent f93e6d2323
commit d5f5e08a3c
1 changed files with 6 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
client/src/App.js
View File

@ -1088,100 +1088,12 @@ function BedroomSleep({end, duration}) {
);
}
function LivingRoomLux({end, duration}) {
const [data, loading, tickFormatter] = useSensor('lux', 'Living Room', end, duration);
function Lux({name, sensorName, end, duration}) {
const [data, loading, tickFormatter] = useSensor('lux', sensorName, 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 KitchenLux({end, duration}) {
const [data, loading, tickFormatter] = useSensor('lux', 'Kitchen', end, duration);
return (
<ChartContainer
name='Kitchen 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 BedroomLux({end, duration}) {
const [data, loading, tickFormatter] = useSensor('lux', 'Bedroom', end, duration);
return (
<ChartContainer
name='Bedroom Lux'
name={name}
data={data}
lastFormatter={(x) => x.lux?.toFixed(1) + ' lx'}
loading={loading}
@ -1292,9 +1204,9 @@ function Graphs({end, duration}) {
<Gas end={end} duration={duration} />
<Water end={end} duration={duration} />
<BedroomSleep end={end} duration={duration} />
<LivingRoomLux end={end} duration={duration} />
<KitchenLux end={end} duration={duration} />
<BedroomLux end={end} duration={duration} />
<Lux name='Living Room Lux' sensorName='Living Room' end={end} duration={duration} />
<Lux name='Kitchen Lux' sensorName='Kitchen' end={end} duration={duration} />
<Lux name='Bedroom Lux' sensorName='Bedroom' end={end} duration={duration} />
<SoilMoisture name='Dumb Cane Soil Moisture' sensorName='Dumb Cane' sensorId='soil' end={end} duration={duration} />
<SoilMoisture name='Kitchen Pothos Soil Moisture' sensorName='Kitchen Pothos' sensorId='soil' end={end} duration={duration} />
<SoilMoisture name='Dracaena Soil Moisture' sensorName='Dracaena' sensorId='soil' end={end} duration={duration} />