@data-vision/interactive-chart 0.0.8

package/build/chart-Cj4Fiwnb.js

@@ -0,0 +1,965 @@
+class $ {
+  _value;
+  listeners = [];
+  constructor(t) {
+    this._value = t;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(t) {
+    this._value = t;
+  }
+  addEventListener(t) {
+    this.listeners.push(t);
+  }
+  removeEventListener(t) {
+    this.listeners = this.listeners.filter(
+      (e) => e !== t
+    );
+  }
+  emitChangeEvent() {
+    for (const t of this.listeners)
+      t(this._value);
+  }
+}
+class g {
+  x;
+  y;
+  constructor(t, e) {
+    this.x = t, this.y = e;
+  }
+  add(t) {
+    let { x: e, y: i } = this;
+    return typeof t == "number" ? (e += t, i += t) : (e += t.x, i += t.y), new g(e, i);
+  }
+  sub(t) {
+    let { x: e, y: i } = this;
+    return typeof t == "number" ? (e -= t, i -= t) : (e -= t.x, i -= t.y), new g(e, i);
+  }
+  multiply(t) {
+    let { x: e, y: i } = this;
+    return typeof t == "number" ? (e *= t, i *= t) : (e *= t.x, i *= t.y), new g(e, i);
+  }
+  divide(t) {
+    let { x: e, y: i } = this;
+    return typeof t == "number" ? (e /= t, i /= t) : (e /= t.x, i /= t.y), new g(e, i);
+  }
+  static origin() {
+    return new g(0, 0);
+  }
+}
+function T(o) {
+  let t = "";
+  for (const [e, i] of Object.entries(o))
+    t += `${e.replace(/[A-Z]/g, (s) => "-" + s.toLowerCase())}: ${i};`;
+  return t;
+}
+function y(o, t) {
+  for (const e in t) {
+    const i = t[e];
+    o.style.setProperty(e, `${i}`);
+  }
+}
+function k(o, t) {
+  const e = g.origin();
+  if (t) {
+    const s = t.getBoundingClientRect();
+    e.x = s.x, e.y = s.y;
+  }
+  let i;
+  if ("touches" in o) {
+    const s = o, [n] = s.touches;
+    i = new g(n.clientX, n.clientY);
+  } else
+    i = new g(o.clientX, o.clientY);
+  return i.sub(e);
+}
+function A(o, t) {
+  let e = null;
+  function i() {
+    e && (clearTimeout(e), e = null);
+  }
+  function s(...n) {
+    i(), e = setTimeout(() => {
+      o.apply(this, n);
+    }, t);
+  }
+  return s.cancel = i, s;
+}
+const G = (o) => [...o].reduce((t, e) => Math.min(t, e), 1 / 0), B = (o) => [...o].reduce((t, e) => Math.max(t, e), -1 / 0), D = ([o, t]) => o < t ? [o, t] : [t, o];
+function V(o, t = 1) {
+  const [e, i] = o;
+  return D([t - e, t - i]);
+}
+function q([o, t], [e, i], [s, n] = [0, 1]) {
+  let a = o + e, r = t + i;
+  return a < s && (a = s, r = a + t - o), r > n && (r = n, a = r - t + o), [a, r];
+}
+function z(o, [t, e]) {
+  return o >= t && o <= e;
+}
+function Y({ x: o, y: t }, { left: e, top: i, right: s, bottom: n }) {
+  return z(o, [e, s]) && z(t, [i, n]);
+}
+function E(o, [t, e]) {
+  return Math.max(t, Math.min(o, e));
+}
+function W(o, t, e) {
+  const i = E(o.left, t), s = E(o.right, t), n = E(o.top, e), a = E(o.bottom, e);
+  return {
+    left: i,
+    top: n,
+    right: s,
+    bottom: a
+  };
+}
+function j({ left: o, top: t, right: e, bottom: i }, s) {
+  return {
+    left: o * s,
+    top: t * s,
+    right: e * s,
+    bottom: i * s
+  };
+}
+function P(o) {
+  return +o.toExponential().match(/-?\d+$/)[0];
+}
+function X(o) {
+  const t = String(o).match(/\.\d+$/);
+  return t ? 1 - t[0].length : P(o);
+}
+function I(o, t, [e, i]) {
+  let s = Math.floor(e / t) * t;
+  const n = Math.abs(t);
+  for (; s < e; )
+    s += n;
+  const a = [e], r = Math.abs(t / 6);
+  for (let c = 0; c < Math.ceil(o); c++) {
+    const h = s + n * c;
+    (h > e + r && h < i - r || e < 0 && h === 0) && a.push(h);
+  }
+  return a.push(i), a;
+}
+function O(o, [t, e]) {
+  const [i, s] = o, n = s - i, a = P(n);
+  let r = Math.pow(10, a);
+  s <= 0 && (r = -r);
+  let c = Math.abs(n / r);
+  if (c < t || c > e) {
+    const p = [2, 4, 5, 8, 10];
+    for (const d of p) {
+      const u = c < t ? r / d : r * d, f = Math.abs(n / u);
+      if (z(f, [t, e])) {
+        r = u, c = f;
+        break;
+      }
+    }
+  }
+  const h = I(c, r, o), x = X(r);
+  return {
+    rules: h,
+    density: x
+  };
+}
+class H {
+  _value;
+  mediaQuery;
+  listener;
+  constructor(t) {
+    this.listener = t, this.onMediaChange = this.onMediaChange.bind(this), this.createMediaMatch();
+  }
+  createMediaMatch() {
+    this._value = window.devicePixelRatio, this.mediaQuery = window.matchMedia(`(resolution: ${this.value}dppx)`), this.mediaQuery.addEventListener("change", this.onMediaChange);
+  }
+  get value() {
+    return this._value;
+  }
+  onMediaChange() {
+    this.dispose(), this.createMediaMatch(), this.listener(this._value);
+  }
+  dispose() {
+    this.mediaQuery.removeEventListener("change", this.onMediaChange);
+  }
+}
+function U(o, t) {
+  const { width: e, hangingBaseline: i } = o.measureText(t);
+  return {
+    width: e,
+    height: i ?? 0
+  };
+}
+class R extends $ {
+  element;
+  dragging = !1;
+  origin = g.origin();
+  constructor(t, e) {
+    super(e), this.onPointerDown = this.onPointerDown.bind(this), this.onPointerMove = this.onPointerMove.bind(this), this.onPointerUp = this.onPointerUp.bind(this), t.addEventListener("mousedown", this.onPointerDown), t.addEventListener("touchstart", this.onPointerDown), window.addEventListener("mousemove", this.onPointerMove), window.addEventListener("touchmove", this.onPointerMove), window.addEventListener("mouseup", this.onPointerUp), window.addEventListener("touchend", this.onPointerUp), this.element = t;
+  }
+  set value(t) {
+    super.value = t, this.resize();
+  }
+  onPointerDown(t) {
+    this.dragging = !0, this.origin = k(t), this.onStart(t);
+  }
+  getStyle(t) {
+    return "";
+  }
+  onUpdate({ value: t }) {
+    return t;
+  }
+  isEqual(t, e) {
+    return String(t) === String(e);
+  }
+  onStart(t) {
+  }
+  onEnd(t) {
+  }
+  resize() {
+    const { _value: t, dragging: e } = this, i = this.getStyle({
+      value: t,
+      dragging: e
+    });
+    i !== "" && this.element.setAttribute("style", i);
+  }
+  onPointerMove(t) {
+    if (this.dragging) {
+      const e = k(t), i = this.onUpdate({
+        value: this._value,
+        offset: e,
+        delta: e.sub(this.origin),
+        event: t
+      });
+      this.isEqual(i, this._value) || (this._value = i, this.emitChangeEvent(), this.resize()), this.origin = e;
+    }
+  }
+  onPointerUp(t) {
+    this.dragging = !1, this.onEnd(t);
+  }
+  dispose() {
+    this.element.removeEventListener("pointerdown", this.onPointerDown), this.element.removeEventListener("touchstart", this.onPointerDown), window.removeEventListener("pointermove", this.onPointerMove), window.removeEventListener("touchmove", this.onPointerMove), window.removeEventListener("pointerup", this.onPointerUp), window.removeEventListener("touchend", this.onPointerUp);
+  }
+}
+class K extends R {
+  root;
+  container;
+  option;
+  constructor(t, e) {
+    const i = document.createElement("div");
+    super(i, e.initValue), this.root = t, this.option = e, this.getStyle = e.getStyle, this.container = i, this.root.appendChild(i), this.resize();
+  }
+  onStart(t) {
+    this.option.onStart?.(t);
+  }
+  onUpdate(t) {
+    return this.option.onUpdate(t);
+  }
+  onEnd(t) {
+    this.option.onEnd?.(t);
+  }
+  dispose() {
+    super.dispose(), this.root.removeChild(this.container);
+  }
+}
+class F {
+  root;
+  container;
+  style = {
+    position: "absolute",
+    display: "none",
+    userSelect: "none"
+  };
+  inheritStyle;
+  constructor(t, e) {
+    this.root = t, this.inheritStyle = e, this.container = document.createElement("div"), this.root.appendChild(this.container), this.setContainer();
+  }
+  setContainer(t) {
+    this.container.setAttribute(
+      "style",
+      T({
+        ...this.style,
+        ...this.inheritStyle,
+        ...t
+      })
+    );
+  }
+  update({ top: t, right: e, bottom: i, left: s }) {
+    this.setContainer({
+      display: "block",
+      inset: `${t}px ${e}px ${i}px ${s}px`
+    });
+  }
+  hide() {
+    this.setContainer({
+      display: "none"
+    });
+  }
+  dispose() {
+    this.root.removeChild(this.container);
+  }
+}
+class Z {
+  root;
+  xTooltip;
+  yTooltip;
+  constructor(t, e) {
+    this.root = t, this.xTooltip = this.createTooltip(e), this.root.appendChild(this.xTooltip), this.yTooltip = this.createTooltip(e), this.root.appendChild(this.yTooltip);
+  }
+  createTooltip(t) {
+    const e = document.createElement("div");
+    return e.setAttribute("style", T({
+      position: "absolute",
+      fontSize: "calc(var(--scale) * 12px)",
+      userSelect: "none",
+      padding: "calc(var(--scale) * 5px) calc(var(--scale) * 6px)",
+      borderRadius: "4px",
+      ...t,
+      display: "none"
+    })), e;
+  }
+  updateTooltip(t, e, i) {
+    y(t, {
+      display: "block",
+      ...i
+    }), t.innerText = e;
+  }
+  update(t, e) {
+    t ? this.updateTooltip(this.xTooltip, t.content, {
+      left: `${t.offset.x}px`,
+      top: `${t.offset.y}px`,
+      transform: "translateX(-50%)"
+    }) : y(this.xTooltip, {
+      display: "none"
+    }), e ? this.updateTooltip(this.yTooltip, e.content, {
+      left: `${e.offset.x}px`,
+      top: `${e.offset.y}px`,
+      transform: "translate(-100%, -50%)"
+    }) : y(this.yTooltip, {
+      display: "none"
+    });
+  }
+  hide() {
+    y(this.xTooltip, {
+      display: "none"
+    }), y(this.yTooltip, {
+      display: "none"
+    });
+  }
+  dispose() {
+    this.root.removeChild(this.xTooltip), this.root.removeChild(this.yTooltip);
+  }
+}
+class Q {
+  root;
+  container;
+  axisX;
+  axisY;
+  option;
+  constructor(t, e) {
+    this.root = t, this.option = e, this.container = this.createContainer(), this.setEdge(e.edge), this.axisX = this.createAxis(), this.axisY = this.createAxis();
+  }
+  createContainer() {
+    const t = document.createElement("div");
+    return y(t, {
+      inset: "0",
+      userSelect: "none",
+      display: "none"
+    }), this.root.appendChild(t), t;
+  }
+  createAxis() {
+    const { style: t } = this.option, e = document.createElement("div");
+    return y(e, {
+      position: "absolute",
+      ...t
+    }), this.container.appendChild(e), e;
+  }
+  setEdge(t) {
+    y(this.container, {
+      "--edge-top": `calc(${t.top}px * var(--scale))`,
+      "--edge-bottom": `calc(${t.bottom}px * var(--scale))`,
+      "--edge-left": `calc(${t.left}px * var(--scale))`,
+      "--edge-right": `calc(${t.right}px * var(--scale))`
+    });
+  }
+  update({ x: t, y: e }) {
+    y(this.axisX, {
+      width: "1px",
+      left: `${t}px`,
+      top: "var(--edge-top)",
+      bottom: "var(--edge-bottom)"
+    }), y(this.axisY, {
+      "--gradient-angle": "45deg",
+      height: "1px",
+      top: `${e}px`,
+      left: "var(--edge-left)",
+      right: "var(--edge-right)"
+    }), y(this.container, {
+      display: "block"
+    });
+  }
+  hide() {
+    y(this.container, {
+      display: "none"
+    });
+  }
+  dispose() {
+    this.root.removeChild(this.container);
+  }
+}
+var M = /* @__PURE__ */ ((o) => (o[o.none = -1] = "none", o[o.crop = 0] = "crop", o[o.zoom = 1] = "zoom", o[o.move = 2] = "move", o))(M || {});
+class l extends R {
+  root;
+  resizeObserver;
+  dpr;
+  canvasContainer;
+  canvas;
+  static version = "0.1.6";
+  static config = {
+    xMin: 0,
+    xMax: 1e4,
+    yMin: 0,
+    yMax: 1e3,
+    grid: {
+      left: 65,
+      top: 10,
+      right: 30,
+      bottom: 35
+    },
+    controlType: M.crop,
+    xUnit: "",
+    yUnit: "",
+    xMinScale: 3,
+    xMaxScale: 8,
+    yMinScale: 3,
+    yMaxScale: 8,
+    responsiveScale: !0,
+    backgroundColor: "#fff",
+    gridColor: "#ccc",
+    textColor: "#222",
+    accentColor: "#36f",
+    fontSize: 12,
+    cropStyle: {
+      backgroundColor: "#36f4"
+    },
+    tooltip: {
+      enabled: !0,
+      style: {}
+    },
+    crosshair: {
+      enabled: !0,
+      style: {
+        "--gradient-angle": "0",
+        background: "repeating-linear-gradient(var(--gradient-angle), transparent 0 2px, var(--accent-color) 2px 5px)"
+      }
+    },
+    axisXScaleOffset: {
+      x: 0,
+      y: 15
+    },
+    axisYScaleOffset: {
+      x: 5,
+      y: 0
+    },
+    xLimit: [-1 / 0, 1 / 0],
+    yLimit: [-1 / 0, 1 / 0],
+    wheelZoom: !0,
+    dataSampleMethod: "none"
+  };
+  width = 0;
+  height = 0;
+  context;
+  xMin = l.config.xMin;
+  xMax = l.config.xMax;
+  yMin = l.config.yMin;
+  yMax = l.config.yMax;
+  data = null;
+  tooltip = null;
+  crosshair = null;
+  crop;
+  controlType = l.config.controlType;
+  prevControlType = l.config.controlType;
+  wheelZoom = l.config.wheelZoom;
+  cropOrigin = g.origin();
+  cropOffset = g.origin();
+  inCrop = !1;
+  grid = { ...l.config.grid };
+  xMinScale = l.config.xMinScale;
+  xMaxScale = l.config.xMaxScale;
+  yMinScale = l.config.yMinScale;
+  yMaxScale = l.config.yMaxScale;
+  xUnit = l.config.xUnit;
+  yUnit = l.config.yUnit;
+  raf;
+  shouldUpdate = !1;
+  snapshot = null;
+  useSnapshot = !1;
+  constructor(t) {
+    const e = document.createElement("div");
+    super(e, 0), this.root = t, this.resizeObserver = new ResizeObserver(
+      A(this.onResize, 200)
+    ), this.resizeObserver.observe(t), this.onDprChange = this.onDprChange.bind(this), this.dpr = new H(this.onDprChange), this.canvas = document.createElement("canvas"), this.context = this.canvas.getContext("2d"), this.context.scale(this.dpr.value, this.dpr.value);
+    const i = this.initCanvas(e, this.canvas);
+    this.onMouseMove = this.onMouseMove.bind(this), i.addEventListener("mousemove", this.onMouseMove), this.onMouseLeave = this.onMouseLeave.bind(this), i.addEventListener("mouseleave", this.onMouseLeave), this.onWheel = this.onWheel.bind(this), i.addEventListener("wheel", this.onWheel), this.onDblClick = this.onDblClick.bind(this), i.addEventListener("dblclick", this.onDblClick), this.setRoot(this.root), this.root.appendChild(i), this.canvasContainer = i;
+    const { tooltip: s, crosshair: n, cropStyle: a, dataSampleMethod: r } = l.config;
+    if (s.enabled && (this.tooltip = new Z(i, {
+      backgroundColor: "var(--accent-color)",
+      fontSize: `${l.config.fontSize}px`,
+      ...s.style
+    })), n.enabled) {
+      const c = { ...this.scaleGrid };
+      this.crosshair = new Q(i, {
+        edge: c,
+        style: n.style
+      });
+    }
+    this.crop = new F(i, {
+      border: "1px solid var(--accent-color)",
+      ...a
+    }), r === "lttb" && console.warn("lttb sample not implemented."), this.updateDraw();
+  }
+  get $root() {
+    return this.root;
+  }
+  get $canvas() {
+    return this.canvas;
+  }
+  setData(t) {
+    this.data = t, this.shouldUpdate = !0;
+  }
+  setControlType(t) {
+    this.controlType = t, this.setCursor();
+  }
+  draw(t) {
+    throw new Error("Chart.prototype.draw not implemented");
+  }
+  drawSnapshot(t) {
+    throw new Error("Chart.prototype.drawSnapshot not implemented");
+  }
+  drawAnnotations(t) {
+  }
+  sample(t, e) {
+    let i = 0;
+    const s = [...t];
+    switch (e) {
+      case "none":
+      case "lttb":
+      default:
+        i = s[Math.floor(s.length / 2)];
+        break;
+      case "max":
+        i = B(t);
+        break;
+      case "min":
+        i = G(t);
+        break;
+      case "avg":
+        i = s.reduce(
+          (n, a) => n + a,
+          0
+        ) / s.length;
+        break;
+    }
+    return i;
+  }
+  updateDraw() {
+    this.raf = requestAnimationFrame(this.updateDraw.bind(this));
+    const {
+      context: t,
+      dpr: e,
+      width: i,
+      height: s,
+      drawWidth: n,
+      drawHeight: a,
+      scaleGrid: r,
+      rect: c,
+      xMin: h,
+      xMax: x,
+      yMin: p,
+      yMax: d,
+      xMinScale: u,
+      xMaxScale: f,
+      yMinScale: m,
+      yMaxScale: v,
+      snapshot: w,
+      useSnapshot: b
+    } = this;
+    if (i > 0 && s > 0 && this.shouldUpdate) {
+      t.clearRect(r.left, r.top, n, a);
+      const S = O([h, x], [u, f]);
+      this.drawVerticalGrid(S);
+      const C = O([p, d], [m, v]);
+      this.drawHorizontalGrid(C), t.textRendering = "optimizeLegibility", t.textBaseline = "middle", t.font = `${l.config.fontSize * e.value}px sans-serif`, b && w !== null ? (t.putImageData(w, 0, 0), this.drawSnapshot(t), this.useSnapshot = !1) : (this.draw(t), this.drawSnapshot(t)), t.clearRect(0, 0, i, r.top), t.clearRect(0, 0, r.left, s), t.clearRect(0, c.y, i, r.bottom), t.clearRect(c.x, 0, r.right, s), this.drawAxisX(S), this.drawAxisY(C), this.drawAnnotations(t), this.shouldUpdate = !1;
+    }
+  }
+  drawVerticalGrid({ rules: t }) {
+    const { context: e, scaleGrid: i, rect: s, scale: n, xMin: a } = this;
+    e.save(), e.strokeStyle = l.config.gridColor;
+    for (let r = 0, c = t.length; r < c; r++) {
+      e.beginPath();
+      const h = i.left + (t[r] - a) / n.x;
+      e.moveTo(h, i.top), e.lineTo(h, s.y), r > 0 && e.setLineDash([2, 2]), e.stroke();
+    }
+    e.restore();
+  }
+  drawAxisX({ rules: t, density: e }) {
+    for (let i = 0, s = t.length; i < s; i++)
+      this.drawScaleX(t[i], e, [0, s - 1].includes(i));
+  }
+  drawScaleX(t, e, i = !1) {
+    const { context: s, scaleGrid: n, rect: a, xMin: r, scale: c, dpr: h, xUnit: x } = this, p = l.config.axisXScaleOffset, d = n.left + (t - r) / c.x;
+    let u = a.y + p.y;
+    s.lineWidth = h.value, s.strokeStyle = l.config.gridColor, s.beginPath(), s.moveTo(d, a.y), s.lineTo(d, u - p.y * 0.6), s.stroke();
+    const f = this.getScaleText(t, e, x), { width: m, height: v } = U(s, f);
+    i ? (s.fillStyle = l.config.accentColor, u += v * 1.5) : (s.fillStyle = l.config.textColor, u += v / 4), s.fillText(f, d - m / 2, u);
+  }
+  drawHorizontalGrid({ rules: t }) {
+    const { context: e, scaleGrid: i, rect: s, scale: n, yMin: a } = this;
+    e.save(), e.strokeStyle = l.config.gridColor;
+    for (let r = 0, c = t.length; r < c; r++) {
+      e.beginPath();
+      const h = s.y - (t[r] - a) / n.y;
+      e.moveTo(i.left, h), e.lineTo(s.x, h), r > 0 && e.setLineDash([2, 2]), e.stroke();
+    }
+    e.restore();
+  }
+  drawAxisY({ rules: t, density: e }) {
+    for (let i of t)
+      this.drawScaleY(i, e);
+  }
+  drawScaleY(t, e) {
+    const { context: i, scaleGrid: s, yMin: n, rect: a, scale: r, yUnit: c } = this, h = l.config.axisYScaleOffset, x = s.left, p = a.y - (t - n) / r.y;
+    i.strokeStyle = l.config.gridColor, i.fillStyle = l.config.textColor, i.beginPath(), i.moveTo(x - h.x, p), i.lineTo(x, p), i.stroke();
+    const d = this.getScaleText(t, e, c), { width: u, height: f } = U(i, d);
+    i.fillText(d, x - u - h.x * 2, p + f / 2);
+  }
+  getScaleText(t, e, i) {
+    return t.toFixed(e < 0 ? -e : 0) + i;
+  }
+  setRoot(t) {
+    y(t, {
+      position: "relative",
+      userSelect: "none",
+      "--accent-color": l.config.accentColor
+    });
+  }
+  get cursor() {
+    switch (this.controlType) {
+      case M.crop:
+        return "crosshair";
+      case M.move:
+        return "move";
+      case M.zoom:
+        return "zoom-in";
+      default:
+        return "default";
+    }
+  }
+  setCursor(t) {
+    y(this.canvasContainer, {
+      cursor: t ?? this.cursor
+    });
+  }
+  initCanvas(t, e) {
+    const { cursor: i, dpr: s } = this;
+    return t.setAttribute(
+      "style",
+      T({
+        position: "relative",
+        height: "100%",
+        overflow: "hidden",
+        cursor: i,
+        "--scale": 1 / s.value
+      })
+    ), e.setAttribute(
+      "style",
+      T({
+        display: "block",
+        width: "100%",
+        height: "100%"
+      })
+    ), t.appendChild(e), t;
+  }
+  get scaleGrid() {
+    const { left: t, top: e, right: i, bottom: s } = l.config.grid, { value: n } = this.dpr;
+    return {
+      left: t * n,
+      top: e * n,
+      right: i * n,
+      bottom: s * n
+    };
+  }
+  get bounds() {
+    const { xMin: t, xMax: e, yMin: i, yMax: s } = this;
+    return {
+      x: [t, e],
+      y: [i, s]
+    };
+  }
+  get rectBounds() {
+    const { grid: t, rect: e, dpr: i } = this, { left: s, top: n } = t, { x: a, y: r } = e.divide(i.value);
+    return {
+      left: s,
+      top: n,
+      right: a,
+      bottom: r
+    };
+  }
+  get rect() {
+    const { width: t, height: e, scaleGrid: i } = this;
+    return new g(t - i.right, e - i.bottom);
+  }
+  get drawWidth() {
+    const { rect: t, scaleGrid: e } = this;
+    return t.x - e.left;
+  }
+  get drawHeight() {
+    const { rect: t, scaleGrid: e } = this;
+    return t.y - e.top;
+  }
+  updateCanvas() {
+    const t = this.dpr.value;
+    if (this.width = Math.floor(this.root.clientWidth * t), this.height = Math.floor(this.root.clientHeight * t), this.canvas.width = this.width, this.canvas.height = this.height, l.config.responsiveScale) {
+      const { width: e } = U(this.context, "0000000" + this.xUnit);
+      this.xMinScale = Math.max(3, Math.floor(this.drawWidth / e / 8)), this.xMaxScale = this.xMinScale * 3, this.yMinScale = Math.max(3, Math.floor(this.drawHeight / 40 / 8)), this.yMaxScale = this.yMinScale * 3;
+    }
+    this.shouldUpdate = !0;
+  }
+  onDprChange(t) {
+    y(
+      this.canvasContainer,
+      {
+        "--scale": 1 / t
+      }
+    ), this.updateCanvas(), this.context.scale(t, t), this.crosshair?.setEdge(this.scaleGrid);
+  }
+  setUnit(t, e) {
+    this.xUnit = t ?? this.xUnit, this.yUnit = e ?? this.yUnit, this.shouldUpdate = !0;
+  }
+  getOffset(t) {
+    return k(t, this.canvasContainer);
+  }
+  onMouseMove(t) {
+    const {
+      dpr: e,
+      rectBounds: i,
+      xMin: s,
+      yMin: n,
+      scale: a,
+      dragging: r,
+      tooltip: c,
+      crosshair: h,
+      xUnit: x,
+      yUnit: p
+    } = this, d = this.getOffset(t), { left: u, bottom: f } = i, m = e.value;
+    if (Y(d, i) && !r) {
+      const v = s + (d.x - u) * m * a.x, w = n + (f - d.y) * m * a.y, { xLabel: b, yLabel: S } = l.config.tooltip;
+      c?.update({
+        offset: {
+          x: d.x,
+          y: f
+        },
+        content: b ? b(v, x) : v.toFixed(1) + x
+      }, {
+        offset: {
+          x: u,
+          y: d.y
+        },
+        content: S ? S(w, p) : w.toFixed(1) + p
+      }), h?.update(d);
+    } else
+      h?.hide(), c?.hide();
+  }
+  onMouseLeave() {
+    this.tooltip?.hide(), this.crosshair?.hide();
+  }
+  onWheel(t) {
+    if (this.wheelZoom) {
+      t.preventDefault();
+      const {
+        xMin: e,
+        xMax: i,
+        yMin: s,
+        yMax: n,
+        grid: a,
+        rectBounds: r,
+        drawWidth: c,
+        drawHeight: h,
+        scale: x
+      } = this, { xLimit: p, yLimit: d } = l.config, [u, f] = p, [m, v] = d, { x: w, y: b } = this.getOffset(t), { right: S, bottom: C } = r, L = {
+        x: t.deltaY * x.x / c,
+        y: t.deltaY * x.y / h
+      };
+      this.xMin = Math.max(
+        u,
+        e - L.x * (w - a.left)
+      ), this.xMax = Math.min(
+        f,
+        i + L.x * (S - w)
+      ), this.yMin = Math.max(
+        m,
+        s - L.y * (C - b)
+      ), this.yMax = Math.min(
+        v,
+        n + L.y * (b - a.top)
+      ), this.shouldUpdate = !0;
+    }
+  }
+  onDblClick() {
+    this.reset();
+  }
+  onResize = () => {
+    this.resize();
+  };
+  get scale() {
+    const { xMin: t, xMax: e, yMin: i, yMax: s, drawWidth: n, drawHeight: a } = this;
+    return new g((e - t) / n, (s - i) / a);
+  }
+  getRatioOffset(t) {
+    const { xMin: e, xMax: i, yMin: s, yMax: n } = this;
+    return {
+      x: e + (i - e) * t,
+      y: s + (n - s) * t
+    };
+  }
+  setMoveBounds({ x: t, y: e }) {
+    const { xLimit: i, yLimit: s } = l.config, [n, a] = i, [r, c] = s, h = this.xMax - this.xMin, x = this.yMax - this.yMin;
+    let p = this.xMin + t, d = this.xMax + t, u = this.yMin + e, f = this.yMax + e;
+    return p < n && (p = n, d = p + h), d > a && (d = a, p = d - h), u < r && (u = r, f = u + x), f > c && (f = c, u = f - x), {
+      xMin: p,
+      xMax: d,
+      yMin: u,
+      yMax: f
+    };
+  }
+  /*
+  private setZoomBounds({ x, y }: Point) {
+      const { xLimit, yLimit } = Chart.config
+      const [, xMaxLimit] = xLimit
+      const [, yMaxLimit] = yLimit
+      const xMax = Math.min(this.xMax + x, xMaxLimit)
+      const yMax = Math.min(this.yMax + y, yMaxLimit)
+      return {
+          xMax,
+          yMax
+      }
+  }
+  */
+  // @override
+  onStart(t) {
+    if (t.ctrlKey && (this.prevControlType = this.controlType, this.controlType = M.move), this.setCursor(), this.controlType === M.crop) {
+      const e = this.getOffset(t);
+      this.cropOrigin = this.cropOffset = e, this.inCrop = !0;
+    }
+  }
+  // @override
+  onUpdate({ value: t, delta: e }) {
+    const {
+      scale: i,
+      dpr: s,
+      controlType: n,
+      inCrop: a,
+      cropOffset: r
+    } = this, { xMin: c, xMax: h, yMin: x, yMax: p } = this.setMoveBounds(
+      new g(-1, 1).multiply(e).multiply(i).multiply(s.value)
+    );
+    switch (n) {
+      case M.crop:
+        a && (this.cropOffset = r.add(e), this.updateCrop());
+        break;
+      case M.move:
+        this.xMin = c, this.xMax = h, this.yMin = x, this.yMax = p, this.shouldUpdate = !0;
+        break;
+      case M.zoom:
+        this.xMax = h, this.yMax = p, this.shouldUpdate = !0;
+        break;
+    }
+    return t;
+  }
+  // @override
+  onEnd(t) {
+    switch (this.controlType) {
+      case M.crop:
+        if (this.inCrop) {
+          const { scale: e, rect: i, scaleGrid: s, xMin: n, yMin: a, dpr: r, cropRange: c } = this, { left: h, top: x, right: p, bottom: d } = c, u = r.value;
+          p - h > 1 && d - x > 1 && (this.xMin += (h * u - s.left) * e.x, this.xMax = (p * u - s.left) * e.x + n, this.yMin += (i.y - d * u) * e.y, this.yMax = (i.y - x * u) * e.y + a), this.crop.hide(), this.cropOrigin = this.cropOffset = g.origin(), this.inCrop = !1, this.shouldUpdate = !0;
+        }
+        break;
+      case M.move:
+        break;
+      case M.zoom:
+        break;
+    }
+    t.ctrlKey && (this.controlType = this.prevControlType, this.setCursor());
+  }
+  get cropRange() {
+    const { cropOrigin: t, cropOffset: e, rectBounds: i } = this, [s, n] = D([t.x, e.x]), [a, r] = D([t.y, e.y]);
+    return W(
+      {
+        left: s,
+        top: a,
+        right: n,
+        bottom: r
+      },
+      [i.left, i.right],
+      [i.top, i.bottom]
+    );
+  }
+  updateCrop() {
+    const { cropRange: t, width: e, height: i, dpr: s } = this, { left: n, top: a, right: r, bottom: c } = t, h = s.value;
+    n === r || a === c ? this.crop.hide() : this.crop.update({
+      left: n,
+      top: a,
+      right: e / h - r,
+      bottom: i / h - c
+    });
+  }
+  setCenter(t, e) {
+    let { x: i, y: s } = g.origin().sub(this.getRatioOffset(0.5));
+    if (arguments.length === 1)
+      if (Array.isArray(t)) {
+        const [n, a] = t;
+        i += n, s += a;
+      } else typeof t != "number" && (i += t.x, s += t.y);
+    else arguments.length === 2 && typeof t == "number" && typeof e == "number" && (i += t, s += e);
+    this.xMin += i, this.xMax += i, this.yMin += s, this.yMax += s, this.shouldUpdate = !0;
+  }
+  setBounds(t, e, i, s) {
+    this.xMin = t ?? this.xMin, this.xMax = e ?? this.xMax, this.yMin = i ?? this.yMin, this.yMax = s ?? this.yMax, this.shouldUpdate = !0;
+  }
+  resize() {
+    super.resize(), this.updateCanvas();
+  }
+  reset(t) {
+    const { xMin: e, xMax: i, yMin: s, yMax: n } = l.config;
+    this.xMin = e, this.xMax = i, this.yMin = s, this.yMax = n, t?.(), this.shouldUpdate = !0;
+  }
+  // @override
+  dispose() {
+    super.dispose(), cancelAnimationFrame(this.raf), this.tooltip?.dispose(), this.dpr.dispose(), this.resizeObserver.disconnect(), this.canvasContainer.removeEventListener("mousemove", this.onMouseMove), this.canvasContainer.removeEventListener("mouseleave", this.onMouseLeave), this.canvasContainer.removeEventListener("dblclick", this.onDblClick), this.canvasContainer.removeEventListener("wheel", this.onWheel), this.root.removeChild(this.canvasContainer);
+  }
+}
+export {
+  l as C,
+  R as D,
+  $ as F,
+  g as P,
+  Z as T,
+  M as a,
+  K as b,
+  B as c,
+  E as d,
+  D as e,
+  T as f,
+  G as g,
+  y as h,
+  H as i,
+  Q as j,
+  F as k,
+  k as l,
+  U as m,
+  V as n,
+  O as o,
+  Y as p,
+  q as r,
+  j as s
+};