evui 3.4.214 → 3.5.0

package/dist/components/chart/chart.core.js

@@ -0,0 +1,738 @@
+import { mobileCheck as M, truthyNumber as C } from "../../common/utils.js";
+import I from "./model/index.js";
+import D from "./scale/scale.time.js";
+import O from "./scale/scale.linear.js";
+import k from "./scale/scale.logarithmic.js";
+import z from "./scale/scale.step.js";
+import T from "./scale/scale.time.category.js";
+import E from "./plugins/plugins.title.js";
+import A from "./plugins/plugins.legend.js";
+import B from "./plugins/plugins.legend.gradient.js";
+import H from "./plugins/plugins.scrollbar.js";
+import P from "./plugins/plugins.interaction.js";
+import j from "./plugins/plugins.tooltip.js";
+import X from "./plugins/plugins.pie.js";
+import Y from "./element/element.tip.js";
+class ie {
+  constructor(e, t, i, s, a, r, h) {
+    Object.keys(I).forEach((o) => Object.assign(this, I[o])), i.brush || (Object.assign(this, j), Object.assign(this, P), Object.assign(this, Y), Object.assign(this, A), Object.assign(this, X), Object.assign(this, E), Object.assign(this, H)), i.type === "heatMap" && i.legend.type === "gradient" && Object.assign(this, B), this.isMobile = M(), this.brushSeries = h, this.target = e, this.data = t, this.options = i, this.listeners = s, this.wrapperDOM = document.createElement("div"), this.wrapperDOM.className = i.brush ? "ev-chart-brush-wrapper" : "ev-chart-wrapper", this.chartDOM = document.createElement("div"), this.chartDOM.className = i.brush ? "ev-chart-brush-container" : "ev-chart-container", this.wrapperDOM.appendChild(this.chartDOM), this.target.appendChild(this.wrapperDOM), this.displayCanvas = document.createElement("canvas"), this.displayCanvas.setAttribute("style", "display: block;"), this.displayCtx = this.displayCanvas.getContext("2d"), this.bufferCanvas = document.createElement("canvas"), this.bufferCanvas.setAttribute("style", "display: block;"), this.bufferCtx = this.bufferCanvas.getContext("2d"), this.pixelRatio = window.devicePixelRatio || 1, this.oldPixelRatio = this.pixelRatio, this.chartDOM.appendChild(this.displayCanvas), i.brush || (this.overlayCanvas = document.createElement("canvas"), this.overlayCanvas.setAttribute("style", "display: block; z-index: 2;"), this.overlayCanvas.setAttribute("class", "overlay-canvas"), this.overlayCtx = this.overlayCanvas.getContext("2d"), this.chartDOM.appendChild(this.overlayCanvas), this.overlayCanvas.style.position = "absolute", this.overlayCanvas.style.top = "0px", this.overlayCanvas.style.left = "0px"), this.isInitLegend = !1, this.isInitTitle = !1, this.isInit = !1, this.scrollbar = {
+      x: { isInit: !1 },
+      y: { isInit: !1 }
+    }, this.seriesList = {}, this.lastTip = { pos: null, value: null }, this.seriesInfo = {
+      charts: { pie: [], bar: [], line: [], scatter: [], heatMap: [] },
+      count: 0
+    }, this.defaultSelectItemInfo = a, this.defaultSelectInfo = r, this.legendHover = null;
+  }
+  /**
+   * Initialize chart object
+   *
+   * @returns {undefined}
+   */
+  init() {
+    var c;
+    const { series: e, data: t, labels: i, groups: s } = this.data, { type: a, axesX: r, axesY: h, tooltip: o, horizontal: n, realTimeScatter: l } = this.options;
+    this.createSeriesSet(e, a, n, s), s.length && this.addGroupInfo(s), l != null && l.use ? (this.dataSet = {}, this.createRealTimeScatterDataSet(t)) : this.createDataSet(t, i), this.minMax = this.getStoreMinMax(), this.initRect(), this.axesX = this.createAxes("x", r), this.axesY = this.createAxes("y", h), this.initDefaultSelectInfo(), this.drawChart(), o.use && !this.isInitTooltip && this.createTooltipDOM(), (c = this.createEventFunctions) == null || c.call(this), this.isInit = !0;
+  }
+  _updateSeriesCount() {
+    this.seriesInfo.count = Object.values(this.seriesList).filter((e) => e.show).length;
+  }
+  /**
+   * Initialize chart rectangle
+   *
+   * @returns {undefined}
+   */
+  initRect() {
+    var t, i, s, a, r, h;
+    const e = this.options;
+    e.title.show && (this.isInitTitle || this.initTitle(), this.showTitle()), e.legend.show && !e.legend.external ? (this.isInitLegend || this.initLegend(), this.setLegendPosition()) : e.legend.show && e.legend.external && this._updateSeriesCount(), ((s = (i = (t = e.axesX) == null ? void 0 : t[0]) == null ? void 0 : i.scrollbar) != null && s.use || (h = (r = (a = e.axesY) == null ? void 0 : a[0]) == null ? void 0 : r.scrollbar) != null && h.use) && this.initScrollbar(), this.chartRect = this.getChartRect();
+  }
+  drawSyncedIndicator({ horizontal: e, label: t, mousePosition: i }) {
+    this.drawSyncedIndicator({ horizontal: e, label: t, mousePosition: i });
+  }
+  adjustXAndYAxisWidth() {
+    var i, s, a, r;
+    const e = (h, o, n) => {
+      const {
+        interval: l,
+        graphMin: c,
+        graphMax: d,
+        steps: g = 0,
+        minIndex: u,
+        maxIndex: x,
+        indexInterval: m
+      } = h ?? {};
+      let v = [];
+      if ((n == null ? void 0 : n.type) === "step" && u !== void 0 && x !== void 0 && m !== void 0) {
+        const { labels: f } = this.data, y = o === "x" ? (f == null ? void 0 : f.x) ?? f ?? [] : (f == null ? void 0 : f.y) ?? f ?? [];
+        v = [];
+        for (let p = u; p <= x; p += m)
+          y[p] !== void 0 && v.push(y[p]);
+      } else if (l)
+        v = Array.from({ length: g }, (f, y) => c + y * l), v.push(d);
+      else {
+        const { labels: f } = this.data;
+        v = o === "x" ? (f == null ? void 0 : f.x) ?? f ?? [] : (f == null ? void 0 : f.y) ?? f ?? [];
+      }
+      return v;
+    }, t = {
+      x: (s = (i = this.axesRange) == null ? void 0 : i.x) == null ? void 0 : s.map((h, o) => {
+        var u, x, m;
+        const n = this.axesX[o], l = (u = this.axesSteps) == null ? void 0 : u.x[o], c = e(l, "x", n), d = C((x = n == null ? void 0 : n.labelStyle) == null ? void 0 : x.fixWidth) ? n.labelStyle.fixWidth : 0, g = ((m = n == null ? void 0 : n.getLabelWidthHasMaxLength) == null ? void 0 : m.call(n, c, this.chartRect)) ?? 0;
+        return {
+          ...h,
+          size: {
+            width: d || Math.max(g, h.size.width),
+            height: h.size.height
+          }
+        };
+      }),
+      y: (r = (a = this.axesRange) == null ? void 0 : a.y) == null ? void 0 : r.map((h, o) => {
+        var u, x, m;
+        const n = this.axesY[o], l = (u = this.axesSteps) == null ? void 0 : u.y[o], c = e(l, "y", n), d = C((x = n == null ? void 0 : n.labelStyle) == null ? void 0 : x.fixWidth) ? n.labelStyle.fixWidth : 0, g = ((m = n == null ? void 0 : n.getLabelWidthHasMaxLength) == null ? void 0 : m.call(n, c, this.chartRect)) ?? 0;
+        return {
+          ...h,
+          size: {
+            width: d || Math.max(g, h.size.width),
+            height: h.size.height
+          }
+        };
+      })
+    };
+    this.axesRange = t, this.labelOffset = this.getLabelOffset(t), this.labelRange = this.getAxesLabelRange(), this.axesSteps = this.calculateSteps();
+  }
+  emitAxesScaleChange() {
+    var o;
+    if (typeof ((o = this.listeners) == null ? void 0 : o["axes-scale-change"]) != "function")
+      return;
+    const e = this._lastEmittedAxesRange, t = this.labelRange, i = (n, l) => (n == null ? void 0 : n.min) === (l == null ? void 0 : l.min) && (n == null ? void 0 : n.max) === (l == null ? void 0 : l.max), s = ({ min: n, max: l }) => ({ minSteps: n, maxSteps: l }), a = t.x.every((n, l) => {
+      var d;
+      return !!!((d = this.options.axesX[l]) != null && d.scaleChange) || !!e && i(n, e.x[l]);
+    }), r = t.y.every((n, l) => {
+      var d;
+      return !!!((d = this.options.axesY[l]) != null && d.scaleChange) || !!e && i(n, e.y[l]);
+    });
+    if (a && r)
+      return;
+    this._lastEmittedAxesRange = t;
+    const h = {
+      x: t.x.map(s),
+      y: t.y.map(s)
+    };
+    this.listeners["axes-scale-change"](h);
+  }
+  /**
+   * To draw canvas chart, it processes several sequential jobs
+   * @param {any} [hitInfo=undefined]    from mousemove callback (object or object[] of undefined)
+   *
+   * @returns {undefined}
+   */
+  drawChart(e) {
+    var t, i, s, a, r, h;
+    this.initScale(), this.axesRange = this.getAxesRange(), this.labelOffset = this.getLabelOffset(), this.labelRange = this.getAxesLabelRange(), this.axesSteps = this.calculateSteps(), this.adjustXAndYAxisWidth(), this.emitAxesScaleChange(), this.drawAxis(e), this.drawSeries(e), ((i = (t = this.scrollbar) == null ? void 0 : t.x) != null && i.use || (a = (s = this.scrollbar) == null ? void 0 : s.y) != null && a.use) && (this.initScrollbar(), this.updateScrollbarPosition()), this.drawTip(), this.bufferCanvas && ((r = this.bufferCanvas) == null ? void 0 : r.width) > 1 && ((h = this.bufferCanvas) == null ? void 0 : h.height) > 1 && this.displayCtx.drawImage(this.bufferCanvas, 0, 0);
+  }
+  /**
+   * Collect duplicate point keys for scatter overlap detection
+   * @param {Map<string, string>} duple
+   * @param {string[]} chartTypeSet
+   *
+   * @returns {undefined}
+   */
+  collectDuplicatePoints(e, t) {
+    var s, a, r;
+    const i = !!this.options.seriesReverse;
+    for (let h = i ? t.length - 1 : 0; i ? h >= 0 : h < t.length; i ? h-- : h++) {
+      const o = this.seriesList[t[h]];
+      if (!!(o != null && o.show))
+        if ((s = this.options.realTimeScatter) != null && s.use) {
+          const l = (a = o.data[o.sId]) == null ? void 0 : a.dataGroup;
+          for (let c = 0; c < l.length; c++) {
+            const d = ((r = l[c]) == null ? void 0 : r.data) || [];
+            for (let g = 0; g < d.length; g++) {
+              const u = d[g];
+              e.set(`${u.x}${u.y}`, o.sId);
+            }
+          }
+        } else {
+          const l = this.data.data[t[h]] ?? [];
+          for (let c = 0; c < l.length; c++) {
+            const d = l[c];
+            e.set(`${d.x}${d.y}`, o.sId);
+          }
+        }
+    }
+  }
+  /**
+   * Draw each series
+   * @param {any} [hitInfo=undefined]   legend mouseover callback (object or undefined)
+   *
+   * @returns {undefined}
+   */
+  drawSeries(e) {
+    var u;
+    const {
+      maxTip: t,
+      selectLabel: i,
+      selectItem: s,
+      selectSeries: a,
+      brush: r,
+      displayOverflow: h,
+      unSelectedOpacity: o
+    } = this.options, n = {
+      ctx: this.bufferCtx,
+      chartRect: this.chartRect,
+      labelOffset: this.labelOffset,
+      axesSteps: this.axesSteps,
+      maxTipOpt: { background: t.background, color: t.color },
+      selectLabel: { option: i, selected: this.defaultSelectInfo },
+      selectSeries: { option: a, selected: this.defaultSelectInfo },
+      selectItem: { option: s, selected: this.defaultSelectItemInfo },
+      overlayCtx: this.overlayCtx,
+      isBrush: !!r,
+      displayOverflow: h,
+      unSelectedOpacity: o
+    };
+    let l = 0, c = 0;
+    this.seriesInfo.charts.bar.forEach((x) => {
+      this.seriesList[x].show && c++;
+    });
+    const d = /* @__PURE__ */ new Map(), g = Object.keys(this.seriesInfo.charts);
+    for (let x = 0; x < g.length; x++) {
+      const m = g[x], v = this.seriesInfo.charts[m];
+      m === "scatter" && this.options.coordinateDedupe && this.collectDuplicatePoints(d, v);
+      for (let f = 0; f < v.length; f++) {
+        let y = this.seriesList[v[f]];
+        switch (m) {
+          case "line": {
+            const p = e == null ? void 0 : e.legend;
+            y.draw({
+              legendHitInfo: p,
+              ...n
+            });
+            break;
+          }
+          case "heatMap": {
+            const p = e == null ? void 0 : e.legend;
+            y.draw({
+              legendHitInfo: p,
+              ...n
+            });
+            break;
+          }
+          case "bar": {
+            const p = e == null ? void 0 : e.legend, { thickness: S, cPadRatio: b, borderRadius: R } = this.options;
+            y.draw({
+              thickness: S,
+              cPadRatio: b,
+              borderRadius: R,
+              showSeriesCount: c,
+              showIndex: l,
+              legendHitInfo: p,
+              ...n
+            }), y.show && l++;
+            break;
+          }
+          case "pie": {
+            const p = this.lastHitInfo ?? { sId: (u = this.defaultSelectItemInfo) == null ? void 0 : u.seriesID }, S = e == null ? void 0 : e.legend;
+            this.options.sunburst ? this.drawSunburst({
+              selectInfo: p,
+              legendHitInfo: S,
+              unSelectedOpacity: n.unSelectedOpacity
+            }) : this.drawPie({
+              selectInfo: p,
+              legendHitInfo: S,
+              unSelectedOpacity: n.unSelectedOpacity
+            }), this.options.doughnutHoleSize > 0 && this.drawDoughnutHole();
+            break;
+          }
+          case "scatter": {
+            const p = e == null ? void 0 : e.legend;
+            let S;
+            if (s.use && s.useSeriesOpacity) {
+              const b = this.lastHitInfo, R = this.defaultSelectItemInfo;
+              b != null && b.maxIndex || (b == null ? void 0 : b.maxIndex) === 0 ? S = {
+                seriesID: b.sId,
+                dataIndex: b.maxIndex
+              } : R != null && R.dataIndex || (R == null ? void 0 : R.dataIndex) === 0 ? S = { ...R } : S = null;
+            }
+            this.options.seriesReverse && (y = this.seriesList[v.at(-1 - f)]), y.draw({
+              legendHitInfo: p,
+              selectInfo: S,
+              duple: d,
+              coordinateDedupe: this.options.coordinateDedupe,
+              ...n
+            });
+            break;
+          }
+        }
+      }
+    }
+  }
+  /**
+   * Draw Tip with hitInfo and defaultSelectItemInfo
+   */
+  drawTip() {
+    var t;
+    let e;
+    this.lastHitInfo ? e = this.lastHitInfo : this.defaultSelectItemInfo ? e = this.getItem(this.defaultSelectItemInfo, !1) : this.defaultSelectInfo && this.options.selectLabel.use ? e = this.getItem(this.defaultSelectInfo, !1) : e = null, (t = this.drawTips) == null || t.call(this, e);
+  }
+  /**
+   * Create axes
+   * @param {string} dir    axis direction
+   * @param {array}  axes   axes array
+   *
+   * @returns {array} axes objects in array
+   */
+  createAxes(e, t = []) {
+    const i = this.bufferCtx, a = this.options.type === "heatMap" ? this.data.labels[e] : this.data.labels, r = this.options;
+    return t.map((h) => {
+      switch (h.type) {
+        case "linear":
+          return new O(e, h, i, r);
+        case "time":
+          return h.categoryMode ? new T(e, h, i, a, r) : new D(e, h, i, r);
+        case "log":
+          return new k(e, h, i);
+        case "step":
+          return new z(e, h, i, a, r);
+        default:
+          return !1;
+      }
+    });
+  }
+  /**
+   * Calculate min/max value, label and size information for each axis
+   *
+   * @returns {object} axes min/max information
+   */
+  getAxesRange() {
+    const e = this.axesX.map(
+      (i, s) => i.calculateScaleRange(this.minMax.x[s], this.scrollbar.x, this.chartRect)
+    ), t = this.axesY.map(
+      (i, s) => i.calculateScaleRange(this.minMax.y[s], this.scrollbar.y, this.chartRect)
+    );
+    return { x: e, y: t };
+  }
+  /**
+   * Draw each axis
+   *
+   * @returns {undefined}
+   */
+  drawAxis(e) {
+    this.axesX.forEach((t, i) => {
+      t.draw(
+        this.chartRect,
+        this.labelOffset,
+        this.axesSteps.x[i],
+        e,
+        this.defaultSelectInfo,
+        this.data.labels
+      );
+    }), this.axesY.forEach((t, i) => {
+      t.draw(
+        this.chartRect,
+        this.labelOffset,
+        this.axesSteps.y[i],
+        e,
+        this.defaultSelectInfo
+      );
+    });
+  }
+  /**
+   * With each axis's min/max value and label information, calculate how many labels in each axis
+   *
+   * @returns {object} each axis's label steps in axes array
+   */
+  calculateSteps() {
+    const e = this.axesX.map((i, s) => {
+      const a = {
+        minValue: this.axesRange.x[s].min,
+        maxValue: this.axesRange.x[s].max,
+        minIndex: this.axesRange.x[s].minIndex,
+        maxIndex: this.axesRange.x[s].maxIndex,
+        minSteps: this.labelRange.x[s].min,
+        maxSteps: this.labelRange.x[s].max
+      };
+      return i.calculateSteps(a);
+    }), t = this.axesY.map((i, s) => {
+      const a = {
+        minValue: this.axesRange.y[s].min,
+        maxValue: this.axesRange.y[s].max,
+        minIndex: this.axesRange.y[s].minIndex,
+        maxIndex: this.axesRange.y[s].maxIndex,
+        minSteps: this.labelRange.y[s].min,
+        maxSteps: this.labelRange.y[s].max
+      };
+      return i.calculateSteps(a);
+    });
+    return { x: e, y: t };
+  }
+  /**
+   * Calculate axis's min/max label steps
+   *
+   * @returns {object} axes's label range
+   */
+  getAxesLabelRange() {
+    const e = this.axesX.map((i, s) => {
+      const a = this.axesRange.x[s].size;
+      return i.calculateLabelRange("x", this.chartRect, this.labelOffset, a.width);
+    }), t = this.axesY.map((i, s) => {
+      const a = this.axesRange.y[s].size;
+      return i.calculateLabelRange("y", this.chartRect, this.labelOffset, a.height);
+    });
+    return { x: e, y: t };
+  }
+  /**
+   * Reset devicePixelRatio for high DPI
+   *
+   * @returns {undefined}
+   */
+  initScale() {
+    const e = window.devicePixelRatio || 1, t = this.displayCtx.webkitBackingStorePixelRatio || this.displayCtx.mozBackingStorePixelRatio || this.displayCtx.msBackingStorePixelRatio || this.displayCtx.oBackingStorePixelRatio || this.displayCtx.backingStorePixelRatio || 1;
+    this.pixelRatio = e / t, this.oldPixelRatio !== this.pixelRatio && (this.oldPixelRatio = this.pixelRatio), this.bufferCtx.scale(this.pixelRatio, this.pixelRatio), this.overlayCtx && this.overlayCtx.scale(this.pixelRatio, this.pixelRatio);
+  }
+  /**
+   * Get chart DOM size and set canvas size
+   * @typedef {import('./model/index').ChartDOMSize} ChartDOMSize
+   *
+   * @returns {ChartDOMSize} chart size information
+   */
+  getChartDOMRect() {
+    var s;
+    const e = (s = this.chartDOM) == null ? void 0 : s.getBoundingClientRect(), t = (e == null ? void 0 : e.width) || 10, i = (e == null ? void 0 : e.height) || 10;
+    return this.setWidth(t), this.setHeight(i), { width: t, height: i };
+  }
+  /**
+   * Calculate chart size
+   * @typedef {import('./model/index').ChartRect} ChartRect
+   *
+   * @returns {ChartRect} chart size information
+   */
+  getChartRect() {
+    var S, b, R, w;
+    const { width: e, height: t } = this.getChartDOMRect(), i = this.options.padding, s = (b = (S = this.options.axesX) == null ? void 0 : S[0]) == null ? void 0 : b.title, a = (w = (R = this.options.axesY) == null ? void 0 : R[0]) == null ? void 0 : w.title, r = 10;
+    let h = 0;
+    s != null && s.use && (s != null && s.text) && (h = (isNaN(s == null ? void 0 : s.fontSize) ? 12 : s == null ? void 0 : s.fontSize) + r);
+    let o = 0;
+    a != null && a.use && (a != null && a.text) && (o = (isNaN(a == null ? void 0 : a.fontSize) ? 12 : a == null ? void 0 : a.fontSize) + r);
+    const n = this.scrollbar.x, l = this.scrollbar.y;
+    let c = 0;
+    n != null && n.use && (c = n == null ? void 0 : n.height);
+    let d = 0;
+    l != null && l.use && (d = l == null ? void 0 : l.width);
+    const g = i.left + i.right + d, u = i.top + i.bottom + h + o + c, x = e > g ? e - g : e, m = t > u ? t - u : t, v = i.left, f = Math.max(e - i.right - d, v + 2), y = i.top + o, p = Math.max(t - i.bottom - h - c, y + 2);
+    return {
+      x1: v,
+      x2: f,
+      y1: y,
+      y2: p,
+      chartWidth: x,
+      chartHeight: m,
+      width: e,
+      height: t
+    };
+  }
+  /**
+   * Set canvas width
+   * @param {number} width    canvas width from chartDOM.width
+   *
+   * @returns {undefined}
+   */
+  setWidth(e) {
+    this.displayCanvas && (this.displayCanvas.width = e * this.pixelRatio, this.displayCanvas.style.width = `${e}px`, this.bufferCanvas.width = e * this.pixelRatio, this.bufferCanvas.style.width = `${e}px`, this.overlayCanvas && (this.overlayCanvas.width = e * this.pixelRatio, this.overlayCanvas.style.width = `${e}px`));
+  }
+  /**
+   * Set canvas height
+   * @param {number} height    canvas width from chartDOM.height
+   *
+   * @returns {undefined}
+   */
+  setHeight(e) {
+    this.displayCanvas && (this.displayCanvas.height = e * this.pixelRatio, this.displayCanvas.style.height = `${e}px`, this.bufferCanvas.height = e * this.pixelRatio, this.bufferCanvas.style.height = `${e}px`, this.overlayCanvas && (this.overlayCanvas.height = e * this.pixelRatio, this.overlayCanvas.style.height = `${e}px`));
+  }
+  /**
+   * Calculate labels offset from chart rect (Axis 영역을 벗어나는 label 크기 계산)
+   *
+   * ex)
+   * Y축 label의 넓이와 (X축 최소값 label 넓이 / 2) 중 넓은 값이 left label offset으로 처리됨
+   *
+   * 0 |
+   *   |
+   *   |
+   * 0 ----------------------
+   * hh:mm                 hh:mm
+   *
+   * @param {object} adjustedRange
+   * {
+   *  min: number, max: number, minLabel: string, maxLabel: string,
+   *  size: {width: number, height: number}
+   *  }
+   * minLabel and maxLabel is formatted label
+   * @returns {object} label offset for edge
+   */
+  getLabelOffset(e = null) {
+    const t = this.axesX, i = this.axesY, s = e ?? this.axesRange, a = { top: 2, left: 2, right: 2, bottom: 2 }, r = { width: 14, height: 4 };
+    let h = 0, o = 0;
+    return t.forEach((n, l) => {
+      var c;
+      (c = n.labelStyle) != null && c.show && (h = s.x[l].size.width + r.width, o = s.x[l].size.height + r.height, n.position === "bottom" ? o > a.bottom && (a.bottom = o) : n.position === "top" && o > a.top && (a.top = o), a.left = h / 2 > a.left ? h / 2 : a.left, a.right = h / 2 > a.right ? h / 2 : a.right);
+    }), i.forEach((n, l) => {
+      var c;
+      (c = n.labelStyle) != null && c.show && (h = s.y[l].size.width + r.width, n.position === "left" ? h > a.left && (a.left = h) : n.position === "right" && h > a.right && (a.right = h), a.top = o / 2 > a.top ? o / 2 : a.top, a.bottom = o / 2 > a.bottom ? o / 2 : a.bottom);
+    }), a;
+  }
+  /**
+   * To re-render chart, reset properties, canvas and then render chart.
+   * @param {object} updateInfo   information for each components are needed to update
+   *
+   * @returns {undefined}
+   */
+  update(e) {
+    var m, v, f, y, p, S, b;
+    const t = this.options, i = this.data.data, s = this.data.labels, a = this.data.groups, r = this.data.series, {
+      updateSeries: h,
+      updateSelTip: o,
+      updateLegend: n,
+      updateData: l,
+      updateTooltip: c,
+      updateByScrollbar: d,
+      lightUpdate: g
+    } = e;
+    if (!this.isInit)
+      return;
+    if (d && ((m = this.updateScrollbar) == null || m.call(this, l)), this.resetProps(), this.updateSeries = h, h && (this.seriesInfo = null, this.seriesList = null, this.lastTip = null, this.seriesInfo = {
+      charts: {
+        pie: [],
+        bar: [],
+        line: [],
+        scatter: [],
+        heatMap: []
+      },
+      count: 0
+    }, this.seriesList = {}, this.lastTip = { pos: null, value: null }, this.createSeriesSet(r, t.type, t.horizontal, a), this.legendDOM && !t.legend.external && this.updateLegend()), o.update && (this.lastTip.value = null, o.keepDomain || (this.lastTip.pos = null, this.lastHitInfo = null)), !g)
+      if (a.length && this.addGroupInfo(a), (v = this.options.realTimeScatter) != null && v.use ? (this.dataSet || (this.dataSet = {}), this.createRealTimeScatterDataSet(i)) : this.createDataSet(i, s), t.title.show ? (this.isInitTitle ? this.updateTitle() : this.initTitle(), this.showTitle()) : this.isInitTitle && this.hideTitle(), t.legend.show && !t.legend.external) {
+        const R = !!((y = (f = t.legend) == null ? void 0 : f.table) != null && y.use) && t.type !== "heatMap" && t.type !== "scatter";
+        this.isInitLegend ? h ? this.updateLegend() : n ? this.forceUpdateLegend() : R && l && this.updateLegendTableValues() : this.initLegend(), this.setLegendPosition(), this.updateLegendContainerSize(), this.showLegend();
+      } else t.legend.show && t.legend.external ? (h || l) && (this._updateSeriesCount(), this.emitLegendData()) : this.isInitLegend && this.hideLegend();
+    c && (this.isInitTooltip || this.createTooltipDOM(), this.tooltipDOM.innerHTML = "", (S = (p = t.tooltip) == null ? void 0 : p.formatter) != null && S.html || this.setDefaultTooltipLayout()), this.minMax = this.getStoreMinMax(), this.axesX = this.createAxes("x", t.axesX), this.axesY = this.createAxes("y", t.axesY), this.initDefaultSelectInfo();
+    let u = e == null ? void 0 : e.hitInfo;
+    !(u != null && u.legend) && ((b = this.legendHover) != null && b.sId) && (u = { ...u || {}, legend: this.legendHover }), this.render(u), this.dragInfo && this.drawSelectionArea ? this.drawSelectionArea(this.dragInfo) : this.dragInfoBackup && (this.dragInfoBackup = null);
+  }
+  /**
+   * To re-render chart, reset properties
+   *
+   * @returns {undefined}
+   */
+  resetProps() {
+    this.axesX[0] = null, this.axesY[0] = null, this.axesX = null, this.axesY = null, this.minMax = null, this.axesRange = null, this.labelOffset = null, this.chartRect = null;
+  }
+  /**
+   * Clear overlay canvas
+   *
+   * @returns {undefined}
+   */
+  overlayClear() {
+    this.clearRectRatio = this.pixelRatio < 1 ? this.pixelRatio : 1, this.overlayCtx.clearRect(
+      0,
+      0,
+      this.overlayCanvas.width / this.clearRectRatio,
+      this.overlayCanvas.height / this.clearRectRatio
+    );
+  }
+  /**
+   * Clear display and buffer canvas
+   *
+   * @returns {undefined}
+   */
+  clear() {
+    this.clearRectRatio = this.pixelRatio < 1 ? this.pixelRatio : 1, this.displayCanvas && this.displayCtx.clearRect(
+      0,
+      0,
+      this.displayCanvas.width / this.clearRectRatio,
+      this.displayCanvas.height / this.clearRectRatio
+    ), this.bufferCanvas && this.bufferCtx.clearRect(
+      0,
+      0,
+      this.bufferCanvas.width / this.clearRectRatio,
+      this.bufferCanvas.height / this.clearRectRatio
+    ), this.overlayCanvas && this.overlayCtx.clearRect(
+      0,
+      0,
+      this.overlayCanvas.width / this.clearRectRatio,
+      this.overlayCanvas.height / this.clearRectRatio
+    );
+  }
+  /**
+   * Resize chart
+   * @param {Function} promiseRes After evChart resize completes,
+   *   callback completion status with promiseRes to draw a Brush over it.
+   *
+   * @returns {undefined}
+   */
+  resize(e) {
+    var t, i, s;
+    (t = this.scrollbar) != null && t.x && delete this.scrollbar.x.savedPosition, (i = this.scrollbar) != null && i.y && delete this.scrollbar.y.savedPosition, this.clear(), this.bufferCtx.restore(), this.bufferCtx.save(), this.initRect(), this.initScale(), this.chartRect = this.getChartRect(), this.drawChart(), this.dragInfoBackup && ((s = this.drawSelectionArea) == null || s.call(this, this.dragInfoBackup)), e && e(!0);
+  }
+  /**
+   * Render chart
+   * @param {any} [hitInfo=undefined]   hit item from mouse click/dblclick
+   *
+   * @returns {undefined}
+   */
+  render(e) {
+    this.isInit && (this.clear(), this.chartRect = this.getChartRect(), this.drawChart(e));
+  }
+  /**
+   * Get legend series list respecting group order
+   *
+   * @returns {Array} array of [sId, series] pairs
+   */
+  _getLegendSeries() {
+    var t;
+    const e = (t = this.data.groups) == null ? void 0 : t.at(0);
+    return e ? e.filter((i) => {
+      var s;
+      return (s = this.seriesList[i]) == null ? void 0 : s.showLegend;
+    }).map((i) => [i, this.seriesList[i]]) : Object.entries(this.seriesList).filter(([, i]) => i.showLegend);
+  }
+  /**
+   * Convert series object to plain legend item
+   *
+   * @param {object} series  series object
+   * @returns {object} legend item
+   */
+  _seriesToLegendItem(e) {
+    const t = typeof e.color != "string" ? e.color[e.color.length - 1][1] : e.color;
+    return {
+      sId: e.sId,
+      name: e.name,
+      color: t,
+      type: e.type,
+      show: e.show,
+      fill: e.fill,
+      fillColor: e.fillColor
+    };
+  }
+  /**
+   * Build legend data array from current seriesList
+   *
+   * @returns {Array} legend items
+   */
+  buildLegendData() {
+    return this._getLegendSeries().map(([, e]) => this._seriesToLegendItem(e));
+  }
+  /**
+   * Emit legend data through listeners
+   *
+   * @returns {undefined}
+   */
+  emitLegendData() {
+    typeof this.listeners["update:legendData"] == "function" && this.listeners["update:legendData"](this.buildLegendData());
+  }
+  /**
+   * Toggle series visibility (for external legend)
+   *
+   * @param {string} sId  series ID to toggle
+   * @returns {undefined}
+   */
+  toggleSeries(e) {
+    var n;
+    const t = this.seriesList[e];
+    if (!t)
+      return;
+    const i = this.options.legend, s = this._getLegendSeries();
+    if (i.clickMode === "active")
+      s.every(([, d]) => d.show) ? (s.forEach(([, d]) => {
+        d.show = !1;
+      }), t.show = !0, this.seriesInfo.count = 1) : t.show ? (t.show = !1, this.seriesInfo.count--) : (t.show = !0, this.seriesInfo.count++), s.every(([, d]) => !d.show) && (s.forEach(([, d]) => {
+        d.show = !0;
+      }), this.seriesInfo.count = s.length);
+    else {
+      if (t.show && this.seriesInfo.count === 1)
+        return;
+      t.show ? (t.show = !1, this.seriesInfo.count--) : (t.show = !0, this.seriesInfo.count++);
+    }
+    if (this.brushSeries) {
+      const { chartIdx: l } = this.data, c = [...this.brushSeries.list];
+      c[l] = this.seriesList, this.brushSeries.list = c, this.brushSeries.chartIdx = l;
+    }
+    ((n = this.options.eventBehavior) == null ? void 0 : n.legendClick) !== "emitOnly" && this.update({
+      updateSeries: !1,
+      updateSelTip: { update: !0, keepDomain: !0 }
+    });
+    const r = Object.values(this.seriesList).filter((l) => l.show).map((l) => l.sId), h = r.length === Object.values(this.seriesList).length, o = {
+      data: {
+        seriesIds: h ? [] : r,
+        isActiveAll: h
+      }
+    };
+    typeof this.listeners["click-legend"] == "function" && this.listeners["click-legend"](o), this.options.legend.show && this.options.legend.external && this.emitLegendData();
+  }
+  /**
+   * Highlight a series (for external legend hover)
+   *
+   * @param {string} sId  series ID to highlight
+   * @returns {undefined}
+   */
+  highlightSeries(e) {
+    const t = { sId: e, type: this.options.type };
+    this.legendHover = t, this.update({
+      updateSeries: !1,
+      updateSelTip: { update: !1, keepDomain: !1 },
+      hitInfo: {
+        legend: t
+      },
+      lightUpdate: !0
+    });
+  }
+  /**
+   * Remove series highlight (for external legend mouse leave)
+   *
+   * @returns {undefined}
+   */
+  unhighlightSeries() {
+    this.legendHover = null, this.update({
+      updateSeries: !1,
+      updateSelTip: { update: !1, keepDomain: !1 },
+      hitInfo: {
+        legend: null
+      },
+      lightUpdate: !0
+    });
+  }
+  /**
+   * destroy chart component
+   *
+   * @returns {undefined}
+   */
+  destroy() {
+    if (!this.isInit)
+      return;
+    const e = this.target;
+    for (this.options.legend.show && !this.options.legend.external && (this.legendBoxDOM && (this.legendBoxDOM.removeEventListener("click", this.onLegendBoxClick), this.legendBoxDOM.removeEventListener("mouseover", this.onLegendBoxOver), this.legendBoxDOM.removeEventListener("mouseleave", this.onLegendBoxLeave), this.options.legend.type === "gradient" && this.legendBoxDOM.removeEventListener("mousedown", this.onLegendMouseDown), this.options.legend.virtualScroll && !this.useTable && (this.legendBoxDOM.removeEventListener("resize", this.updateVisibleRowCount), this.legendBoxDOM.removeEventListener("scroll", this.renderVisibleLegends))), this.resizeDOM && this.resizeDOM.removeEventListener("mousedown", this.onResizeMouseDown)), this.overlayCanvas && (this.overlayCanvas.removeEventListener("mousemove", this.onMouseMove), this.overlayCanvas.removeEventListener("mouseleave", this.onMouseLeave), this.overlayCanvas.removeEventListener("dblclick", this.onDblClick), this.overlayCanvas.removeEventListener("click", this.onClick), this.overlayCanvas.removeEventListener("mousedown", this.onMouseDown), this.overlayCanvas.removeEventListener("wheel", this.onWheel), window.removeEventListener("click", this.dragTouchSelectionEvent)), this.isInitTooltip && this.tooltipDestroy(), this.renderVisibleLegendsFrameId != null && (cancelAnimationFrame(this.renderVisibleLegendsFrameId), this.renderVisibleLegendsFrameId = null), this.updateVisibleRowCountFrameId != null && (cancelAnimationFrame(this.updateVisibleRowCountFrameId), this.updateVisibleRowCountFrameId = null), this.wrapperDOM = null, this.chartDOM = null, this.legendDOM = null, this.legendBoxDOM = null, this.resizeDOM = null, this.ghostDOM = null, this.titleDOM = null, this.displayCanvas = null, this.bufferCanvas = null, this.overlayCanvas = null; e.hasChildNodes(); )
+      e.removeChild(e.firstChild);
+  }
+  /**
+   * hide chart tooltip
+   *
+   * @returns {undefined}
+   */
+  hideTooltip() {
+    var e;
+    this.options.tooltip.use && ((e = this.tooltipDOM) != null && e.style) && (this.tooltipDOM.style.display = "none");
+  }
+  /**
+   * init defaultSelectInfo (for selectLabel, selectSeries options)
+   */
+  initDefaultSelectInfo() {
+    var s, a;
+    const { type: e, selectLabel: t, selectSeries: i } = this.options;
+    if (t.use) {
+      let r = null;
+      e === "heatMap" && (t != null && t.useBothAxis) && (r = (s = this.defaultSelectInfo) == null ? void 0 : s.targetAxis), this.defaultSelectInfo = (a = this.defaultSelectInfo) != null && a.dataIndex ? this.getSelectedLabelInfoWithLabelData(this.defaultSelectInfo.dataIndex, r) : { dataIndex: [], label: [], data: [] };
+    }
+    i.use && !this.defaultSelectInfo && (this.defaultSelectInfo = { seriesId: [] });
+  }
+}
+export {
+  ie as default
+};