# C box plot 3

> CI run time — per runner against a time budget

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/c-box-plot-3).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/c-box-plot-3
- Screenshot: https://shadcn.exchange/shot/cnippet/c-box-plot-3/light.png
- Registry item: https://ui.cnippet.dev/r/c-box-plot-3.json
- Categories: box plot
- Listed: 2026-10-27, source last changed 2026-10-27

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet/c-box-plot-3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/box-plot`, `@cnippet/chart-card`

## Files

### `registry/default/chart-variants/c-box-plot-3.tsx`

```tsx
"use client";

import { ReferenceLine } from "recharts";
import { BoxPlot } from "@/registry/default/charts/box-plot";
import { ChartCard } from "@/registry/default/charts/chart-card";

// Deterministic test-suite run times (seconds) per CI runner.
const runners = ["linux-x64", "linux-arm", "macos-14", "windows"] as const;
const data = runners.map((runner, r) => ({
  runner,
  seconds: Array.from(
    { length: 60 },
    (_, i) => 180 + r * 45 + ((i * 11) % 37) * (1 + r * 0.4),
  ),
}));

export default function CiRunTimes() {
  return (
    <ChartCard
      className="max-w-2xl"
      description="Test suite duration per runner, last 60 runs. Dashed line is the 5-minute budget."
      title="CI run time"
    >
      <BoxPlot
        className="h-48"
        color="var(--chart-3)"
        data={data}
        index="runner"
        valueFormatter={(v) => `${Math.floor(v / 60)}m ${Math.round(v % 60)}s`}
        values="seconds"
        yAxisWidth={60}
      >
        <ReferenceLine
          stroke="var(--muted-foreground)"
          strokeDasharray="4 4"
          y={300}
        />
      </BoxPlot>
    </ChartCard>
  );
}
```