|
|
@ -119,7 +119,7 @@ function ChartContainer({name, data, lastFormatter, loading, children, topMargin |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className='chart'> |
|
|
|
<div className='chart' id={name.replace(/ /g,'_')}> |
|
|
|
<h2>{name}: {loading ? 'Loading...' : last || 'No data'}</h2> |
|
|
|
<h2>{name}: {loading ? 'Loading...' : last || 'No data'}</h2> |
|
|
|
|
|
|
|
|
|
|
|
<ResponsiveContainer width='100%' height={300}> |
|
|
|
<ResponsiveContainer width='100%' height={300}> |
|
|
@ -368,6 +368,67 @@ function BedroomTemperature({end, duration}) { |
|
|
|
); |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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}) { |
|
|
|
function SeedsTemperature({end, duration}) { |
|
|
|
const [data, loading, tickFormatter] = useSensor('temperature', 'Seeds', end, duration); |
|
|
|
const [data, loading, tickFormatter] = useSensor('temperature', 'Seeds', end, duration); |
|
|
|
|
|
|
|
|
|
|
@ -841,6 +902,7 @@ function Graphs({end, duration}) { |
|
|
|
<BedroomTemperature end={end} duration={duration} /> |
|
|
|
<BedroomTemperature end={end} duration={duration} /> |
|
|
|
<NookTemperature end={end} duration={duration} /> |
|
|
|
<NookTemperature end={end} duration={duration} /> |
|
|
|
<SeedsTemperature end={end} duration={duration} /> |
|
|
|
<SeedsTemperature end={end} duration={duration} /> |
|
|
|
|
|
|
|
<MiscTemperature end={end} duration={duration} /> |
|
|
|
<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} /> |
|
|
|