Extend the daily charts from 7 to 14 days

Sleep, daily counts and food grams now share a 14-day window like the
pattern charts. Bar gaps tighten to fit 14 columns and the x-axis
labels today plus every second day so labels don't collide; tooltips
and click-through per bar are unchanged.

src/app.js

@@ -814,12 +814,14 @@
     if (e.target === lightbox) lightbox.close();
   });
 
-  // ---------- weekly charts ----------
+  // ---------- daily charts (last 14 days) ----------
+  const CHART_DAYS = 14;
+
   function weeklyData(events) {
     const today = startOfDay(new Date());
     const now = Date.now();
     const days = [];
-    for (let i = 6; i >= 0; i--) {
+    for (let i = CHART_DAYS - 1; i >= 0; i--) {
       const d = new Date(today);
       d.setDate(d.getDate() - i);
       const from = startOfDay(d).getTime();
@@ -846,6 +848,12 @@
     return date.toLocaleDateString(undefined, { weekday: "short" });
   }
 
+  // With 14 columns there is no room for a label under every bar, so label
+  // today and every second day counting back from it.
+  function showDayLabel(i, len) {
+    return (len - 1 - i) % 2 === 0;
+  }
+
   // Pick a chart Y maximum and tick count so every tick label is a clean
   // whole number (avoids 0, 0, 1, 1, 2 from rounding fractional steps):
   // 1-unit gridlines up to 10, 2-unit up to 20, 5-unit beyond.
@@ -911,7 +919,7 @@
     const rawMax = Math.max(...days.map(d => d.sleepHours));
     const { yMax, steps: ySteps } = niceAxisSleepHours(rawMax);
 
-    const gap = 6;
+    const gap = 4;
     const barW = (innerW - (days.length - 1) * gap) / days.length;
 
     const parts = [];
@@ -934,10 +942,12 @@
         `x="${x}" y="${y}" width="${barW}" height="${Math.max(0, h)}" rx="3">` +
         `<title>${escapeText(title)}</title></rect>`
       );
-      parts.push(
+      if (showDayLabel(i, days.length)) {
-        `<text x="${x + barW / 2}" y="${H - MB + 14}" text-anchor="middle">` +
+        parts.push(
-        `${escapeText(dayLabel(d.date, isToday))}</text>`
+          `<text x="${x + barW / 2}" y="${H - MB + 14}" text-anchor="middle">` +
-      );
+          `${escapeText(dayLabel(d.date, isToday))}</text>`
+        );
+      }
     });
 
     setChartSVG(svg, parts);
@@ -953,8 +963,8 @@
     const rawMax = Math.max(...days.flatMap(d => [d.pees, d.poos, d.meals]));
     const { yMax, steps: ySteps } = niceAxis(rawMax);
 
-    const groupGap = 6;
+    const groupGap = 4;
-    const innerBarGap = 2;
+    const innerBarGap = 1.5;
     const groupW = (innerW - (days.length - 1) * groupGap) / days.length;
     const barW = (groupW - 2 * innerBarGap) / 3;
 
@@ -989,10 +999,12 @@
         );
       });
 
-      parts.push(
+      if (showDayLabel(i, days.length)) {
-        `<text x="${groupX + groupW / 2}" y="${H - MB + 14}" text-anchor="middle">` +
+        parts.push(
-        `${escapeText(dayLabel(d.date, isToday))}</text>`
+          `<text x="${groupX + groupW / 2}" y="${H - MB + 14}" text-anchor="middle">` +
-      );
+          `${escapeText(dayLabel(d.date, isToday))}</text>`
+        );
+      }
     });
 
     setChartSVG(svg, parts);
@@ -1013,7 +1025,7 @@
 
     const { yMax, steps: ySteps } = niceAxisGrams(Math.max(...days.map(d => d.grams)));
 
-    const gap = 6;
+    const gap = 4;
     const barW = (innerW - (days.length - 1) * gap) / days.length;
 
     const parts = [];
@@ -1036,10 +1048,12 @@
         `x="${x}" y="${y}" width="${barW}" height="${Math.max(0, h)}" rx="3">` +
         `<title>${escapeText(title)}</title></rect>`
       );
-      parts.push(
+      if (showDayLabel(i, days.length)) {
-        `<text x="${x + barW / 2}" y="${H - MB + 14}" text-anchor="middle">` +
+        parts.push(
-        `${escapeText(dayLabel(d.date, isToday))}</text>`
+          `<text x="${x + barW / 2}" y="${H - MB + 14}" text-anchor="middle">` +
-      );
+          `${escapeText(dayLabel(d.date, isToday))}</text>`
+        );
+      }
     });
 
     setChartSVG(svg, parts);

src/changelog.json

@@ -1,4 +1,5 @@
 [
+  { "date": "2026-07-13", "text": "The sleep, daily counts and food charts now cover the last 14 days instead of 7" },
   { "date": "2026-07-13", "text": "The awake/asleep timer lives in the frozen top bar" },
   { "date": "2026-07-13", "text": "The day picker is a bar frozen at the top of the page" },
   { "date": "2026-07-13", "text": "Attach multiple photos to an event — the photo picker now also offers the gallery with multi-select" },

src/index.html

@@ -176,14 +176,14 @@
       </section>
 
       <section class="weekly" data-panel="weekly">
-        <h2>Last 7 days</h2>
+        <h2>Last 14 days</h2>
         <div class="chart">
           <div class="chart-title">Sleep (hours)</div>
-          <svg id="chart-sleep" class="chart-svg" viewBox="0 0 320 160" role="img" aria-label="Sleep hours per day for the last 7 days"></svg>
+          <svg id="chart-sleep" class="chart-svg" viewBox="0 0 320 160" role="img" aria-label="Sleep hours per day for the last 14 days"></svg>
         </div>
         <div class="chart">
           <div class="chart-title">Daily counts</div>
-          <svg id="chart-counts" class="chart-svg" viewBox="0 0 320 180" role="img" aria-label="Pee, poo and meal counts per day for the last 7 days"></svg>
+          <svg id="chart-counts" class="chart-svg" viewBox="0 0 320 180" role="img" aria-label="Pee, poo and meal counts per day for the last 14 days"></svg>
           <div class="legend">
             <span class="lg pee"><span class="sw"></span>Pees</span>
             <span class="lg poo"><span class="sw"></span>Poos</span>
@@ -192,7 +192,7 @@
         </div>
         <div class="chart" id="grams-chart-wrap" hidden>
           <div class="chart-title">Food (grams)</div>
-          <svg id="chart-grams" class="chart-svg" viewBox="0 0 320 160" role="img" aria-label="Grams of food eaten per day for the last 7 days"></svg>
+          <svg id="chart-grams" class="chart-svg" viewBox="0 0 320 160" role="img" aria-label="Grams of food eaten per day for the last 14 days"></svg>
         </div>
       </section>