refactor: Abstract temperature components into a single generic component
This commit is contained in:
parent
1052cf9bb9
commit
816624ec44
|
|
@ -196,12 +196,12 @@ function SolarPower({end, duration}) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function OutsideTemperature({end, duration}) {
|
function Temperature({name, sensorName, end, duration, yDomain, showHumidity, showFreezingLine}) {
|
||||||
const [data, loading, tickFormatter] = useSensor('temperature', 'Outside', end, duration);
|
const [data, loading, tickFormatter] = useSensor('temperature', sensorName, end, duration);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ChartContainer
|
<ChartContainer
|
||||||
name='Outside Temperature'
|
name={name}
|
||||||
data={data}
|
data={data}
|
||||||
lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
|
lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
|
|
@ -211,77 +211,35 @@ function OutsideTemperature({end, duration}) {
|
||||||
minTickGap={10}
|
minTickGap={10}
|
||||||
tickFormatter={tickFormatter}
|
tickFormatter={tickFormatter}
|
||||||
/>
|
/>
|
||||||
|
{showHumidity &&
|
||||||
<YAxis
|
<YAxis
|
||||||
domain={[-40, 40]}
|
yAxisId='right'
|
||||||
|
domain={[0, 100]}
|
||||||
|
orientation='right'
|
||||||
|
hide={true}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
<YAxis
|
||||||
|
yAxisId={showHumidity ? 'left' : undefined}
|
||||||
|
domain={yDomain}
|
||||||
/>
|
/>
|
||||||
<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='purple'>
|
{showFreezingLine &&
|
||||||
|
<ReferenceLine yAxisId={showHumidity ? 'left' : undefined} y={0} stroke='purple'>
|
||||||
<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' />
|
|
||||||
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='temperature_C'
|
|
||||||
name='Temperature'
|
|
||||||
stroke='black'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
isAnimationActive={false}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function NookTemperature({end, duration}) {
|
<ReferenceLine yAxisId={showHumidity ? 'left' : undefined} x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
|
||||||
const [data, loading, tickFormatter] = useSensor('temperature', 'Nook', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Nook Temperature'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<YAxis
|
|
||||||
yAxisId='right'
|
|
||||||
domain={[0, 100]}
|
|
||||||
orientation='right'
|
|
||||||
hide={true}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
yAxisId='left'
|
|
||||||
domain={[15, 30]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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='left' y={0} stroke='blue'>
|
|
||||||
<Label value='Freezing' offset={7} position='bottom' />
|
|
||||||
</ReferenceLine>
|
|
||||||
|
|
||||||
<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
|
|
||||||
|
|
||||||
<Line
|
<Line
|
||||||
yAxisId='left'
|
yAxisId={showHumidity ? 'left' : undefined}
|
||||||
type='monotone'
|
type='monotone'
|
||||||
dataKey='temperature_C'
|
dataKey='temperature_C'
|
||||||
name='Temperature'
|
name='Temperature'
|
||||||
|
|
@ -290,7 +248,7 @@ function NookTemperature({end, duration}) {
|
||||||
dot={false}
|
dot={false}
|
||||||
isAnimationActive={false}
|
isAnimationActive={false}
|
||||||
/>
|
/>
|
||||||
|
{showHumidity &&
|
||||||
<Line
|
<Line
|
||||||
yAxisId='right'
|
yAxisId='right'
|
||||||
type='monotone'
|
type='monotone'
|
||||||
|
|
@ -301,257 +259,11 @@ function NookTemperature({end, duration}) {
|
||||||
dot={false}
|
dot={false}
|
||||||
isAnimationActive={false}
|
isAnimationActive={false}
|
||||||
/>
|
/>
|
||||||
|
}
|
||||||
</ChartContainer>
|
</ChartContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function BedroomTemperature({end, duration}) {
|
|
||||||
const [data, loading, tickFormatter] = useSensor('temperature', 'Bedroom', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Bedroom Temperature'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<YAxis
|
|
||||||
yAxisId='right'
|
|
||||||
domain={[0, 100]}
|
|
||||||
orientation='right'
|
|
||||||
hide={true}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
yAxisId='left'
|
|
||||||
domain={[15, 30]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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='left' y={0} stroke='blue'>
|
|
||||||
<Label value='Freezing' offset={7} position='bottom' />
|
|
||||||
</ReferenceLine>
|
|
||||||
|
|
||||||
<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
|
|
||||||
|
|
||||||
<Line
|
|
||||||
yAxisId='left'
|
|
||||||
type='monotone'
|
|
||||||
dataKey='temperature_C'
|
|
||||||
name='Temperature'
|
|
||||||
stroke='black'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
isAnimationActive={false}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Line
|
|
||||||
yAxisId='right'
|
|
||||||
type='monotone'
|
|
||||||
dataKey='humidity'
|
|
||||||
name='Humidity'
|
|
||||||
stroke='blue'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
isAnimationActive={false}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function BasementTemperature({end, duration}) {
|
|
||||||
const [data, loading, tickFormatter] = useSensor('temperature', 'Basement', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Basement Temperature'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<YAxis
|
|
||||||
yAxisId='right'
|
|
||||||
domain={[0, 100]}
|
|
||||||
orientation='right'
|
|
||||||
hide={true}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
yAxisId='left'
|
|
||||||
domain={[-40, 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 h:mm A')}
|
|
||||||
separator=': '
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
|
|
||||||
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='temperature_C'
|
|
||||||
yAxisId='left'
|
|
||||||
name='Temperature'
|
|
||||||
stroke='black'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
isAnimationActive={false}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='humidity'
|
|
||||||
yAxisId='right'
|
|
||||||
name='Humidity'
|
|
||||||
stroke='blue'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
isAnimationActive={false}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function MiscTemperature({end, duration}) {
|
|
||||||
const [data, loading, tickFormatter] = useSensor('temperature', 'Misc', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Misc Temperature'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<YAxis
|
|
||||||
yAxisId='right'
|
|
||||||
domain={[0, 100]}
|
|
||||||
orientation='right'
|
|
||||||
hide={true}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
yAxisId='left'
|
|
||||||
domain={[-40, 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 h:mm A')}
|
|
||||||
separator=': '
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
|
|
||||||
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='temperature_C'
|
|
||||||
yAxisId='left'
|
|
||||||
name='Temperature'
|
|
||||||
stroke='black'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
isAnimationActive={false}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='humidity'
|
|
||||||
yAxisId='right'
|
|
||||||
name='Humidity'
|
|
||||||
stroke='blue'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
isAnimationActive={false}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SeedsTemperature({end, duration}) {
|
|
||||||
const [data, loading, tickFormatter] = useSensor('temperature', 'Seeds', end, duration);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ChartContainer
|
|
||||||
name='Garden Temperature'
|
|
||||||
data={data}
|
|
||||||
lastFormatter={(x) => x.temperature_C?.toFixed(1) + ' °C'}
|
|
||||||
loading={loading}
|
|
||||||
>
|
|
||||||
<XAxis
|
|
||||||
dataKey='time'
|
|
||||||
minTickGap={10}
|
|
||||||
tickFormatter={tickFormatter}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<YAxis
|
|
||||||
yAxisId='right'
|
|
||||||
domain={[0, 100]}
|
|
||||||
orientation='right'
|
|
||||||
hide={true}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
yAxisId='left'
|
|
||||||
domain={[15, 30]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
|
|
||||||
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='temperature_C'
|
|
||||||
yAxisId='left'
|
|
||||||
name='Temperature'
|
|
||||||
stroke='black'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
isAnimationActive={false}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='humidity'
|
|
||||||
yAxisId='right'
|
|
||||||
name='Humidity'
|
|
||||||
stroke='blue'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={false}
|
|
||||||
isAnimationActive={false}
|
|
||||||
/>
|
|
||||||
</ChartContainer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Thermostat({end, duration}) {
|
function Thermostat({end, duration}) {
|
||||||
const [data, loading, tickFormatter] = useSensor('thermostat', 'Venstar', end, duration);
|
const [data, loading, tickFormatter] = useSensor('thermostat', 'Venstar', end, duration);
|
||||||
|
|
@ -1018,12 +730,12 @@ function Graphs({end, duration}) {
|
||||||
<Air name='Living Room Air' sensorName='Living Room' end={end} duration={duration} />
|
<Air name='Living Room Air' sensorName='Living Room' end={end} duration={duration} />
|
||||||
<Air name='Kitchen Air' sensorName='Kitchen' end={end} duration={duration} />
|
<Air name='Kitchen Air' sensorName='Kitchen' end={end} duration={duration} />
|
||||||
<Air name='Bedroom Air' sensorName='Bedroom' end={end} duration={duration} />
|
<Air name='Bedroom Air' sensorName='Bedroom' end={end} duration={duration} />
|
||||||
<OutsideTemperature end={end} duration={duration} />
|
<Temperature name='Outside Temperature' sensorName='Outside' end={end} duration={duration} yDomain={[-40, 40]} showHumidity={false} showFreezingLine={true} />
|
||||||
<BedroomTemperature end={end} duration={duration} />
|
<Temperature name='Bedroom Temperature' sensorName='Bedroom' end={end} duration={duration} yDomain={[15, 30]} showHumidity={true} showFreezingLine={true} />
|
||||||
<NookTemperature end={end} duration={duration} />
|
<Temperature name='Nook Temperature' sensorName='Nook' end={end} duration={duration} yDomain={[15, 30]} showHumidity={true} showFreezingLine={true} />
|
||||||
<SeedsTemperature end={end} duration={duration} />
|
<Temperature name='Garden Temperature' sensorName='Seeds' end={end} duration={duration} yDomain={[15, 30]} showHumidity={true} showFreezingLine={false} />
|
||||||
<MiscTemperature end={end} duration={duration} />
|
<Temperature name='Misc Temperature' sensorName='Misc' end={end} duration={duration} yDomain={[-40, 40]} showHumidity={true} showFreezingLine={false} />
|
||||||
<BasementTemperature end={end} duration={duration} />
|
<Temperature name='Basement Temperature' sensorName='Basement' end={end} duration={duration} yDomain={[-40, 40]} showHumidity={true} showFreezingLine={false} />
|
||||||
<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} />
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user