Cloud cover graph

1<AppCloudCoverGraph />2<AppCloudCoverGraph data={[80, 85, 90, 95, 92, 88, 90, 94, 96, 92, 90, 93, 95]} />

1/**2 * The hourly cloud forecast: the smoothed gradient area, grid, hour labels and NOW marker of the conditions graph3 * with only the cloud layer. Data is a percentage at evenly spaced hours across the night.4 */5export function AppCloudCoverGraph({ data = CLOUD_HOURLY, height = 144 + F.f34 }: { data?: readonly number[]; height?: number }) {6  return <AppConditionsGraph cloudData={data} height={height} layers={{ moon: false, moonRise: false, prime: false }} />;7}

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.app-graph { position: relative; width: 100%; }23.app-graph svg { display: block; width: 100%; overflow: visible; }45.app-pulse { transform-box: fill-box; transform-origin: center; animation: app-pulse 2s ease-in-out infinite; }

1ConditionsGraph(2cloudCoverData: hourly,3startTime: start,4endTime: end,5)

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}

1// 2. Draw Cloud Cover (Area Chart)2_drawCloudCover(canvas, width, height);