FEAT-7: thin population curve to <=60 points so the line is not beaded over long date ranges

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

gerbil-manager-web/src/pages/StatistikPage.tsx

@@ -46,6 +46,17 @@ async function allPages<T>(fetchPage: (q: GridifyQuery) => Promise<Paged<T>>): P
 const toBars = (rows: YearValue[]) =>
   rows.map((r) => ({ label: String(r.year), value: r.value }))
 
+/**
+ * Punktreihe fürs Liniendiagramm ausdünnen (LineChart zeichnet pro Punkt
+ * einen Kreis — bei >60 Monatspunkten wird die Linie sonst „perlig“).
+ * Erster und letzter Punkt bleiben immer erhalten.
+ */
+function thin<T>(points: T[], max = 60): T[] {
+  if (points.length <= max) return points
+  const step = Math.ceil(points.length / max)
+  return points.filter((_, i) => i % step === 0 || i === points.length - 1)
+}
+
 function Section({
   title,
   hint,
@@ -186,7 +197,11 @@ export default function StatistikPage() {
 
           <Section title={t.population} hint={t.populationHint}>
             {stats.population.length >= 2 ? (
-              <LineChart points={stats.population} unit={t.populationUnit} title={t.population} />
+              <LineChart
+                points={thin(stats.population)}
+                unit={t.populationUnit}
+                title={t.population}
+              />
             ) : (
               <p className="muted">{t.sectionEmpty}</p>
             )}