Adjust default windows

Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>

client/src/App.js

@@ -9,14 +9,11 @@ import './App.css';
 let tzcache = {};
 
 const durations = [
-	{id: 0, len: 'Day', win: '10m', full: '10 min', delta: [1, 'days'], format: 'HH'},
-	{id: 1, len: 'Day', win: '1h', full: '1 hour', delta: [1, 'days'], format: 'HH'},
-	{id: 2, len: 'Week', win: '1h', full: '1 hour', delta: [7, 'days'], format: 'HH'},
-	{id: 3, len: 'Week', win: '1d', full: '1 day', delta: [7, 'days'], format: 'D'},
-	{id: 4, len: 'Month', win: '1d', full: '1 day', delta: [1, 'months'], format: 'D'},
-	{id: 5, len: 'Month', win: '7d', full: '7 day', delta: [1, 'months'], format: 'D'},
-	{id: 6, len: 'Year', win: '1d', full: '1 day', delta: [1, 'years'], format: 'M/D'},
-	{id: 7, len: 'Year', win: '30d', full: '30 day', delta: [1, 'years'], format: 'M'},
+	{id: 0, len: 'Day', win: '5m', full: '5 min', delta: [1, 'days'], format: 'HH'},
+	{id: 1, len: 'Week', win: '30m', full: '30 min', delta: [7, 'days'], format: 'ddd'},
+	{id: 1, len: 'Fort', win: '1h', full: '1 hour', delta: [14, 'days'], format: 'D'},
+	{id: 2, len: 'Month', win: '2h', full: '2 hour', delta: [1, 'months'], format: 'D'},
+	{id: 3, len: 'Year', win: '1d', full: '1 day', delta: [1, 'years'], format: 'M/D'},
 ];
 
 const units = {
@@ -31,6 +28,8 @@ const units = {
 	'Setpoint': ' °C',
 	'State': '',
 	'Lux': ' lx',
+	'Hpa': ' hpa',
+	'kPa': ' kPa',
 	'Soil': '',
 };
 
@@ -61,35 +60,39 @@ function useSensor(measurement, name, end, duration) {
 	const memoConvertTZ = (isDST, timeStr, format) => {
 		if (!timeStr) return '?';
 
-		let lookUp, result = null;
-		const date = timeStr.slice(5, 10);
-		const hours = timeStr.slice(11, 13);
-		const minutes = timeStr.slice(14, 16);
-
-		if (format === 'HH') {
-			lookUp = [isDST, hours, format];
-		} else {
-			lookUp = [isDST, date, format];
-		}
-
+		const lookUp = timeStr + format;
 		if (tzcache[lookUp] != undefined ) {
-			result = tzcache[lookUp];
-		} else {
-			result = moment(timeStr).tz('America/Edmonton').format(format);
-			tzcache[lookUp] = result;
+			return tzcache[lookUp];
 		}
 
-		if (format === 'HH') {
-			return result + ':' + minutes;
-		} else {
-			return result;
-		}
+		let result = moment(timeStr).tz('America/Edmonton').format(format);
+		tzcache[lookUp] = result;
+		return result;
 	};
 
 	const isDST = end.tz('America/Edmonton').isDST();
 	const tickFormatter = (timeStr) => memoConvertTZ(isDST, timeStr, duration.format);
 
-	return [data, loading, tickFormatter];
+	let ticks = undefined;
+	if (Array.isArray(data)) {
+		ticks = [];
+		let lastLabel = null;
+		let dayCount = 0;
+		data.forEach(d => {
+			const lbl = memoConvertTZ(isDST, d.time, duration.format);
+			if (lbl !== lastLabel) {
+				const isMonthSkip = duration.len === 'Month' && dayCount % 2 !== 0;
+				const isDaySkip = duration.len === 'Day' && parseInt(lbl, 10) % 2 !== 0;
+				if (!isMonthSkip && !isDaySkip) {
+					ticks.push(d.time);
+				}
+				lastLabel = lbl;
+				dayCount++;
+			}
+		});
+	}
+
+	return [data, loading, tickFormatter, ticks];
 };
 
 function ChartContainer({name, data, lastFormatter, loading, children, topMargin}) {
@@ -125,7 +128,7 @@ function ChartContainer({name, data, lastFormatter, loading, children, topMargin
 			<h2>{name}: {loading ? 'Loading...' : last || 'No data'}</h2>
 
 			<ResponsiveContainer width='100%' height={300}>
-				<ComposedChart syncId={1} data={data} margin={{ top: topMargin, left: 0, right: 30, bottom: 0 }}>
+				<ComposedChart syncId={1} data={data} margin={{ top: topMargin, left: 0, right: 10, bottom: 0 }}>
 					{children}
 				</ComposedChart>
 			</ResponsiveContainer>
@@ -135,7 +138,7 @@ function ChartContainer({name, data, lastFormatter, loading, children, topMargin
 
 
 function SolarPower({end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('solar', 'Solar', end, duration);
+	const [data, loading, tickFormatter, ticks] = useSensor('solar', 'Solar', end, duration);
 
 	return (
 		<ChartContainer
@@ -147,43 +150,30 @@ function SolarPower({end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
-				yAxisId='right'
-				domain={[0, 10]}
-				orientation='right'
-				hide={true}
-			/>
-			<YAxis
-				yAxisId='left'
 				domain={[0, 6000]}
+				width={40}
+				ticks={[0, 1000, 2000, 3000, 4000, 5000, 6000]}
+				tickFormatter={(tick) => tick === 0 ? 0 : (tick / 1000) + 'k'}
 			/>
 
 			<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')}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD HH:mm')}
 				separator=': '
 			/>
 
-			<ReferenceLine yAxisId='left' x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue'>
-				<Label value='Midnight' offset={7} position='top' />
+			<ReferenceLine x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue'>
+				<Label value='Midnight' offset={7} position='top' fill='blue' />
 			</ReferenceLine>
 
-			<Bar
-				yAxisId='right'
-				type='monotone'
-				dataKey='lifetime_energy'
-				name='Energy'
-				fill='green'
-				isAnimationActive={false}
-			/>
-
 			<Line
-				yAxisId='left'
 				type='monotone'
 				dataKey='actual_total'
 				name='Power'
@@ -197,7 +187,7 @@ function SolarPower({end, duration}) {
 }
 
 function Temperature({name, sensorName, end, duration, yDomain, showHumidity, showFreezingLine}) {
-	const [data, loading, tickFormatter] = useSensor('temperature', sensorName, end, duration);
+	const [data, loading, tickFormatter, ticks] = useSensor('temperature', sensorName, end, duration);
 
 	return (
 		<ChartContainer
@@ -208,8 +198,9 @@ function Temperature({name, sensorName, end, duration, yDomain, showHumidity, sh
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 			{showHumidity &&
 				<YAxis
@@ -217,16 +208,18 @@ function Temperature({name, sensorName, end, duration, yDomain, showHumidity, sh
 					domain={[0, 100]}
 					orientation='right'
 					hide={true}
+					width={40}
 				/>
 			}
 			<YAxis
 				yAxisId={showHumidity ? 'left' : undefined}
 				domain={yDomain}
+				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 h:mm A')}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD HH:mm')}
 				separator=': '
 			/>
 
@@ -266,7 +259,7 @@ function Temperature({name, sensorName, end, duration, yDomain, showHumidity, sh
 
 
 function Thermostat({end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('thermostat', 'Venstar', end, duration);
+	const [data, loading, tickFormatter, ticks] = useSensor('thermostat', 'Venstar', end, duration);
 
 	return (
 		<ChartContainer
@@ -277,8 +270,9 @@ function Thermostat({end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -286,16 +280,18 @@ function Thermostat({end, duration}) {
 				domain={[0, 6]}
 				orientation='right'
 				hide={true}
+				width={40}
 			/>
 			<YAxis
 				yAxisId='left'
 				domain={[12, 30]}
+				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 h:mm A')}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD HH:mm')}
 				separator=': '
 			/>
 
@@ -338,7 +334,7 @@ function Thermostat({end, duration}) {
 }
 
 function Gas({end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('ertscm', 'Gas', end, duration);
+	const [data, loading, tickFormatter, ticks] = useSensor('ertscm', 'Gas', end, duration);
 
 	return (
 		<ChartContainer
@@ -349,8 +345,9 @@ function Gas({end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -358,15 +355,17 @@ function Gas({end, duration}) {
 				domain={data.length ? [data[0].consumption_data, data.slice(-1)[0].consumption_data] : [100, 0]}
 				orientation='right'
 				hide={true}
+				width={40}
 			/>
 			<YAxis
 				yAxisId='left'
+				width={40}
 			/>
 
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
 				formatter={v => v.toFixed(1) + ' MJ'}
-				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 HH:mm')}
 				separator=': '
 			/>
 
@@ -396,7 +395,7 @@ function Gas({end, duration}) {
 }
 
 function Water({end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('ertscm', 'Water', end, duration);
+	const [data, loading, tickFormatter, ticks] = useSensor('ertscm', 'Water', end, duration);
 
 	return (
 		<ChartContainer
@@ -407,8 +406,9 @@ function Water({end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -416,15 +416,17 @@ function Water({end, duration}) {
 				domain={data.length ? [data[0].consumption_data, data.slice(-1)[0].consumption_data] : [100, 0]}
 				orientation='right'
 				hide={true}
+				width={40}
 			/>
 			<YAxis
 				yAxisId='left'
+				width={40}
 			/>
 
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
 				formatter={v => v + ' L'}
-				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 HH:mm')}
 				separator=': '
 			/>
 
@@ -454,7 +456,7 @@ function Water({end, duration}) {
 }
 
 function LivingRoomDust({end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('dust', 'Living Room', end, duration);
+	const [data, loading, tickFormatter, ticks] = useSensor('dust', 'Living Room', end, duration);
 
 	return (
 		<ChartContainer
@@ -465,16 +467,18 @@ function LivingRoomDust({end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 			<YAxis
 				domain={[0, 20]}
+				width={40}
 			/>
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
 				formatter={v => v.toFixed(1) + ' ug/m³'}
-				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 HH:mm')}
 				separator=': '
 			/>
 
@@ -494,19 +498,20 @@ function LivingRoomDust({end, duration}) {
 }
 
 function Air({name, sensorName, end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('air', sensorName, end, duration);
+	const [data, loading, tickFormatter, ticks] = useSensor('air', sensorName, end, duration);
 
 	return (
 		<ChartContainer
 			name={name}
 			data={data}
-			lastFormatter={(x) => x.max_p10?.toFixed(1) + ' ug/m³'}
+			lastFormatter={(x) => x.p10?.toFixed(1) + ' ug/m³'}
 			loading={loading}
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -514,22 +519,25 @@ function Air({name, sensorName, end, duration}) {
 				domain={[400, 1000]}
 				orientation='right'
 				hide={true}
+				width={40}
 			/>
 			<YAxis
 				yAxisId='voc'
 				domain={[0, 250]}
 				orientation='right'
 				hide={true}
+				width={40}
 			/>
 			<YAxis
 				yAxisId='pm'
 				domain={[0, 20]}
+				width={40}
 			/>
 
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
-				formatter={(v, name) => v + units[name]}
-				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD h:mm A')}
+				formatter={(v, name) => v.toFixed(1) + units[name]}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD HH:mm')}
 				separator=': '
 			/>
 
@@ -538,7 +546,7 @@ function Air({name, sensorName, end, duration}) {
 			<Line
 				yAxisId='pm'
 				type='monotone'
-				dataKey='max_p10'
+				dataKey='p10'
 				name='PM10'
 				stroke='black'
 				strokeWidth={2}
@@ -549,7 +557,7 @@ function Air({name, sensorName, end, duration}) {
 			<Line
 				yAxisId='pm'
 				type='monotone'
-				dataKey='max_p25'
+				dataKey='p25'
 				name='PM2.5'
 				stroke='red'
 				strokeWidth={2}
@@ -560,7 +568,7 @@ function Air({name, sensorName, end, duration}) {
 			<Line
 				yAxisId='co2'
 				type='monotone'
-				dataKey='max_co2'
+				dataKey='co2'
 				name='CO2'
 				stroke='blue'
 				strokeWidth={2}
@@ -571,7 +579,7 @@ function Air({name, sensorName, end, duration}) {
 			<Line
 				yAxisId='voc'
 				type='monotone'
-				dataKey='max_voc'
+				dataKey='voc'
 				name='VOC'
 				stroke='green'
 				strokeWidth={2}
@@ -585,7 +593,7 @@ function Air({name, sensorName, end, duration}) {
 
 
 function BedroomSleep({end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('sleep', 'Bedroom', end, duration);
+	const [data, loading, tickFormatter, ticks] = useSensor('sleep', 'Bedroom', end, duration);
 
 	return (
 		<ChartContainer
@@ -596,16 +604,18 @@ function BedroomSleep({end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 			<YAxis
 				domain={[5, 20]}
+				width={40}
 			/>
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
 				formatter={v => v.toFixed(1) + ' m/s²'}
-				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 HH:mm')}
 				separator=': '
 			/>
 
@@ -624,53 +634,111 @@ function BedroomSleep({end, duration}) {
 	);
 }
 
-function Lux({name, sensorName, end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('lux', sensorName, end, duration);
+function MultiLineChart({title, measurement, dataKey, sensors, colors, end, duration, yDomain, unitKey, transform}) {
+	const [data, setData] = useState(false);
+	const [loading, setLoading] = useState(false);
+
+	useEffect(() => {
+		const get = async() => {
+			setLoading(true);
+			try {
+				const api_key = localStorage.getItem('api_key', 'null');
+				const params = { end: end.unix(), duration: duration.len.toLowerCase(), window: duration.win, api_key: api_key };
+
+				const names = sensors.join(',');
+				const res = await axios.get(`https://sensors-api.dns.t0.vc/history/${measurement}/${names}`, { params });
+
+				const formattedData = res.data.map(d => {
+					const newObj = { time: d.time };
+					sensors.forEach(sensor => {
+						let val = d[`${sensor}_${dataKey}`];
+						if (transform && val !== undefined && val !== null) {
+							val = transform(val);
+						}
+						newObj[sensor] = val;
+					});
+					return newObj;
+				});
+
+				setData(formattedData);
+				setLoading(false);
+			} catch (error) {
+				console.log(error);
+				setLoading(false);
+			}
+		};
+		get();
+	}, [end, duration, measurement, dataKey, JSON.stringify(sensors)]);
+
+	const memoConvertTZ = (isDST, timeStr, format) => {
+		if (!timeStr) return '?';
+		const lookUp = timeStr + format;
+		if (tzcache[lookUp] != undefined ) { return tzcache[lookUp]; }
+		let result = moment(timeStr).tz('America/Edmonton').format(format);
+		tzcache[lookUp] = result;
+		return result;
+	};
+
+	const isDST = end.tz('America/Edmonton').isDST();
+	const tickFormatter = (timeStr) => memoConvertTZ(isDST, timeStr, duration.format);
+
+	let ticks = undefined;
+	if (Array.isArray(data)) {
+		ticks = [];
+		let lastLabel = null;
+		let dayCount = 0;
+		data.forEach(d => {
+			const lbl = memoConvertTZ(isDST, d.time, duration.format);
+			if (lbl !== lastLabel) {
+				const isMonthSkip = duration.len === 'Month' && dayCount % 2 !== 0;
+				const isDaySkip = duration.len === 'Day' && parseInt(lbl, 10) % 2 !== 0;
+				if (!isMonthSkip && !isDaySkip) {
+					ticks.push(d.time);
+				}
+				lastLabel = lbl;
+				dayCount++;
+			}
+		});
+	}
 
 	return (
 		<ChartContainer
-			name={name}
+			name={title}
 			data={data}
-			lastFormatter={(x) => x.lux?.toFixed(1) + ' lx'}
+			lastFormatter={(x) => {
+				const vals = sensors.map(s => x[s]).filter(v => v !== undefined && v !== null);
+				return vals.length ? vals[0].toFixed(1) + (units[unitKey] || '') : 'No data';
+			}}
 			loading={loading}
 		>
-			<XAxis
-				dataKey='time'
-				minTickGap={10}
-				tickFormatter={tickFormatter}
-			/>
-
-			<YAxis
-				yAxisId='lux'
-				domain={[0, 250]}
-			/>
-
+			<XAxis dataKey='time' minTickGap={0} tickFormatter={tickFormatter} ticks={ticks} />
+			<YAxis domain={yDomain} 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 h:mm A')}
+				formatter={(v, name) => v.toFixed(1) + (units[unitKey] || '')}
+				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}
-			/>
+			<ReferenceLine x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
+			{sensors.map((sensor, i) => (
+				<Line
+					key={sensor}
+					type='monotone'
+					dataKey={sensor}
+					name={sensor}
+					stroke={colors[i % colors.length]}
+					strokeWidth={2}
+					dot={false}
+					isAnimationActive={false}
+				/>
+			))}
 		</ChartContainer>
 	);
 }
 
 
 function Soil({name, sensorName, end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('soil', sensorName, end, duration);
+	const [data, loading, tickFormatter, ticks] = useSensor('soil', sensorName, end, duration);
 
 	return (
 		<ChartContainer
@@ -681,19 +749,21 @@ function Soil({name, sensorName, end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
 				yAxisId='soil'
 				domain={[0, 1000]}
+				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 h:mm A')}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD HH:mm')}
 				separator=': '
 			/>
 
@@ -715,7 +785,7 @@ function Soil({name, sensorName, end, duration}) {
 
 
 function WH51Soil({name, sensorName, end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('soil', sensorName, end, duration);
+	const [data, loading, tickFormatter, ticks] = useSensor('soil', sensorName, end, duration);
 
 	return (
 		<ChartContainer
@@ -726,19 +796,21 @@ function WH51Soil({name, sensorName, end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
 				yAxisId='soil'
 				domain={[0, 100]}
+				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 h:mm A')}
+				labelFormatter={timeStr => moment(timeStr).tz('America/Edmonton').format('ddd MMM DD HH:mm')}
 				separator=': '
 			/>
 
@@ -786,14 +858,42 @@ 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='Light Level'
+				measurement='lux'
+				dataKey='lux'
+				sensors={['Living Room', 'Kitchen', 'Bedroom', 'Laundry Room']}
+				colors={['black', 'green', 'red', 'blue']}
+				end={end}
+				duration={duration}
+				yDomain={[0, 250]}
+				unitKey='Lux'
+			/>
+			<MultiLineChart
+				title='Absolute Pressure'
+				measurement='hpa'
+				dataKey='hpa'
+				sensors={['Kitchen', 'Bedroom', 'Laundry Room']}
+				colors={['green', 'red', 'blue']}
+				end={end}
+				duration={duration}
+				yDomain={[87, 91]}
+				unitKey='kPa'
+				transform={v => v / 10}
+			/>
 			<WH51Soil name='Side Garden Soil Moisture' sensorName='Side Garden' end={end} duration={duration} />
-			<Soil name='Dumb Cane Soil Moisture' sensorName='Dumb Cane' end={end} duration={duration} />
-			<Soil name='Kitchen Pothos Soil Moisture' sensorName='Kitchen Pothos' end={end} duration={duration} />
-			<Soil name='Dracaena Soil Moisture' sensorName='Dracaena' end={end} duration={duration} />
+			<MultiLineChart
+				title='House Plant Soil Moisture'
+				measurement='soil'
+				dataKey='soil'
+				sensors={['Dumb Cane', 'Kitchen Pothos', 'Dracaena']}
+				colors={['red', 'green', 'blue']}
+				end={end}
+				duration={duration}
+				yDomain={[0, 100]}
+				unitKey='Soil'
+				transform={v => v / 10}
+			/>
 
 			{!!api_key ||
 				<div>

main.py

@@ -445,7 +445,8 @@ async def history(request):
     authed = api_key == settings.SENSORS_API_KEY
 
     measurement = request.match_info.get('measurement')
-    name = request.match_info.get('name')
+    name_param = request.match_info.get('name')
+    names = name_param.split(',')
 
     share_start = request.rel_url.query.get('shareStart', '')
     share_end = request.rel_url.query.get('shareEnd', '')
@@ -458,8 +459,9 @@ async def history(request):
     if not authed and measurement in ['owntracks', 'sleep']:
         return web.json_response([])
 
-    if name not in [x.name for x in sensors.sensors]:
-        raise
+    for name in names:
+        if name not in [x.name for x in sensors.sensors]:
+            raise
 
     end_unix = request.rel_url.query.get('end', None)
     if end_unix:
@@ -473,16 +475,19 @@ async def history(request):
     if duration == 'today':
         now_tz = datetime.now(tz=TIMEZONE)
         start = now_tz.replace(hour=0, minute=0, second=0, microsecond=0)
-        window = '10m'
+        window = '5m'
     elif duration == 'day':
         start = end - timedelta(days=1)
-        window = '10m'
+        window = '5m'
     elif duration == 'week':
         start = end - timedelta(days=7)
+        window = '30m'
+    elif duration == 'fort':
+        start = end - timedelta(days=14)
         window = '1h'
     elif duration == 'month':
         start = end - timedelta(days=30)
-        window = '1d'
+        window = '2h'
     elif duration == 'quarter':
         start = end - timedelta(days=90)
         window = '1d'
@@ -493,16 +498,9 @@ async def history(request):
         raise
 
     window = request.rel_url.query.get('window', window)
-    if window not in ['1m', '3m', '10m', '30m', '1h', '2h', '1d', '7d', '30d']:
+    if window not in ['1m', '3m', '5m', '10m', '30m', '1h', '2h', '1d', '7d', '30d']:
         raise
 
-    if name == 'Water':
-        scale = 10
-    elif name == 'Gas':
-        scale = 0.001055*1000
-    else:
-        scale = 1
-
     start = int(start.timestamp())
     end = int(end.timestamp())
 
@@ -512,47 +510,69 @@ async def history(request):
         if end >= int(share_end):
             end = int(share_end)
 
+    time_map = {}
 
-    if measurement == 'temperature':
-        client = sensors_client
-        q = 'select mean("temperature_C") as temperature_C, mean("humidity") as humidity from temperature where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
-    elif measurement == 'ertscm':
-        client = sensors_client
-        q = 'select derivative(max("consumption_data"))*{} as delta, max("consumption_data")*{} as max from ertscm where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(previous)'.format(scale, scale, name, start, end, window)
-    elif measurement == 'thermostat':
-        client = sensors_client
-        q = 'select first("spacetemp") as spacetemp, first("heattemp") as heattemp, mode("state") as state from thermostat where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(previous)'.format(name, start, end, window)
-    elif measurement == 'dust':
-        client = sensors_client
-        q = 'select max("avg_p10") as max_p10, max("avg_p25") as max_p25 from dust where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
-    elif measurement == 'air':
-        client = sensors_client
-        q = 'select max("pm10") as max_p10, max("pm25") as max_p25, max("co2") as max_co2, max("voc_idx") as max_voc from air where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
-    elif measurement == 'soil':
-        client = sensors_client
-        q = 'select mean("soil") as soil, mean("moisture") as moisture from soil where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
-    elif measurement == 'lux':
-        client = sensors_client
-        q = 'select mean("lux") as lux from air where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
-    elif measurement == 'hpa':
-        client = sensors_client
-        q = 'select mean("hpa") as hpa from air where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
-    elif measurement == 'sleep':
-        client = sensors_client
-        q = 'select max("max_mag") as max_mag from sleep where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
-    elif measurement == 'solar':
-        client = solar_client
-        q = 'select max("actual_total") as actual_total, last("lifetime_energy")-first("lifetime_energy") as lifetime_energy from ecu where time >= {}s and time < {}s group by time({}) fill(linear)'.format(start, end, window)
-    elif measurement == 'owntracks':
-        client = sensors_client
-        q = 'select first("lat") as lat, first("lon") as lon from owntracks where "acc" < 100 and "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(previous)'.format(name, start, end, window)
-    else:
-        raise
+    for name in names:
+        if name == 'Water':
+            scale = 10
+        elif name == 'Gas':
+            scale = 0.001055*1000
+        else:
+            scale = 1
 
-    q += ' tz(\'America/Edmonton\')'
+        if measurement == 'temperature':
+            client = sensors_client
+            q = 'select mean("temperature_C") as temperature_C, mean("humidity") as humidity from temperature where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
+        elif measurement == 'ertscm':
+            client = sensors_client
+            q = 'select derivative(max("consumption_data"))*{} as delta, max("consumption_data")*{} as max from ertscm where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(previous)'.format(scale, scale, name, start, end, window)
+        elif measurement == 'thermostat':
+            client = sensors_client
+            q = 'select first("spacetemp") as spacetemp, first("heattemp") as heattemp, mode("state") as state from thermostat where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(previous)'.format(name, start, end, window)
+        elif measurement == 'dust':
+            client = sensors_client
+            q = 'select max("avg_p10") as max_p10, max("avg_p25") as max_p25 from dust where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
+        elif measurement == 'air':
+            client = sensors_client
+            q = 'select mean("pm10") as p10, mean("pm25") as p25, mean("co2") as co2, mean("voc_idx") as voc from air where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
+        elif measurement == 'soil':
+            client = sensors_client
+            q = 'select 1023-mean("soil") as soil, mean("moisture") as moisture from soil where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
+        elif measurement == 'lux':
+            client = sensors_client
+            q = 'select mean("lux") as lux from air where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
+        elif measurement == 'hpa':
+            client = sensors_client
+            q = 'select mean("hpa") as hpa from air where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
+        elif measurement == 'sleep':
+            client = sensors_client
+            q = 'select max("max_mag") as max_mag from sleep where "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(linear)'.format(name, start, end, window)
+        elif measurement == 'solar':
+            client = solar_client
+            q = 'select max("actual_total") as actual_total, last("lifetime_energy")-first("lifetime_energy") as lifetime_energy from ecu where time >= {}s and time < {}s group by time({}) fill(linear)'.format(start, end, window)
+        elif measurement == 'owntracks':
+            client = sensors_client
+            q = 'select first("lat") as lat, first("lon") as lon from owntracks where "acc" < 100 and "name" = \'{}\' and time >= {}s and time < {}s group by time({}) fill(previous)'.format(name, start, end, window)
+        else:
+            raise
 
-    result = list(client.query(q).get_points())
+        q += ' tz(\'America/Edmonton\')'
 
+        points = list(client.query(q).get_points())
+
+        for p in points:
+            t = p['time']
+            if t not in time_map:
+                time_map[t] = {'time': t}
+
+            if len(names) > 1:
+                for k, v in p.items():
+                    if k != 'time':
+                        time_map[t][f"{name}_{k}"] = v
+            else:
+                time_map[t].update(p)
+
+    result = sorted(time_map.values(), key=lambda x: x['time'])
     return web.json_response(result)