tanner/sensors
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: prevent duplicate XAxis tick labels by passing explicit ticks

Browse Source 
Co-authored-by: aider (gemini/gemini-3.1-pro-preview) <aider@aider.chat>
This commit is contained in:
Tanner
2026-08-25 23:17:13 +00:00
co-authored by aider
parent 2d085cc877
commit d049704e6e
1 changed files with 50 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.js
+50 -13
View File
@@ -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