AreaChart

import { AreaChart } from "cennge-ui/charts";

const months = [
  { month: "Mar", minutes: 1700 },
  { month: "Apr", minutes: 1810 },
  { month: "May", minutes: 2040 },
  { month: "Jun", minutes: 2250 },
  { month: "Jul", minutes: 2340 },
  { month: "Aug", minutes: 2370 },
  { month: "Sep", minutes: 2700 },
  { month: "Oct", minutes: 2840 },
];

export default function CiMinutes() {
  return (
    <AreaChart
      aria-label="CI minutes per month"
      data={months}
      index="month"
      indexLabel="Month"
      series={[{ key: "minutes", label: "Minutes" }]}
      className="h-56"
    />
  );
}

import { AreaChart } from "cennge-ui/charts";

const weeks = [
  { week: "Aug 17", passed: 52, flaky: 4, failed: 6 },
  { week: "Aug 24", passed: 58, flaky: 3, failed: 4 },
  { week: "Aug 31", passed: 55, flaky: 6, failed: 7 },
  { week: "Sep 7", passed: 61, flaky: 5, failed: 3 },
  { week: "Sep 14", passed: 64, flaky: 2, failed: 5 },
  { week: "Sep 21", passed: 59, flaky: 4, failed: 8 },
  { week: "Sep 28", passed: 68, flaky: 3, failed: 4 },
  { week: "Oct 5", passed: 71, flaky: 5, failed: 3 },
  { week: "Oct 12", passed: 66, flaky: 2, failed: 6 },
  { week: "Oct 19", passed: 74, flaky: 3, failed: 2 },
  { week: "Oct 26", passed: 79, flaky: 1, failed: 3 },
  { week: "Nov 2", passed: 83, flaky: 2, failed: 2 },
];

export default function CiRunsByResult() {
  return (
    <AreaChart
      aria-label="CI runs per week by result"
      data={weeks}
      index="week"
      indexLabel="Week of"
      isStacked
      series={[
        { key: "passed", label: "Passed", color: "success" },
        { key: "flaky", label: "Flaky", color: "warning" },
        { key: "failed", label: "Failed", color: "danger" },
      ]}
      className="h-64"
    />
  );
}

import { AreaChart } from "cennge-ui/charts";

const hours = [
  { hour: "06:00", scans: 0 },
  { hour: "08:00", scans: 140 },
  { hour: "10:00", scans: 410 },
  { hour: "12:00", scans: 410 },
  { hour: "14:00", scans: 380 },
  { hour: "16:00", scans: 520 },
  { hour: "18:00", scans: 260 },
  { hour: "20:00", scans: 0 },
  { hour: "22:00", scans: 0 },
];

export default function ScreenerScans() {
  return (
    <AreaChart
      aria-label="Screener scans every two hours"
      data={hours}
      index="hour"
      indexLabel="Hour"
      curve="smooth"
      series={[{ key: "scans", label: "Scans" }]}
      className="h-56"
    />
  );
}

import { Card, CardBody } from "cennge-ui";
import { AreaChart } from "cennge-ui/charts";

// Requests in each two hours, from midnight.
const perTwoHours = [
  2180, 1650, 1920, 5100, 8600, 9300,
  9050, 9350, 8200, 6100, 4400, 3100,
];
const requests = perTwoHours.map((count, i) => ({ hour: `${String(i * 2).padStart(2, "0")}:00`, count }));
const total = perTwoHours.reduce((sum, count) => sum + count, 0);

export default function RequestsCard() {
  return (
    <Card variant="flat" className="w-full max-w-sm">
      <CardBody>
        <p className="text-sm text-muted">Requests to payload-cache yesterday</p>
        <p className="text-2xl font-semibold tabular-nums">{total.toLocaleString("en-US")}</p>
        <AreaChart
          aria-label="Requests to payload-cache every two hours"
          data={requests}
          index="hour"
          indexLabel="From"
          curve="smooth"
          series={[{ key: "count", label: "Requests" }]}
          showXAxis={false}
          showYAxis={false}
          showGrid={false}
          className="mt-2 h-24"
        />
      </CardBody>
    </Card>
  );
}