BarChart

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

const runs = [
  { day: "Mon", runs: 14 },
  { day: "Tue", runs: 22 },
  { day: "Wed", runs: 18 },
  { day: "Thu", runs: 25 },
  { day: "Fri", runs: 19 },
  { day: "Sat", runs: 4 },
  { day: "Sun", runs: 2 },
];

export default function CiRunsPerDay() {
  return (
    <BarChart
      aria-label="CI runs of cennge-ui per day"
      data={runs}
      index="day"
      indexLabel="Day"
      series={[{ key: "runs", label: "Runs" }]}
      className="h-56"
    />
  );
}

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

const weeks = [
  { week: "Sep 14", passed: 58, failed: 6 },
  { week: "Sep 21", passed: 64, failed: 4 },
  { week: "Sep 28", passed: 71, failed: 9 },
  { week: "Oct 5", passed: 66, failed: 3 },
  { week: "Oct 12", passed: 80, failed: 5 },
  { week: "Oct 19", passed: 77, failed: 2 },
  { week: "Oct 26", passed: 85, failed: 4 },
  { week: "Nov 2", passed: 90, failed: 3 },
];

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

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

// Sorted, so the longest bar leads.
const minutes = [
  { repository: "cennge-ui", minutes: 1610 },
  { repository: "playwright-msi-scraper", minutes: 390 },
  { repository: "payload-cache", minutes: 350 },
  { repository: "ai-niche-scout", minutes: 280 },
  { repository: "spredo-crypto-screener", minutes: 210 },
];

export default function CiMinutesByRepository() {
  return (
    <BarChart
      aria-label="CI minutes in October by repository"
      data={minutes}
      index="repository"
      indexLabel="Repository"
      layout="horizontal"
      series={[{ key: "minutes", label: "Minutes" }]}
      valueFormat={(value) => `${value} min`}
      className="h-56"
    />
  );
}

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

const weeks = [
  { week: "Sep 14", change: 5 },
  { week: "Sep 21", change: -3 },
  { week: "Sep 28", change: 2 },
  { week: "Oct 5", change: -8 },
  { week: "Oct 12", change: -4 },
  { week: "Oct 19", change: 1 },
  { week: "Oct 26", change: -6 },
  { week: "Nov 2", change: -2 },
];

const signed = new Intl.NumberFormat("en-US", { signDisplay: "exceptZero" });

export default function OpenIssuesChange() {
  return (
    <BarChart
      aria-label="Change in open issues per week"
      data={weeks}
      index="week"
      indexLabel="Week of"
      series={[{ key: "change", label: "Open issues" }]}
      domain={[-10, 10]}
      valueFormat={(value) => signed.format(value)}
      className="h-56"
    />
  );
}

import { useState } from "react";
import { ToggleGroup, ToggleGroupItem } from "cennge-ui";
import { BarChart } from "cennge-ui/charts";

type Deploys = { day: string; deploys: number }[];

const lastWeek: Deploys = [
  { day: "Mon", deploys: 3 },
  { day: "Tue", deploys: 1 },
  { day: "Wed", deploys: 4 },
  { day: "Thu", deploys: 2 },
  { day: "Fri", deploys: 5 },
];
const thisWeek: Deploys = [];

export default function DeploysPerDay() {
  const [week, setWeek] = useState("this");
  return (
    <div className="flex w-full flex-col gap-4">
      <ToggleGroup aria-label="Week" size="sm" value={week} onValueChange={(value) => value && setWeek(value)}>
        <ToggleGroupItem value="last">Last week</ToggleGroupItem>
        <ToggleGroupItem value="this">This week</ToggleGroupItem>
      </ToggleGroup>
      <BarChart
        aria-label="Deploys of payload-cache per day"
        data={week === "last" ? lastWeek : thisWeek}
        index="day"
        indexLabel="Day"
        series={[{ key: "deploys", label: "Deploys" }]}
        emptyContent="No deploys yet this week"
        className="h-48"
      />
    </div>
  );
}