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

Abstract chart container

Browse Source
master
Tanner Collin 2 years ago
parent ae5a5aa070
commit 757ce37dbc
1 changed files with 306 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 353
      client/src/App.js

353
client/src/App.js
Unescape View File

@ -18,10 +18,40 @@ const durations = [
];
function useSensor(measurement, name, end, duration) {
const [data, setData] = useState(false);
const [loading, setLoading] = useState(false);
useEffect(() => {
const get = async() => {
setLoading(true);
try {
const params = { end: end.unix(), duration: duration.len.toLowerCase(), window: duration.win };
const res = await axios.get(
'https://sensors-api.dns.t0.vc/history/'+measurement+'/'+name,
{ params: params },
);
setData((d) => (res.data));
setLoading(false);
} catch (error) {
console.log(error);
}
};
get();
const interval = setInterval(get, 30000);
return () => clearInterval(interval);
}, [end, duration]);
return [data, loading];
};
function ChartContainer({name, data, loading, children, topMargin}) {
topMargin = topMargin || 5;
if (!data) {
return (
<>
<h2>Water Usage</h2>
<h2>{name}</h2>
<p>Loading...</p>
</>
@ -30,54 +60,11 @@ function useSensor(measurement, name, end, duration) {
return (
<>
<h2>Water Usage {loading ? 'Loading...' : ''}</h2>
<h2>{name} {loading ? 'Loading...' : ''}</h2>
<ResponsiveContainer width='100%' height={300}>
<ComposedChart syncId={1} data={data} margin={{ top: 5, left: 0, right: 30, bottom: 0 }}>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
/>
<YAxis
yAxisId='right'
domain={data.length ? [data[0].consumption_data, data.slice(-1)[0].consumption_data] : [100, 0]}
orientation='right'
hide={true}
/>
<YAxis
yAxisId='left'
/>
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
formatter={v => v + ' L'}
labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
separator=': '
/>
<ReferenceLine yAxisId='right' x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
<Bar
yAxisId='left'
type='monotone'
dataKey='delta'
name='Delta'
fill='green'
isAnimationActive={false}
/>
<Line
yAxisId='right'
type='monotone'
dataKey='max'
name='Total'
stroke='black'
strokeWidth={2}
dot={false}
isAnimationActive={false}
/>
<ComposedChart syncId={1} data={data} margin={{ top: topMargin, left: 0, right: 30, bottom: 0 }}>
{children}
</ComposedChart>
</ResponsiveContainer>
</>
@ -85,11 +72,283 @@ function useSensor(measurement, name, end, duration) {
}
function OutsideTemperature({end, duration}) {
const [data, loading] = useSensor('temperature', 'Outside', end, duration);
return (
<ChartContainer name='Outside Temperature' data={data} loading={loading} topMargin={25}>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
/>
<YAxis
domain={[-40, 40]}
/>
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
formatter={v => v.toFixed(1) + ' °C'}
labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
separator=': '
/>
<ReferenceLine y={0} stroke='blue'>
<Label value='Freezing' offset={7} position='bottom' />
</ReferenceLine>
<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue'>
<Label value='Midnight' offset={7} position='top' />
</ReferenceLine>
<Line
type='monotone'
dataKey='temperature_C'
name='Temperature'
stroke='black'
strokeWidth={2}
dot={false}
isAnimationActive={false}
/>
</ChartContainer>
);
}
function NookTemperature({end, duration}) {
const [data, loading] = useSensor('temperature', 'Nook', end, duration);
return (
<ChartContainer name='Nook Temperature' data={data} loading={loading}>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
/>
<YAxis
domain={[15, 25]}
/>
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
formatter={v => v.toFixed(1) + ' °C'}
labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
separator=': '
/>
<ReferenceLine y={0} stroke='blue'>
<Label value='Freezing' offset={7} position='bottom' />
</ReferenceLine>
<ReferenceLine x={moment().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 BedroomTemperature({end, duration}) {
const [data, loading] = useSensor('temperature', 'Bedroom', end, duration);
return (
<ChartContainer name='Bedroom Temperature' data={data} loading={loading}>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
/>
<YAxis
domain={[15, 25]}
/>
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
formatter={v => v.toFixed(1) + ' °C'}
labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
separator=': '
/>
<ReferenceLine y={0} stroke='blue'>
<Label value='Freezing' offset={7} position='bottom' />
</ReferenceLine>
<ReferenceLine x={moment().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 Thermostat({end, duration}) {
const [data, loading] = useSensor('thermostat', 'Venstar', end, duration);
return (
<ChartContainer name='Thermostat' data={data} loading={loading}>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
/>
<YAxis
domain={[15, 25]}
/>
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
formatter={v => v.toFixed(1) + ' °C'}
labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
separator=': '
/>
<ReferenceLine x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
<Line
type='monotone'
dataKey='heattemp'
name='Setpoint'
stroke='red'
strokeWidth={2}
dot={false}
isAnimationActive={false}
/>
<Line
type='monotone'
dataKey='spacetemp'
name='Temperature'
stroke='black'
strokeWidth={2}
dot={false}
isAnimationActive={false}
/>
</ChartContainer>
);
}
function Gas({end, duration}) {
const [data, loading] = useSensor('ertscm', 'Gas', end, duration);
return (
<ChartContainer name='Gas Usage' data={data} loading={loading}>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
/>
<YAxis
yAxisId='right'
domain={data.length ? [data[0].consumption_data, data.slice(-1)[0].consumption_data] : [100, 0]}
orientation='right'
hide={true}
/>
<YAxis
yAxisId='left'
/>
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
formatter={v => v.toFixed(1) + ' MJ'}
labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
separator=': '
/>
<ReferenceLine yAxisId='right' x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
<Bar
yAxisId='left'
type='monotone'
dataKey='delta'
name='Delta'
fill='green'
isAnimationActive={false}
/>
<Line
yAxisId='right'
type='monotone'
dataKey='max'
name='Total'
stroke='black'
strokeWidth={2}
dot={false}
isAnimationActive={false}
/>
</ChartContainer>
);
}
function Water({end, duration}) {
const [data, loading] = useSensor('ertscm', 'Water', end, duration);
return (
<ChartContainer name='Water Usage' data={data} loading={loading}>
<XAxis
dataKey='time'
minTickGap={10}
tickFormatter={timeStr => moment(timeStr).format('HH:mm')}
/>
<YAxis
yAxisId='right'
domain={data.length ? [data[0].consumption_data, data.slice(-1)[0].consumption_data] : [100, 0]}
orientation='right'
hide={true}
/>
<YAxis
yAxisId='left'
/>
<CartesianGrid strokeDasharray='3 3'/>
<Tooltip
formatter={v => v + ' L'}
labelFormatter={timeStr => moment(timeStr).format('ddd MMM DD h:mm A')}
separator=': '
/>
<ReferenceLine yAxisId='right' x={moment().startOf('day').toISOString().replace('.000', '')} stroke='blue' />
<Bar
yAxisId='left'
type='monotone'
dataKey='delta'
name='Delta'
fill='green'
isAnimationActive={false}
/>
<Line
yAxisId='right'
type='monotone'
dataKey='max'
name='Total'
stroke='black'
strokeWidth={2}
dot={false}
isAnimationActive={false}
/>
</ChartContainer>
);
}
function Graphs({end, duration}) {
return (
<div className='container'>
<OutsideTemperature end={end} duration={duration} />
<BedroomTemperature end={end} duration={duration} />
<NookTemperature end={end} duration={duration} />
<Thermostat end={end} duration={duration} />
<Gas end={end} duration={duration} />
<Water end={end} duration={duration} />

Write Preview
Loading…
Cancel
Save