@misoto22/design 0.3.1 → 0.6.0

package/dist/charts/BoxPlot/BoxPlot.js

@@ -0,0 +1,495 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useId,
+  useMemo
+} from "react";
+import {
+  Bar as RechartsBar,
+  BarChart as RechartsBarChart,
+  CartesianGrid,
+  XAxis as RechartsXAxis,
+  YAxis as RechartsYAxis,
+  usePlotArea
+} from "recharts";
+import { ChartContainer } from "../lib/chart.js";
+import { ChartFigure } from "../lib/figure.js";
+import { ChartEmpty } from "../lib/empty.js";
+import { ChartBackground } from "../lib/background.js";
+import { ChartTooltip } from "../lib/tooltip.js";
+import { SeriesGradient } from "../lib/paint.js";
+import { Annotation, ReferenceBand, ReferenceLine } from "../lib/annotations.js";
+import { axisLabel } from "../lib/axis.js";
+import { defaultTick } from "../lib/format.js";
+import { cn } from "../../lib/cn.js";
+const DEFAULT_CONFIG = { value: { label: "Value" } };
+const CHART_MARGIN = { top: 12, right: 12, bottom: 0, left: 12 };
+const TUKEY_FENCE = 1.5;
+const NOTCH_FACTOR = 1.58;
+const NOTCH_INSET = 0.18;
+const DOMAIN_PADDING = 0.06;
+function quantile(sorted, p) {
+  if (sorted.length === 0) return Number.NaN;
+  if (sorted.length === 1) return sorted[0];
+  const h = (sorted.length - 1) * p;
+  const lower = sorted[Math.floor(h)];
+  const upper = sorted[Math.ceil(h)];
+  return lower + (h - Math.floor(h)) * (upper - lower);
+}
+function summarise(name, values) {
+  const clean = values.filter(Number.isFinite).sort((a, b) => a - b);
+  if (clean.length === 0) return null;
+  const q1 = quantile(clean, 0.25);
+  const median = quantile(clean, 0.5);
+  const q3 = quantile(clean, 0.75);
+  const iqr = q3 - q1;
+  const low = q1 - TUKEY_FENCE * iqr;
+  const high = q3 + TUKEY_FENCE * iqr;
+  const inside = clean.filter((value) => value >= low && value <= high);
+  const outliers = clean.filter((value) => value < low || value > high);
+  return {
+    name,
+    // The whiskers stop at the most extreme observation still inside the
+    // fence, not at the fence itself. A whisker drawn to `q1 - 1.5 × IQR`
+    // claims a reading that may not exist in the data.
+    min: inside.length > 0 ? inside[0] : clean[0],
+    q1,
+    median,
+    q3,
+    max: inside.length > 0 ? inside[inside.length - 1] : clean[clean.length - 1],
+    outliers,
+    outlierCount: outliers.length,
+    count: clean.length
+  };
+}
+function resolve(data) {
+  return data.flatMap((datum) => {
+    if (datum.values) {
+      const summary = summarise(datum.name, datum.values);
+      return summary ? [summary] : [];
+    }
+    const outliers = datum.outliers ?? [];
+    return [{ ...datum, outliers, outlierCount: outliers.length }];
+  });
+}
+function valueDomain(boxes) {
+  const values = boxes.flatMap((box) => [box.min, box.max, ...box.outliers]);
+  if (values.length === 0) return [0, 1];
+  const low = Math.min(...values);
+  const high = Math.max(...values);
+  const pad = (high - low || Math.abs(high) || 1) * DOMAIN_PADDING;
+  return [low - pad, high + pad];
+}
+const BoxPlotContext = createContext(null);
+function useBoxPlot() {
+  const context = useContext(BoxPlotContext);
+  if (!context) throw new Error("A box plot part must be rendered inside <BoxPlot>");
+  return context;
+}
+function BoxPlot({
+  config = DEFAULT_CONFIG,
+  data,
+  title,
+  showTitle,
+  description,
+  children,
+  className,
+  chartProps,
+  orientation = "vertical",
+  formatValue = defaultTick,
+  hideDataTable = false,
+  empty
+}) {
+  const chartId = useId().replace(/:/g, "");
+  const isHorizontal = orientation === "horizontal";
+  const seriesKey = Object.keys(config)[0] ?? "value";
+  const boxes = useMemo(() => resolve(data), [data]);
+  const domain = useMemo(() => valueDomain(boxes), [boxes]);
+  const context = useMemo(
+    () => ({ config, seriesKey, boxes, isHorizontal, domain, formatValue }),
+    [config, seriesKey, boxes, isHorizontal, domain, formatValue]
+  );
+  const isEmpty = empty !== false && boxes.length === 0;
+  return /* @__PURE__ */ jsx(BoxPlotContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable ? false : {
+        rows: boxes,
+        rowKey: "name",
+        columns: [
+          { key: "min", label: "Minimum" },
+          { key: "q1", label: "Lower quartile" },
+          { key: "median", label: "Median" },
+          { key: "q3", label: "Upper quartile" },
+          { key: "max", label: "Maximum" },
+          { key: "outlierCount", label: "Outliers" }
+        ]
+      },
+      children: isEmpty ? /* @__PURE__ */ jsx(ChartEmpty, { ...empty || {} }) : /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsx(
+        RechartsBarChart,
+        {
+          id: chartId,
+          accessibilityLayer: true,
+          margin: CHART_MARGIN,
+          layout: isHorizontal ? "vertical" : "horizontal",
+          data: boxes,
+          barCategoryGap: "30%",
+          ...chartProps,
+          children
+        }
+      ) })
+    }
+  ) });
+}
+function Boxes({ showOutliers = true, notch = false, barProps }) {
+  const { config, seriesKey, isHorizontal } = useBoxPlot();
+  const id = useId().replace(/:/g, "");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      RechartsBar,
+      {
+        dataKey: (row) => {
+          const box = row;
+          return [box.min, box.max];
+        },
+        name: seriesKey,
+        isAnimationActive: false,
+        fill: "transparent",
+        shape: (props) => /* @__PURE__ */ jsx(
+          BoxShape,
+          {
+            ...props,
+            id,
+            seriesKey,
+            isHorizontal,
+            showOutliers,
+            notch
+          }
+        ),
+        activeBar: (props) => /* @__PURE__ */ jsx(
+          BoxShape,
+          {
+            ...props,
+            id,
+            seriesKey,
+            isHorizontal,
+            showOutliers,
+            notch
+          }
+        ),
+        ...barProps
+      }
+    ),
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+      SeriesGradient,
+      {
+        id,
+        dataKey: seriesKey,
+        config,
+        direction: isHorizontal ? "horizontal" : "vertical"
+      }
+    ) })
+  ] });
+}
+function BoxShape({
+  x = 0,
+  y = 0,
+  width = 0,
+  height = 0,
+  payload,
+  id,
+  seriesKey,
+  isHorizontal,
+  showOutliers,
+  notch
+}) {
+  const plot = usePlotArea();
+  const { domain } = useBoxPlot();
+  if (!payload) return null;
+  const box = payload;
+  const span = box.max - box.min;
+  const extent = isHorizontal ? width : height;
+  const scale = (value) => {
+    if (span !== 0 && extent > 0) {
+      return isHorizontal ? x + (value - box.min) / span * width : y + (box.max - value) / span * height;
+    }
+    if (!plot) return isHorizontal ? x : y;
+    const [low, high] = domain;
+    const range = high - low || 1;
+    return isHorizontal ? plot.x + (value - low) / range * plot.width : plot.y + (high - value) / range * plot.height;
+  };
+  const bandStart = isHorizontal ? y : x;
+  const bandSize = isHorizontal ? height : width;
+  const centre = bandStart + bandSize / 2;
+  const capHalf = bandSize / 4;
+  const dotRadius = Math.max(2, Math.min(3.5, bandSize / 8));
+  const fill = `url(#${id}-colors-${seriesKey})`;
+  const stroke = "var(--ink)";
+  const whisker = (from, to, atCap) => {
+    const a = scale(from);
+    const b = scale(to);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: isHorizontal ? a : centre,
+          y1: isHorizontal ? centre : a,
+          x2: isHorizontal ? b : centre,
+          y2: isHorizontal ? centre : b,
+          stroke,
+          strokeWidth: 1
+        }
+      ),
+      atCap && /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: isHorizontal ? b : centre - capHalf,
+          y1: isHorizontal ? centre - capHalf : b,
+          x2: isHorizontal ? b : centre + capHalf,
+          y2: isHorizontal ? centre + capHalf : b,
+          stroke,
+          strokeWidth: 1
+        }
+      )
+    ] });
+  };
+  const q1px = scale(box.q1);
+  const q3px = scale(box.q3);
+  const medianPx = scale(box.median);
+  const boxFrom = Math.min(q1px, q3px);
+  const boxSize = Math.abs(q3px - q1px);
+  const notchBounds = notch ? notchAt(box) : null;
+  const body = notchBounds ? /* @__PURE__ */ jsx(
+    "polygon",
+    {
+      points: notchPoints({
+        bandStart,
+        bandSize,
+        isHorizontal,
+        q1: q1px,
+        q3: q3px,
+        median: medianPx,
+        low: scale(notchBounds[0]),
+        high: scale(notchBounds[1])
+      }),
+      fill,
+      fillOpacity: "var(--chart-fill)",
+      stroke,
+      strokeWidth: 1,
+      strokeLinejoin: "round"
+    }
+  ) : /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x: isHorizontal ? boxFrom : bandStart,
+      y: isHorizontal ? bandStart : boxFrom,
+      width: isHorizontal ? Math.max(1, boxSize) : bandSize,
+      height: isHorizontal ? bandSize : Math.max(1, boxSize),
+      fill,
+      fillOpacity: "var(--chart-fill)",
+      stroke,
+      strokeWidth: 1
+    }
+  );
+  return /* @__PURE__ */ jsxs("g", { children: [
+    whisker(box.q1, box.min, true),
+    whisker(box.q3, box.max, true),
+    body,
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: isHorizontal ? medianPx : bandStart,
+        y1: isHorizontal ? bandStart : medianPx,
+        x2: isHorizontal ? medianPx : bandStart + bandSize,
+        y2: isHorizontal ? bandStart + bandSize : medianPx,
+        stroke,
+        strokeWidth: 2
+      }
+    ),
+    showOutliers && box.outliers.map((value, index) => /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: isHorizontal ? scale(value) : centre,
+        cy: isHorizontal ? centre : scale(value),
+        r: dotRadius,
+        fill: "var(--chart-surface)",
+        stroke,
+        strokeWidth: 1
+      },
+      `${value}-${index}`
+    ))
+  ] });
+}
+function notchAt(box) {
+  if (!box.count || box.count <= 0) return null;
+  const half = NOTCH_FACTOR * (box.q3 - box.q1) / Math.sqrt(box.count);
+  return [Math.max(box.q1, box.median - half), Math.min(box.q3, box.median + half)];
+}
+function notchPoints({
+  bandStart,
+  bandSize,
+  isHorizontal,
+  q1,
+  q3,
+  median,
+  low,
+  high
+}) {
+  const near = bandStart;
+  const far = bandStart + bandSize;
+  const inset = bandSize * NOTCH_INSET;
+  const value = [q1, low, median, high, q3];
+  const across = [near, near, near + inset, near, near];
+  const back = [far, far, far - inset, far, far];
+  const points = [
+    ...value.map((v, i) => [v, across[i]]),
+    ...value.map((v, i) => [v, back[i]]).reverse()
+  ];
+  return points.map(([v, a]) => isHorizontal ? `${v},${a}` : `${a},${v}`).join(" ");
+}
+function XAxis({
+  dataKey,
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  minTickGap = 8,
+  type,
+  label,
+  tickFormatter,
+  domain,
+  ...rest
+}) {
+  const { isHorizontal, domain: valueSpan, formatValue } = useBoxPlot();
+  return /* @__PURE__ */ jsx(
+    RechartsXAxis,
+    {
+      dataKey: dataKey ?? (isHorizontal ? void 0 : "name"),
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      type: type ?? (isHorizontal ? "number" : "category"),
+      domain: domain ?? (isHorizontal ? valueSpan : void 0),
+      tickFormatter: tickFormatter ?? (isHorizontal ? formatValue : void 0),
+      ...rest,
+      children: axisLabel(label, "x")
+    }
+  );
+}
+function YAxis({
+  dataKey,
+  tickLine = false,
+  axisLine = false,
+  tickMargin = 8,
+  minTickGap = 8,
+  width = "auto",
+  type,
+  label,
+  tickFormatter,
+  domain,
+  ...rest
+}) {
+  const { isHorizontal, domain: valueSpan, formatValue } = useBoxPlot();
+  return /* @__PURE__ */ jsx(
+    RechartsYAxis,
+    {
+      dataKey: dataKey ?? (isHorizontal ? "name" : void 0),
+      tickLine,
+      axisLine,
+      tickMargin,
+      minTickGap,
+      width,
+      type: type ?? (isHorizontal ? "category" : "number"),
+      domain: domain ?? (isHorizontal ? void 0 : valueSpan),
+      tickFormatter: tickFormatter ?? (isHorizontal ? void 0 : formatValue),
+      ...rest,
+      children: axisLabel(label, "y")
+    }
+  );
+}
+function Grid({
+  strokeDasharray = "3 3",
+  vertical,
+  horizontal,
+  ...rest
+}) {
+  const { isHorizontal } = useBoxPlot();
+  return /* @__PURE__ */ jsx(
+    CartesianGrid,
+    {
+      strokeDasharray,
+      vertical: vertical ?? isHorizontal,
+      horizontal: horizontal ?? !isHorizontal,
+      ...rest
+    }
+  );
+}
+function Tooltip({ variant = "solid", roundness = "lg", defaultIndex }) {
+  const { formatValue } = useBoxPlot();
+  return /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      cursor: false,
+      defaultIndex,
+      content: (props) => {
+        const { active, payload } = props;
+        const box = payload?.[0]?.payload;
+        if (!active || !box) return /* @__PURE__ */ jsx("span", { className: "p-4" });
+        const rows = [
+          ["Maximum", box.max],
+          ["Upper quartile", box.q3],
+          ["Median", box.median],
+          ["Lower quartile", box.q1],
+          ["Minimum", box.min]
+        ];
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid min-w-40 gap-1.5 border border-(--rule-2) px-2.5 py-1.5 text-xs",
+              roundness === "sm" && "rounded-(--radius-sm)",
+              roundness === "md" && "rounded-(--radius)",
+              roundness === "lg" && "rounded-(--radius-lg)",
+              variant === "frosted" ? "bg-(--chart-surface)/75 backdrop-blur-sm" : "bg-(--chart-surface)"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "font-medium text-(--ink)", children: box.name }),
+              rows.map(([name, value]) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4 leading-none", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-(--ink-3-aa)", children: name }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono font-medium tabular-nums text-(--ink)", children: formatValue(value) })
+              ] }, name)),
+              box.count !== void 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4 leading-none", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-(--ink-3-aa)", children: "Observations" }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono font-medium tabular-nums text-(--ink)", children: box.count.toLocaleString() })
+              ] })
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+function Background({ variant }) {
+  return /* @__PURE__ */ jsx(ChartBackground, { variant });
+}
+BoxPlot.Boxes = Boxes;
+BoxPlot.XAxis = XAxis;
+BoxPlot.YAxis = YAxis;
+BoxPlot.Grid = Grid;
+BoxPlot.Tooltip = Tooltip;
+BoxPlot.Background = Background;
+BoxPlot.ReferenceLine = ReferenceLine;
+BoxPlot.ReferenceBand = ReferenceBand;
+BoxPlot.Annotation = Annotation;
+var BoxPlot_default = BoxPlot;
+export {
+  BoxPlot,
+  BoxPlot_default as default
+};
+//# sourceMappingURL=BoxPlot.js.map

