@crewlethq/ui 0.4.4 → 0.5.0

package/dist/chunk-RJM4QCGG.js

@@ -0,0 +1,550 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Charts-B3YEF7R4.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useId } from 'react';
+
+// src/Charts/dataColor.ts
+var DATA_COLORS = [
+  "var(--color-data-1)",
+  "var(--color-data-2)",
+  "var(--color-data-3)",
+  "var(--color-data-4)"
+];
+var DATA_COLOR_OTHER = "var(--color-data-other)";
+function dataColor(index) {
+  return DATA_COLORS[index] ?? DATA_COLOR_OTHER;
+}
+function Legend({ items, className }) {
+  return (
+    /*
+     * `role="list"` although a `ul` already has one, which is why the lint
+     * rule that calls it redundant is silenced here rather than obeyed: the
+     * stylesheet takes the markers off, and WebKit answers a marker-less list
+     * as a group of paragraphs, so a reader is no longer told how many series
+     * there are before they are read. The role puts that back.
+     */
+    // eslint-disable-next-line jsx-a11y/no-redundant-roles
+    /* @__PURE__ */ jsx("ul", { role: "list", className: cx("crewlet-legend", className), children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "crewlet-legend__item", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "crewlet-legend__swatch",
+          "aria-hidden": true,
+          style: { "--crewlet-legend-swatch-color": item.color ?? dataColor(index) }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "crewlet-legend__label", children: item.label }),
+      item.value != null && /* @__PURE__ */ jsx("span", { className: "crewlet-legend__value", children: item.value })
+    ] }, item.id)) })
+  );
+}
+function BarList({
+  data,
+  layout = "stacked",
+  max,
+  limit,
+  moreLabel = (remaining) => `and ${remaining} more`,
+  emptyLabel = "Nothing recorded in this window",
+  className
+}) {
+  const capped = limit != null;
+  const shown = capped ? data.slice(0, limit) : data;
+  const top = max ?? Math.max(1, ...data.map((datum) => datum.value));
+  const remaining = capped ? Math.max(0, data.length - limit) : 0;
+  if (!shown.length) return /* @__PURE__ */ jsx("p", { className: "crewlet-bar-list__empty", children: emptyLabel });
+  return (
+    // A list, and said to be one: the markers are off, and WebKit drops the
+    // list role with them. See Legend for the same note, including why the
+    // redundant-role rule is silenced rather than obeyed.
+    // eslint-disable-next-line jsx-a11y/no-redundant-roles
+    /* @__PURE__ */ jsxs("ul", { role: "list", className: cx("crewlet-bar-list", `crewlet-bar-list--${layout}`, className), children: [
+      shown.map((datum, index) => {
+        const width = top > 0 && datum.value > 0 ? Math.max(1, datum.value / top * 100) : 0;
+        const bar = width > 0 ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "crewlet-bar-list__bar",
+            "aria-hidden": true,
+            style: {
+              width: `${width}%`,
+              "--crewlet-bar-list-bar-color": datum.color ?? dataColor(index)
+            }
+          }
+        ) : null;
+        const value = /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__value", children: datum.display ?? datum.value.toLocaleString() });
+        const body = layout === "beside" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-bar-list__names", children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__label", children: datum.label }),
+            datum.sub && /* @__PURE__ */ jsxs(Fragment, { children: [
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__sub", children: datum.sub })
+            ] })
+          ] }),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__plot", children: /* @__PURE__ */ jsxs("span", { className: "crewlet-bar-list__scale", children: [
+            bar,
+            value
+          ] }) })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-bar-list__head", children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__label", children: datum.label }),
+            " ",
+            value
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__track", "aria-hidden": true, children: bar }),
+          datum.sub && /* @__PURE__ */ jsxs(Fragment, { children: [
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__sub", children: datum.sub })
+          ] })
+        ] });
+        return /* @__PURE__ */ jsx("li", { className: "crewlet-bar-list__item", children: datum.href ? /* @__PURE__ */ jsx("a", { className: "crewlet-bar-list__row crewlet-bar-list__row--pressable", href: datum.href, children: body }) : datum.onSelect ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "crewlet-bar-list__row crewlet-bar-list__row--pressable",
+            onClick: datum.onSelect,
+            children: body
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__row", children: body }) }, datum.id);
+      }),
+      remaining > 0 && /* @__PURE__ */ jsx("li", { className: "crewlet-bar-list__more", children: moreLabel(remaining) })
+    ] })
+  );
+}
+function ChartTooltip({ open, anchor, title, rows = [], total, className }) {
+  const start = anchor?.start ?? 0;
+  const end = anchor?.end ?? start;
+  const after = (start + end) / 2 <= 0.5;
+  const at = after ? end : start;
+  return /* @__PURE__ */ jsx("div", { className: "crewlet-chart-tooltip-live", "aria-live": "polite", "aria-atomic": "true", children: open ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("crewlet-chart-tooltip", after ? "crewlet-chart-tooltip--after" : "crewlet-chart-tooltip--before", className),
+      style: { left: `${(Math.min(Math.max(at, 0), 1) * 100).toFixed(3)}%` },
+      children: [
+        title != null && /* @__PURE__ */ jsx("p", { className: "crewlet-chart-tooltip__title", children: title }),
+        rows.length > 0 && // A list, said to be one: the markers are off, and WebKit drops the
+        // role with them (see Legend).
+        // eslint-disable-next-line jsx-a11y/no-redundant-roles
+        /* @__PURE__ */ jsx("ul", { role: "list", className: "crewlet-chart-tooltip__rows", children: rows.map((row) => /* @__PURE__ */ jsxs("li", { className: "crewlet-chart-tooltip__row", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "crewlet-chart-tooltip__swatch",
+              "aria-hidden": true,
+              style: row.color == null ? void 0 : { "--crewlet-chart-tooltip-swatch-color": row.color }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-chart-tooltip__name", children: row.name }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-chart-tooltip__value", children: row.value })
+        ] }, row.id)) }),
+        total != null && /* @__PURE__ */ jsxs("p", { className: "crewlet-chart-tooltip__total", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-chart-tooltip__name", children: total.label ?? "Total" }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-chart-tooltip__value", children: total.value })
+        ] })
+      ]
+    }
+  ) : null });
+}
+function useChartHover(count) {
+  const [reading, setReading] = useState({
+    index: null,
+    source: null
+  });
+  const remembered = useRef(null);
+  const clamp = (index) => Math.min(Math.max(index, 0), count - 1);
+  const active = reading.index == null || count === 0 ? null : clamp(reading.index);
+  const open = useCallback((index, source) => {
+    if (index != null) remembered.current = index;
+    setReading(index == null ? { index: null, source: null } : { index, source });
+  }, []);
+  const point = useCallback((index) => open(index, "pointer"), [open]);
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      if (active == null) return;
+      event.preventDefault();
+      event.stopPropagation();
+      open(null, "keyboard");
+      return;
+    }
+    if (count === 0) return;
+    const from = active ?? (remembered.current == null ? null : clamp(remembered.current));
+    let next;
+    switch (event.key) {
+      case "ArrowLeft":
+        next = from == null ? count - 1 : active == null ? from : from - 1;
+        break;
+      case "ArrowRight":
+        next = from == null ? 0 : active == null ? from : from + 1;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = count - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    open(clamp(next), "keyboard");
+  };
+  const onBlur = () => {
+    if (reading.index != null) open(null, "keyboard");
+  };
+  const onPointerLeave = () => {
+    if (reading.source === "pointer") open(null, "pointer");
+  };
+  return {
+    active,
+    source: active == null ? null : reading.source,
+    point,
+    plotProps: { tabIndex: 0, onKeyDown, onBlur, onPointerLeave }
+  };
+}
+function StackedBar({ segments, summary, format = (value) => value.toLocaleString(), className }) {
+  const named = useId();
+  const total = segments.reduce((sum, segment) => sum + Math.max(0, segment.value), 0);
+  const drawn = segments.map((segment, index) => ({ ...segment, color: segment.color ?? dataColor(index) })).filter((segment) => segment.value > 0);
+  const parts = drawn.map((segment) => ({
+    label: segment.label,
+    value: segment.value,
+    percent: total > 0 ? Math.round(segment.value / total * 100) : 0
+  }));
+  const sentence = summary ? summary(parts) : parts.map((part) => `${part.label}: ${format(part.value)} (${part.percent}%)`).join(", ");
+  const hover = useChartHover(drawn.length);
+  const active = hover.active == null ? null : drawn[hover.active];
+  const edges = drawn.reduce((at, segment) => [...at, at[at.length - 1] + segment.value / total], [0]);
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-stacked-bar", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-chart-frame", role: "group", "aria-labelledby": named, ...hover.plotProps, children: [
+      /* @__PURE__ */ jsx("div", { className: "crewlet-stacked-bar__track", "aria-hidden": true, children: drawn.map((segment, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "crewlet-stacked-bar__segment",
+          onPointerEnter: () => hover.point(index),
+          style: {
+            flexGrow: segment.value,
+            "--crewlet-stacked-bar-segment-color": segment.color
+          }
+        },
+        segment.id
+      )) }),
+      /* @__PURE__ */ jsx(
+        ChartTooltip,
+        {
+          open: active != null,
+          anchor: hover.active == null ? void 0 : { start: edges[hover.active], end: edges[hover.active + 1] },
+          rows: active == null || hover.active == null ? [] : [
+            {
+              id: active.id,
+              name: active.label,
+              value: `${format(active.value)} (${parts[hover.active].percent}%)`,
+              color: active.color
+            }
+          ],
+          total: active == null ? void 0 : { value: format(total) }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { id: named, children: sentence })
+  ] });
+}
+function ActivityStrip({ buckets, label, summary, className }) {
+  const peak = Math.max(1, ...buckets.map((bucket) => bucket.v));
+  const total = buckets.reduce((sum, bucket) => sum + bucket.v, 0);
+  const sentence = summary ? summary({ peak, total, buckets: buckets.length }) : `${label}. ${total.toLocaleString()} in ${buckets.length} buckets, peak ${peak.toLocaleString()}.`;
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-activity-strip", className), role: "img", "aria-label": sentence, children: buckets.map((bucket) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx("crewlet-activity-strip__cell", bucket.v > 0 && "is-active"),
+      style: {
+        /*
+         * A floor of a fifth, so a bucket with one event in it reads as a
+         * mark rather than as a line nobody can resolve, and an empty one
+         * keeps the baseline hairline that says the bucket existed.
+         */
+        "--crewlet-activity-strip-fill": bucket.v > 0 ? `${Math.max(20, bucket.v / peak * 100)}%` : "10%"
+      }
+    },
+    bucket.t
+  )) });
+}
+function TimeSeries({
+  series,
+  from,
+  to,
+  label,
+  height = "7.5rem",
+  format = (value) => value.toLocaleString(),
+  formatTime = (at) => new Date(at).toLocaleString(),
+  summary,
+  className
+}) {
+  const id = useId();
+  const width = 1e3;
+  const plot = 120;
+  const footer = 18;
+  const head = 6;
+  const span = Math.max(1, to - from);
+  const peaks = series.map((one) => Math.max(0, ...one.points.map((point) => point.v)));
+  const peak = Math.max(1, ...peaks);
+  const x = (at) => (at - from) / span * width;
+  const y = (value) => head + (1 - value / peak) * (plot - head - footer);
+  const instants = [...new Set(series.flatMap((one) => one.points.map((point) => point.t)))].sort((a, b) => a - b);
+  const hover = useChartHover(instants.length);
+  const reading = hover.active == null ? null : instants[hover.active];
+  const onPointerMove = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    if (box.width <= 0 || instants.length === 0) return;
+    const at = from + (event.clientX - box.left) / box.width * span;
+    let nearest = 0;
+    for (let index = 1; index < instants.length; index += 1) {
+      if (Math.abs(instants[index] - at) < Math.abs(instants[nearest] - at)) nearest = index;
+    }
+    hover.point(nearest);
+  };
+  const sentence = summary ? summary({ from, to, peak, series: series.map((one, index) => ({ name: one.name, peak: peaks[index] ?? 0 })) }) : `${label}. ${formatTime(from)} to ${formatTime(to)}, peak ${format(peak)}.`;
+  return /* @__PURE__ */ jsxs("figure", { className: cx("crewlet-time-series", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-chart-frame", role: "group", "aria-label": label, ...hover.plotProps, children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: "crewlet-chart",
+          viewBox: `0 0 ${width} ${plot}`,
+          preserveAspectRatio: "none",
+          style: { height },
+          role: "img",
+          "aria-label": sentence,
+          onPointerMove,
+          children: [
+            [0.25, 0.5, 0.75].map((fraction) => /* @__PURE__ */ jsx(
+              "line",
+              {
+                className: "crewlet-chart__grid-line",
+                x1: 0,
+                x2: width,
+                y1: y(peak * fraction),
+                y2: y(peak * fraction)
+              },
+              fraction
+            )),
+            /* @__PURE__ */ jsx("line", { className: "crewlet-chart__axis-line", x1: 0, x2: width, y1: plot - footer, y2: plot - footer }),
+            series.map((one, index) => {
+              const color = one.color ?? dataColor(index);
+              const points = [...one.points].sort((a, b) => a.t - b.t);
+              if (points.length === 0) return null;
+              const line = points.map((point) => `${x(point.t).toFixed(2)},${y(point.v).toFixed(2)}`).join(" ");
+              const first = points[0];
+              const last = points[points.length - 1];
+              const area = `${x(first.t).toFixed(2)},${plot - footer} ${line} ${x(last.t).toFixed(2)},${plot - footer}`;
+              return /* @__PURE__ */ jsxs("g", { children: [
+                /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.22" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+                ] }) }),
+                /* @__PURE__ */ jsx("polygon", { points: area, fill: `url(#${id}-${index})` }),
+                /* @__PURE__ */ jsx(
+                  "polyline",
+                  {
+                    className: "crewlet-chart__series",
+                    points: line,
+                    stroke: color,
+                    vectorEffect: "non-scaling-stroke"
+                  }
+                )
+              ] }, one.id);
+            }),
+            reading != null && /* @__PURE__ */ jsx(
+              "line",
+              {
+                className: "crewlet-chart__crosshair",
+                x1: x(reading),
+                x2: x(reading),
+                y1: 0,
+                y2: plot - footer,
+                vectorEffect: "non-scaling-stroke"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ChartTooltip,
+        {
+          open: reading != null,
+          anchor: reading == null ? void 0 : { start: (reading - from) / span },
+          title: reading == null ? void 0 : formatTime(reading),
+          rows: reading == null ? [] : series.flatMap((one, index) => {
+            const point = one.points.find((candidate) => candidate.t === reading);
+            return point ? [{ id: one.id, name: one.name, value: format(point.v), color: one.color ?? dataColor(index) }] : [];
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("figcaption", { className: "crewlet-time-series__scale", children: [
+      /* @__PURE__ */ jsx("span", { children: formatTime(from) }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "peak ",
+        format(peak)
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: formatTime(to) })
+    ] })
+  ] });
+}
+function Sparkline({
+  values,
+  color = DATA_COLOR_OTHER,
+  current = false,
+  height = "1.75rem",
+  className
+}) {
+  const width = 200;
+  const box = 28;
+  const classes = cx("crewlet-spark", current && "crewlet-spark--current", className);
+  if (values.length < 2) return /* @__PURE__ */ jsx("div", { className: classes, style: { height }, "aria-hidden": true });
+  const peak = Math.max(1, ...values);
+  const step = width / (values.length - 1);
+  const y = (value) => box - value / peak * (box - 2) - 1;
+  const points = values.map((value, index) => `${(index * step).toFixed(2)},${y(value).toFixed(2)}`).join(" ");
+  const last = values[values.length - 1];
+  return /* @__PURE__ */ jsxs("div", { className: classes, style: { height }, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("svg", { className: "crewlet-spark__plot", viewBox: `0 0 ${width} ${box}`, preserveAspectRatio: "none", children: /* @__PURE__ */ jsx("polyline", { className: "crewlet-chart__series", points, stroke: color, vectorEffect: "non-scaling-stroke" }) }),
+    current ? /* @__PURE__ */ jsx("span", { className: "crewlet-spark__current", style: { top: `${(y(last) / box * 100).toFixed(2)}%` } }) : null
+  ] });
+}
+function niceScale(peak, steps = 4) {
+  if (!(peak > 0)) return { top: steps, step: 1 };
+  const raw = peak / steps;
+  const magnitude = 10 ** Math.floor(Math.log10(raw));
+  const step = ([1, 2, 2.5, 5, 10].find((candidate) => candidate * magnitude >= raw) ?? 10) * magnitude;
+  const top = Number((Math.max(1, Math.ceil(peak / step - 1e-9)) * step).toPrecision(12));
+  return { top, step: Number(step.toPrecision(12)) };
+}
+var COMPACT = new Intl.NumberFormat(void 0, { notation: "compact", maximumFractionDigits: 1 });
+function StackedColumns({
+  series,
+  buckets,
+  hidden = [],
+  label,
+  legend = "below",
+  head,
+  height = "11.5rem",
+  format = (value) => COMPACT.format(value),
+  formatTime = (at) => new Date(at).toLocaleDateString(),
+  summary,
+  className
+}) {
+  const colored = series.map((one, index) => ({ ...one, color: one.color ?? dataColor(index) }));
+  const shown = colored.filter((one) => !hidden.includes(one.id));
+  const valueOf = (bucket, id) => Math.max(0, bucket.values[id] ?? 0);
+  const totals = buckets.map((bucket) => shown.reduce((sum, one) => sum + valueOf(bucket, one.id), 0));
+  const peak = Math.max(0, ...totals);
+  const { top, step } = niceScale(peak);
+  const intervals = Math.round(top / step);
+  const ticks = Array.from(
+    { length: intervals + 1 },
+    (_, index) => Number(((intervals - index) * step).toPrecision(12))
+  );
+  const hover = useChartHover(buckets.length);
+  const active = hover.active == null ? null : buckets[hover.active];
+  const first = buckets[0]?.t ?? null;
+  const last = buckets[buckets.length - 1]?.t ?? null;
+  const centre = Math.floor((buckets.length - 1) / 2);
+  const middle = buckets.length > 2 ? buckets[centre].t : null;
+  const facts = {
+    from: first,
+    to: last,
+    peak,
+    series: shown.map((one) => ({
+      name: one.name,
+      total: buckets.reduce((sum, bucket) => sum + valueOf(bucket, one.id), 0)
+    }))
+  };
+  const sentence = summary ? summary(facts) : first == null || last == null ? `${label}. Nothing recorded.` : `${label}. ${formatTime(first)} to ${formatTime(last)}, tallest ${format(peak)}. ${facts.series.map((one) => `${one.name} ${format(one.total)}`).join(", ")}.`;
+  const key = legend === "none" ? null : /* @__PURE__ */ jsx(
+    Legend,
+    {
+      className: cx("crewlet-stacked-columns__legend", `crewlet-stacked-columns__legend--${legend}`),
+      items: shown.map((one) => ({ id: one.id, label: one.name, color: one.color }))
+    }
+  );
+  const hasHead = head !== void 0 && head !== null && head !== false;
+  return /* @__PURE__ */ jsxs("figure", { className: cx("crewlet-stacked-columns", className), children: [
+    hasHead || legend === "head" ? /* @__PURE__ */ jsxs("div", { className: "crewlet-stacked-columns__head", children: [
+      hasHead ? /* @__PURE__ */ jsx("div", { className: "crewlet-stacked-columns__heading", children: head }) : null,
+      legend === "head" ? key : null
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "crewlet-stacked-columns__axis", "aria-hidden": true, style: { height }, children: ticks.map((tick) => /* @__PURE__ */ jsx("span", { className: "crewlet-stacked-columns__tick", children: format(tick) }, tick)) }),
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-chart-frame", role: "group", "aria-label": label, ...hover.plotProps, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "crewlet-stacked-columns__plot",
+          role: "img",
+          "aria-label": sentence,
+          style: { height },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "crewlet-stacked-columns__grid", "aria-hidden": true, children: ticks.map((tick) => /* @__PURE__ */ jsx("span", { className: "crewlet-stacked-columns__grid-line" }, tick)) }),
+            buckets.map((bucket, index) => {
+              const total = totals[index] ?? 0;
+              const parts = shown.filter((one) => valueOf(bucket, one.id) > 0);
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cx("crewlet-stacked-columns__slot", hover.active === index && "is-active"),
+                  onPointerEnter: () => hover.point(index),
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "crewlet-stacked-columns__column",
+                      style: { height: `${(total / top * 100).toFixed(3)}%` },
+                      children: parts.map((one) => /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "crewlet-stacked-columns__segment",
+                          "data-series": one.id,
+                          style: {
+                            flexGrow: valueOf(bucket, one.id),
+                            "--crewlet-stacked-columns-segment-color": one.color
+                          }
+                        },
+                        one.id
+                      ))
+                    }
+                  )
+                },
+                bucket.t
+              );
+            })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ChartTooltip,
+        {
+          open: active != null,
+          anchor: hover.active == null ? void 0 : { start: hover.active / buckets.length, end: (hover.active + 1) / buckets.length },
+          title: active == null ? void 0 : formatTime(active.t),
+          rows: active == null ? [] : shown.map((one) => ({ id: one.id, name: one.name, value: format(valueOf(active, one.id)), color: one.color })),
+          total: active == null || hover.active == null ? void 0 : { value: format(totals[hover.active] ?? 0) }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("figcaption", { className: "crewlet-stacked-columns__scale", children: [
+      /* @__PURE__ */ jsx("span", { children: first == null ? "" : formatTime(first) }),
+      middle != null && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "crewlet-stacked-columns__middle",
+          style: { left: `${((centre + 0.5) / buckets.length * 100).toFixed(3)}%` },
+          children: formatTime(middle)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { children: last == null || last === first ? "" : formatTime(last) })
+    ] }),
+    legend === "below" ? key : null
+  ] });
+}
+
+export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover };