Adjust default windows

Adjust stacked chart colors
refactor: replace individual Lux charts with a single MultiLineChart
2026-08-27 21:53:12 +00:00 · 2026-08-27 21:52:07 +00:00 · 2026-08-27 21:26:12 +00:00 · 2026-08-26 16:49:40 +00:00 · 2026-08-26 16:49:37 +00:00 · 2026-08-26 16:44:11 +00:00
2 changed files with 146 additions and 143 deletions
@@ -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 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}) {
@@ -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'>
-				<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'
@@ -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}) {
-	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);

@@ -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 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}
@@ -724,12 +711,12 @@ function MultiLineChart({title, measurement, dataKey, sensors, colors, end, dura
 			}}
 			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' />
@@ -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} />
-			<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={['black', 'red', 'blue']}
+				colors={['green', 'red', 'blue']}
 				end={end}
 				duration={duration}
-				yDomain={[870, 915]}
-				unitKey='Hpa'
+				yDomain={[87, 91]}
+				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 ||
@@ -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'
Author	SHA1	Message	Date
tanner	0e7066893b	Adjust default windows	2026-08-27 21:53:12 +00:00
Tanner	a503c5687e	Adjust stacked chart colors	2026-08-27 21:52:07 +00:00
Tannerandaider	90c3c9eb44	refactor: replace individual Lux charts with a single MultiLineChart Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-27 21:26:12 +00:00
Tannerandaider	0a1888c97f	feat: scale house plant soil moisture to 0-100 Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-26 16:49:40 +00:00
Tanner	2ff5837e87	style: increase YAxis width and adjust pressure domain in graphs	2026-08-26 16:49:37 +00:00
Tannerandaider	89fbd56517	feat: convert pressure display from hPa to kPa Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-26 16:44:11 +00:00
Tanner	8147d67def	feat: add fortnight duration option	2026-08-26 16:44:09 +00:00
Tannerandaider	fd26e68b78	fix: use numeric YAxis ticks with formatter Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-26 16:30:21 +00:00
Tanner	8630595a40	refactor: simplify solar power chart and remove energy bar	2026-08-26 16:30:18 +00:00
Tannerandaider	27ebb43239	feat: force solar power Y-axis to display 6 ticks Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-26 16:26:40 +00:00
Tannerandaider	c253ac5a86	feat: format solar power chart y-axis in kilowatts Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-26 16:24:26 +00:00
Tannerandaider	964c109d1b	style: adjust chart margins and set minTickGap to 0 Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-26 16:22:49 +00:00
Tanner	df2eee44ec	style: adjust chart margins and tick gap	2026-08-26 16:22:49 +00:00
Tannerandaider	b3f555bc5c	style: set width to 35 on all YAxis components Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-26 16:17:11 +00:00
Tannerandaider	733275b155	feat: only display even hours for day duration ticks Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-26 16:11:32 +00:00
Tannerandaider	06c79b515a	feat: display only hours on x-axis for day duration Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-26 16:06:50 +00:00
Tannerandaider	75734bb9b2	fix: display every other day sequentially for month ticks Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-26 16:03:22 +00:00
Tannerandaider	3c1a0b41a2	feat: display only odd days on x-axis for month duration Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-26 16:00:25 +00:00
Tanner	4ba212bb25	style: reduce minTickGap to 5 on chart XAxis	2026-08-26 16:00:23 +00:00
Tannerandaider	7741b15e86	style: change midnight label color to blue Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-25 23:26:23 +00:00
Tannerandaider	0e9bbd5dd2	feat: use 24-hour clock format for chart tooltips Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-25 23:24:56 +00:00
Tannerandaider	242e3148c7	fix: use full timestamp as cache key in timezone conversion function Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-25 23:21:45 +00:00
Tannerandaider	d049704e6e	fix: prevent duplicate XAxis tick labels by passing explicit ticks Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-25 23:17:13 +00:00
Tannerandaider	2d085cc877	fix: revert tick label deduplication to fix chart rendering Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-25 23:15:54 +00:00
Tannerandaider	05f0bb22f7	fix: deduplicate chart axis labels using tickFormatter map Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>	2026-08-25 23:14:26 +00:00
Tanner	42bfc3b768	fix: update week duration date format to ddd	2026-08-25 23:00:50 +00:00