Conditions graph

1<AppConditionsGraph />2<AppConditionsGraph layers={{ cloud: true, moon: false, prime: false }} />

1/** Cubic segments with tension 0.2, exactly as _drawCloudCover builds them. */2function smooth(points: Pt[]): string {3  let d = `M${points[0][0]} ${points[0][1]}`;4  for (let i = 0; i < points.length - 1; i++) {5    const p0 = points[Math.max(0, i - 1)];6    const p1 = points[i];7    const p2 = points[i + 1];8    const p3 = points[Math.min(points.length - 1, i + 2)];9    const c1 = [p1[0] + (p2[0] - p0[0]) * 0.2, p1[1] + (p2[1] - p0[1]) * 0.2];10    const c2 = [p2[0] - (p3[0] - p1[0]) * 0.2, p2[1] - (p3[1] - p1[1]) * 0.2];11    d += ` C${c1[0]} ${c1[1]} ${c2[0]} ${c2[1]} ${p2[0]} ${p2[1]}`;12  }13  return d;14}

1/**2 * ConditionsGraph: grid, a smoothed cloud area, the moon's altitude area, the moon rise marker, the prime view3 * window and the NOW marker. Colours are stops at Pogson opacity steps; sizes are Fibonacci numbers.4 */5export function AppConditionsGraph({ layers = {}, height = 233, cloudData = CLOUD_HOURLY }: { layers?: GraphLayers; height?: number; cloudData?: readonly number[] }) {6  const { cloud = true, moon = true, moonRise = true, prime = true, now = true } = layers;7  const [ref, w] = useElementWidth<HTMLDivElement>(560);8  const h = height - LABEL_H;9  const span = NIGHT_END - NIGHT_START;10  const x = (m: number): number => ((m - NIGHT_START) / span) * w;1112  const cloudPts: Pt[] = cloudData.map((c, i) => [x(NIGHT_START + (i * span) / (cloudData.length - 1)), h - (c / 100) * h] as const);13  const cloudFill = `M${cloudPts[0][0]} ${h} L${cloudPts[0][0]} ${cloudPts[0][1]} ${smooth(cloudPts).replace(/^M\S+ \S+/, "")} L${cloudPts.at(-1)![0]} ${h} L${w} ${h} Z`;14  const moonPts: Pt[] = [];15  for (let m = NIGHT_START; m <= NIGHT_END; m += 15) moonPts.push([x(m), h - (Math.max(0, moonAltitude(m)) / 90) * h]);16  const moonLine = "M" + moonPts.map(([px, py]) => `${px} ${py}`).join(" L");17  const win = prime ? primeView() : null;18  const riseX = x(MOON_RISE_MINUTES);19  const labelY = h * 0.75;20  const nowX = x(NOW);21  const nowTop = h * 0.35;22  const winStart = win ? x(win.from) : 0;23  const winEnd = win ? x(win.to) : 0;24  const winMid = Math.max(F.f55, Math.min(w - F.f55, (winStart + winEnd) / 2));2526  return (27    <div ref={ref} className="app-ui app-graph" style={{ height }}>28      <svg viewBox={`0 0 ${w} ${height}`} height={height} role="img" aria-label="Conditions graph for an example night">29        <GraphDefs />30        {[1, 2, 3].map((i) => <line key={`h${i}`} x1={0} x2={w} y1={(h * i) / 4} y2={(h * i) / 4} stroke={stop(GRAPH.ink, 6)} />)}31        {[1, 2, 3, 4].map((i) => <line key={`v${i}`} y1={0} y2={h} x1={(w * i) / 4} x2={(w * i) / 4} stroke={stop(GRAPH.ink, 6)} />)}32        {cloud && (33          <g>34            <path d={cloudFill} fill="url(#g-cloud)" />35            <path d={smooth(cloudPts)} fill="none" stroke={stop(GRAPH.cloud, 3)} strokeWidth={F.f2} />36          </g>37        )}38        {moon && (39          <g>40            <path d={`M0 ${h} L${moonLine.slice(1)} L${w} ${h} Z`} fill={stop(GRAPH.moon, 4)} />41            <path d={moonLine} fill="none" stroke={stop(GRAPH.moonLine, 2)} strokeWidth={F.f2} />42          </g>43        )}44        {moonRise && (45          <g>46            <line x1={riseX} x2={riseX} y1={h} y2={labelY + F.f8} stroke={stop(GRAPH.moonLine, 2)} />47            <circle cx={riseX} cy={labelY + F.f5} r={F.f8} fill={stop(GRAPH.rise, 3)} />48            <circle cx={riseX} cy={labelY + F.f5} r={F.f3} fill={stop(GRAPH.rise)} />49            <GraphPill x={riseX + F.f13} y={labelY + F.f5} text="MOON RISE" tracking={1} color={stop("deep-space-50")} fill={stop(GRAPH.moon, 4)} stroke={stop(GRAPH.moonLine, 3)} />50          </g>51        )}52        {win && (53          <g>54            <rect x={winStart} y={0} width={winEnd - winStart} height={h} fill="url(#g-prime)" />55            <GraphPill x={winMid - pillWidth("PRIME VIEW", 0.5) / 2} y={F.f8 + F.f21 / 2} text="PRIME VIEW" radius={F.f21} color={stop(GRAPH.prime)} fill={stop(GRAPH.prime, 5)} stroke={stop(GRAPH.prime, 3)} />56          </g>57        )}58        {now && <NowMarker x={nowX} top={nowTop} bottom={h} />}59        {[0, 1, 2, 3, 4].map((i) => {60          const m = NIGHT_START + (span * i) / 4;61          const midnight = Math.round(m) % 1440 === 0;62          return (63            <text key={i} x={(w * i) / 4} y={h + F.f21} fontSize={T.s2n} fontWeight={midnight ? 700 : 400} fill={midnight ? stop(GRAPH.ink) : stop("space-grey-300")} textAnchor={i === 0 ? "start" : i === 4 ? "end" : "middle"}>64              {clock(m)}65            </text>66          );67        })}68      </svg>69    </div>70  );71}

