@canplot/react 0.1.0

package/dist/canplot.mjs

@@ -0,0 +1,1361 @@
+import { jsxs as at, jsx as D, Fragment as _t } from "react/jsx-runtime";
+import G, { createContext as Rt, useContext as lt, useRef as U, useLayoutEffect as J, version as Ut, forwardRef as Lt, useMemo as vt, useState as N, useId as Dt, useEffect as Xt } from "react";
+import { createStore as Kt, useStore as Ct } from "zustand";
+const Tt = 5, bt = 10, kt = 60, It = 30, Et = "UTC", zt = "en-GB", q = (t, s, e) => Math.min(Math.max(t, s), e), Ft = (t, s, e, o) => {
+  const { min: i, max: n } = A(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, a = (V(t, e) ? r.width : r.height) / (n - i);
+  return s / a;
+}, A = (t, s) => {
+  const e = t.scales.find((o) => o.id === s);
+  if (!e)
+    throw new Error(`Scale ${s} not found`);
+  return e;
+}, V = (t, s) => t.scales.find((e) => e.id === s)?.origin === "x", me = (t, s) => t.scales.find((e) => e.id === s)?.origin === "y", X = (t, s) => {
+  const e = window.devicePixelRatio || 1;
+  t.lineCap = s?.lineCap ?? "butt", t.lineDashOffset = e * (s?.lineDashOffset ?? 0), t.lineJoin = s?.lineJoin ?? "miter", t.lineWidth = e * (s?.lineWidth ?? 1), t.miterLimit = e * (s?.miterLimit ?? 10), t.strokeStyle = s?.strokeStyle ?? "black", t.fillStyle = s?.fillStyle ?? t.strokeStyle, t.font = s?.font ?? `${10 * e}px sans-serif`, t.textAlign = s?.textAlign ?? "start", t.direction = s?.direction ?? "inherit", t.textBaseline = s?.textBaseline ?? "alphabetic", t.fontKerning = s?.fontKerning ?? "auto";
+}, ut = (t, s, e, o) => {
+  const i = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: n, max: r } = A(t, e), a = (V(t, e) ? i.width : i.height) / (r - n);
+  return s * a;
+}, K = (t, s, e, o) => {
+  const { min: i } = A(t, e), n = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, r = ut(t, s - i, e, o);
+  return V(t, e) ? q(
+    n.x + r,
+    n.x - 10 * n.width,
+    n.x + 11 * n.width
+  ) : q(
+    n.y + n.height - r,
+    n.y - 10 * n.height,
+    n.y + 11 * n.height
+  );
+}, O = (t, s, e) => {
+  const o = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
+  return q(s, o.x, o.x + o.width);
+}, $ = (t, s, e) => {
+  const o = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
+  return q(s, o.y, o.y + o.height);
+}, ct = (t, s, e) => {
+  const { min: o, max: i } = A(t, e);
+  return s >= o && s <= i;
+}, L = (t, s, e, o) => {
+  const { min: i, max: n } = A(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, a = V(t, e) ? (s - r.x) / r.width : (r.height - s + r.y) / r.height;
+  return i + a * (n - i);
+}, Yt = 1, Mt = 1e3 * Yt, dt = 60 * Mt, Q = 60 * dt, tt = 24 * Q, Ot = 30 * tt, $t = 365 * tt, Bt = [
+  // second divisors
+  [1, "milliseconds"],
+  [2, "milliseconds"],
+  [5, "milliseconds"],
+  [10, "milliseconds"],
+  [20, "milliseconds"],
+  [50, "milliseconds"],
+  [100, "milliseconds"],
+  [200, "milliseconds"],
+  [500, "milliseconds"],
+  // minute divisors
+  [1, "seconds"],
+  [5, "seconds"],
+  [10, "seconds"],
+  [15, "seconds"],
+  [30, "seconds"],
+  // hour divisors
+  [1, "minutes"],
+  [5, "minutes"],
+  [10, "minutes"],
+  [15, "minutes"],
+  [30, "minutes"],
+  // day divisors
+  [1, "hours"],
+  [2, "hours"],
+  [3, "hours"],
+  [4, "hours"],
+  [6, "hours"],
+  [8, "hours"],
+  [12, "hours"],
+  // month divisors
+  [1, "days"],
+  [3, "days"],
+  [5, "days"],
+  [7, "days"],
+  [10, "days"],
+  [15, "days"],
+  // year divisors
+  [1, "months"],
+  [2, "months"],
+  [3, "months"],
+  [4, "months"],
+  [6, "months"],
+  // century divisors
+  [1, "years"],
+  [2, "years"],
+  [5, "years"],
+  [10, "years"],
+  [25, "years"],
+  [50, "years"],
+  [100, "years"]
+], H = (t) => {
+  const [s, e] = t;
+  switch (e) {
+    case "milliseconds":
+      return s;
+    case "seconds":
+      return s * Mt;
+    case "minutes":
+      return s * dt;
+    case "hours":
+      return s * Q;
+    case "days":
+      return s * tt;
+    case "months":
+      return s * Ot;
+    case "years":
+      return s * $t;
+  }
+}, Nt = (t, s) => {
+  const e = new Date(t);
+  return e.setUTCMilliseconds(e.getUTCMilliseconds() + s), e.getTime();
+}, Vt = (t, s) => {
+  const e = new Date(t);
+  return e.setUTCSeconds(e.getUTCSeconds() + s), e.getTime();
+}, jt = (t, s) => {
+  const e = new Date(t);
+  return e.setUTCMinutes(e.getUTCMinutes() + s), e.getTime();
+}, Ht = (t, s) => {
+  const e = new Date(t);
+  return e.setUTCHours(e.getUTCHours() + s), e.getTime();
+}, Zt = (t, s) => {
+  const e = new Date(t);
+  return e.setUTCDate(e.getUTCDate() + s), e.getTime();
+}, xt = (t, s) => {
+  const e = new Date(t);
+  return e.setUTCMonth(e.getUTCMonth() + s), e.getTime();
+}, z = (t, s) => {
+  const [e, o] = s;
+  switch (o) {
+    case "milliseconds":
+      return Nt(t, e);
+    case "seconds":
+      return Vt(t, e);
+    case "minutes":
+      return jt(t, e);
+    case "hours":
+      return Ht(t, e);
+    case "days":
+      return Zt(t, e);
+    case "months":
+      return xt(t, e);
+    case "years":
+      return xt(t, e * 12);
+  }
+};
+function Z(t, s) {
+  const e = new Date(t), o = new Date(e.toLocaleString("en-US", { timeZone: s })), i = new Date(e.toLocaleString("en-US", { timeZone: "UTC" }));
+  return (o.getTime() - i.getTime()) / (3600 * 1e3);
+}
+const Wt = (t, s, e = "UTC") => {
+  const [o, i] = s;
+  let n = new Date(t);
+  const r = () => {
+    n.setUTCHours(-Z(n, e), 0, 0, 0);
+  };
+  switch (i) {
+    case "milliseconds":
+      n.setUTCMilliseconds(
+        Math.ceil(n.getUTCMilliseconds() / o) * o
+      );
+      break;
+    case "seconds":
+      n.setUTCSeconds(
+        Math.ceil(n.getUTCSeconds() / o) * o,
+        0
+      );
+      break;
+    case "minutes":
+      n.setUTCMinutes(
+        Math.ceil(n.getTime() % Q / dt / o) * o,
+        0,
+        0
+      );
+      break;
+    case "hours":
+      n.setUTCHours(
+        Math.ceil(n.getTime() % tt / Q / o) * o,
+        0,
+        0,
+        0
+      );
+      break;
+    case "days":
+    case "months":
+    case "years":
+      i === "months" ? n.setUTCDate(1) : i === "years" && n.setUTCMonth(0, 1), r(), n.getTime() < t && (n = new Date(z(n, [1, i])));
+      break;
+  }
+  return n.getTime();
+}, Gt = ({
+  timeZone: t = Et,
+  space: s = kt
+}) => ({ frame: e, scaleId: o }) => {
+  const { min: i, max: n } = A(e, o), r = Math.floor(e.chartAreaCanvasPX.width / s) + 1, u = (n - i) / r, [l, d] = Bt.find(
+    (p) => H(p) >= u
+  ) ?? [1, "milliseconds"], f = Wt(i, [l, d], t), m = Z(f, t), h = [f];
+  let c;
+  for (; ; ) {
+    switch (d) {
+      case "milliseconds":
+      case "seconds":
+      case "minutes":
+      case "hours": {
+        c = z(f, [h.length * l, d]);
+        break;
+      }
+      case "days": {
+        const p = z(f, [
+          h.length * l,
+          d
+        ]);
+        c = z(p, [
+          m - Z(p, t),
+          "hours"
+        ]);
+        break;
+      }
+      case "months":
+      case "years": {
+        const p = z(
+          z(z(f, [m, "hours"]), [
+            h.length * l,
+            d
+          ]),
+          [-m, "hours"]
+        );
+        c = z(p, [
+          m - Z(p, t),
+          "hours"
+        ]);
+        break;
+      }
+    }
+    if (c > n)
+      break;
+    h.push(c);
+  }
+  return h;
+}, I = (t, s, e) => t.find((o) => o.type === e)?.value !== s.find((o) => o.type === e)?.value, Jt = ({
+  timeZone: t = Et,
+  locale: s = zt,
+  showTimezone: e = !0
+}) => {
+  const o = new Intl.DateTimeFormat(s, {
+    year: "numeric",
+    day: "numeric",
+    month: "short",
+    hour: "numeric",
+    hourCycle: "h23",
+    minute: "numeric",
+    second: "numeric",
+    fractionalSecondDigits: 3,
+    timeZoneName: "short",
+    timeZone: t
+  });
+  return ({ ticks: i }) => {
+    const n = i[1] - i[0], r = n < H([1, "days"]), a = n < H([1, "minutes"]), u = n < H([1, "seconds"]);
+    return i.map((l) => o.formatToParts(new Date(l))).map((l, d, f) => {
+      const m = f[d - 1], h = d === 0 || I(l, m, "year"), c = d === 0 || I(l, m, "day"), p = d === 0 || I(l, m, "month"), y = d === 0 || I(l, m, "hour"), x = d === 0 || I(l, m, "timeZoneName"), C = d === 0 || I(l, m, "minute"), S = d === 0 || I(l, m, "second"), g = d === 0 || I(l, m, "fractionalSecond"), k = [];
+      if (r && (y || C || x || S || g)) {
+        const v = l.find((P) => P.type === "hour")?.value, E = l.find((P) => P.type === "minute")?.value, M = l.find((P) => P.type === "timeZoneName")?.value;
+        let _ = "";
+        if (a) {
+          const P = l.find((F) => F.type === "second")?.value, B = l.find((F) => F.type === "fractionalSecond")?.value;
+          _ = `:${P}` + (u ? `.${B}` : "");
+        }
+        k.push(
+          `${v}:${E}${_}` + (e && x ? ` ${M}` : "")
+        );
+      }
+      return (c || p) && k.push(
+        [
+          l.find((v) => v.type === "month")?.value,
+          c && l.find((v) => v.type === "day")?.value
+        ].filter(Boolean).join(" ")
+      ), h && k.push(l.find((v) => v.type === "year")?.value), k.filter((v) => v).join(`
+`);
+    });
+  };
+}, W = [];
+for (let t = -12; t <= 12; t++)
+  W.push(1 * 10 ** t), W.push(2 * 10 ** t), W.push(5 * 10 ** t);
+const qt = (t) => {
+  const { ctx: s, scales: e } = t;
+  s.save(), s.strokeStyle = "black", s.fillStyle = "black", s.lineWidth = 1, s.font = "12px Arial", s.textAlign = "center", s.textBaseline = "middle";
+  for (const o of e) {
+    if (!o.axis) continue;
+    const i = o.type === "time" ? Gt({
+      space: o.axis.tickSpace,
+      timeZone: o.timeZone
+    }) : Qt({ space: o.axis.tickSpace }), n = o.type === "time" ? Jt({
+      timeZone: o.timeZone,
+      showTimezone: o.axis.showTimezone,
+      locale: o.locale
+    }) : te, r = o.axis.canvasRect;
+    if (o.origin === "x") {
+      if (o.axis.position === "bottom")
+        s.beginPath(), s.moveTo(r.x, r.y), s.lineTo(r.x + r.width, r.y), s.stroke(), gt(t, o.id, r.y, i, n);
+      else if (o.axis.position === "top") {
+        const a = r.y + r.height;
+        s.beginPath(), s.moveTo(r.x, a), s.lineTo(r.x + r.width, a), s.stroke(), gt(t, o.id, a, i, n);
+      }
+    } else if (o.axis.position === "left") {
+      const a = r.x + r.width;
+      s.beginPath(), s.moveTo(a, r.y), s.lineTo(a, r.y + r.height), s.stroke(), St(t, o.id, a, i, n);
+    } else o.axis.position === "right" && (s.beginPath(), s.moveTo(r.x, r.y), s.lineTo(r.x, r.y + r.height), s.stroke(), St(t, o.id, r.x, i, n));
+  }
+  s.restore();
+}, St = (t, s, e, o, i) => {
+  const { ctx: n } = t, r = t.scales.find((c) => c.id === s)?.axis;
+  if (!r) return;
+  const a = window.devicePixelRatio || 1, u = Tt, l = e, d = r.position === "left" ? e - u : e + u, f = bt * a, m = o({ frame: t, scaleId: s }) ?? [], h = i({
+    frame: t,
+    scaleId: s,
+    ticks: m
+  });
+  n.save(), n.fontKerning = "auto", X(n, {}), n.beginPath();
+  for (let c = 0; c < m.length; c++) {
+    const p = K(t, m[c], s, "canvas");
+    n.moveTo(l, p), n.lineTo(d, p);
+  }
+  n.stroke(), n.restore(), n.save(), X(n, {
+    textBaseline: "middle",
+    textAlign: r.position === "left" ? "right" : "left"
+    // ...axis.axisStyle,
+    // ...axis.tickLabelStyle,
+  });
+  for (let c = 0; c < m.length; c++) {
+    const p = K(t, m[c], s, "canvas"), y = h[c].split(`
+`);
+    for (let x = 0; x < y.length; x++)
+      n.fillText(` ${y[x]} `, d, p + x * f);
+  }
+  n.restore();
+}, gt = (t, s, e, o, i) => {
+  const { ctx: n } = t, r = t.scales.find((c) => c.id === s)?.axis;
+  if (!r) return;
+  const a = window.devicePixelRatio || 1, u = Tt, l = e, d = r.position === "top" ? e - u : e + u, f = bt * a, m = o({ frame: t, scaleId: s }) ?? [], h = i({ frame: t, scaleId: s, ticks: m });
+  n.save(), n.fontKerning = "auto", X(n, {}), n.beginPath();
+  for (let c = 0; c < m.length; c++) {
+    const p = K(t, m[c], s, "canvas");
+    n.moveTo(p, l), n.lineTo(p, d);
+  }
+  n.stroke(), n.restore(), n.save(), X(n, {
+    textBaseline: r.position === "top" ? "bottom" : "top",
+    textAlign: "center"
+    // ...axis.axisStyle,
+    // ...axis.tickLabelStyle,
+  });
+  for (let c = 0; c < m.length; c++) {
+    const p = K(t, m[c], s, "canvas"), y = h[c].split(`
+`);
+    for (let x = 0; x < y.length; x++)
+      n.fillText(y[x], p, d + a * 2 + x * f);
+  }
+  n.restore();
+}, Qt = ({
+  space: t
+} = {}) => ({ frame: s, scaleId: e }) => {
+  const { min: o, max: i } = A(s, e), n = [], r = window.devicePixelRatio || 1, a = (t ?? (V(s, e) ? kt : It)) * r, u = Ft(
+    s,
+    a,
+    e,
+    "canvas"
+  ), l = W.find((f) => f > u) ?? 1;
+  let d = o % l < Number.EPSILON ? o : o + l - o % l;
+  for (; d <= i; )
+    n.push(d), d += l;
+  return n;
+}, te = ({ ticks: t }) => {
+  const s = Math.max(0, Math.ceil(-Math.log10(t[1] - t[0])));
+  return t.map((e) => e.toFixed(s));
+}, ee = () => Kt((t, s) => {
+  const e = () => {
+    const o = s()._frame;
+    if (!o) throw new Error("No frame set in frame store");
+    return o;
+  };
+  return {
+    _frame: null,
+    getFrame: e,
+    getCtx: () => e().ctx,
+    clampXPosToChartArea: (o, i) => O(e(), o, i ?? "canvas"),
+    clampYPosToChartArea: (o, i) => $(e(), o, i ?? "canvas"),
+    valToPos: (o, i, n) => K(e(), o, i, n ?? "canvas"),
+    valToPxDistance: (o, i, n) => ut(
+      e(),
+      o,
+      i,
+      n ?? "canvas"
+    ),
+    valFits: (o, i) => ct(e(), o, i),
+    getScale: (o) => A(e(), o)
+  };
+}), ht = Rt(null), j = (t, s) => {
+  const e = lt(ht);
+  if (!e)
+    throw new Error("useFrame must be used within a CanPlot component");
+  const o = U(t);
+  o.current = t, J(() => {
+    o.current(e.getState()), e.subscribe((i) => {
+      i._frame && o.current(i);
+    });
+  }, [e, ...s]);
+}, pt = (t) => {
+  const s = lt(ht);
+  if (!s)
+    throw new Error("useFrame must be used within a CanPlot component");
+  return Ct(
+    s,
+    t ?? ((e) => e.getFrame())
+  );
+};
+function se(t) {
+  return (s) => {
+    for (const e of t) rt(e, s);
+  };
+}
+function ne(t) {
+  return (s) => {
+    const e = [];
+    for (const o of t) {
+      const i = rt(o, s), n = typeof i == "function";
+      e.push(n ? i : () => rt(o, null));
+    }
+    return () => {
+      for (const o of e) o();
+    };
+  };
+}
+function rt(t, s) {
+  if (typeof t == "function")
+    return t(s);
+  t && (t.current = s);
+}
+var oe = parseInt(Ut.split(".")[0], 10) >= 19 ? ne : se;
+const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) => {
+  const n = U(null), r = U(null), a = ce(r), u = vt(ee, []);
+  J(() => {
+    u.setState({
+      _frame: re(t, a, n.current)
+    });
+  }, [t, a, n, u]), J(() => u.subscribe((d) => {
+    d._frame && ae(d._frame);
+  }), [u]);
+  const l = window.devicePixelRatio || 1;
+  return /* @__PURE__ */ at(
+    "div",
+    {
+      ref: oe([i, r]),
+      className: o,
+      style: {
+        position: "relative",
+        overflow: "hidden",
+        ...e
+      },
+      "data-canplotroot": !0,
+      children: [
+        /* @__PURE__ */ D(
+          "canvas",
+          {
+            ref: n,
+            width: a.width * l,
+            height: a.height * l,
+            style: {
+              inset: 0,
+              position: "absolute",
+              width: `${a.width}px`,
+              height: `${a.height}px`
+            }
+          }
+        ),
+        /* @__PURE__ */ D(ie, { frameStore: u, children: s })
+      ]
+    }
+  );
+}), ie = ({ frameStore: t, children: s }) => Ct(t, (o) => !!o._frame) ? /* @__PURE__ */ D(ht.Provider, { value: t, children: s }) : null, ce = (t) => {
+  const [s, e] = N({
+    width: 0,
+    height: 0
+  }), [o] = N(() => new ResizeObserver((i) => {
+    for (const n of i) {
+      const r = Math.round(n.contentRect.width), a = Math.round(n.contentRect.height);
+      e(
+        (u) => u.width !== r || u.height !== a ? { ...u, width: r, height: a } : u
+      );
+    }
+  }));
+  return J(() => {
+    if (!t.current) return;
+    const i = t.current.clientWidth, n = t.current.clientHeight;
+    return e(
+      (r) => r.width !== i || r.height !== n ? { ...r, width: i, height: n } : r
+    ), o.observe(t.current, { box: "border-box" }), () => o.disconnect();
+  }, [o, t]), s;
+}, re = (t, s, e) => {
+  const o = e?.getContext("2d");
+  if (!o) return null;
+  const i = window.devicePixelRatio || 1;
+  if (s.width === 0 || s.height === 0)
+    return null;
+  const n = {
+    x: t.padding.left,
+    y: t.padding.top,
+    width: s.width - t.padding.left - t.padding.right,
+    height: s.height - t.padding.top - t.padding.bottom
+  };
+  for (const h of t.scales)
+    h.axis && (h.origin === "x" ? (h.axis.position === "bottom" || h.axis.position === "top") && (n.height = Math.max(
+      0,
+      n.height - h.axis.size
+    ), h.axis.position === "top" && (n.y += h.axis.size)) : (h.axis.position === "left" || h.axis.position === "right") && (n.width = Math.max(0, n.width - h.axis.size), h.axis.position === "left" && (n.x += h.axis.size)));
+  const r = {
+    x: n.x * i,
+    y: n.y * i,
+    width: n.width * i,
+    height: n.height * i
+  }, a = [];
+  let u = t.padding.left * i, l = o.canvas.width - t.padding.right * i, d = o.canvas.height - t.padding.bottom * i, f = t.padding.top * i;
+  for (const h of t.scales) {
+    if (!h.axis) {
+      a.push({ ...h, axis: null });
+      continue;
+    }
+    let c;
+    if (h.origin === "x")
+      switch (h.axis.position) {
+        case "bottom":
+          d -= h.axis.size * i, c = {
+            x: n.x,
+            y: d / i,
+            width: n.width,
+            height: h.axis.size
+          };
+          break;
+        case "top":
+          f += h.axis.size * i, c = {
+            x: n.x,
+            y: f / i - h.axis.size,
+            width: n.width,
+            height: h.axis.size
+          };
+          break;
+        case "left":
+        case "right":
+          throw new Error("Invalid axis position for x origin");
+      }
+    else
+      switch (h.axis.position) {
+        case "left":
+          u += h.axis.size * i, c = {
+            x: u / i - h.axis.size,
+            y: n.y,
+            width: h.axis.size,
+            height: n.height
+          };
+          break;
+        case "right":
+          l -= h.axis.size * i, c = {
+            x: l / i,
+            y: n.y,
+            width: h.axis.size,
+            height: n.height
+          };
+          break;
+        case "top":
+        case "bottom":
+          throw new Error("Invalid axis position for y origin");
+      }
+    const p = {
+      x: c.x * i,
+      y: c.y * i,
+      width: c.width * i,
+      height: c.height * i
+    };
+    a.push({
+      ...h,
+      axis: {
+        ...h.axis,
+        cssRect: c,
+        canvasRect: p
+      }
+    });
+  }
+  return {
+    ctx: o,
+    dpr: i,
+    padding: t.padding,
+    scales: a,
+    chartAreaCSS: n,
+    chartAreaCanvasPX: r
+  };
+}, ae = (t) => {
+  t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), qt(t);
+}, ye = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (j(
+  ({ getCtx: i, clampXPosToChartArea: n, clampYPosToChartArea: r, valToPos: a }) => {
+    const u = i();
+    u.save(), u.beginPath(), X(u, o);
+    for (const l of t) {
+      const d = n(a(l.x, s)), f = r(a(l.y, e));
+      u.lineTo(d, f);
+    }
+    u.stroke(), u.restore();
+  },
+  [t, s, e, o]
+), null), xe = ({ data: t, xScaleId: s, yScaleId: e, radius: o = 5, style: i }) => (j(({ getCtx: n, valToPos: r, valFits: a }) => {
+  const u = n();
+  u.save(), u.beginPath(), X(u, i);
+  for (const l of t) {
+    if (!a(l.x, s) || !a(l.y, e))
+      continue;
+    const d = r(l.x, s), f = r(l.y, e);
+    u.moveTo(d + o, f), u.arc(d, f, o, 0, Math.PI * 2);
+  }
+  u.stroke(), u.fill(), u.restore();
+}, [t, s, e, o, i]), null), Se = ({
+  data: t,
+  xScaleId: s,
+  yScaleId: e,
+  style: o,
+  barWidth: i,
+  xPositionOffset: n,
+  radius: r
+}) => (j(
+  ({
+    getCtx: a,
+    valToPxDistance: u,
+    valToPos: l,
+    clampXPosToChartArea: d,
+    clampYPosToChartArea: f
+  }) => {
+    if (t.length === 0) return;
+    const m = a();
+    m.save(), X(m, o);
+    const h = u(i, s);
+    m.beginPath();
+    for (const c of t) {
+      const y = l(c.x, s) - h / 2 + n * h, x = f(l(0, e)), C = f(l(c.y, e)), S = x - C, g = d(y), k = d(y + h) - g;
+      r ? m.roundRect(
+        g,
+        C,
+        k,
+        S,
+        r
+      ) : m.rect(g, C, k, S);
+    }
+    m.closePath(), m.fill(), o?.strokeStyle && m.stroke(), m.restore();
+  },
+  [t, s, e, o, i, n, r]
+), null), ge = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (j(({ getCtx: i, clampXPosToChartArea: n, clampYPosToChartArea: r, valToPos: a }) => {
+  const u = [];
+  for (const d of t) {
+    const f = n(a(d.x, s)), m = r(a(d.y[0], e)), h = r(a(d.y[1], e));
+    u.push({ x: f, y: m }), u.unshift({ x: f, y: h });
+  }
+  const l = i();
+  if (u.length > 0) {
+    l.save(), l.beginPath(), X(l, o), l.moveTo(u[0].x, u[0].y);
+    for (const d of u)
+      l.lineTo(d.x, d.y);
+    l.closePath(), l.fill(), l.restore();
+  }
+}, [t, s, e, o]), null), we = ({ data: t, stroked: s, xScaleId: e, yScaleId: o, style: i }) => (j(
+  ({ getCtx: n, clampXPosToChartArea: r, clampYPosToChartArea: a, valToPos: u }) => {
+    const l = [], d = n();
+    for (const c of t) {
+      const p = r(u(c.x, e)), y = a(u(c.y, o));
+      l.push({ x: p, y });
+    }
+    const f = l.at(0), m = l.at(-1);
+    if (!f || !m)
+      return;
+    const h = a(u(0, o));
+    d.save(), d.beginPath(), X(d, i), d.moveTo(f.x, h);
+    for (const c of l)
+      d.lineTo(c.x, c.y);
+    if (d.lineTo(m.x, h), d.closePath(), d.fill(), s) {
+      d.beginPath(), d.moveTo(f.x, f.y);
+      for (const c of l)
+        d.lineTo(c.x, c.y);
+      d.stroke();
+    }
+    d.restore();
+  },
+  [t, s, e, o, i]
+), null), ve = (t, s) => pt(
+  ({
+    clampXPosToChartArea: e,
+    clampYPosToChartArea: o,
+    getScale: i,
+    valToPos: n,
+    valFits: r
+  }) => {
+    const a = {};
+    for (const u in t) {
+      const l = t[u];
+      switch (l.exceeding) {
+        case "discard": {
+          if (r(l.value, l.scaleId)) {
+            const d = n(l.value, l.scaleId, s);
+            a[u] = d;
+          }
+          break;
+        }
+        case "clamp": {
+          const d = n(l.value, l.scaleId, s);
+          a[u] = i(l.scaleId)?.origin === "x" ? e(d, s) : o(d, s);
+          break;
+        }
+      }
+    }
+    return a;
+  }
+), T = () => {
+  const t = [];
+  return {
+    addEventListener: (s, e) => (t.push({
+      syncKey: s,
+      callback: e
+    }), () => {
+      const o = t.findIndex((i) => i.callback === e);
+      o !== -1 && t.splice(o, 1);
+    }),
+    dispatchEvent: (s, e) => {
+      for (const o of t)
+        o.syncKey === s && o.callback(s, e);
+    }
+  };
+}, w = {
+  dblclick: T(),
+  click: T(),
+  move: T(),
+  mousedown: T(),
+  mouseup: T(),
+  spanselect: T(),
+  documentmouseup: T(),
+  pressandwheel: T(),
+  sync_dblclick: T(),
+  sync_click: T(),
+  sync_move: T(),
+  sync_mousedown: T(),
+  sync_mouseup: T(),
+  sync_spanselect: T(),
+  sync_pressandwheel: T()
+}, b = (t, s, e) => {
+  const o = G.useRef(e);
+  o.current = e, G.useEffect(() => w[t].addEventListener(
+    s,
+    (n, r) => {
+      o.current(r, n);
+    }
+  ), [s, t, o]);
+}, mt = G.createContext(""), ft = (t, s) => {
+  const e = G.useContext(mt);
+  return b(t, e, s);
+}, le = (t, s, e, o, i) => {
+  if (!s) return;
+  const n = o ?? e.scales.find((f) => f.origin === "x")?.id, r = i ?? e.scales.find((f) => f.origin === "y")?.id;
+  if (!n || !r)
+    return;
+  const a = t.clientX - s.left, u = {
+    scaleId: n,
+    value: L(e, a, n, "css")
+  }, l = t.clientY - s.top, d = {
+    scaleId: r,
+    value: L(e, l, r, "css")
+  };
+  return { pointerSyncPosition: { x: u, y: d }, cssX: a, cssY: l };
+}, Y = (t, s) => {
+  const e = t.x ? K(
+    s,
+    t.x.value,
+    t.x.scaleId,
+    "css"
+  ) : 0, o = t.y ? K(
+    s,
+    t.y.value,
+    t.y.scaleId,
+    "css"
+  ) : 0;
+  return {
+    cssX: e,
+    cssY: o,
+    scaled: Object.fromEntries(
+      s.scales.map((i) => {
+        const n = i.origin === "y" ? o : e;
+        return [i.id, L(s, n, i.id, "css")];
+      })
+    )
+  };
+}, wt = (t, s, e) => {
+  if (!s) {
+    const r = t === "x" ? e.chartAreaCSS.x : e.chartAreaCSS.y, a = t === "x" ? e.chartAreaCSS.x + e.chartAreaCSS.width : e.chartAreaCSS.y + e.chartAreaCSS.height;
+    return {
+      fromCSS: r,
+      toCSS: a,
+      scaled: e.scales.flatMap((u) => {
+        if (u.origin !== t)
+          return [];
+        const { min: l, max: d } = A(e, u.id);
+        return [{ scaleId: u.id, from: l, to: d }];
+      })
+    };
+  }
+  const o = K(
+    e,
+    s.from,
+    s.scaleId,
+    "css"
+  ), i = K(
+    e,
+    s.to,
+    s.scaleId,
+    "css"
+  ), n = e.scales.flatMap(
+    (r) => {
+      if (r.origin !== t)
+        return [];
+      const a = L(e, o, r.id, "css"), u = L(e, i, r.id, "css");
+      return [
+        {
+          scaleId: r.id,
+          from: a,
+          to: u
+        }
+      ];
+    }
+  );
+  return {
+    fromCSS: o,
+    toCSS: i,
+    scaled: n
+  };
+}, Ce = ({
+  id: t,
+  onClick: s,
+  onDblClick: e,
+  onMouseMove: o,
+  onMouseDown: i,
+  onMouseUp: n,
+  onDocumentMouseUp: r,
+  onSpanSelect: a,
+  className: u,
+  style: l,
+  sync: d,
+  children: f
+}) => {
+  const m = Dt(), h = t || m;
+  return b("dblclick", h, (c) => {
+    e?.(c);
+  }), b("click", h, (c) => {
+    s?.(c);
+  }), b("move", h, (c) => {
+    o?.(c);
+  }), b("mousedown", h, (c) => {
+    i?.(c);
+  }), b("mouseup", h, (c) => {
+    n?.(c);
+  }), b("documentmouseup", h, (c) => {
+    r?.(c);
+  }), b("spanselect", h, (c) => {
+    a?.(c);
+  }), /* @__PURE__ */ at(mt, { value: h, children: [
+    /* @__PURE__ */ D(
+      ue,
+      {
+        className: u,
+        style: l,
+        sync: d
+      }
+    ),
+    f
+  ] });
+}, ue = ({ className: t, style: s, sync: e }) => {
+  const o = U(null), i = pt(), n = U(i);
+  n.current = i;
+  const r = lt(mt), a = e?.key || r, u = U(null), l = U(null), d = U(null), f = () => {
+    const c = o.current?.parentElement;
+    if (c) {
+      if (c.dataset.canplotroot === void 0)
+        throw new Error(
+          "ChartAreaInteractions must be used within a CanPlot component"
+        );
+      return c.getBoundingClientRect();
+    }
+  }, m = (c, p) => {
+    const y = le(
+      c,
+      f(),
+      n.current,
+      e?.xViaScaleId,
+      e?.yViaScaleId
+    );
+    y && p(
+      y.pointerSyncPosition,
+      { cssX: y.cssX, cssY: y.cssY },
+      {
+        ctrlKey: c.ctrlKey,
+        altKey: c.altKey,
+        shiftKey: c.shiftKey,
+        metaKey: c.metaKey
+      }
+    );
+  }, h = U(m);
+  return h.current = m, Xt(() => {
+    const c = (S) => {
+      const g = l.current;
+      g && w.sync_spanselect.dispatchEvent(a, {
+        ...g,
+        completed: !0
+      }), w.documentmouseup.dispatchEvent(a, {
+        frame: n.current,
+        keys: {
+          ctrlKey: S.ctrlKey,
+          altKey: S.altKey,
+          shiftKey: S.shiftKey,
+          metaKey: S.metaKey
+        }
+      });
+    }, p = (S) => {
+      const g = {
+        ctrlKey: S.ctrlKey,
+        altKey: S.altKey,
+        shiftKey: S.shiftKey,
+        metaKey: S.metaKey
+      }, k = d.current;
+      if (k && Object.entries(g).some(
+        ([E, M]) => k.keys[E] !== M
+      )) {
+        const E = { ...k, keys: g };
+        d.current = E, w.sync_move.dispatchEvent(a, E);
+      }
+      const v = l.current;
+      if (v && Object.entries(g).some(
+        ([E, M]) => v.keys[E] !== M
+      )) {
+        S.stopPropagation(), S.preventDefault();
+        const E = { ...v, keys: g };
+        l.current = E, w.sync_spanselect.dispatchEvent(
+          a,
+          E
+        );
+      }
+    }, y = (S) => {
+      h.current(
+        S,
+        (g, { cssX: k, cssY: v }, E) => {
+          const M = u.current;
+          if (!M || !g.x || !g.y) return;
+          const _ = n.current, P = M.xRangeCss.start, B = k, F = M.yRangeCss.start, et = v, st = A(_, g.x.scaleId), nt = A(_, g.y.scaleId);
+          u.current = {
+            xRangeCss: { start: P, end: B },
+            yRangeCss: { start: F, end: et }
+          };
+          let R = "none";
+          const ot = Math.abs(F - et), it = Math.abs(P - B);
+          ot < 10 && it < 10 ? R = "none" : ot > 30 && it > 30 ? R = "box" : ot > it ? R = "y" : R = "x";
+          const Pt = R === "x" || R === "box" ? {
+            scaleId: st.id,
+            from: L(
+              _,
+              O(n.current, P, "css"),
+              st.id,
+              "css"
+            ),
+            to: L(
+              _,
+              O(n.current, B, "css"),
+              st.id,
+              "css"
+            )
+          } : void 0, At = R === "y" || R === "box" ? {
+            scaleId: nt.id,
+            from: L(
+              _,
+              $(n.current, F, "css"),
+              nt.id,
+              "css"
+            ),
+            to: L(
+              _,
+              $(n.current, et, "css"),
+              nt.id,
+              "css"
+            )
+          } : void 0, yt = {
+            mode: R,
+            xRange: Pt,
+            yRange: At,
+            completed: !1,
+            keys: E
+          };
+          l.current = yt, w.sync_spanselect.dispatchEvent(
+            a,
+            yt
+          );
+        }
+      );
+    }, x = (S) => {
+      h.current(S, (g, k, v) => {
+        if (Object.values(v).some((M) => M)) {
+          S.preventDefault();
+          const M = Math.abs(S.deltaY) > Math.abs(S.deltaX) ? S.deltaY : S.deltaX;
+          w.sync_pressandwheel.dispatchEvent(a, {
+            positions: g,
+            keys: v,
+            deltaX: S.deltaX,
+            deltaY: S.deltaY,
+            deltaAbs: M
+          });
+        }
+      });
+    };
+    document.addEventListener("mouseup", c), document.addEventListener("keydown", p), document.addEventListener("keyup", p), document.addEventListener("mousemove", y);
+    const C = o.current;
+    return C?.addEventListener("wheel", x, {
+      passive: !1
+    }), () => {
+      document.removeEventListener("mouseup", c), document.removeEventListener("keydown", p), document.removeEventListener("keyup", p), document.removeEventListener("mousemove", y), C?.removeEventListener("wheel", x);
+    };
+  }, [n, a, h]), b("sync_dblclick", a, (c) => {
+    const p = Y(
+      c.positions,
+      n.current
+    );
+    p && w.dblclick.dispatchEvent(r, {
+      frame: n.current,
+      pointer: p,
+      keys: c.keys
+    });
+  }), b("sync_click", a, (c) => {
+    const p = Y(
+      c.positions,
+      n.current
+    );
+    p && w.click.dispatchEvent(r, {
+      frame: n.current,
+      pointer: p,
+      keys: c.keys
+    });
+  }), b("sync_move", a, (c) => {
+    const p = c.positions ? Y(
+      c.positions,
+      n.current
+    ) : null;
+    d.current = c, w.move.dispatchEvent(r, {
+      frame: n.current,
+      pointer: p ?? null,
+      keys: c.keys
+    });
+  }), b("sync_mousedown", a, (c) => {
+    const p = Y(
+      c.positions,
+      n.current
+    );
+    p && w.mousedown.dispatchEvent(r, {
+      frame: n.current,
+      pointer: p,
+      keys: c.keys
+    });
+  }), b("sync_mouseup", a, (c) => {
+    const p = Y(
+      c.positions,
+      n.current
+    );
+    p && w.mouseup.dispatchEvent(r, {
+      frame: n.current,
+      pointer: p,
+      keys: c.keys
+    });
+  }), b(
+    "sync_pressandwheel",
+    a,
+    (c) => {
+      const p = Y(
+        c.positions,
+        n.current
+      );
+      p && w.pressandwheel.dispatchEvent(r, {
+        frame: n.current,
+        pointer: p,
+        keys: c.keys,
+        deltaX: c.deltaX,
+        deltaY: c.deltaY,
+        deltaAbs: c.deltaAbs
+      });
+    }
+  ), b("sync_spanselect", a, (c) => {
+    const p = wt(
+      "x",
+      c.xRange,
+      n.current
+    ), y = wt(
+      "y",
+      c.yRange,
+      n.current
+    ), x = p.scaled, C = y.scaled;
+    c.completed && (u.current = null), w.spanselect.dispatchEvent(r, {
+      mode: c.mode,
+      frame: n.current,
+      xRanges: x,
+      yRanges: C,
+      completed: c.completed,
+      x: { fromCSS: p.fromCSS, toCSS: p.toCSS },
+      y: { fromCSS: y.fromCSS, toCSS: y.toCSS },
+      keys: c.keys
+    });
+  }), /* @__PURE__ */ D(
+    "div",
+    {
+      ref: o,
+      id: "interactions",
+      className: t,
+      style: {
+        position: "absolute",
+        left: i.chartAreaCSS.x,
+        top: i.chartAreaCSS.y,
+        width: i.chartAreaCSS.width,
+        height: i.chartAreaCSS.height,
+        zIndex: 25,
+        ...s
+      },
+      onClick: (c) => {
+        m(c, (p, y, x) => {
+          w.sync_click.dispatchEvent(a, {
+            positions: p,
+            keys: x
+          });
+        });
+      },
+      onMouseLeave: (c) => {
+        m(c, (p, y, x) => {
+          w.sync_move.dispatchEvent(a, {
+            positions: null,
+            keys: x
+          });
+        });
+      },
+      onMouseMove: (c) => {
+        m(c, (p, y, x) => {
+          w.sync_move.dispatchEvent(a, {
+            positions: p,
+            keys: x
+          });
+        });
+      },
+      onMouseDown: (c) => {
+        m(c, (p, { cssX: y, cssY: x }, C) => {
+          w.sync_mousedown.dispatchEvent(a, {
+            positions: p,
+            keys: C
+          }), l.current = null, u.current = {
+            xRangeCss: { start: y, end: y },
+            yRangeCss: { start: x, end: x }
+          };
+        });
+      },
+      onMouseUp: (c) => {
+        m(c, (p, y, x) => {
+          w.sync_mouseup.dispatchEvent(a, {
+            positions: p,
+            keys: x
+          });
+          const C = l.current;
+          l.current = null;
+          const S = u.current;
+          if (u.current = null, S && C) {
+            const g = {
+              ...C,
+              keys: x,
+              completed: !0
+            };
+            w.sync_spanselect.dispatchEvent(
+              a,
+              g
+            );
+          }
+        });
+      },
+      onDoubleClick: (c) => {
+        m(c, (p, y, x) => {
+          w.sync_dblclick.dispatchEvent(a, {
+            positions: p,
+            keys: x
+          });
+        });
+      }
+    }
+  );
+}, Te = ({ data: t, renderTooltip: s, xScaleId: e }) => {
+  const [o, i] = N(null);
+  ft("move", (r) => {
+    i(r);
+  });
+  const n = vt(() => {
+    if (!o)
+      return null;
+    const { frame: r, pointer: a } = o, u = a?.scaled[e];
+    if (u === void 0)
+      return null;
+    const l = [];
+    let d = u;
+    for (const f of t) {
+      let m = null, h = 1 / 0;
+      for (const [p, y] of f.points.entries()) {
+        if (!ct(r, y.x, e) || !ct(r, y.y, f.yScaleId))
+          continue;
+        const x = Math.abs(y.x - u);
+        x < h && (h = x, m = p);
+      }
+      const c = f.points[m ?? -1];
+      if (!c || ut(r, h, e, "css") > 30) {
+        l.push({ seriesId: f.seriesId, y: null });
+        continue;
+      }
+      d = c.x, l.push({
+        seriesId: f.seriesId,
+        y: c.y
+      });
+    }
+    return {
+      frame: r,
+      x: d,
+      points: l
+    };
+  }, [t, o, e]);
+  return s(n);
+}, be = ({ makeXStyle: t, makeXClassName: s, makeYStyle: e, makeYClassName: o }) => {
+  const [i, n] = N(null);
+  if (ft("move", (d) => {
+    n(d);
+  }), !i)
+    return null;
+  const { frame: r, pointer: a } = i, u = O(r, a?.cssX ?? 0, "css"), l = $(r, a?.cssY ?? 0, "css");
+  return /* @__PURE__ */ at(_t, { children: [
+    /* @__PURE__ */ D(
+      "div",
+      {
+        "data-show": !!a,
+        className: s?.(i),
+        style: {
+          position: "absolute",
+          left: 0,
+          top: r.chartAreaCSS.y,
+          height: r.chartAreaCSS.height,
+          borderColor: "red",
+          borderLeftWidth: "1px",
+          borderLeftStyle: "solid",
+          pointerEvents: "none",
+          opacity: a ? 1 : 0,
+          transform: `translateX(${u}px)`,
+          ...t?.(i)
+        }
+      }
+    ),
+    /* @__PURE__ */ D(
+      "div",
+      {
+        className: o?.(i),
+        "data-show": !!a,
+        style: {
+          position: "absolute",
+          top: 0,
+          height: 0,
+          borderTop: "solid 1px red",
+          left: r.chartAreaCSS.x,
+          width: r.chartAreaCSS.width,
+          pointerEvents: "none",
+          opacity: a ? 1 : 0,
+          transform: `translateY(${l}px)`,
+          ...e?.(i)
+        }
+      }
+    )
+  ] });
+}, ke = ({ makeClassName: t, makeStyle: s }) => {
+  const [e, o] = N(null);
+  if (ft("spanselect", (m) => {
+    o(m.mode === "none" || m.completed ? null : m);
+  }), !e)
+    return null;
+  const i = O(
+    e.frame,
+    e.x.fromCSS,
+    "css"
+  ), n = O(
+    e.frame,
+    e.x.toCSS,
+    "css"
+  ), r = $(
+    e.frame,
+    e.y.fromCSS,
+    "css"
+  ), a = $(
+    e.frame,
+    e.y.toCSS,
+    "css"
+  ), u = Math.min(i, n), l = Math.min(r, a), d = Math.abs(n - i), f = Math.abs(a - r);
+  return /* @__PURE__ */ D(
+    "div",
+    {
+      className: t?.(e),
+      style: {
+        position: "absolute",
+        backgroundColor: "#0000ff22",
+        left: `${u}px`,
+        top: `${l}px`,
+        width: `${d}px`,
+        height: `${f}px`,
+        pointerEvents: "none",
+        ...s?.(e)
+      }
+    }
+  );
+}, Ee = ({ style: t, children: s, scaleId: e, ...o }) => {
+  const i = pt((n) => n.getScale(e)?.axis);
+  return i ? /* @__PURE__ */ D(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        backgroundColor: "#0000ff11",
+        left: i.cssRect.x,
+        top: i.cssRect.y,
+        height: i.cssRect.height,
+        width: i.cssRect.width,
+        ...t
+      },
+      ...o,
+      children: s
+    }
+  ) : null;
+};
+export {
+  ge as AreaPlot,
+  Ee as AxisOverlay,
+  Se as BarPlot,
+  fe as CanPlot,
+  Ce as ChartAreaInteractions,
+  be as Crosshair,
+  ye as LinePlot,
+  xe as ScatterPlot,
+  ke as SelectBox,
+  we as SparklinePlot,
+  Te as TooltipsX,
+  X as applyStyles,
+  O as clampXPosToChartArea,
+  $ as clampYPosToChartArea,
+  A as getScale,
+  V as isXScale,
+  me as isYScale,
+  L as posToVal,
+  Ft as pxToValDistance,
+  ve as usePositioned,
+  ct as valFits,
+  K as valToPos,
+  ut as valToPxDistance
+};
+//# sourceMappingURL=canplot.mjs.map