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

refactor: replace individual Lux charts with a single MultiLineChart

Browse Source 
Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>
This commit is contained in:
Tanner
2026-08-27 21:26:12 +00:00
co-authored by aider
parent 0a1888c97f
commit 90c3c9eb44
1 changed files with 11 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.js
+11 -50
View File
@@ -634,52 +634,6 @@ function BedroomSleep({end, duration}) {
);
}
function Lux({name, sensorName, end, duration}) {
const [data, loading, tickFormatter, ticks] = useSensor('lux', sensorName, end, duration);
return (
<ChartContainer
name={name}
data={data}
lastFormatter={(x) => x.lux?.toFixed(1) + ' lx'}
loading={loading}
>
<XAxis
dataKey='time'
minTickGap={0}
tickFormatter={tickFormatter}
ticks={ticks}
/>
<YAxis
yAxisId='lux'
domain={[0, 250]}
width={40}
/>
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
formatter={(v, name) => v.toFixed(1) + units[name]}
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD HH:mm')}
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 MultiLineChart({title, measurement, dataKey, sensors, colors, end, duration, yDomain, unitKey, transform}) {
const [data, setData] = useState(false);
const [loading, setLoading] = useState(false);
@@ -904,10 +858,17 @@ function Graphs({end, duration}) {
<Gas end={end} duration={duration} />
<Water end={end} duration={duration} />
<BedroomSleep 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} />
<Lux name='Laundry Room Lux' sensorName='Laundry Room' end={end} duration={duration} />
<MultiLineChart
title='Lux'
measurement='lux'
dataKey='lux'
sensors={['Living Room', 'Kitchen', 'Bedroom', 'Laundry Room']}
colors={['green', 'black', 'red', 'blue']}
end={end}
duration={duration}
yDomain={[0, 250]}
unitKey='Lux'
/>
<MultiLineChart
title='Absolute Pressure'
measurement='hpa'