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 = {
@@ -32,6 +29,7 @@ const units = {
 	'State': '',
 	'Lux': ' lx',
 	'Hpa': ' hpa',
+	'kPa': ' kPa',
 	'Soil': '',
 };
 
@@ -62,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}) {
@@ -126,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>
@@ -136,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
@@ -148,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'
@@ -198,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
@@ -209,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
@@ -218,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=': '
 			/>
 
@@ -267,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
@@ -278,8 +270,9 @@ function Thermostat({end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -287,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=': '
 			/>
 
@@ -339,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
@@ -350,8 +345,9 @@ function Gas({end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -359,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=': '
 			/>
 
@@ -397,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
@@ -408,8 +406,9 @@ function Water({end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -417,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=': '
 			/>
 
@@ -455,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
@@ -466,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=': '
 			/>
 
@@ -495,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
@@ -515,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=': '
 			/>
 
@@ -539,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}
@@ -550,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}
@@ -561,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}
@@ -572,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}
@@ -586,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
@@ -597,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=': '
 			/>
 
@@ -625,51 +634,7 @@ function BedroomSleep({end, duration}) {
 	);
 }
 
-function Lux({name, sensorName, end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('lux', sensorName, end, duration);
-
-	return (
-		<ChartContainer
-			name={name}
-			data={data}
-			lastFormatter={(x) => x.lux?.toFixed(1) + ' lx'}
-			loading={loading}
-		>
-			<XAxis
-				dataKey='time'
-				minTickGap={10}
-				tickFormatter={tickFormatter}
-			/>
-
-			<YAxis
-				yAxisId='lux'
-				domain={[0, 250]}
-			/>
-
-			<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='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}
-			/>
-		</ChartContainer>
-	);
-}
-
-function MultiLineChart({title, measurement, dataKey, sensors, colors, end, duration, yDomain, unitKey}) {
+function MultiLineChart({title, measurement, dataKey, sensors, colors, end, duration, yDomain, unitKey, transform}) {
 	const [data, setData] = useState(false);
 	const [loading, setLoading] = useState(false);
 
@@ -686,7 +651,11 @@ function MultiLineChart({title, measurement, dataKey, sensors, colors, end, dura
 				const formattedData = res.data.map(d => {
 					const newObj = { time: d.time };
 					sensors.forEach(sensor => {
-						newObj[sensor] = d[`${sensor}_${dataKey}`];
+						let val = d[`${sensor}_${dataKey}`];
+						if (transform && val !== undefined && val !== null) {
+							val = transform(val);
+						}
+						newObj[sensor] = val;
 					});
 					return newObj;
 				});
@@ -703,41 +672,54 @@ function MultiLineChart({title, measurement, dataKey, sensors, colors, end, dura
 
 	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]; }
-		if (tzcache[lookUp] != undefined ) { result = tzcache[lookUp]; }
-		else { result = moment(timeStr).tz('America/Edmonton').format(format); tzcache[lookUp] = result; }
-		if (format === 'HH') { return result + ':' + minutes; }
-		else { return result; }
+		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={title}
 			data={data}
 			lastFormatter={(x) => {
-				const vals = sensors.map(s => x[s]).filter(v => v !== undefined);
+				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 domain={yDomain} />
+			<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[unitKey] || '')}
-				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 x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue' />
-			<Legend />
 			{sensors.map((sensor, i) => (
 				<Line
 					key={sensor}
@@ -756,7 +738,7 @@ function MultiLineChart({title, measurement, dataKey, sensors, colors, end, dura
 
 
 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
@@ -767,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=': '
 			/>
 
@@ -801,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
@@ -812,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=': '
 			/>
 
@@ -872,25 +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='Pressure' 
-				measurement='hpa' 
-				dataKey='hpa' 
-				sensors={['Kitchen', 'Bedroom', 'Laundry Room']} 
-				colors={['black', 'red', 'blue']} 
-				end={end} 
-				duration={duration} 
-				yDomain={[850, 915]} 
-				unitKey='Hpa' 
+			<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

@@ -475,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'
@@ -495,7 +498,7 @@ 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
 
     start = int(start.timestamp())
@@ -531,10 +534,10 @@ async def history(request):
             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)
+            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 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)
+            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)