Initial Commit

2026-04-09 23:23:31 +02:00
commit a88a905d52
94 changed files with 15170 additions and 0 deletions
@@ -0,0 +1,134 @@
+import {
+  ComposedChart,
+  Bar,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Cell,
+} from 'recharts';
+
+interface YearPoint {
+  date: string;
+  alt_at_midnight: number;
+  transit_alt: number;
+  usable_min: number;
+  moon_illumination: number;
+}
+
+interface Props {
+  points: YearPoint[];
+}
+
+const MONTH_ABBR = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+function altColor(alt: number): string {
+  if (alt >= 50) return 'var(--good)';
+  if (alt >= 30) return '#2ab8a0';
+  if (alt >= 15) return 'var(--warn)';
+  return 'var(--muted)';
+}
+
+export default function YearlyVisibility({ points }: Props) {
+  if (!points.length) return null;
+
+  // Sample to ~52 weekly points for readability
+  const stride = Math.max(1, Math.floor(points.length / 52));
+  const sampled = points.filter((_, i) => i % stride === 0);
+
+  const data = sampled.map(p => {
+    const d = new Date(p.date + 'T00:00:00Z');
+    return {
+      label: `${MONTH_ABBR[d.getUTCMonth()]} ${d.getUTCDate()}`,
+      month: d.getUTCMonth(),
+      alt: Math.round(p.alt_at_midnight * 10) / 10,
+      transit_alt: Math.round(p.transit_alt),
+      usable: Math.round(p.usable_min / 60 * 10) / 10,
+      moon: Math.round(p.moon_illumination * 100),
+    };
+  });
+
+  return (
+    <div>
+      <div style={{ fontSize: 11, color: 'var(--text-lo)', fontFamily: 'var(--font-mono)', marginBottom: 6 }}>
+        ALTITUDE AT MIDNIGHT — next 12 months (varies as transit shifts through seasons)
+      </div>
+      <div style={{ width: '100%', height: 160 }}>
+        <ResponsiveContainer>
+          <ComposedChart data={data} margin={{ top: 4, right: 8, bottom: 4, left: -18 }}>
+            <CartesianGrid stroke="var(--border)" strokeDasharray="3 3" vertical={false} />
+            <XAxis
+              dataKey="label"
+              tick={{ fill: 'var(--text-lo)', fontSize: 9, fontFamily: 'IBM Plex Mono' }}
+              interval={Math.floor(data.length / 12)}
+              tickLine={false}
+            />
+            <YAxis
+              yAxisId="alt"
+              domain={[0, 90]}
+              tick={{ fill: 'var(--text-lo)', fontSize: 9, fontFamily: 'IBM Plex Mono' }}
+              tickLine={false}
+              tickFormatter={v => `${v}°`}
+              width={32}
+            />
+            <YAxis
+              yAxisId="moon"
+              orientation="right"
+              domain={[0, 100]}
+              tick={{ fill: 'var(--text-lo)', fontSize: 9, fontFamily: 'IBM Plex Mono' }}
+              tickLine={false}
+              tickFormatter={v => `${v}%`}
+              width={28}
+            />
+            <Tooltip
+              contentStyle={{
+                background: 'var(--bg-panel)',
+                border: '1px solid var(--border-hi)',
+                borderRadius: 4,
+                fontFamily: 'IBM Plex Mono',
+                fontSize: 11,
+                color: 'var(--text-hi)',
+              }}
+              formatter={(value: number, name: string) => {
+                if (name === 'alt') return [`${value}°`, 'Alt at midnight'];
+                if (name === 'moon') return [`${value}%`, 'Moon'];
+                return [value, name];
+              }}
+            />
+            <Bar yAxisId="alt" dataKey="alt" radius={[1, 1, 0, 0]} maxBarSize={12}>
+              {data.map((entry, i) => (
+                <Cell key={i} fill={altColor(entry.alt)} fillOpacity={0.7} />
+              ))}
+            </Bar>
+            <Line
+              yAxisId="moon"
+              type="monotone"
+              dataKey="moon"
+              stroke="#4d9de0"
+              strokeWidth={1}
+              dot={false}
+              strokeOpacity={0.5}
+              strokeDasharray="3 2"
+            />
+          </ComposedChart>
+        </ResponsiveContainer>
+      </div>
+      <div style={{ display: 'flex', gap: 16, marginTop: 6, flexWrap: 'wrap' }}>
+        {[
+          { color: 'var(--good)', label: '≥50° excellent' },
+          { color: '#2ab8a0', label: '30–50° good' },
+          { color: 'var(--warn)', label: '15–30° marginal' },
+          { color: 'var(--muted)', label: '<15° poor' },
+          { color: '#4d9de0', label: 'Moon %' },
+        ].map(({ color, label }) => (
+          <div key={label} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+            <div style={{ width: 10, height: 10, background: color, borderRadius: 2, opacity: 0.8 }} />
+            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-lo)' }}>{label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}