1.app-graph { position: relative; width: 100%; }23.app-graph svg { display: block; width: 100%; overflow: visible; }45.app-legend { display: flex; flex-wrap: wrap; gap: var(--spacing-f21); margin-top: var(--spacing-f13); }

1ConditionsGraph(2cloudCoverData: hourly,3moonCurve: curve,4moonRiseTime: rise,5primeViewWindow: window,6startTime: start,7endTime: end,8)

1class ConditionsGraph extends StatelessWidget {23  const ConditionsGraph({4    super.key,5    this.themeColor = Colors.indigo,6    this.moonRiseTime,7    this.moonCurve,8    this.cloudCoverData,9    required this.startTime,10    required this.endTime,11    this.primeViewWindow,12  });13  final Color themeColor;14  final DateTime? moonRiseTime;15  final List<GraphPoint>? moonCurve;16  final List<HourlyForecast>? cloudCoverData;17  final DateTime startTime;18  final DateTime endTime;19  final PrimeViewWindow? primeViewWindow;2021  @override22  Widget build(BuildContext context) {23    return Stack(24      children: <Widget>[25        // Graph Painter26        CustomPaint(27          size: Size.infinite,28          painter: _ConditionsGraphPainter(29            themeColor: themeColor,30            moonRiseTime: moonRiseTime,31            moonCurve: moonCurve,32            cloudCoverData: cloudCoverData,33            startTime: startTime,34            endTime: endTime,35            primeViewWindow: primeViewWindow,36          ),37        ),38        39        // Labels (X-Axis)40        Positioned(41          bottom: 0,42          left: 0,43          right: 0,44          height: 30,45          child: Row(46            mainAxisAlignment: MainAxisAlignment.spaceBetween,47            children: _buildTimeLabels(),48          ),49        ),50      ],51    );52  }5354  List<Widget> _buildTimeLabels() {55    final List<Widget> labels = <Widget>[];56    final Duration duration = endTime.difference(startTime);57    for (int i = 0; i <= 4; i++) {58        final DateTime time = startTime.add(Duration(minutes: (duration.inMinutes * (i / 4)).round()));59        final bool isMidnight = time.hour == 0;60        labels.add(61            Text(62                '${time.hour.toString().padLeft(2, '0')}:00',63                style: TextStyle(64                    color: isMidnight ? Colors.white : Colors.grey, 65                    fontSize: 10, 66                    fontWeight: isMidnight ? FontWeight.bold : FontWeight.normal67                ),68            ),69        );70    }71    return labels;72  }73}

1class GraphTheme {2  static const Color moonColor = Color(0xFF4F46E5); // Indigo-6003  static const Color cloudCoverColor = Colors.white24;4  5  static const Color moonFillColor = Color(0xFF1E1B4B); // Dark Indigo6  static const Color moonStrokeColor = Color(0xFF6366F1); // Indigo-5007  8  static const Color objectCurveColor = Color(0xFF3B82F6); // Blue-5009  static const Color objectGlowColor = Color(0xFF3B82F6);10  11  static const Color nowIndicatorColor = Color(0xFFF97316); // Orange-50012  static const Color nowLabelColor = Color(0xFFFB923C); // Orange-40013  14  static const Color primeViewColor = Color(0xFF10B981); // Emerald-50015  static const Color primeViewLabelColor = Color(0xFF6EE7B7); // Emerald-30016}