@craftzbay/ui 0.10.0 → 0.11.1

package/dist-lib/components/ui/Chart.js

@@ -1,253 +1,487 @@
 "use client";
-import { jsx as i, jsxs as M } from "react/jsx-runtime";
-import { useId as T } from "react";
-import { cn as G } from "../../lib/utils.js";
-const w = [
+import { jsx as s, jsxs as $, Fragment as U } from "react/jsx-runtime";
+import { useId as oe, useState as K, useRef as ae, useCallback as se, useEffect as ie, useLayoutEffect as ce } from "react";
+import { cn as w } from "../../lib/utils.js";
+import { useStrings as X } from "../../hooks/use-strings.js";
+import { formatString as z } from "../../lib/strings.js";
+import { Skeleton as le } from "./Skeleton.js";
+const Ie = {
+  summary: ({ name: e, count: n, min: r, max: t, lastX: o, lastY: a }) => `${e}: ${n} points, min ${r}, max ${t}, last ${o}: ${a}`,
+  point: (e, n, r) => `${e ? `${e} — ` : ""}${n}: ${r}`,
+  series: (e, n) => `${e}, ${n} points. Use arrow keys to move between points.`
+};
+function V(e) {
+  return {
+    summary: ({ name: n, count: r, min: t, max: o, lastX: a, lastY: i }) => z(e.summary, { name: n, count: r, min: t, max: o, x: a, y: i }),
+    point: (n, r, t) => (n ? `${n} — ` : "") + z(e.point, { x: r, y: t }),
+    series: (n, r) => z(e.seriesNav, { name: n, count: r })
+  };
+}
+const q = [
   "var(--chart-1)",
   "var(--chart-2)",
   "var(--chart-3)",
   "var(--chart-4)",
   "var(--chart-5)",
   "var(--chart-6)"
-], A = 600, h = 6, W = 4, _ = 5;
-function K(t) {
-  const n = Math.abs(t), e = (r, a) => `${(Math.round(r * 10) / 10).toString()}${a}`;
-  return n >= 1e9 ? e(t / 1e9, "B") : n >= 1e6 ? e(t / 1e6, "M") : n >= 1e3 ? e(t / 1e3, "K") : Number.isInteger(t) ? String(t) : (Math.round(t * 100) / 100).toString();
-}
-function E(t, n) {
-  return n && n.length ? n : [{ data: t ?? [] }];
-}
-function B(t, n = !0) {
-  const e = t.flatMap((o) => o.data.map((c) => c.y)), r = n ? Math.min(0, ...e) : Math.min(...e), a = Math.max(...e, n ? 1 : -1 / 0);
-  return { min: r, max: a === -1 / 0 ? 1 : a, range: a - r || 1 };
-}
-function X(t, n, e, r) {
-  const a = A - h * 2, o = n - h * 2;
-  return { sx: (l) => t <= 1 ? h + a / 2 : h + l / (t - 1) * a, sy: (l) => h + o - (l - e) / r * o };
-}
-function U(t) {
-  if (t.length === 0) return "";
-  if (t.length < 3) return t.map((e, r) => `${r ? "L" : "M"}${e[0]},${e[1]}`).join(" ");
-  let n = `M${t[0][0]},${t[0][1]}`;
-  for (let e = 0; e < t.length - 1; e++) {
-    const r = t[e - 1] ?? t[e], a = t[e], o = t[e + 1], c = t[e + 2] ?? o, d = a[0] + (o[0] - r[0]) / 6, l = a[1] + (o[1] - r[1]) / 6, $ = o[0] - (c[0] - a[0]) / 6, y = o[1] - (c[1] - a[1]) / 6;
-    n += ` C${d.toFixed(1)},${l.toFixed(1)} ${$.toFixed(1)},${y.toFixed(1)} ${o[0].toFixed(1)},${o[1].toFixed(1)}`;
+], de = 600, S = 6;
+function ue() {
+  const e = ae(null), [n, r] = K(0);
+  return (typeof window > "u" ? ie : ce)(() => {
+    const o = e.current;
+    if (!o) return;
+    const a = () => r(o.clientWidth);
+    if (a(), typeof ResizeObserver > "u") return;
+    const i = new ResizeObserver(a);
+    return i.observe(o), () => i.disconnect();
+  }, []), { ref: e, width: n || de };
+}
+const he = 5;
+function fe(e) {
+  const n = Math.abs(e), r = (t, o) => `${(Math.round(t * 10) / 10).toString()}${o}`;
+  return n >= 1e9 ? r(e / 1e9, "B") : n >= 1e6 ? r(e / 1e6, "M") : n >= 1e3 ? r(e / 1e3, "K") : Number.isInteger(e) ? String(e) : (Math.round(e * 100) / 100).toString();
+}
+function me(e) {
+  if (e <= 0) return 1;
+  const r = 10 ** Math.floor(Math.log10(e)), t = e / r;
+  return (t <= 1 ? 1 : t <= 2 ? 2 : t <= 2.5 ? 2.5 : t <= 5 ? 5 : 10) * r;
+}
+function xe(e, n, r = he) {
+  n === e && (n = e + 1);
+  const t = me((n - e) / Math.max(1, r - 1)), o = Math.floor(e / t) * t, a = Math.ceil(n / t) * t, i = [];
+  for (let c = a; c >= o - t / 2; c -= t) i.push(Number(c.toFixed(10)));
+  return { min: o, max: a, ticks: i };
+}
+function J(e, n) {
+  return n && n.length ? n : [{ data: e ?? [] }];
+}
+const k = (e) => typeof e == "number";
+function Q(e, n = !0) {
+  const r = e.flatMap((f) => f.data.map((u) => u.y).filter(k)), t = n ? Math.min(0, ...r) : Math.min(...r), o = Math.max(...r, n ? 1 : -1 / 0), { min: a, max: i, ticks: c } = xe(
+    Number.isFinite(t) ? t : 0,
+    o === -1 / 0 ? 1 : o
+  );
+  return { min: a, max: i, range: i - a || 1, ticks: c };
+}
+function Z(e, n, r, t, o) {
+  const a = n - S * 2, i = r - S * 2;
+  return { sx: (u) => e <= 1 ? S + a / 2 : S + u / (e - 1) * a, sy: (u) => S + i - (u - t) / o * i };
+}
+function G(e) {
+  if (e.length === 0) return "";
+  if (e.length < 3) return e.map((r, t) => `${t ? "L" : "M"}${r[0]},${r[1]}`).join(" ");
+  let n = `M${e[0][0]},${e[0][1]}`;
+  for (let r = 0; r < e.length - 1; r++) {
+    const t = e[r - 1] ?? e[r], o = e[r], a = e[r + 1], i = e[r + 2] ?? a, c = o[0] + (a[0] - t[0]) / 6, f = o[1] + (a[1] - t[1]) / 6, u = a[0] - (i[0] - o[0]) / 6, l = a[1] - (i[1] - o[1]) / 6;
+    n += ` C${c.toFixed(1)},${f.toFixed(1)} ${u.toFixed(1)},${l.toFixed(1)} ${a[0].toFixed(1)},${a[1].toFixed(1)}`;
   }
   return n;
 }
-function D(t) {
-  return t.map((n, e) => {
-    const r = n.data.map((d) => d.y);
-    if (!r.length) return `${n.name ?? `Series ${e + 1}`}: no data`;
-    const a = Math.min(...r), o = Math.max(...r), c = n.data[n.data.length - 1];
-    return `${n.name ?? `Series ${e + 1}`}: ${r.length} points, min ${a}, max ${o}, last ${c.x}: ${c.y}`;
+function pe(e, n, r) {
+  const t = [];
+  let o = [];
+  return e.forEach((a, i) => {
+    k(a.y) ? o.push([n(i), r(a.y)]) : o.length && (t.push(o), o = []);
+  }), o.length && t.push(o), t;
+}
+const Y = (e, n, r) => e.name ?? z(r.series, { n: n + 1 });
+function ye(e, n, r) {
+  return e.map((t, o) => {
+    const a = t.data.map((f) => f.y).filter(k), i = Y(t, o, n);
+    if (!a.length) return `${i}: ${n.noData}`;
+    const c = [...t.data].reverse().find((f) => k(f.y));
+    return r.summary({
+      name: i,
+      count: a.length,
+      min: Math.min(...a),
+      max: Math.max(...a),
+      lastX: c == null ? void 0 : c.x,
+      lastY: (c == null ? void 0 : c.y) ?? void 0
+    });
   }).join(". ");
 }
-function H({ height: t }) {
-  const n = t - h * 2;
-  return /* @__PURE__ */ i("g", { "aria-hidden": !0, children: Array.from({ length: W + 1 }, (e, r) => {
-    const a = h + r / W * n;
-    return /* @__PURE__ */ i(
+function ee({ width: e, height: n, lines: r }) {
+  const t = n - S * 2, o = Math.max(1, r);
+  return /* @__PURE__ */ s("g", { "aria-hidden": !0, children: Array.from({ length: o + 1 }, (a, i) => {
+    const c = S + i / o * t;
+    return /* @__PURE__ */ s(
       "line",
       {
         x1: 0,
-        x2: A,
-        y1: a,
-        y2: a,
+        x2: e,
+        y1: c,
+        y2: c,
         stroke: "var(--color-border)",
         strokeWidth: 1,
-        vectorEffect: "non-scaling-stroke",
         opacity: 0.6
       },
-      r
+      i
     );
   }) });
 }
-function V({ min: t, max: n }) {
-  const e = Array.from(
-    { length: _ },
-    (r, a) => n - (n - t) * a / (_ - 1)
-  );
-  return /* @__PURE__ */ i(
+function ge({ ticks: e }) {
+  return /* @__PURE__ */ s(
     "div",
     {
       "aria-hidden": !0,
-      className: "tabular text-foreground-subtle pointer-events-none flex shrink-0 flex-col justify-between py-[6px] pr-1.5 text-right text-xs",
-      children: e.map((r, a) => /* @__PURE__ */ i("span", { className: "leading-none", children: K(r) }, a))
+      className: "tabular text-foreground-subtle pointer-events-none flex shrink-0 flex-col justify-between py-1.5 pr-1.5 text-right text-xs",
+      children: e.map((n, r) => /* @__PURE__ */ s("span", { className: "leading-none", children: fe(n) }, r))
     }
   );
 }
-function Y({ first: t, last: n }) {
-  return t ? /* @__PURE__ */ M("div", { "aria-hidden": !0, className: "text-foreground-subtle flex justify-between text-xs", children: [
-    /* @__PURE__ */ i("span", { children: String(t.x) }),
-    n && n !== t && /* @__PURE__ */ i("span", { children: String(n.x) })
+function be({ first: e, last: n }) {
+  return e ? /* @__PURE__ */ $("div", { "aria-hidden": !0, className: "text-foreground-subtle flex justify-between text-xs", children: [
+    /* @__PURE__ */ s("span", { children: String(e.x) }),
+    n && n !== e && /* @__PURE__ */ s("span", { children: String(n.x) })
   ] }) : null;
 }
-function R({
-  caption: t,
+function ve({
+  id: e,
+  all: n,
+  name: r,
+  visible: t,
+  t: o
+}) {
+  var f;
+  const a = Math.max(...n.map((u) => u.data.length)), i = ((f = n.find((u) => u.data.length === a)) == null ? void 0 : f.data) ?? [], c = /* @__PURE__ */ $(
+    "table",
+    {
+      id: e,
+      "data-chart-table": !0,
+      className: w(t && "tabular text-foreground-muted mt-2 w-full text-left text-xs"),
+      children: [
+        /* @__PURE__ */ s("caption", { className: w(t && "text-foreground-subtle pb-1 text-left"), children: z(o.tableCaption, { name: r ?? "" }).trim() }),
+        /* @__PURE__ */ s("thead", { children: /* @__PURE__ */ $("tr", { children: [
+          /* @__PURE__ */ s("th", { scope: "col", className: w(t && "border-border border-b py-1 pr-3 font-medium"), children: "x" }),
+          n.map((u, l) => /* @__PURE__ */ s(
+            "th",
+            {
+              scope: "col",
+              className: w(t && "border-border border-b py-1 pr-3 font-medium"),
+              children: Y(u, l, o)
+            },
+            l
+          ))
+        ] }) }),
+        /* @__PURE__ */ s("tbody", { children: i.map((u, l) => /* @__PURE__ */ $("tr", { children: [
+          /* @__PURE__ */ s("th", { scope: "row", className: w(t && "py-0.5 pr-3 font-normal"), children: String(u.x) }),
+          n.map((d, m) => {
+            var h, y;
+            return /* @__PURE__ */ s("td", { className: w(t && "py-0.5 pr-3"), children: k((h = d.data[l]) == null ? void 0 : h.y) ? String((y = d.data[l]) == null ? void 0 : y.y) : "—" }, m);
+          })
+        ] }, l)) })
+      ]
+    }
+  );
+  return t ? c : /* @__PURE__ */ s("div", { className: "sr-only", children: c });
+}
+function te({
+  caption: e,
   ariaLabel: n,
-  title: e,
-  desc: r,
-  height: a,
-  width: o,
-  className: c,
-  showAxis: d,
-  yDomain: l,
-  xFirst: $,
-  xLast: y,
-  children: s
+  title: r,
+  all: t,
+  height: o,
+  width: a,
+  className: i,
+  showAxis: c,
+  ticks: f,
+  xFirst: u,
+  xLast: l,
+  tableFallback: d,
+  showTableToggle: m,
+  state: h,
+  labels: y,
+  children: E
 }) {
-  const f = T().replace(/:/g, ""), p = `chart-cap-${f}`, F = `chart-title-${f}`, g = `chart-desc-${f}`, x = n ?? e;
-  return /* @__PURE__ */ M("figure", { className: G("flex flex-col gap-1.5", c), style: { width: o }, children: [
-    t && /* @__PURE__ */ i("figcaption", { id: p, className: "text-foreground-muted text-xs", children: t }),
-    /* @__PURE__ */ M("div", { className: "flex", children: [
-      d && /* @__PURE__ */ i(V, { min: l.min, max: l.max }),
-      /* @__PURE__ */ M(
-        "svg",
-        {
-          viewBox: `0 0 ${A} ${a}`,
-          width: "100%",
-          height: a,
-          preserveAspectRatio: "none",
-          role: "img",
-          "aria-labelledby": t ? p : x ? F : void 0,
-          "aria-describedby": g,
-          className: "min-w-0 flex-1 overflow-visible",
-          children: [
-            x && /* @__PURE__ */ i("title", { id: F, children: x }),
-            /* @__PURE__ */ i("desc", { id: g, children: r }),
-            s
-          ]
-        }
-      )
+  const g = X().chart, x = oe().replace(/:/g, ""), I = `chart-cap-${x}`, F = `chart-title-${x}`, C = `chart-desc-${x}`, O = `chart-table-${x}`, v = n ?? r, [p, M] = K(!1), { ref: P, width: A } = ue(), N = $e(t, g, y);
+  process.env.NODE_ENV !== "production" && !v && !e && console.warn(
+    "[craftzbay/ui] Chart: provide `caption`, `aria-label`, or `title` so the chart has an accessible name."
+  );
+  const L = (d || p) && !h, R = h === "loading" ? /* @__PURE__ */ $("div", { role: "status", "aria-label": g.loading, style: { height: o }, className: "w-full", children: [
+    /* @__PURE__ */ s(le, { style: { height: o }, className: "w-full" }),
+    /* @__PURE__ */ s("span", { className: "sr-only", children: g.loading })
+  ] }) : h ? /* @__PURE__ */ s(
+    "div",
+    {
+      role: h === "error" ? "alert" : "status",
+      style: { height: o },
+      className: "text-foreground-subtle flex w-full items-center justify-center text-sm",
+      children: h === "error" ? g.error : g.empty
+    }
+  ) : null;
+  return /* @__PURE__ */ $("figure", { className: w("flex flex-col gap-1.5", i), style: { width: a }, children: [
+    e && /* @__PURE__ */ s("figcaption", { id: I, className: "text-foreground-muted text-xs", children: e }),
+    R ?? /* @__PURE__ */ $(U, { children: [
+      /* @__PURE__ */ $("div", { className: "flex", children: [
+        c && /* @__PURE__ */ s(ge, { ticks: f }),
+        /* @__PURE__ */ s("div", { ref: P, className: "min-w-0 flex-1", children: /* @__PURE__ */ $(
+          "svg",
+          {
+            viewBox: `0 0 ${A} ${o}`,
+            width: A,
+            height: o,
+            role: "group",
+            "aria-labelledby": e ? I : v ? F : void 0,
+            "aria-describedby": C,
+            className: "block max-w-full overflow-visible",
+            children: [
+              v && /* @__PURE__ */ s("title", { id: F, children: v }),
+              /* @__PURE__ */ s("desc", { id: C, children: ye(t, g, y) }),
+              E({ width: A, ...N })
+            ]
+          }
+        ) })
+      ] }),
+      c && /* @__PURE__ */ s(be, { first: u, last: l }),
+      /* @__PURE__ */ s("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: N.announcement })
     ] }),
-    d && /* @__PURE__ */ i(Y, { first: $, last: y })
+    m && !h && /* @__PURE__ */ s(
+      "button",
+      {
+        type: "button",
+        onClick: () => M((W) => !W),
+        "aria-expanded": p,
+        "aria-controls": L ? O : void 0,
+        className: w(
+          "text-foreground-subtle hover:text-foreground self-start rounded-sm text-xs underline-offset-2 outline-none hover:underline",
+          "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2"
+        ),
+        children: p ? g.hideTable : g.viewAsTable
+      }
+    ),
+    L && /* @__PURE__ */ s(
+      ve,
+      {
+        id: O,
+        all: t,
+        name: v ?? (typeof e == "string" ? e : void 0),
+        visible: p,
+        t: g
+      }
+    )
   ] });
 }
-function q({
-  data: t,
+function $e(e, n, r) {
+  const [t, o] = K(null), [a, i] = K(""), c = se(
+    (l, d) => {
+      const m = e[l], h = m == null ? void 0 : m.data[d];
+      !h || !k(h.y) || (o({ series: l, index: d }), i(r.point(m.name, h.x, h.y)));
+    },
+    [e, r]
+  ), f = (l) => e[l].data.map((d, m) => k(d.y) ? m : -1).filter((d) => d >= 0);
+  return { active: t, announcement: a, seriesProps: (l) => ({
+    tabIndex: 0,
+    role: "group",
+    "aria-label": r.series(Y(e[l], l, n), f(l).length),
+    // Focus ring comes from theme.css `[data-chart-series]:focus-visible`
+    // (CSS outline — Tailwind's box-shadow ring does not paint on SVG <g>).
+    "data-chart-series": !0,
+    className: w(
+      "[&:focus-visible_[data-active]]:stroke-[var(--ring)] [&:focus-visible_[data-active]]:stroke-[3px]"
+    ),
+    onFocus: () => {
+      const d = f(l);
+      d.length && c(l, (t == null ? void 0 : t.series) === l ? t.index : d[d.length - 1]);
+    },
+    onBlur: () => {
+      o(null), i("");
+    },
+    onKeyDown: (d) => {
+      const m = f(l);
+      if (!m.length) return;
+      const h = (t == null ? void 0 : t.series) === l ? m.indexOf(t.index) : m.length - 1;
+      let y = h;
+      if (d.key === "ArrowRight" || d.key === "ArrowUp") y = Math.min(m.length - 1, h + 1);
+      else if (d.key === "ArrowLeft" || d.key === "ArrowDown") y = Math.max(0, h - 1);
+      else if (d.key === "Home") y = 0;
+      else if (d.key === "End") y = m.length - 1;
+      else return;
+      d.preventDefault(), c(l, m[y]);
+    }
+  }) };
+}
+function Me({
+  x: e,
+  y: n,
+  color: r,
+  label: t,
+  always: o,
+  active: a
+}) {
+  return /* @__PURE__ */ s(
+    "circle",
+    {
+      cx: e,
+      cy: n,
+      r: 3.5,
+      fill: r,
+      "data-active": a || void 0,
+      className: w(!o && !a && "opacity-0 hover:opacity-100"),
+      children: /* @__PURE__ */ s("title", { children: t })
+    }
+  );
+}
+function Ne({
+  data: e,
   series: n,
-  colors: e = w,
-  height: r = 160,
-  width: a = "100%",
-  caption: o,
-  "aria-label": c,
-  title: d,
-  grid: l = !0,
-  showAxis: $ = !0,
+  colors: r = q,
+  height: t = 160,
+  width: o = "100%",
+  caption: a,
+  "aria-label": i,
+  title: c,
+  grid: f = !0,
+  showAxis: u = !0,
+  tableFallback: l = !0,
+  showTableToggle: d,
+  state: m,
+  labels: h,
   className: y
 }) {
-  const s = E(t, n), { min: f, max: p, range: F } = B(s), g = Math.max(...s.map((u) => u.data.length)), x = s[0].data;
-  return /* @__PURE__ */ M(
-    R,
+  const E = X().chart, g = { ...V(E), ...h }, x = J(e, n), { min: I, range: F, ticks: C } = Q(x), O = Math.max(...x.map((p) => p.data.length)), v = x[0].data;
+  return /* @__PURE__ */ s(
+    te,
     {
-      caption: o,
-      ariaLabel: c,
-      title: d,
-      desc: D(s),
-      height: r,
-      width: a,
+      caption: a,
+      ariaLabel: i,
+      title: c,
+      all: x,
+      height: t,
+      width: o,
       className: y,
-      showAxis: $,
-      yDomain: { min: f, max: p },
-      xFirst: x[0],
-      xLast: x[x.length - 1],
-      children: [
-        l && /* @__PURE__ */ i(H, { height: r }),
-        s.map((u, L) => {
-          const v = e[L % e.length], { sx: b, sy: k } = X(g, r, f, F), m = u.data.map((O, P) => [b(P), k(O.y)]), N = U(m), S = k(Math.max(f, 0)), I = m.length ? `${N} L${m[m.length - 1][0].toFixed(1)},${S.toFixed(1)} L${m[0][0].toFixed(1)},${S.toFixed(1)} Z` : "", j = m[m.length - 1], C = u.data[u.data.length - 1];
-          return /* @__PURE__ */ M("g", { children: [
-            I && /* @__PURE__ */ i("path", { d: I, fill: v, fillOpacity: 0.08 }),
-            /* @__PURE__ */ i(
+      showAxis: u,
+      ticks: C,
+      xFirst: v[0],
+      xLast: v[v.length - 1],
+      tableFallback: l,
+      showTableToggle: d,
+      state: m,
+      labels: g,
+      children: ({ width: p, active: M, seriesProps: P }) => /* @__PURE__ */ $(U, { children: [
+        f && /* @__PURE__ */ s(ee, { width: p, height: t, lines: C.length - 1 }),
+        x.map((A, N) => {
+          const L = r[N % r.length], { sx: R, sy: W } = Z(O, p, t, I, F), D = pe(A.data, R, W), H = D.map(G).join(" "), j = W(Math.max(I, 0)), T = D.map(
+            (b) => `${G(b)} L${b[b.length - 1][0].toFixed(1)},${j.toFixed(1)} L${b[0][0].toFixed(1)},${j.toFixed(1)} Z`
+          ).join(" "), B = A.data.map((b) => k(b.y)).lastIndexOf(!0);
+          return /* @__PURE__ */ $("g", { ...P(N), children: [
+            T && /* @__PURE__ */ s("path", { d: T, fill: L, fillOpacity: 0.08 }),
+            /* @__PURE__ */ s(
               "path",
               {
-                d: N,
+                d: H,
                 fill: "none",
-                stroke: v,
+                stroke: L,
                 strokeWidth: 2,
                 strokeLinecap: "round",
-                strokeLinejoin: "round",
-                vectorEffect: "non-scaling-stroke"
+                strokeLinejoin: "round"
               }
             ),
-            j && /* @__PURE__ */ i(
-              "circle",
-              {
-                cx: j[0],
-                cy: j[1],
-                r: 3.5,
-                fill: v,
-                vectorEffect: "non-scaling-stroke",
-                children: /* @__PURE__ */ i("title", { children: `${u.name ? `${u.name} — ` : ""}${C.x}: ${C.y}` })
-              }
+            A.data.map(
+              (b, _) => k(b.y) ? /* @__PURE__ */ s(
+                Me,
+                {
+                  x: R(_),
+                  y: W(b.y),
+                  color: L,
+                  always: _ === B,
+                  active: (M == null ? void 0 : M.series) === N && M.index === _,
+                  label: g.point(A.name, b.x, b.y)
+                },
+                _
+              ) : null
             )
-          ] }, L);
+          ] }, N);
         })
-      ]
+      ] })
     }
   );
 }
-function Z(t) {
-  return /* @__PURE__ */ i(q, { ...t });
+function Ce(e) {
+  return /* @__PURE__ */ s(Ne, { ...e });
 }
-function tt({
-  data: t,
+function We({
+  data: e,
   series: n,
-  colors: e = w,
-  height: r = 160,
-  width: a = "100%",
-  caption: o,
-  "aria-label": c,
-  title: d,
-  grid: l = !0,
-  showAxis: $ = !0,
+  colors: r = q,
+  height: t = 160,
+  width: o = "100%",
+  caption: a,
+  "aria-label": i,
+  title: c,
+  grid: f = !0,
+  showAxis: u = !0,
+  tableFallback: l = !0,
+  showTableToggle: d,
+  state: m,
+  labels: h,
   className: y
 }) {
-  const s = E(t, n), f = A - h * 2, p = r - h * 2, F = Math.max(...s.map((b) => b.data.length)), g = f / Math.max(1, F), x = g * 0.62, u = Math.max(2, x / s.length), { max: L } = B(s), v = s[0].data;
-  return /* @__PURE__ */ M(
-    R,
+  const E = X().chart, g = { ...V(E), ...h }, x = J(e, n), I = Math.max(...x.map((p) => p.data.length)), { min: F, range: C, ticks: O } = Q(x), v = x[0].data;
+  return /* @__PURE__ */ s(
+    te,
     {
-      caption: o,
-      ariaLabel: c,
-      title: d,
-      desc: D(s),
-      height: r,
-      width: a,
+      caption: a,
+      ariaLabel: i,
+      title: c,
+      all: x,
+      height: t,
+      width: o,
       className: y,
-      showAxis: $,
-      yDomain: { min: 0, max: L },
+      showAxis: u,
+      ticks: O,
       xFirst: v[0],
       xLast: v[v.length - 1],
-      children: [
-        l && /* @__PURE__ */ i(H, { height: r }),
-        s.map(
-          (b, k) => b.data.map((m, N) => {
-            const S = Math.max(0, m.y) / L * p, I = h + N * g + (g - x) / 2 + k * u;
-            return /* @__PURE__ */ i(
+      tableFallback: l,
+      showTableToggle: d,
+      state: m,
+      labels: g,
+      children: ({ width: p, active: M, seriesProps: P }) => {
+        const N = (p - S * 2) / Math.max(1, I), L = N * 0.62, R = Math.max(2, L / x.length), { sy: W } = Z(I, p, t, F, C), D = W(Math.min(Math.max(0, F), F + C));
+        return /* @__PURE__ */ $(U, { children: [
+          f && /* @__PURE__ */ s(ee, { width: p, height: t, lines: O.length - 1 }),
+          F < 0 && /* @__PURE__ */ s(
+            "line",
+            {
+              "aria-hidden": !0,
+              x1: 0,
+              x2: p,
+              y1: D,
+              y2: D,
+              stroke: "var(--color-border-strong)",
+              strokeWidth: 1
+            }
+          ),
+          x.map((H, j) => /* @__PURE__ */ s("g", { ...P(j), children: H.data.map((T, B) => {
+            if (!k(T.y)) return null;
+            const b = W(T.y), _ = S + B * N + (N - L) / 2 + j * R, ne = g.point(H.name, T.x, T.y), re = (M == null ? void 0 : M.series) === j && M.index === B;
+            return /* @__PURE__ */ s(
               "rect",
               {
-                x: I,
-                y: h + p - S,
-                width: u,
-                height: Math.max(0, S),
-                fill: e[k % e.length],
+                x: _,
+                y: Math.min(D, b),
+                width: R,
+                height: Math.abs(D - b),
+                fill: r[j % r.length],
                 rx: 2,
+                "data-active": re || void 0,
                 className: "transition-opacity hover:opacity-80",
-                children: /* @__PURE__ */ i("title", { children: `${b.name ? `${b.name} — ` : ""}${m.x}: ${m.y}` })
+                children: /* @__PURE__ */ s("title", { children: ne })
               },
-              `${k}-${N}`
+              B
             );
-          })
-        )
-      ]
+          }) }, j))
+        ] });
+      }
     }
   );
 }
 export {
-  Z as AreaChart,
-  tt as BarChart,
-  w as DEFAULT_CHART_COLORS,
-  q as LineChart,
-  K as abbreviateNumber
+  Ce as AreaChart,
+  We as BarChart,
+  q as DEFAULT_CHART_COLORS,
+  Ne as LineChart,
+  fe as abbreviateNumber,
+  Ie as defaultChartLabels,
+  xe as niceTicks
 };
 //# sourceMappingURL=Chart.js.map