fix(frontend): emit first-of-month X-axis ticks in History year mode

Year-range History charts auto-emitted ~10 ticks across whatever data window
was actually rendered, formatted as "Apr 26" (month + 2-digit year), which on
sparse data read as the same string repeated — and ambiguously parsed as
"April 26th" rather than "April 2026". Now we emit one tick per first-of-
calendar-month within the visible range, formatted as "Apr 2026".

Mirrors the existing stationMidnightSplits / withWeeklyDayXAxis pattern; the
two wrappers are chained via a unified applyHistoryXAxis. Also bumps the
fallback formatTime monthly format to year:"numeric" so tooltips at zoom
levels read "Apr 2026" instead of "Apr 26".

Author: timothybrown

frontend/src/app/history/page.test.tsx

@@ -525,6 +525,64 @@ describe("HistoryPage URL-driven state", () => {
     expect(xAxis?.values!({}, [split], 0, 0, 0)).toEqual(["Sun"]);
   });
 
+  it("uses station-month-start x-axis splits for year mode", () => {
+    navState.searchParams = new URLSearchParams("range=year&date=2026-01-01");
+    stationTimezoneState.timezone = "America/New_York";
+    historyDataState.resolution = "monthly";
+
+    renderWithProviders(<HistoryPage />);
+
+    const xAxis = upChartCalls[0]?.props.options?.axes?.[0];
+    expect(xAxis?.splits).toBeDefined();
+
+    const scaleMin = zonedMidnightToUtc("America/New_York", 2026, 1, 1).getTime() / 1000;
+    const scaleMax = zonedMidnightToUtc("America/New_York", 2027, 1, 1).getTime() / 1000;
+
+    const splits = xAxis!.splits!({}, 0, scaleMin, scaleMax, 0, 0);
+
+    expect(splits).toEqual([
+      zonedMidnightToUtc("America/New_York", 2026, 1, 1).getTime() / 1000,
+      zonedMidnightToUtc("America/New_York", 2026, 2, 1).getTime() / 1000,
+      zonedMidnightToUtc("America/New_York", 2026, 3, 1).getTime() / 1000,
+      zonedMidnightToUtc("America/New_York", 2026, 4, 1).getTime() / 1000,
+      zonedMidnightToUtc("America/New_York", 2026, 5, 1).getTime() / 1000,
+      zonedMidnightToUtc("America/New_York", 2026, 6, 1).getTime() / 1000,
+      zonedMidnightToUtc("America/New_York", 2026, 7, 1).getTime() / 1000,
+      zonedMidnightToUtc("America/New_York", 2026, 8, 1).getTime() / 1000,
+      zonedMidnightToUtc("America/New_York", 2026, 9, 1).getTime() / 1000,
+      zonedMidnightToUtc("America/New_York", 2026, 10, 1).getTime() / 1000,
+      zonedMidnightToUtc("America/New_York", 2026, 11, 1).getTime() / 1000,
+      zonedMidnightToUtc("America/New_York", 2026, 12, 1).getTime() / 1000,
+      zonedMidnightToUtc("America/New_York", 2027, 1, 1).getTime() / 1000,
+    ]);
+
+    expect(xAxis!.values!({}, splits.slice(0, 3), 0, 0, 0)).toEqual([
+      "Jan 2026",
+      "Feb 2026",
+      "Mar 2026",
+    ]);
+  });
+
+  it("emits a single tick when the year-mode visible window spans only one month-start", () => {
+    navState.searchParams = new URLSearchParams("range=year&date=2026-01-01");
+    stationTimezoneState.timezone = "America/New_York";
+    historyDataState.resolution = "monthly";
+
+    renderWithProviders(<HistoryPage />);
+
+    const xAxis = upChartCalls[0]?.props.options?.axes?.[0];
+    // Apr 27 - May 5: only May 1 falls in range
+    const scaleMin = zonedMidnightToUtc("America/New_York", 2026, 4, 27).getTime() / 1000;
+    const scaleMax = zonedMidnightToUtc("America/New_York", 2026, 5, 5).getTime() / 1000;
+
+    const splits = xAxis!.splits!({}, 0, scaleMin, scaleMax, 0, 0);
+
+    expect(splits).toEqual([
+      zonedMidnightToUtc("America/New_York", 2026, 5, 1).getTime() / 1000,
+    ]);
+    expect(xAxis!.values!({}, splits, 0, 0, 0)).toEqual(["May 2026"]);
+  });
+
   it("clicking a range button updates URL via pushState", () => {
     renderWithProviders(<HistoryPage />);
 

frontend/src/app/history/page.tsx

@@ -129,7 +129,7 @@ function formatTime(unix: number, resolution: string, timezone: string): string
   if (resolution === "daily") {
     return d.toLocaleDateString([], { timeZone: timezone, month: "short", day: "numeric" });
   }
-  return d.toLocaleDateString([], { timeZone: timezone, month: "short", year: "2-digit" });
+  return d.toLocaleDateString([], { timeZone: timezone, month: "short", year: "numeric" });
 }
 
 function isLeapYear(year: number): boolean {
@@ -235,6 +235,72 @@ function withWeeklyDayXAxis(
   };
 }
 
+function stationMonthStartSplits(
+  timezone: string,
+  scaleMin: number,
+  scaleMax: number,
+): number[] {
+  if (!Number.isFinite(scaleMin) || !Number.isFinite(scaleMax) || scaleMin > scaleMax) {
+    return [];
+  }
+
+  const startParts = getZonedParts(timezone, new Date(scaleMin * 1000));
+  let date: CalendarDate = {
+    year: startParts.year,
+    month: startParts.month,
+    day: 1,
+  };
+  const splits: number[] = [];
+
+  for (let guard = 0; guard < 60; guard += 1) {
+    const split =
+      zonedMidnightToUtc(timezone, date.year, date.month, date.day).getTime() / 1000;
+    if (split >= scaleMin && split <= scaleMax) {
+      splits.push(split);
+    }
+    if (split > scaleMax) {
+      break;
+    }
+    const nextMonth = date.month === 12 ? 1 : date.month + 1;
+    const nextYear = date.month === 12 ? date.year + 1 : date.year;
+    date = { year: nextYear, month: nextMonth, day: 1 };
+  }
+
+  return splits;
+}
+
+function withMonthlyXAxis(
+  opts: HistoryChartOptions,
+  enabled: boolean,
+  timezone: string,
+): HistoryChartOptions {
+  if (!enabled) return opts;
+
+  const splits: uPlot.Axis.Splits = (_u, _axisIdx, scaleMin, scaleMax) =>
+    stationMonthStartSplits(timezone, scaleMin, scaleMax);
+  const values: uPlot.Axis.Values = (_u, axisSplits) =>
+    axisSplits.map((split) =>
+      new Date(split * 1000).toLocaleDateString([], {
+        timeZone: timezone,
+        month: "short",
+        year: "numeric",
+      }),
+    );
+
+  return {
+    ...opts,
+    axes: opts.axes?.map((axis, index) =>
+      index === 0
+        ? {
+          ...axis,
+          splits,
+          values,
+        }
+        : axis,
+    ),
+  };
+}
+
 function ChartPanel({
   title,
   children,
@@ -496,43 +562,48 @@ function HistoryPageInner() {
     [resolution, timezone],
   );
   const useWeeklyDayXAxis = resolution === "hourly" && range === "week" && !activeZoomRange;
-  const applyWeeklyDayXAxis = useCallback(
+  const useMonthlyXAxis = resolution === "monthly" && !activeZoomRange;
+  const applyHistoryXAxis = useCallback(
     (opts: HistoryChartOptions) =>
-      withWeeklyDayXAxis(opts, useWeeklyDayXAxis, timezone),
-    [timezone, useWeeklyDayXAxis],
+      withMonthlyXAxis(
+        withWeeklyDayXAxis(opts, useWeeklyDayXAxis, timezone),
+        useMonthlyXAxis,
+        timezone,
+      ),
+    [timezone, useWeeklyDayXAxis, useMonthlyXAxis],
   );
 
   // Chart options — rebuilt when resolution, units, or theme change
   const tempOpts = useMemo(
-    () => applyWeeklyDayXAxis(temperatureOpts(colors, tickFmt, isRaw)),
-    [applyWeeklyDayXAxis, colors, tickFmt, isRaw],
+    () => applyHistoryXAxis(temperatureOpts(colors, tickFmt, isRaw)),
+    [applyHistoryXAxis, colors, tickFmt, isRaw],
   );
   const humOpts = useMemo(
-    () => applyWeeklyDayXAxis(humidityOpts(colors, tickFmt)),
-    [applyWeeklyDayXAxis, colors, tickFmt],
+    () => applyHistoryXAxis(humidityOpts(colors, tickFmt)),
+    [applyHistoryXAxis, colors, tickFmt],
   );
   const presOpts = useMemo(
-    () => applyWeeklyDayXAxis(pressureOpts(colors, tickFmt)),
-    [applyWeeklyDayXAxis, colors, tickFmt],
+    () => applyHistoryXAxis(pressureOpts(colors, tickFmt)),
+    [applyHistoryXAxis, colors, tickFmt],
   );
   const wndOpts = useMemo(
     () =>
-      applyWeeklyDayXAxis(
+      applyHistoryXAxis(
         useWindBars ? windOptsBucketed(colors, tickFmt) : windOpts(colors, tickFmt),
       ),
-    [applyWeeklyDayXAxis, colors, tickFmt, useWindBars],
+    [applyHistoryXAxis, colors, tickFmt, useWindBars],
   );
   const rainDecimals = system === "imperial" ? 3 : 1;
   const rnOpts = useMemo(
-    () => applyWeeklyDayXAxis(rainOpts(colors, tickFmt, rainDecimals)),
-    [applyWeeklyDayXAxis, colors, tickFmt, rainDecimals],
+    () => applyHistoryXAxis(rainOpts(colors, tickFmt, rainDecimals)),
+    [applyHistoryXAxis, colors, tickFmt, rainDecimals],
   );
   const suvOpts = useMemo(
     () =>
-      applyWeeklyDayXAxis(
+      applyHistoryXAxis(
         useSolarBars ? solarUvOptsBucketed(colors, tickFmt) : solarUvOpts(colors, tickFmt),
       ),
-    [applyWeeklyDayXAxis, colors, tickFmt, useSolarBars],
+    [applyHistoryXAxis, colors, tickFmt, useSolarBars],
   );
 
   // Zoom