|
|
|
@ -89,7 +89,20 @@ function ChartContainer({name, data, lastFormatter, loading, children, topMargin |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const last = data.length ? lastFormatter(data.slice(-1)[0]) : null; |
|
|
|
|
if (data.length === 0) { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const dataGood = (x) => !['undefined', 'null'].some(y => lastFormatter(x).includes(y)); |
|
|
|
|
let last = null; |
|
|
|
|
if (data.length) { |
|
|
|
|
const data_end = data.slice(-2); |
|
|
|
|
if (dataGood(data_end[1])) { |
|
|
|
|
last = lastFormatter(data_end[1]); |
|
|
|
|
} else if (dataGood(data_end[0])) { |
|
|
|
|
last = lastFormatter(data_end[0]); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className='chart'> |
|
|
|
@ -280,6 +293,67 @@ function BedroomTemperature({end, duration}) { |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function SeedsTemperature({end, duration}) { |
|
|
|
|
const [data, loading, tickFormatter] = useSensor('temperature', 'Seeds', end, duration); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<ChartContainer |
|
|
|
|
name='Seeds 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, 25]} |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<CartesianGrid strokeDasharray='3 3'/> |
|
|
|
|
<Tooltip |
|
|
|
|
formatter={v => v.toFixed(1) + ' °C'} |
|
|
|
|
labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')} |
|
|
|
|
separator=': ' |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<ReferenceLine yAxisId='left' x={moment().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}) { |
|
|
|
|
const [data, loading, tickFormatter] = useSensor('thermostat', 'Venstar', end, duration); |
|
|
|
|
|
|
|
|
@ -534,6 +608,7 @@ function Graphs({end, duration}) { |
|
|
|
|
<OutsideTemperature end={end} duration={duration} /> |
|
|
|
|
<BedroomTemperature end={end} duration={duration} /> |
|
|
|
|
<NookTemperature end={end} duration={duration} /> |
|
|
|
|
<SeedsTemperature end={end} duration={duration} /> |
|
|
|
|
<Thermostat end={end} duration={duration} /> |
|
|
|
|
<Gas end={end} duration={duration} /> |
|
|
|
|
<Water end={end} duration={duration} /> |
|
|
|
|