Adjust default windows

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

client/src/App.js

@@ -10,7 +10,8 @@ let tzcache = {};
 
 const durations = [
 	{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: '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'},
 ];
@@ -28,6 +29,7 @@ const units = {
 	'State': '',
 	'Lux': ' lx',
 	'Hpa': ' hpa',
+	'kPa': ' kPa',
 	'Soil': '',
 };
 
@@ -58,35 +60,39 @@ function useSensor(measurement, name, end, duration) {
 	const memoConvertTZ = (isDST, timeStr, format) => {
 		if (!timeStr) return '?';
 
-		let lookUp, result = null;
+		const lookUp = timeStr + format;
-		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];
+			return tzcache[lookUp];
-		} else {
-			result = moment(timeStr).tz('America/Edmonton').format(format);
-			tzcache[lookUp] = result;
 		}
 
-		if (format === 'HH') {
+		let result = moment(timeStr).tz('America/Edmonton').format(format);
-			return result + ':' + minutes;
+		tzcache[lookUp] = result;
-		} else {
+		return 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}) {
@@ -122,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>
@@ -132,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
@@ -144,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'>
+			<ReferenceLine x={moment().tz('America/Edmonton').startOf('day').toISOString().replace('.000', '')} stroke='blue'>
-				<Label value='Midnight' offset={7} position='top' />
+				<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'
@@ -194,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
@@ -205,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
@@ -214,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=': '
 			/>
 
@@ -263,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
@@ -274,8 +270,9 @@ function Thermostat({end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -283,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=': '
 			/>
 
@@ -335,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
@@ -346,8 +345,9 @@ function Gas({end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -355,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=': '
 			/>
 
@@ -393,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
@@ -404,8 +406,9 @@ function Water({end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -413,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=': '
 			/>
 
@@ -451,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
@@ -462,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=': '
 			/>
 
@@ -491,7 +498,7 @@ 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
@@ -502,8 +509,9 @@ function Air({name, sensorName, end, duration}) {
 		>
 			<XAxis
 				dataKey='time'
-				minTickGap={10}
+				minTickGap={0}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -511,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.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=': '
 			/>
 
@@ -582,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
@@ -593,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=': '
 			/>
 
@@ -621,51 +634,7 @@ function BedroomSleep({end, duration}) {
 	);
 }
 
-function Lux({name, sensorName, end, duration}) {
+function MultiLineChart({title, measurement, dataKey, sensors, colors, end, duration, yDomain, unitKey, transform}) {
-	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}) {
 	const [data, setData] = useState(false);
 	const [loading, setLoading] = useState(false);
 
@@ -682,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;
 				});
@@ -699,21 +672,35 @@ function MultiLineChart({title, measurement, dataKey, sensors, colors, end, dura
 
 	const memoConvertTZ = (isDST, timeStr, format) => {
 		if (!timeStr) return '?';
-		let lookUp, result = null;
+		const lookUp = timeStr + format;
-		const date = timeStr.slice(5, 10);
+		if (tzcache[lookUp] != undefined ) { return tzcache[lookUp]; }
-		const hours = timeStr.slice(11, 13);
+		let result = moment(timeStr).tz('America/Edmonton').format(format);
-		const minutes = timeStr.slice(14, 16);
+		tzcache[lookUp] = result;
-		if (format === 'HH') { lookUp = [isDST, hours, format]; }
+		return result;
-		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 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}
@@ -724,12 +711,12 @@ function MultiLineChart({title, measurement, dataKey, sensors, colors, end, dura
 			}}
 			loading={loading}
 		>
-			<XAxis dataKey='time' minTickGap={10} tickFormatter={tickFormatter} />
+			<XAxis dataKey='time' minTickGap={0} tickFormatter={tickFormatter} ticks={ticks} />
-			<YAxis domain={yDomain} />
+			<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' />
@@ -751,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
@@ -762,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=': '
 			/>
 
@@ -796,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
@@ -807,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=': '
 			/>
 
@@ -867,20 +858,28 @@ 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} />
+			<MultiLineChart
-			<Lux name='Kitchen Lux' sensorName='Kitchen' end={end} duration={duration} />
+				title='Light Level'
-			<Lux name='Bedroom Lux' sensorName='Bedroom' end={end} duration={duration} />
+				measurement='lux'
-			<Lux name='Laundry Room Lux' sensorName='Laundry Room' end={end} duration={duration} />
+				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={['black', 'red', 'blue']}
+				colors={['green', 'red', 'blue']}
 				end={end}
 				duration={duration}
-				yDomain={[870, 915]}
+				yDomain={[87, 91]}
-				unitKey='Hpa'
+				unitKey='kPa'
+				transform={v => v / 10}
 			/>
 			<WH51Soil name='Side Garden Soil Moisture' sensorName='Side Garden' end={end} duration={duration} />
 			<MultiLineChart
@@ -888,11 +887,12 @@ function Graphs({end, duration}) {
 				measurement='soil'
 				dataKey='soil'
 				sensors={['Dumb Cane', 'Kitchen Pothos', 'Dracaena']}
-				colors={['black', 'red', 'blue']}
+				colors={['red', 'green', 'blue']}
 				end={end}
 				duration={duration}
-				yDomain={[0, 1000]}
+				yDomain={[0, 100]}
 				unitKey='Soil'
+				transform={v => v / 10}
 			/>
 
 			{!!api_key ||

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)