@data-vision/interactive-chart 0.0.8

package/build/heatmap-Br4YjrBg.js

@@ -0,0 +1,859 @@
+import { b as D, d as Y, r as B, F as G, e as P, f as b, h as $, D as X, P as m, i as q, T as K, j as J, k as N, l as Q, n as V, o as Z, m as E, s as H, p as _ } from "./chart-Cj4Fiwnb.js";
+class C {
+  r;
+  g;
+  b;
+  constructor(e, t, i) {
+    this.r = e, this.g = t, this.b = i;
+  }
+  getIntervalValue(e, t, i) {
+    return Math.abs((t - e) * i + e);
+  }
+  interval(e, t) {
+    const i = Math.max(0, t);
+    return new C(
+      this.getIntervalValue(this.r, e.r, i),
+      this.getIntervalValue(this.g, e.g, i),
+      this.getIntervalValue(this.b, e.b, i)
+    );
+  }
+  toHexValue(e) {
+    return e.toString(16).padStart(2, "0");
+  }
+  toHex() {
+    return "#" + [
+      this.r,
+      this.g,
+      this.b
+    ].map(this.toHexValue).join("");
+  }
+  toString() {
+    return `rgb(${this.r}, ${this.g}, ${this.b})`;
+  }
+}
+class ee {
+  colors;
+  constructor(e) {
+    this.colors = e;
+  }
+  addColor(e) {
+    this.colors.push(e);
+  }
+  toString() {
+    return this.colors.map(
+      (e) => e.toHex()
+    );
+  }
+  getOffsetColor(e) {
+    if (e < 1) {
+      const t = (this.colors.length - 1) * e, i = Math.floor(t);
+      return this.colors[i].interval(this.colors[i + 1], t - i);
+    }
+    return this.colors[this.colors.length - 1];
+  }
+}
+function M(d, e = "HH:mm:ss.xxx") {
+  const t = /* @__PURE__ */ new Map();
+  return t.set("Y", d.getFullYear()).set("M", d.getMonth() + 1).set("D", d.getDate()).set("H", d.getHours()).set("m", d.getMinutes()).set("s", d.getSeconds()).set("x", String(d.getMilliseconds()).padStart(3, "0")), e.replace(
+    new RegExp("(" + [...t.keys()].join("+|") + "+)", "g"),
+    (i, s, r, n) => String(t.get(n[r])).padStart(i.length, "0")
+  );
+}
+class te extends D {
+  constructor(e, t) {
+    super(e, t);
+  }
+  onUpdate(e) {
+    return Y(e.value + this.option.onUpdate(e), [0, 1]);
+  }
+}
+class ie extends D {
+  constructor(e, t) {
+    super(e, t);
+  }
+  onUpdate(e) {
+    return B(e.value, this.option.onUpdate(e));
+  }
+}
+const re = {
+  initValue: [0, 1]
+};
+class A extends G {
+  root;
+  container;
+  thumbSize = 10;
+  startThumb;
+  endThumb;
+  range;
+  resizeObserver;
+  width;
+  height;
+  brushLabel;
+  labelInput;
+  constructor(e, t) {
+    const { initValue: i, labelInput: s, style: r } = {
+      ...re,
+      ...t
+    };
+    super(i), this.root = e, this.container = this.createContainer(r), this.root.appendChild(this.container), this.brushLabel = s, this.brushLabel && this.initBrushLabelInput(), this.resizeObserver = new ResizeObserver(this.onResize), this.resizeObserver.observe(this.container), this.width = this.container.clientWidth, this.height = this.container.clientHeight, this.onStartValueChange = this.onStartValueChange.bind(this), this.onEndValueChange = this.onEndValueChange.bind(this), this.onRangeValueChange = this.onRangeValueChange.bind(this);
+    const [n, a] = i;
+    this.startThumb = this.createThumb(n, this.onStartValueChange), this.endThumb = this.createThumb(a, this.onEndValueChange), this.range = this.createRange(i, this.onRangeValueChange);
+  }
+  get value() {
+    return P(this._value);
+  }
+  set value([e, t]) {
+    this._value = [e, t], this.range.value = [e, t], this.startThumb.value = e, this.endThumb.value = t, this.updateBrushLabelInput();
+  }
+  getFormatLabel(e) {
+    const { from: t } = this.brushLabel;
+    return t(e);
+  }
+  updateBrushLabelInput() {
+    if (this.labelInput) {
+      const [e, t] = P(this._value), { start: i, end: s } = this.labelInput;
+      i.value = String(this.getFormatLabel(e)), s.value = String(this.getFormatLabel(t));
+    }
+  }
+  initBrushLabelInput() {
+    const e = {
+      position: "absolute",
+      height: "20px",
+      fontSize: "12px",
+      boxSizing: "border-box",
+      top: "0"
+    }, t = this.createLabelInput({
+      ...e,
+      width: "55px",
+      left: "-60px"
+    });
+    t.onchange = this.onStartLabelInputChange.bind(this);
+    const i = this.createLabelInput({
+      ...e,
+      width: "60px",
+      right: "-65px"
+    });
+    i.onchange = this.onEndLabelInputChange.bind(this), this.labelInput = {
+      start: t,
+      end: i
+    }, this.updateBrushLabelInput();
+  }
+  createLabelInput(e) {
+    const t = document.createElement("input");
+    return t.setAttribute("style", b(e)), t.setAttribute("type", "number"), this.container.appendChild(t), t;
+  }
+  createThumb(e, t) {
+    const i = this.getStyle.bind(this), s = this.onUpdate.bind(this), r = new te(this.container, {
+      initValue: e,
+      getStyle: i,
+      onUpdate: s
+    });
+    return r.addEventListener(t), r;
+  }
+  emitChangeEvent() {
+    for (const e of this.listeners)
+      e(this.value);
+  }
+  getRangeStyle({ value: [e, t] }) {
+    const { trackWidth: i, thumbSize: s } = this, r = s / 2;
+    return b({
+      position: "absolute",
+      left: i * e + r + "px",
+      top: "0",
+      backgroundColor: "hsla(240deg 100% 50% / 40%)",
+      cursor: "move",
+      right: i * (1 - t) + r + "px",
+      bottom: "0",
+      zIndex: "1"
+    });
+  }
+  createRange(e, t) {
+    const i = this.getRangeStyle.bind(this), s = new ie(this.container, {
+      initValue: e,
+      getStyle: i,
+      onUpdate: ({ value: [r, n], ...a }) => [
+        this.onUpdate({
+          value: r,
+          ...a
+        }),
+        this.onUpdate({
+          value: n,
+          ...a
+        })
+      ]
+    });
+    return s.addEventListener(t), s;
+  }
+  updateRangeValue() {
+    this.range.value = this.value, this.emitChangeEvent();
+  }
+  onStartValueChange(e) {
+    const [, t] = this._value;
+    this._value = [e, t], this.updateRangeValue(), this.updateBrushLabelInput();
+  }
+  onStartLabelInputChange(e) {
+    const t = e.target, i = +t.value, [s, r] = this._value, n = this.brushLabel.to(i);
+    if (n < r) {
+      const a = Math.max(0, n);
+      this._value = [a, r], this.startThumb.value = a, this.updateRangeValue(), n < 0 && (t.value = "0");
+    }
+  }
+  onEndValueChange(e) {
+    const [t] = this._value;
+    this._value = [t, e], this.updateRangeValue(), this.updateBrushLabelInput();
+  }
+  onEndLabelInputChange(e) {
+    const t = e.target, i = +t.value, [s] = this._value, r = this.brushLabel.to(i);
+    if (r > s) {
+      const n = Math.min(1, r);
+      this._value = [s, n], this.endThumb.value = n, this.updateRangeValue(), r > 1 && (t.value = String(this.brushLabel.from(1)));
+    }
+  }
+  onRangeValueChange([e, t]) {
+    this._value = [e, t], this.startThumb.value = e, this.endThumb.value = t, this.emitChangeEvent(), this.updateBrushLabelInput();
+  }
+  get trackWidth() {
+    return this.width - this.thumbSize;
+  }
+  onResize = () => {
+    this.width = this.container.clientWidth, this.height = this.container.clientHeight, this.startThumb.resize(), this.endThumb.resize(), this.range.resize();
+  };
+  onUpdate({ delta: e }) {
+    return e.x / this.trackWidth;
+  }
+  getStyle({ value: e }) {
+    const { thumbSize: t, trackWidth: i } = this;
+    return b({
+      position: "absolute",
+      backgroundColor: "hsl(240deg 100% 50%)",
+      width: `${t}px`,
+      userSelect: "none",
+      cursor: "ew-resize",
+      left: `${i * e}px`,
+      top: "0",
+      bottom: "0",
+      zIndex: "2"
+    });
+  }
+  createContainer(e) {
+    const t = document.createElement("div");
+    return t.setAttribute(
+      "style",
+      b({
+        position: "relative",
+        height: "20px",
+        backgroundColor: "#ddd",
+        ...e
+      })
+    ), t;
+  }
+  setStyle(e) {
+    $(this.container, e);
+  }
+  dispose() {
+    this.startThumb.dispose(), this.endThumb.dispose(), this.resizeObserver.disconnect(), this.root.removeChild(this.container);
+  }
+}
+class se extends A {
+  _root;
+  _container;
+  colors;
+  thumbSize = 4;
+  constructor(e, {
+    initValue: t = [0, 1],
+    colors: i,
+    style: s
+  }) {
+    const r = document.createElement("div");
+    super(r, {
+      initValue: t,
+      style: {
+        flexGrow: "1",
+        height: "100%",
+        backgroundColor: "#ccc"
+      }
+    }), this.height = 180, this.colors = i, this._root = e, this._container = this.setContainer(r, s), this.createScale();
+  }
+  get trackHeight() {
+    return this.height - this.thumbSize;
+  }
+  setContainer(e, t) {
+    const i = this.height;
+    return e.setAttribute(
+      "style",
+      b({
+        display: "flex",
+        width: "60px",
+        height: `${i}px`,
+        fontSize: "10px",
+        userSelect: "none",
+        ...t
+      })
+    ), this._root.appendChild(e), e;
+  }
+  createScale() {
+    const e = document.createElement("div");
+    e.setAttribute("style", b({
+      position: "relative",
+      minWidth: "40px"
+    }));
+    let t = 255;
+    for (; t >= 0; ) {
+      const i = document.createElement("span");
+      i.innerText = String(t), i.setAttribute("style", b({
+        position: "absolute",
+        paddingLeft: "5px",
+        left: "0",
+        top: (1 - t / 255) * 100 + "%",
+        fontSize: "inherit"
+      })), e.appendChild(i), t -= 51;
+    }
+    return this._container.appendChild(e), e;
+  }
+  onUpdate({ delta: e }) {
+    return e.y / this.trackHeight;
+  }
+  getStyle({ value: e }) {
+    const { thumbSize: t, trackHeight: i } = this;
+    return b({
+      position: "absolute",
+      width: "100%",
+      height: `${t}px`,
+      backgroundColor: "#222",
+      userSelect: "none",
+      cursor: "ns-resize",
+      left: "0",
+      top: `${i * e}px`,
+      right: "0",
+      zIndex: "2"
+    });
+  }
+  getRangeStyle({ value: e }) {
+    const [t, i] = e, { trackHeight: s, height: r, colors: n } = this, a = s * t, h = s * (1 - i);
+    let u = {
+      position: "absolute",
+      left: "0",
+      top: a + "px",
+      userSelect: "none",
+      cursor: "move",
+      right: "0",
+      bottom: h + "px",
+      zIndex: "1"
+    };
+    if (n) {
+      const c = n.join(", ");
+      u = {
+        ...u,
+        backgroundImage: `linear-gradient(0, ${c})`,
+        backgroundSize: `100% ${r}px`,
+        backgroundPosition: `0 -${a}px`
+      };
+    }
+    return b(u);
+  }
+  dispose() {
+    super.dispose(), this._root.removeChild(this._container);
+  }
+}
+class o extends X {
+  constructor(e) {
+    const t = document.createElement("div"), i = o.defaultRange;
+    super(t, i), Object.defineProperty(this, "root", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "resizeObserver", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "dpr", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "canvasContainer", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "canvas", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "width", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 0
+    }), Object.defineProperty(this, "height", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 0
+    }), Object.defineProperty(this, "context", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "dataCache", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: []
+    }), Object.defineProperty(this, "dataLength", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 1e4
+    }), Object.defineProperty(this, "precision", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 1
+    }), Object.defineProperty(this, "cropMode", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: !0
+    }), Object.defineProperty(this, "cropOrigin", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: m.origin()
+    }), Object.defineProperty(this, "cropOffset", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: m.origin()
+    }), Object.defineProperty(this, "gradient", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: new ee([
+        new C(0, 0, 255),
+        new C(0, 255, 0),
+        new C(255, 255, 0),
+        new C(255, 128, 0),
+        new C(255, 0, 0)
+      ])
+    }), Object.defineProperty(this, "brush", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "legend", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "tooltip", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "crop", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "crosshair", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "grid", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: { ...o.config.grid }
+    }), Object.defineProperty(this, "range", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: o.defaultRange
+    }), Object.defineProperty(this, "dataRange", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: o.defaultDataRange
+    }), Object.defineProperty(this, "raf", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "onResize", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: () => {
+        this.resize();
+      }
+    }), this.root = e, this.resizeObserver = new ResizeObserver(this.onResize), this.resizeObserver.observe(e), this.onDprChange = this.onDprChange.bind(this), this.dpr = new q(this.onDprChange), this.canvas = document.createElement("canvas"), this.context = this.canvas.getContext("2d");
+    const s = this.dpr.value;
+    this.context.scale(s, s), this.canvasContainer = this.initCanvas(t, this.canvas), this.onMouseMove = this.onMouseMove.bind(this), this.canvasContainer.addEventListener("mousemove", this.onMouseMove), this.onMouseLeave = this.onMouseLeave.bind(this), this.canvasContainer.addEventListener("mouseleave", this.onMouseLeave), this.onDblClick = this.onDblClick.bind(this), this.canvasContainer.addEventListener("dblclick", this.onDblClick), this.root.appendChild(this.canvasContainer), this.updateCanvas();
+    const r = this.grid;
+    o.config.legend || (r.right = 70), this.updateGrid();
+    const n = { ...this.grid }, a = this.brushLabelFrom.bind(this), h = this.brushLabelTo.bind(this);
+    this.brush = new A(e, {
+      initValue: i,
+      labelInput: {
+        from: a,
+        to: h
+      },
+      style: {
+        margin: `0 ${r.right}px 0 ${r.left}px`
+      }
+    }), this.onBrushValueChange = this.onBrushValueChange.bind(this), this.brush.addEventListener(this.onBrushValueChange), o.config.legend && (this.legend = new se(this.canvasContainer, {
+      colors: this.gradient.toString(),
+      initValue: this.dataRange,
+      style: {
+        position: "absolute",
+        top: `${r.top}px`,
+        right: "0"
+      }
+    }), this.onLegendValueChange = this.onLegendValueChange.bind(this), this.legend.addEventListener(this.onLegendValueChange)), this.tooltip = new K(this.canvasContainer, {
+      fontSize: `${o.config.fontSize}px`,
+      backgroundColor: o.config.accentColor,
+      ...o.config.tooltipStyle
+    }), this.crosshair = new J(this.canvasContainer, {
+      edge: n,
+      style: {
+        color: "#eee"
+      }
+    }), this.crop = new N(this.canvasContainer, {
+      backgroundColor: "#0006",
+      ...o.config.cropStyle
+    }), this.updateDraw();
+  }
+  get $root() {
+    return this.root;
+  }
+  get $canvas() {
+    return this.canvas;
+  }
+  updateGrid() {
+    const { left: e, top: t, right: i, bottom: s } = o.config.grid, r = this.dpr.value;
+    this.grid = {
+      left: e * r,
+      top: t * r,
+      right: i * r,
+      bottom: s * r
+    };
+  }
+  get maxCacheSize() {
+    return Math.min(this.height, o.config.maxCacheSize);
+  }
+  get drawRatio() {
+    return this.drawHeight / this.maxCacheSize;
+  }
+  brushLabelFrom(e) {
+    return Math.round(e * this.precision * this.dataLength);
+  }
+  brushLabelTo(e) {
+    return e / this.precision / this.dataLength;
+  }
+  reset() {
+    this.brush.value = o.defaultRange, this.range = o.defaultRange;
+  }
+  setCursor(e) {
+    $(this.canvasContainer, {
+      cursor: e
+    });
+  }
+  getOffset(e) {
+    return Q(e, this.canvasContainer);
+  }
+  onStart(e) {
+    if (this.cropMode = !e.ctrlKey, this.cropMode) {
+      const t = this.getOffset(e);
+      this.cropOrigin = this.cropOffset = t;
+    } else
+      this.setCursor("move");
+  }
+  onUpdate({ value: e, delta: t }) {
+    if (this.cropMode)
+      this.cropOffset = this.cropOffset.add(t), this.updateCrop();
+    else {
+      const [i, s] = this.range;
+      if (this.dataLength > 0 && s - i < 1) {
+        const r = -t.x * this.scale / this.dataLength, n = B([i, s], [r, r]);
+        this.isEqual([i, s], n) || (this.brush.value = n, this.range = n);
+      }
+    }
+    return e;
+  }
+  get scale() {
+    const [e, t] = this.pointRange;
+    return (t - e) / this.drawWidth;
+  }
+  get cropRange() {
+    const { cropOrigin: e, cropOffset: t, rect: i, grid: s, dpr: r } = this, [n, a] = P([e.x, Math.abs(t.x)]), h = r.value;
+    return [
+      Math.max(n, s.left / h),
+      Math.min(a, i.x / h)
+    ];
+  }
+  updateCrop() {
+    const { cropRange: e, width: t, grid: i, dpr: s } = this, [r, n] = e, a = s.value;
+    this.crop.update({
+      left: r,
+      top: i.top / a,
+      right: t / a - n,
+      bottom: i.bottom / a
+    });
+  }
+  onEnd() {
+    if (this.cropMode) {
+      const [e, t] = this.cropRange;
+      if (t - e >= 10) {
+        const [i] = this.pointRange, { left: s } = this.grid, r = [e - s, t - s].map((n) => (n * this.scale + i) / this.dataLength);
+        this.brush.value = r, this.range = r;
+      }
+      this.crop.hide(), this.cropMode = !1;
+    }
+    this.setCursor("crosshair");
+  }
+  get rect() {
+    const { width: e, height: t, grid: i } = this;
+    return new m(e - i.right, t - i.bottom);
+  }
+  get drawWidth() {
+    const { rect: e, grid: t } = this;
+    return e.x - t.left;
+  }
+  get drawHeight() {
+    const { rect: e, grid: t } = this;
+    return e.y - t.top;
+  }
+  get pointRange() {
+    return this.range.map((e) => e * this.dataLength);
+  }
+  onBrushValueChange(e) {
+    this.range = e;
+  }
+  onLegendValueChange(e) {
+    this.dataRange = V(e);
+  }
+  setDataLength(e) {
+    this.dataLength = e / this.precision;
+  }
+  setPrecision(e) {
+    this.precision !== e && (this.precision = e, this.brush.updateBrushLabelInput());
+  }
+  setData(e) {
+    const t = this.dataCache.length;
+    if (t === this.maxCacheSize && this.dataCache.pop(), e.length > this.dataLength) {
+      if (t > 0) {
+        const [i, s] = this.pointRange, r = [
+          Math.max(0, i / e.length),
+          Math.min(1, s / e.length)
+        ];
+        this.range = r, this.brush.value = r;
+      }
+      this.dataLength = e.length, this.brush.updateBrushLabelInput();
+    }
+    this.dataCache.unshift([/* @__PURE__ */ new Date(), e]);
+  }
+  setDataFilter([e, t]) {
+    const i = [
+      1 - t / 255,
+      1 - e / 255
+    ];
+    this.dataRange = V(i), this.legend && (this.legend.value = i);
+  }
+  async updateDraw() {
+    this.raf = requestAnimationFrame(this.updateDraw.bind(this));
+    const { context: e, dataCache: t, gradient: i, grid: s, width: r, height: n, pointRange: a, scale: h, dpr: u, dataRange: c, drawWidth: g, drawHeight: f, maxCacheSize: l } = this;
+    if (!document.hidden && r > 0 && n > 0) {
+      e.clearRect(0, 0, r, n);
+      const w = Math.floor(g), O = e.createImageData(w, l), v = O.data, [R, y] = c.map((p) => p * 255), [x] = a;
+      for (let p = 0; p < v.length; p += 4) {
+        const U = p / 4 % w, j = Math.floor(p / 4 / w);
+        let I = 0, T = 0, k = 255, W = 255;
+        if (j < t.length) {
+          const [, F] = t[j];
+          let S = F.at(Math.floor(U * h) + x);
+          (!S || S < R || S > y) && (S = 0);
+          const z = i.getOffsetColor(S / 255);
+          I = z.r, T = z.g, k = z.b;
+        }
+        v[p] = I, v[p + 1] = T, v[p + 2] = k, v[p + 3] = W;
+      }
+      const L = await createImageBitmap(O);
+      e.drawImage(L, s.left, s.top, g, f), L.close(), e.font = `${o.config.fontSize * u.value}px sans-serif`, this.drawAxisX(e), this.drawAxisY(e);
+    }
+  }
+  drawAxisX(e) {
+    const { axisYScaleOffset: t, xMinScale: i, xMaxScale: s, config: r } = o, { grid: n, rect: a, pointRange: h, precision: u } = this, [c, g] = h.map((l) => l * u);
+    e.beginPath(), e.moveTo(n.left - t.x, a.y), e.lineTo(a.x, a.y), e.strokeStyle = r.gridColor, e.stroke();
+    const { rules: f } = Z([c, g], [i, s]);
+    for (let l of f)
+      this.drawScaleX(e, l, [c, g]);
+  }
+  drawScaleX(e, t, [i, s]) {
+    const { grid: r, drawWidth: n, rect: a } = this, h = o.axisXScaleOffset, u = r.left + (t - i) * n / (s - i) + h.x, c = a.y + h.y;
+    e.beginPath(), e.moveTo(u, r.top), e.lineTo(u, c - h.y / 2), e.strokeStyle = o.config.gridColor, e.stroke();
+    const g = Math.round(t) + o.config.xUnit, { width: f, height: l } = E(e, g);
+    e.fillStyle = o.config.textColor, e.fillText(g, u - f / 2, c + l / 2);
+  }
+  drawAxisY(e) {
+    const { dataCache: t, drawRatio: i, drawHeight: s, grid: r } = this;
+    if (t.length > 0) {
+      const n = s / 8;
+      for (let a = 0; a <= s; a += n) {
+        const h = Math.ceil(a / i);
+        if (h <= t.length) {
+          let u = Math.min(Math.floor(h), t.length - 1);
+          const [c] = t[u];
+          this.drawScaleY(e, M(c), new m(r.left, r.top + a), a === 0);
+        }
+      }
+    }
+  }
+  drawScaleY(e, t, { x: i, y: s }, r = !1) {
+    const n = o.axisYScaleOffset, { height: a } = E(e, t);
+    e.beginPath(), e.moveTo(i - n.x, s), e.lineTo(r ? i + this.drawWidth : i, s), e.strokeStyle = o.config.gridColor, e.stroke(), e.fillStyle = o.config.textColor, e.fillText(t, n.x, s + a / 2 + n.y);
+  }
+  onMouseMove(e) {
+    const { grid: t, rect: i, scale: s, dpr: r, drawRatio: n, pointRange: a, dataCache: h, precision: u, dragging: c, tooltip: g, crosshair: f } = this, l = this.getOffset(e), w = H({
+      ...t,
+      right: i.x,
+      bottom: i.y
+    }, 1 / r.value);
+    if (_(l, w) && !c) {
+      const [O] = a, v = {
+        x: O + (l.x * r.value - t.left) * s,
+        y: l.y - t.top
+      }, R = Math.round(v.x * u) + "m";
+      let y = null;
+      const x = Math.floor(v.y * r.value / n);
+      if (x >= 0 && x < h.length) {
+        const [L] = h[x];
+        y = M(L);
+      }
+      g.update({
+        offset: new m(l.x, i.y * r.value),
+        content: R
+      }, y ? {
+        offset: new m(w.left, l.y),
+        content: y
+      } : null), f.update(l);
+    } else
+      f.hide(), g.hide();
+  }
+  onMouseLeave() {
+    this.tooltip.hide(), this.crosshair.hide();
+  }
+  onDblClick() {
+    this.reset();
+  }
+  onDprChange(e) {
+    this.updateCanvas(), this.context.scale(e, e), this.updateGrid(), this.crosshair.setEdge(this.grid);
+  }
+  initCanvas(e, t) {
+    return t.setAttribute("style", b({
+      display: "block",
+      width: "100%",
+      height: "100%"
+    })), e.appendChild(t), e;
+  }
+  updateCanvas() {
+    const e = this.dpr.value;
+    this.width = this.root.clientWidth * e;
+    const t = this.root.clientHeight - o.brushHeight;
+    this.height = t * e, this.canvas.width = this.width, this.canvas.height = this.height, this.canvasContainer.setAttribute("style", b({
+      position: "relative",
+      height: `${t}px`,
+      cursor: "crosshair",
+      overflow: "hidden",
+      "--scale": 1 / e
+    }));
+  }
+  resize() {
+    super.resize(), this.updateCanvas();
+  }
+  // @override
+  dispose() {
+    super.dispose(), cancelAnimationFrame(this.raf), this.brush.dispose(), this.legend?.dispose(), this.tooltip.dispose(), this.crop.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.root.removeChild(this.canvasContainer);
+  }
+}
+Object.defineProperty(o, "version", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: "0.0.7"
+});
+Object.defineProperty(o, "config", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: {
+    xUnit: "m",
+    gridColor: "#aaa",
+    textColor: "#222",
+    accentColor: "#000",
+    fontSize: 13,
+    cropStyle: {},
+    tooltipStyle: {
+      color: "#fff"
+    },
+    maxCacheSize: 400,
+    legend: !0,
+    grid: {
+      left: 90,
+      top: 10,
+      right: 80,
+      bottom: 30
+    }
+  }
+});
+Object.defineProperty(o, "defaultRange", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: [0, 1]
+});
+Object.defineProperty(o, "defaultDataRange", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: [0, 1]
+});
+Object.defineProperty(o, "xMinScale", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: 3
+});
+Object.defineProperty(o, "xMaxScale", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: 12
+});
+Object.defineProperty(o, "axisXScaleOffset", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: new m(0, 15)
+});
+Object.defineProperty(o, "axisYScaleOffset", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: new m(5, 0)
+});
+Object.defineProperty(o, "brushHeight", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: 30
+});
+export {
+  ee as G,
+  o as H,
+  C as R
+};