package/dist/charts/BoxPlot/BoxPlot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/BoxPlot/BoxPlot.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useContext,\n  useId,\n  useMemo,\n  type ComponentProps,\n  type ReactNode,\n} from 'react'\nimport {\n  Bar as RechartsBar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  XAxis as RechartsXAxis,\n  YAxis as RechartsYAxis,\n  usePlotArea,\n} from 'recharts'\nimport { ChartContainer, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { ChartEmpty, type ChartEmptyProps } from '../lib/empty'\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartTooltip } from '../lib/tooltip'\nimport { SeriesGradient } from '../lib/paint'\nimport { Annotation, ReferenceBand, ReferenceLine } from '../lib/annotations'\nimport { axisLabel } from '../lib/axis'\nimport { defaultTick } from '../lib/format'\nimport { cn } from '../../lib/cn'\nimport type { ChartXAxisProps, ChartYAxisProps } from '../BarChart/BarChart'\nimport type { ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\n/** The series a chart with only one of them falls back to. */\nconst DEFAULT_CONFIG: ChartConfig = { value: { label: 'Value' } }\n\n/** Room for the first and last category label, and for a whisker cap. */\nconst CHART_MARGIN = { top: 12, right: 12, bottom: 0, left: 12 }\n\n/**\n * Tukey's multiplier. A point past `q3 + 1.5 × IQR` is drawn as itself rather\n * than swept into a whisker.\n *\n * 1.5 is a convention, not a test: on normal data it flags roughly 0.7% of\n * points, and on skewed data it flags a great many that are not anomalies at\n * all. It decides what the picture DRAWS, never what the reader concludes.\n */\nconst TUKEY_FENCE = 1.5\n\n/**\n * The notch's half-width, as a multiple of `IQR / √n`.\n *\n * 1.58 is McGill, Tukey and Larsen's: it makes two non-overlapping notches\n * roughly a 95% test of \"these medians differ\". Roughly, and only for\n * independent samples of similar shape — which is why the notch is opt-in.\n */\nconst NOTCH_FACTOR = 1.58\n\n/** How far the box pinches in at the median, as a share of its width. */\nconst NOTCH_INSET = 0.18\n\n/** How much room the value axis leaves above and below the data. */\nconst DOMAIN_PADDING = 0.06\n\n/** Which way the boxes run. */\nexport type BoxPlotOrientation = 'vertical' | 'horizontal'\n\n/** A category summarised into the five numbers a box is drawn from. */\nexport interface BoxPlotSummary {\n  /** What the box describes. Doubles as its key, so it must be unique. */\n  name: string\n  /** The low whisker's end — the smallest observation inside the fence. */\n  min: number\n  q1: number\n  median: number\n  q3: number\n  /** The high whisker's end — the largest observation inside the fence. */\n  max: number\n  /** Points outside the fences, drawn one dot each. */\n  outliers?: number[]\n  /**\n   * How many observations the box stands for.\n   *\n   * Needed for a notch, and worth carrying anyway: a box drawn from six points\n   * and a box drawn from six thousand look identical, and only one of them\n   * means anything.\n   */\n  count?: number\n}\n\n/** A category handed over as raw observations, for the chart to summarise. */\nexport interface BoxPlotSample {\n  /** What the box describes. Doubles as its key, so it must be unique. */\n  name: string\n  /** Every observation in this category, in any order. */\n  values: number[]\n  min?: never\n  q1?: never\n  median?: never\n  q3?: never\n  max?: never\n}\n\n/**\n * One category: either the raw observations, or the summary itself.\n *\n * Both forms exist because both are real. A chart fed from a warehouse gets\n * percentiles back from the query and never sees a row; a chart fed from a\n * browser has the array in hand and should not have to compute quartiles to\n * draw them.\n */\nexport type BoxPlotDatum = BoxPlotSample | (BoxPlotSummary & { values?: never })\n\n/** A summary with everything the marks need resolved. */\ninterface ResolvedBox extends BoxPlotSummary {\n  outliers: number[]\n  outlierCount: number\n}\n\n/**\n * The quantile at `p`, interpolated between the two neighbouring order\n * statistics.\n *\n * This is the R type 7 / NumPy default definition, and it is stated here\n * because there are nine of them and they disagree: on `[1, 2, 3, 4]` the\n * lower quartile is 1.75 under this rule and 1.5 under the \"median of the\n * lower half\" rule most people were taught. Two box plots of the same data\n * drawn under different rules are two different pictures, so the package\n * picks one and says which.\n */\nfunction quantile(sorted: number[], p: number): number {\n  if (sorted.length === 0) return Number.NaN\n  if (sorted.length === 1) return sorted[0]!\n\n  const h = (sorted.length - 1) * p\n  const lower = sorted[Math.floor(h)]!\n  const upper = sorted[Math.ceil(h)]!\n  return lower + (h - Math.floor(h)) * (upper - lower)\n}\n\n/** Raw observations, reduced to a five-number summary plus its outliers. */\nfunction summarise(name: string, values: number[]): ResolvedBox | null {\n  const clean = values.filter(Number.isFinite).sort((a, b) => a - b)\n  if (clean.length === 0) return null\n\n  const q1 = quantile(clean, 0.25)\n  const median = quantile(clean, 0.5)\n  const q3 = quantile(clean, 0.75)\n  const iqr = q3 - q1\n  const low = q1 - TUKEY_FENCE * iqr\n  const high = q3 + TUKEY_FENCE * iqr\n\n  const inside = clean.filter((value) => value >= low && value <= high)\n  const outliers = clean.filter((value) => value < low || value > high)\n\n  return {\n    name,\n    // The whiskers stop at the most extreme observation still inside the\n    // fence, not at the fence itself. A whisker drawn to `q1 - 1.5 × IQR`\n    // claims a reading that may not exist in the data.\n    min: inside.length > 0 ? inside[0]! : clean[0]!,\n    q1,\n    median,\n    q3,\n    max: inside.length > 0 ? inside[inside.length - 1]! : clean[clean.length - 1]!,\n    outliers,\n    outlierCount: outliers.length,\n    count: clean.length,\n  }\n}\n\n/** Every datum, in the one shape the marks read. */\nfunction resolve(data: BoxPlotDatum[]): ResolvedBox[] {\n  return data.flatMap((datum) => {\n    if (datum.values) {\n      const summary = summarise(datum.name, datum.values)\n      return summary ? [summary] : []\n    }\n    const outliers = datum.outliers ?? []\n    return [{ ...datum, outliers, outlierCount: outliers.length }]\n  })\n}\n\n/**\n * The value axis's span.\n *\n * Not anchored at zero, unlike a bar chart's: a box plot compares\n * DISTRIBUTIONS, and dragging the axis to zero to be honest about bar length\n * flattens every box into the same band of pixels. The honesty a box plot owes\n * is a labelled axis, which it has.\n */\nfunction valueDomain(boxes: ResolvedBox[]): [number, number] {\n  const values = boxes.flatMap((box) => [box.min, box.max, ...box.outliers])\n  if (values.length === 0) return [0, 1]\n\n  const low = Math.min(...values)\n  const high = Math.max(...values)\n  const pad = (high - low || Math.abs(high) || 1) * DOMAIN_PADDING\n  return [low - pad, high + pad]\n}\n\ninterface BoxPlotContextValue {\n  config: ChartConfig\n  seriesKey: string\n  boxes: ResolvedBox[]\n  isHorizontal: boolean\n  domain: [number, number]\n  formatValue: (value: number) => string\n}\n\nconst BoxPlotContext = createContext<BoxPlotContextValue | null>(null)\n\nfunction useBoxPlot(): BoxPlotContextValue {\n  const context = useContext(BoxPlotContext)\n  if (!context) throw new Error('A box plot part must be rendered inside <BoxPlot>')\n  return context\n}\n\nexport interface BoxPlotProps {\n  /**\n   * The single series — its label and its paint. Only the FIRST entry is read;\n   * a box plot has one measurement and as many categories as it has boxes.\n   */\n  config?: ChartConfig\n  /** One entry per category, as raw observations or as a summary. */\n  data: BoxPlotDatum[]\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /** The composed parts — axes, grid, tooltip, and `<BoxPlot.Boxes>`. */\n  children: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Escape hatch onto the raw Recharts chart element. */\n  chartProps?: ComponentProps<typeof RechartsBarChart>\n  /**\n   * Which way the boxes run. Reach for `horizontal` when the category names\n   * are long enough to need rotating under a column.\n   */\n  orientation?: BoxPlotOrientation\n  /** Formats every number the chart prints — ticks, tooltip, table. */\n  formatValue?: (value: number) => string\n  /** Drops the hidden table view. Only correct when the page prints the data itself. */\n  hideDataTable?: boolean\n  /**\n   * What the chart shows when it has nothing to draw. `false` keeps the axes,\n   * for a chart whose emptiness is itself the reading.\n   */\n  empty?: ChartEmptyProps | false\n}\n\n/**\n * The spread of a measurement, per category — median, middle half, reach, and\n * the points that sit outside it.\n *\n * The form to reach for when the question is \"how variable is this\", and the\n * one that answers it in a tenth of the ink a histogram per category would\n * take. Six response-time distributions fit across one screen as six boxes;\n * as six histograms they do not fit at all.\n *\n * **What a box plot hides is multimodality.** A box is five numbers, and five\n * numbers cannot tell a single hump from two. A bimodal distribution — a fast\n * cache path and a slow database path, two cohorts inside one average — draws\n * exactly the same box as a smooth one centred in the same place, and the\n * reader has no way to tell from the picture that the middle of the box is a\n * value almost nothing takes. It also hides sample size: a box over six points\n * and a box over six thousand are drawn identically, which is why `count` is\n * worth carrying and why a notch, which does read `count`, is worth turning on\n * when medians are being compared. When the SHAPE of one distribution is the\n * question, reach for `<Histogram>`; when there are few enough observations to\n * draw them all, reach for `<ScatterChart>` and plot the points.\n *\n * Recharts earns its place here: the boxes need a shared value axis with real\n * ticks, a category axis, a grid and a tooltip, which is most of a cartesian\n * chart. What it does not have is a box mark, so each box is drawn as a custom\n * shape over a range bar — the bar supplies the category band and the scale,\n * and the glyph inside it is ours.\n *\n * @example\n * <BoxPlot title=\"Response time by region\" data={regions}>\n *   <BoxPlot.Grid />\n *   <BoxPlot.XAxis />\n *   <BoxPlot.YAxis label=\"ms\" />\n *   <BoxPlot.Tooltip />\n *   <BoxPlot.Boxes showOutliers />\n * </BoxPlot>\n *\n * @example\n * // Raw observations, summarised for you with Tukey's fences.\n * const data = [{ name: 'Sydney', values: [180, 194, 210, 205, 640] }]\n */\nexport function BoxPlot({\n  config = DEFAULT_CONFIG,\n  data,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  chartProps,\n  orientation = 'vertical',\n  formatValue = defaultTick,\n  hideDataTable = false,\n  empty,\n}: BoxPlotProps) {\n  const chartId = useId().replace(/:/g, '')\n  const isHorizontal = orientation === 'horizontal'\n  const seriesKey = Object.keys(config)[0] ?? 'value'\n\n  const boxes = useMemo(() => resolve(data), [data])\n  const domain = useMemo(() => valueDomain(boxes), [boxes])\n\n  const context = useMemo<BoxPlotContextValue>(\n    () => ({ config, seriesKey, boxes, isHorizontal, domain, formatValue }),\n    [config, seriesKey, boxes, isHorizontal, domain, formatValue],\n  )\n\n  const isEmpty = empty !== false && boxes.length === 0\n\n  return (\n    <BoxPlotContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={\n          hideDataTable\n            ? false\n            : {\n                rows: boxes as unknown as Record<string, unknown>[],\n                rowKey: 'name',\n                columns: [\n                  { key: 'min', label: 'Minimum' },\n                  { key: 'q1', label: 'Lower quartile' },\n                  { key: 'median', label: 'Median' },\n                  { key: 'q3', label: 'Upper quartile' },\n                  { key: 'max', label: 'Maximum' },\n                  { key: 'outlierCount', label: 'Outliers' },\n                ],\n              }\n        }\n      >\n        {isEmpty ? (\n          <ChartEmpty {...(empty || {})} />\n        ) : (\n          <ChartContainer config={config}>\n            <RechartsBarChart\n              id={chartId}\n              accessibilityLayer\n              margin={CHART_MARGIN}\n              // Recharts' `layout` names the axis the CATEGORIES run along,\n              // which is the opposite of what a reader means by a horizontal\n              // chart. The flip is done once, here.\n              layout={isHorizontal ? 'vertical' : 'horizontal'}\n              data={boxes}\n              barCategoryGap=\"30%\"\n              {...chartProps}\n            >\n              {children}\n            </RechartsBarChart>\n          </ChartContainer>\n        )}\n      </ChartFigure>\n    </BoxPlotContext.Provider>\n  )\n}\n\nexport interface BoxPlotBoxesProps {\n  /** Draws the points outside the fences as individual dots. */\n  showOutliers?: boolean\n  /**\n   * Pinches the box in at the median by `1.58 × IQR / √n`.\n   *\n   * A confidence interval on the median drawn INSIDE the shape it belongs to,\n   * which is the only place a reader will actually look at it. Needs `count`\n   * on every box; a box without one is drawn square.\n   */\n  notch?: boolean\n  /** Escape hatch onto the range bar the boxes are drawn over. */\n  barProps?: ComponentProps<typeof RechartsBar>\n}\n\n/**\n * The boxes themselves.\n *\n * One range bar per category spanning `min` to `max`, replaced by a custom\n * shape: the bar is there for the category band and the scale, and nothing of\n * it is painted.\n */\nfunction Boxes({ showOutliers = true, notch = false, barProps }: BoxPlotBoxesProps) {\n  const { config, seriesKey, isHorizontal } = useBoxPlot()\n  const id = useId().replace(/:/g, '')\n\n  return (\n    <>\n      <RechartsBar\n        // The whisker span. Recharts reads a two-element value as a floating\n        // bar, which is what puts the rect between two data values rather than\n        // between a value and the baseline.\n        dataKey={(row: unknown) => {\n          const box = row as ResolvedBox\n          return [box.min, box.max]\n        }}\n        name={seriesKey}\n        isAnimationActive={false}\n        fill=\"transparent\"\n        shape={(props: unknown) => (\n          <BoxShape\n            {...(props as BoxGeometry)}\n            id={id}\n            seriesKey={seriesKey}\n            isHorizontal={isHorizontal}\n            showOutliers={showOutliers}\n            notch={notch}\n          />\n        )}\n        activeBar={(props: unknown) => (\n          <BoxShape\n            {...(props as BoxGeometry)}\n            id={id}\n            seriesKey={seriesKey}\n            isHorizontal={isHorizontal}\n            showOutliers={showOutliers}\n            notch={notch}\n          />\n        )}\n        {...barProps}\n      />\n      <defs>\n        <SeriesGradient\n          id={id}\n          dataKey={seriesKey}\n          config={config}\n          direction={isHorizontal ? 'horizontal' : 'vertical'}\n        />\n      </defs>\n    </>\n  )\n}\n\n/** The geometry Recharts hands a custom bar shape, plus the row behind it. */\ninterface BoxGeometry {\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n  payload?: ResolvedBox\n}\n\ninterface BoxShapeProps extends BoxGeometry {\n  id: string\n  seriesKey: string\n  isHorizontal: boolean\n  showOutliers: boolean\n  notch: boolean\n}\n\n/**\n * One drawn box: whisker, caps, box, median, and any outliers.\n *\n * The value scale is recovered from the bar's own rectangle — `min` sits at one\n * end of it and `max` at the other, and the axis between them is linear, so any\n * other value is one interpolation away, INCLUDING the outliers past both ends.\n * Reading the scale back out of the geometry rather than re-deriving it is what\n * keeps the glyph aligned with the ticks when a call site overrides the axis's\n * domain. A category whose whole distribution is one repeated value gives a\n * rectangle with no extent to read, and only there does it fall back to the\n * plot area and the chart's own domain.\n */\nfunction BoxShape({\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  payload,\n  id,\n  seriesKey,\n  isHorizontal,\n  showOutliers,\n  notch,\n}: BoxShapeProps) {\n  const plot = usePlotArea()\n  const { domain } = useBoxPlot()\n\n  if (!payload) return null\n\n  const box = payload\n  const span = box.max - box.min\n  const extent = isHorizontal ? width : height\n\n  const scale = (value: number): number => {\n    if (span !== 0 && extent > 0) {\n      return isHorizontal\n        ? x + ((value - box.min) / span) * width\n        : y + ((box.max - value) / span) * height\n    }\n    if (!plot) return isHorizontal ? x : y\n    const [low, high] = domain\n    const range = high - low || 1\n    return isHorizontal\n      ? plot.x + ((value - low) / range) * plot.width\n      : plot.y + ((high - value) / range) * plot.height\n  }\n\n  // The band the glyph is centred in: the bar's own thickness across the\n  // category axis.\n  const bandStart = isHorizontal ? y : x\n  const bandSize = isHorizontal ? height : width\n  const centre = bandStart + bandSize / 2\n  const capHalf = bandSize / 4\n  const dotRadius = Math.max(2, Math.min(3.5, bandSize / 8))\n\n  const fill = `url(#${id}-colors-${seriesKey})`\n  const stroke = 'var(--ink)'\n\n  const whisker = (from: number, to: number, atCap: boolean) => {\n    const a = scale(from)\n    const b = scale(to)\n    return (\n      <>\n        <line\n          x1={isHorizontal ? a : centre}\n          y1={isHorizontal ? centre : a}\n          x2={isHorizontal ? b : centre}\n          y2={isHorizontal ? centre : b}\n          stroke={stroke}\n          strokeWidth={1}\n        />\n        {atCap && (\n          <line\n            x1={isHorizontal ? b : centre - capHalf}\n            y1={isHorizontal ? centre - capHalf : b}\n            x2={isHorizontal ? b : centre + capHalf}\n            y2={isHorizontal ? centre + capHalf : b}\n            stroke={stroke}\n            strokeWidth={1}\n          />\n        )}\n      </>\n    )\n  }\n\n  const q1px = scale(box.q1)\n  const q3px = scale(box.q3)\n  const medianPx = scale(box.median)\n  const boxFrom = Math.min(q1px, q3px)\n  const boxSize = Math.abs(q3px - q1px)\n\n  const notchBounds = notch ? notchAt(box) : null\n  const body = notchBounds ? (\n    <polygon\n      points={notchPoints({\n        bandStart,\n        bandSize,\n        isHorizontal,\n        q1: q1px,\n        q3: q3px,\n        median: medianPx,\n        low: scale(notchBounds[0]),\n        high: scale(notchBounds[1]),\n      })}\n      fill={fill}\n      fillOpacity=\"var(--chart-fill)\"\n      stroke={stroke}\n      strokeWidth={1}\n      strokeLinejoin=\"round\"\n    />\n  ) : (\n    <rect\n      x={isHorizontal ? boxFrom : bandStart}\n      y={isHorizontal ? bandStart : boxFrom}\n      width={isHorizontal ? Math.max(1, boxSize) : bandSize}\n      height={isHorizontal ? bandSize : Math.max(1, boxSize)}\n      fill={fill}\n      // The box is a region, not a value, so it takes the translucent-mark\n      // token rather than a literal — the one number in the system that is\n      // different on each ground.\n      fillOpacity=\"var(--chart-fill)\"\n      stroke={stroke}\n      strokeWidth={1}\n    />\n  )\n\n  return (\n    <g>\n      {whisker(box.q1, box.min, true)}\n      {whisker(box.q3, box.max, true)}\n      {body}\n      {/* The median is the one reading a box plot exists to give, so it is the\n          heaviest stroke in the glyph — everything else around it is a\n          hairline. */}\n      <line\n        x1={isHorizontal ? medianPx : bandStart}\n        y1={isHorizontal ? bandStart : medianPx}\n        x2={isHorizontal ? medianPx : bandStart + bandSize}\n        y2={isHorizontal ? bandStart + bandSize : medianPx}\n        stroke={stroke}\n        strokeWidth={2}\n      />\n      {showOutliers &&\n        box.outliers.map((value, index) => (\n          <circle\n            key={`${value}-${index}`}\n            cx={isHorizontal ? scale(value) : centre}\n            cy={isHorizontal ? centre : scale(value)}\n            r={dotRadius}\n            // Hollow, so a cluster of outliers at one value still reads as\n            // several points rather than as one blot.\n            fill=\"var(--chart-surface)\"\n            stroke={stroke}\n            strokeWidth={1}\n          />\n        ))}\n    </g>\n  )\n}\n\n/** The notch's bounds, or null when this box cannot carry one. */\nfunction notchAt(box: ResolvedBox): [number, number] | null {\n  if (!box.count || box.count <= 0) return null\n\n  const half = (NOTCH_FACTOR * (box.q3 - box.q1)) / Math.sqrt(box.count)\n  // Clamped into the box: a notch wider than the middle half would be drawn\n  // turning the box inside out, which is the standard \"the sample is too small\n  // for this comparison\" artefact and reads as a rendering fault instead.\n  return [Math.max(box.q1, box.median - half), Math.min(box.q3, box.median + half)]\n}\n\n/** The eight-sided box a notch turns the rectangle into. */\nfunction notchPoints({\n  bandStart,\n  bandSize,\n  isHorizontal,\n  q1,\n  q3,\n  median,\n  low,\n  high,\n}: {\n  bandStart: number\n  bandSize: number\n  isHorizontal: boolean\n  q1: number\n  q3: number\n  median: number\n  low: number\n  high: number\n}): string {\n  const near = bandStart\n  const far = bandStart + bandSize\n  const inset = bandSize * NOTCH_INSET\n  const value = [q1, low, median, high, q3]\n  const across = [near, near, near + inset, near, near]\n  const back = [far, far, far - inset, far, far]\n\n  const points = [\n    ...value.map((v, i) => [v, across[i]] as const),\n    ...value.map((v, i) => [v, back[i]] as const).reverse(),\n  ]\n\n  return points\n    .map(([v, a]) => (isHorizontal ? `${v},${a}` : `${a},${v}`))\n    .join(' ')\n}\n\n/**\n * The category axis when the boxes stand up, the value axis when they lie down.\n * The type is resolved from the orientation so a consumer never has to know\n * which way round Recharts wants it.\n */\nfunction XAxis({\n  dataKey,\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  minTickGap = 8,\n  type,\n  label,\n  tickFormatter,\n  domain,\n  ...rest\n}: ChartXAxisProps) {\n  const { isHorizontal, domain: valueSpan, formatValue } = useBoxPlot()\n\n  return (\n    <RechartsXAxis\n      dataKey={dataKey ?? (isHorizontal ? undefined : 'name')}\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      minTickGap={minTickGap}\n      type={type ?? (isHorizontal ? 'number' : 'category')}\n      domain={domain ?? (isHorizontal ? valueSpan : undefined)}\n      tickFormatter={tickFormatter ?? (isHorizontal ? formatValue : undefined)}\n      {...rest}\n    >\n      {axisLabel(label, 'x')}\n    </RechartsXAxis>\n  )\n}\n\n/** The other axis, resolved the same way. */\nfunction YAxis({\n  dataKey,\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  minTickGap = 8,\n  width = 'auto',\n  type,\n  label,\n  tickFormatter,\n  domain,\n  ...rest\n}: ChartYAxisProps) {\n  const { isHorizontal, domain: valueSpan, formatValue } = useBoxPlot()\n\n  return (\n    <RechartsYAxis\n      dataKey={dataKey ?? (isHorizontal ? 'name' : undefined)}\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      minTickGap={minTickGap}\n      width={width}\n      type={type ?? (isHorizontal ? 'category' : 'number')}\n      domain={domain ?? (isHorizontal ? undefined : valueSpan)}\n      tickFormatter={tickFormatter ?? (isHorizontal ? undefined : formatValue)}\n      {...rest}\n    >\n      {axisLabel(label, 'y')}\n    </RechartsYAxis>\n  )\n}\n\n/** Rules across the value axis — whichever axis that is for this orientation. */\nfunction Grid({\n  strokeDasharray = '3 3',\n  vertical,\n  horizontal,\n  ...rest\n}: ComponentProps<typeof CartesianGrid>) {\n  const { isHorizontal } = useBoxPlot()\n  return (\n    <CartesianGrid\n      strokeDasharray={strokeDasharray}\n      vertical={vertical ?? isHorizontal}\n      horizontal={horizontal ?? !isHorizontal}\n      {...rest}\n    />\n  )\n}\n\n/**\n * The hover panel, printing all five numbers.\n *\n * The generic tooltip prints one value per series, and a box has five — so it\n * is the whole summary or nothing. Without it the reader can only read the\n * median off the axis, which is the one thing the shape already gives them.\n */\nfunction Tooltip({ variant = 'solid', roundness = 'lg', defaultIndex }: ChartTooltipSlotProps) {\n  const { formatValue } = useBoxPlot()\n\n  return (\n    <ChartTooltip\n      cursor={false}\n      defaultIndex={defaultIndex}\n      content={(props) => {\n        const { active, payload } = props as unknown as {\n          active?: boolean\n          payload?: { payload?: ResolvedBox }[]\n        }\n        const box = payload?.[0]?.payload\n        if (!active || !box) return <span className=\"p-4\" />\n\n        const rows: [string, number][] = [\n          ['Maximum', box.max],\n          ['Upper quartile', box.q3],\n          ['Median', box.median],\n          ['Lower quartile', box.q1],\n          ['Minimum', box.min],\n        ]\n\n        return (\n          <div\n            className={cn(\n              'grid min-w-40 gap-1.5 border border-(--rule-2) px-2.5 py-1.5 text-xs',\n              roundness === 'sm' && 'rounded-(--radius-sm)',\n              roundness === 'md' && 'rounded-(--radius)',\n              roundness === 'lg' && 'rounded-(--radius-lg)',\n              variant === 'frosted'\n                ? 'bg-(--chart-surface)/75 backdrop-blur-sm'\n                : 'bg-(--chart-surface)',\n            )}\n          >\n            <div className=\"font-medium text-(--ink)\">{box.name}</div>\n            {rows.map(([name, value]) => (\n              <div key={name} className=\"flex justify-between gap-4 leading-none\">\n                <span className=\"text-(--ink-3-aa)\">{name}</span>\n                <span className=\"font-mono font-medium tabular-nums text-(--ink)\">\n                  {formatValue(value)}\n                </span>\n              </div>\n            ))}\n            {/* Sample size sits with the summary rather than under the box: a\n                median over six points and a median over six thousand are the\n                same mark, and this is the only place the difference appears. */}\n            {box.count !== undefined && (\n              <div className=\"flex justify-between gap-4 leading-none\">\n                <span className=\"text-(--ink-3-aa)\">Observations</span>\n                <span className=\"font-mono font-medium tabular-nums text-(--ink)\">\n                  {box.count.toLocaleString()}\n                </span>\n              </div>\n            )}\n          </div>\n        )\n      }}\n    />\n  )\n}\n\n/** The decorative plate behind the plot. */\nfunction Background({ variant }: { variant: ChartBackgroundVariant }) {\n  return <ChartBackground variant={variant} />\n}\n\nBoxPlot.Boxes = Boxes\nBoxPlot.XAxis = XAxis\nBoxPlot.YAxis = YAxis\nBoxPlot.Grid = Grid\nBoxPlot.Tooltip = Tooltip\nBoxPlot.Background = Background\nBoxPlot.ReferenceLine = ReferenceLine\nBoxPlot.ReferenceBand = ReferenceBand\nBoxPlot.Annotation = Annotation\n\nexport default BoxPlot\n"],"mappings":"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","names":[]}

package/dist/charts/BulletChart/BulletChart.d.ts

@@ -0,0 +1,100 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ChartEmptyProps } from '../lib/empty.js';
+
+/** One measure, its target, and the bands it is read against. */
+interface BulletMeasure {
+    /** What is being measured. Doubles as the row's key, so it must be unique. */
+    name: string;
+    /** The number the row is about. */
+    value: number;
+    /**
+     * The number the measure is being judged against — last year, the budget,
+     * the SLO. Drawn as a rule across the bar, not as a second bar.
+     */
+    target?: number;
+    /**
+     * The qualitative bands, as ascending UPPER bounds. `[60, 80]` on a 0–100
+     * scale draws three bands: 0–60, 60–80, 80–100.
+     *
+     * Few's limit is five, and it is a real one: past that the shades stop being
+     * separable and the bands become a gradient nobody can read a boundary off.
+     */
+    ranges?: number[];
+    /** The scale, as `[min, max]`. Falls back to the chart's, then to the data. */
+    domain?: [number, number];
+    /** A second line under the name — the unit, the window, the owner. */
+    detail?: ReactNode;
+}
+interface BulletChartProps {
+    /**
+     * What the chart shows, in a sentence a reader could act on. Required, and
+     * announced to a screen reader even when it is not printed.
+     */
+    title: string;
+    /** Prints the title above the rows instead of hiding it from sight. */
+    showTitle?: boolean;
+    /** A line under the title — the unit, the window, the caveat. */
+    description?: ReactNode;
+    /** One entry per measure. Order is the reading order; it is not sorted. */
+    data: BulletMeasure[];
+    /**
+     * The bands every measure falls back to, as ascending upper bounds.
+     *
+     * Shared bands only mean something when the measures share a scale. Where
+     * they do not — a latency beside a conversion rate — put `ranges` and
+     * `domain` on each measure instead.
+     */
+    ranges?: number[];
+    /** The scale every measure falls back to, as `[min, max]`. */
+    domain?: [number, number];
+    /** Formats every number the chart prints. */
+    formatValue?: (value: number) => string;
+    /** Prints the scale's two ends under each track. */
+    showScale?: boolean;
+    /** Merged onto the figure, last, so a call site can size or space it. */
+    className?: string;
+    /** Drops the hidden table view. Only correct when the page prints the data itself. */
+    hideDataTable?: boolean;
+    /** What the chart shows when it has nothing to draw. */
+    empty?: ChartEmptyProps;
+}
+/**
+ * A measure, its target, and the bands that say whether the number is any good
+ * — one dense row per thing being tracked.
+ *
+ * Stephen Few designed this to replace the dashboard gauge, and the argument
+ * has held: a speedometer spends a whole card saying one number badly, where a
+ * bullet graph says the same number, its target, and the qualitative context
+ * around it in the height of a line of text. Ten of them stack into a status
+ * page a reader can scan in one pass.
+ *
+ * What it will not do is show change over time. A bullet graph is one instant,
+ * and `target` is the only comparison it carries; when the question is
+ * "how did we get here" it wants a `<LineChart>`, and when several measures
+ * have to be compared against each OTHER rather than each against its own
+ * target, a `<BarList>` ranks them and this does not.
+ *
+ * **The bands are the part to be careful with.** They are a judgement — someone
+ * decided that 80 is "good" — drawn in the same ink as the measurement, and a
+ * reader has no way to tell an agreed threshold from a number somebody typed.
+ * They also compress: a value near the top of the scale sits in the same band
+ * whether it cleared the boundary by a point or by thirty. The band answers
+ * "is this acceptable", never "by how much".
+ *
+ * No rendering engine, deliberately — this is the one chart in the set with
+ * nothing to compute. Each row is a single linear scale with no axis, no ticks
+ * and no shared plot area, so it is laid out as HTML: the bands and the bar are
+ * inline-axis offsets, which means the whole chart mirrors correctly in a
+ * right-to-left document, where an SVG drawn in user space would not.
+ *
+ * @example
+ * <BulletChart
+ *   title="Service levels against target"
+ *   data={[{ name: 'Uptime', value: 99.4, target: 99.9, ranges: [98, 99.5] }]}
+ *   domain={[95, 100]}
+ * />
+ */
+declare function BulletChart({ title, showTitle, description, data, ranges, domain, formatValue, showScale, className, hideDataTable, empty, }: BulletChartProps): react.JSX.Element;
+
+export { BulletChart, type BulletChartProps, type BulletMeasure, BulletChart as default };