fix: prevent duplicate XAxis tick labels by passing explicit ticks

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

client/src/App.js

@@ -86,7 +86,20 @@ function useSensor(measurement, name, end, duration) {
 	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;
+		data.forEach(d => {
+			const lbl = memoConvertTZ(isDST, d.time, duration.format);
+			if (lbl !== lastLabel) {
+				ticks.push(d.time);
+				lastLabel = lbl;
+			}
+		});
+	}
+
+	return [data, loading, tickFormatter, ticks];
 };
 
 function ChartContainer({name, data, lastFormatter, loading, children, topMargin}) {
@@ -132,7 +145,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
@@ -146,6 +159,7 @@ function SolarPower({end, duration}) {
 				dataKey='time'
 				minTickGap={10}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -194,7 +208,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
@@ -207,6 +221,7 @@ function Temperature({name, sensorName, end, duration, yDomain, showHumidity, sh
 				dataKey='time'
 				minTickGap={10}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 			{showHumidity &&
 				<YAxis
@@ -263,7 +278,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
@@ -276,6 +291,7 @@ function Thermostat({end, duration}) {
 				dataKey='time'
 				minTickGap={10}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -335,7 +351,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
@@ -348,6 +364,7 @@ function Gas({end, duration}) {
 				dataKey='time'
 				minTickGap={10}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -393,7 +410,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
@@ -406,6 +423,7 @@ function Water({end, duration}) {
 				dataKey='time'
 				minTickGap={10}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -451,7 +469,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
@@ -464,6 +482,7 @@ function LivingRoomDust({end, duration}) {
 				dataKey='time'
 				minTickGap={10}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 			<YAxis
 				domain={[0, 20]}
@@ -491,7 +510,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
@@ -504,6 +523,7 @@ function Air({name, sensorName, end, duration}) {
 				dataKey='time'
 				minTickGap={10}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -582,7 +602,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
@@ -595,6 +615,7 @@ function BedroomSleep({end, duration}) {
 				dataKey='time'
 				minTickGap={10}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 			<YAxis
 				domain={[5, 20]}
@@ -622,7 +643,7 @@ function BedroomSleep({end, duration}) {
 }
 
 function Lux({name, sensorName, end, duration}) {
-	const [data, loading, tickFormatter] = useSensor('lux', sensorName, end, duration);
+	const [data, loading, tickFormatter, ticks] = useSensor('lux', sensorName, end, duration);
 
 	return (
 		<ChartContainer
@@ -635,6 +656,7 @@ function Lux({name, sensorName, end, duration}) {
 				dataKey='time'
 				minTickGap={10}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -714,6 +736,19 @@ function MultiLineChart({title, measurement, dataKey, sensors, colors, end, dura
 	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;
+		data.forEach(d => {
+			const lbl = memoConvertTZ(isDST, d.time, duration.format);
+			if (lbl !== lastLabel) {
+				ticks.push(d.time);
+				lastLabel = lbl;
+			}
+		});
+	}
+
 	return (
 		<ChartContainer
 			name={title}
@@ -724,7 +759,7 @@ function MultiLineChart({title, measurement, dataKey, sensors, colors, end, dura
 			}}
 			loading={loading}
 		>
-			<XAxis dataKey='time' minTickGap={10} tickFormatter={tickFormatter} />
+			<XAxis dataKey='time' minTickGap={10} tickFormatter={tickFormatter} ticks={ticks} />
 			<YAxis domain={yDomain} />
 			<CartesianGrid strokeDasharray='3 3'/>
 			<Tooltip
@@ -751,7 +786,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
@@ -764,6 +799,7 @@ function Soil({name, sensorName, end, duration}) {
 				dataKey='time'
 				minTickGap={10}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis
@@ -796,7 +832,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
@@ -809,6 +845,7 @@ function WH51Soil({name, sensorName, end, duration}) {
 				dataKey='time'
 				minTickGap={10}
 				tickFormatter={tickFormatter}
+				ticks={ticks}
 			/>
 
 			<YAxis