evui 3.5.0-rc.1 → 3.5.0

package/dist/components/chart/plugins/plugins.legend.js

@@ -0,0 +1,665 @@
+import w from "../helpers/helpers.util.js";
+const O = {
+  /**
+   * Create legend DOM
+   *
+   * @returns {undefined}
+   */
+  createLegendLayout() {
+    var e, o;
+    this.legendDOM = document.createElement("div"), this.legendDOM.className = "ev-chart-legend", this.legendBoxDOM = document.createElement("div"), this.legendBoxDOM.className = "ev-chart-legend-box", (o = (e = this.options) == null ? void 0 : e.legend) != null && o.allowResize && (this.resizeDOM = document.createElement("div"), this.resizeDOM.className = "ev-chart-resize-bar", this.ghostDOM = document.createElement("div"), this.ghostDOM.className = "ev-chart-resize-ghost", this.wrapperDOM.appendChild(this.resizeDOM)), this.useTable ? (this.legendTableDOM = document.createElement("table"), this.legendTableDOM.className = "ev-chart-legend--table", this.setLegendColumnHeader(), this.legendBoxDOM.appendChild(this.legendTableDOM), this.legendDOM.style.overflow = "auto") : (this.legendBoxDOM.style.overflowX = "hidden", this.legendBoxDOM.style.overflowY = "auto", this.legendBoxDOM.style.height = "100%"), this.legendDOM.appendChild(this.legendBoxDOM), this.wrapperDOM.appendChild(this.legendDOM), this.options.legend.virtualScroll && !this.useTable && (this.legendTopSpacer = document.createElement("div"), this.legendTopSpacer.className = "ev-chart-legend--top-spacer", this.legendTopSpacer.style.clear = "both", this.legendTopSpacer.style.opacity = 0, this.legendBottomSpacer = document.createElement("div"), this.legendBottomSpacer.className = "ev-chart-legend--bottom-spacer", this.legendBottomSpacer.style.clear = "both", this.legendBottomSpacer.style.opacity = 0, this.legendBoxDOM.appendChild(this.legendTopSpacer), this.legendBoxDOM.appendChild(this.legendBottomSpacer), this.updateVisibleRowCountFrameId = requestAnimationFrame(() => {
+      this.updateVisibleRowCount();
+    }));
+  },
+  /**
+   * Create and append Table Header DOM
+   * Only chartOption > legend > table > use : true
+   *
+   * @returns {undefined}
+   */
+  setLegendColumnHeader() {
+    var n;
+    const e = (n = this.options.legend) == null ? void 0 : n.table, o = e.columns;
+    ["color", ...Object.keys(o)].forEach((d) => {
+      var s, h;
+      const t = document.createElement("th");
+      if (t.className = "ev-chart-legend--table__column-name", (s = o[d]) != null && s.use || d === "color" || d === "name") {
+        const i = o[d], r = (i == null ? void 0 : i.title) ?? "";
+        t.textContent = r, t.setAttribute("title", r), t.dataset.type = r, w.setDOMStyle(t, (h = e == null ? void 0 : e.style) == null ? void 0 : h.header), this.legendTableDOM.append(t);
+      }
+    });
+  },
+  /**
+   * Initialize legend
+   * If there was no initialization, create DOM and set default layout.
+   * It not, there will already be set layout, so add a legend for each series with group
+   *
+   * @returns {undefined}
+   */
+  initLegend() {
+    var e, o;
+    this.isHeatMapType = this.options.type === "heatMap", this.useTable = !!((o = (e = this.options.legend) == null ? void 0 : e.table) != null && o.use) && this.options.type !== "heatmap" && this.options.type !== "scatter", this.legendItemHeight = 18, this.isInitLegend || this.createLegendLayout(), this.isHeatMapType ? (this.initEventForColorLegend(), this.addColorLegendList()) : (this.initEvent(), this.addLegendList()), this.initResizeEvent(), this.isInitLegend = !0, this.isLegendMove = !1;
+  },
+  /**
+   * Calculate and update the number of rows and items per row that are visible
+   * within the legend container based on its dimensions and the layout of the legend.
+   * If the legend is positioned on the right or left, only one item per row is shown.
+   * Otherwise, the number of items per row is determined by dividing the container width
+   * by the item width.
+   *
+   * @returns {undefined}
+   */
+  updateVisibleRowCount() {
+    const e = this.options.legend.position === "right" || this.options.legend.position === "left", o = this.legendBoxDOM.clientHeight, l = this.legendBoxDOM.clientWidth, n = Math.max(this.options.legend.width - 8, 1), d = Object.values(this.seriesList).filter(
+      (t) => t.showLegend !== !1
+    ).length;
+    this.itemsPerRow = e ? 1 : Math.floor(l / n), this.totalRowCount = Math.ceil(d / this.itemsPerRow), this.visibleRowCount = o > this.legendItemHeight ? Math.round(o / this.legendItemHeight) + 1 : this.totalRowCount;
+  },
+  /**
+   * Calculate and set the start and end row indexes for visible items within the
+   * scrollable legend area. Determines the row range that should be displayed based
+   * on the current scroll position and the height of each legend item.
+   *
+   * @returns {undefined}
+   */
+  updateStartEndRowIndex() {
+    var o;
+    const e = Math.max(Math.floor(((o = this.legendBoxDOM) == null ? void 0 : o.scrollTop) / this.legendItemHeight), 0);
+    this.startRowIndex = Math.min(e, Math.max(this.totalRowCount - this.visibleRowCount, 0)), this.endRowIndex = this.startRowIndex + this.visibleRowCount + 1;
+  },
+  /**
+   * Render only the visible legend items in the legend container based on the
+   * calculated start and end row indexes. Removes existing legend items,
+   * adjusts spacer heights to enable smooth scrolling, and adds only the items
+   * within the visible range.
+   *
+   * @returns {undefined}
+   */
+  renderVisibleLegends() {
+    this.updateStartEndRowIndex();
+    const e = this.legendBoxDOM.querySelectorAll(".ev-chart-legend-container");
+    if (e && e.length)
+      for (const i of e)
+        i.remove();
+    const o = this.totalRowCount * this.legendItemHeight, l = this.startRowIndex * this.legendItemHeight, n = Math.max(
+      o - this.visibleRowCount * this.legendItemHeight - l,
+      0
+    );
+    this.legendTopSpacer.style.height = `${l}px`, this.legendBottomSpacer.style.height = `${n}px`;
+    const d = this.startRowIndex * this.itemsPerRow, t = this.endRowIndex * this.itemsPerRow, s = this.data.groups.at(0);
+    let h = [];
+    if (s ? h = s.filter((i) => this.seriesList[i].showLegend).map((i) => [i, this.seriesList[i]]) : h = Object.entries(this.seriesList).filter(([, i]) => i.showLegend), h && h.length)
+      for (let i = d; i < t && i < h.length; i++) {
+        const [, r] = h[i];
+        this.addLegend(r);
+      }
+  },
+  /**
+   * Add legend with group information to align each series properly.
+   * Especially if a chart is stacked,
+   * legends have to align with series ordering as we can see in chart.
+   *
+   * @returns {undefined}
+   */
+  addLegendList() {
+    const { groups: e } = this.data, { seriesList: o } = this;
+    this.options.legend.virtualScroll && !this.useTable ? this.renderVisibleLegendsFrameId = requestAnimationFrame(() => {
+      this.renderVisibleLegends();
+    }) : (this.addLegendForGroups(e, o, this.useTable), this.addStandaloneLegends(o, this.useTable));
+  },
+  /**
+   * Adds legends for each group in `groups` array, iterating through each series within the group.
+   * Only adds series with `showLegend` set to `true`.
+   *
+   * @param {Array} groups - Array of groups containing series identifiers.
+   * @param {Object} seriesList - Object containing all series, keyed by series ID.
+   * @param {boolean} useTable - Determines whether to add legends with additional values.
+   * @returns {undefined}
+   */
+  addLegendForGroups(e, o, l) {
+    e == null || e.forEach((n) => {
+      n == null || n.forEach((d) => {
+        const t = o[d];
+        t && t.showLegend && this.addLegendBasedOnType(t, l);
+      });
+    });
+  },
+  /**
+   * Adds legends for series that are not part of any group. Iterates through each series
+   * in `seriesList` and only adds those that are not assigned to any group (based on `isExistGrp`)
+   * and have `showLegend` set to `true`.
+   *
+   * @param {Object} seriesList - Object containing all series, keyed by series ID.
+   * @param {boolean} useTable - Determines whether to add legends with additional values.
+   * @returns {undefined}
+   */
+  addStandaloneLegends(e, o) {
+    Object.values(e).forEach((l) => {
+      !l.isExistGrp && l.showLegend && this.addLegendBasedOnType(l, o);
+    });
+  },
+  /**
+   * Adds a legend item for a specific series, determining whether to include additional
+   * values based on the `useTable` parameter. Calls `addLegendWithValues` if `useTable` is true,
+   * otherwise calls `addLegend`.
+   *
+   * @param {Object} series - Series object containing data to display in the legend.
+   * @param {boolean} useTable - Determines whether to add legends with additional values.
+   * @returns {undefined}
+   */
+  addLegendBasedOnType(e, o) {
+    o ? this.addLegendWithValues(e) : this.addLegend(e);
+  },
+  /**
+   * Add Legend with Color Information
+   * Only Heatmap chart
+   *
+   * @returns {undefined}
+   */
+  addColorLegendList() {
+    const e = this.seriesList;
+    Object.values(e).forEach((o) => {
+      if (!o.isExistGrp && o.showLegend) {
+        const { colorState: l, valueOpt: n } = o, { min: d, max: t, interval: s, existError: h, decimalPoint: i } = n, r = l.length, a = h ? r - 2 : r - 1;
+        for (let c = 0; c < r; c++) {
+          const { id: f, color: u, label: v = "" } = l[c], g = d + s * c;
+          let y = g + s;
+          c < a ? y -= 0.1 ** i : y = t + 0.1 ** i;
+          let p = v;
+          if (!p)
+            if (p = `${g.toFixed(i)} - ${y.toFixed(i)}`, d === void 0 || t === void 0)
+              if (c === 0)
+                p = "0";
+              else
+                break;
+            else {
+              if (g > t)
+                break;
+              s <= 1 && i === 0 && (p = g);
+            }
+          this.addLegend({
+            cId: f,
+            color: u,
+            name: p,
+            show: !0
+          });
+        }
+      }
+    });
+  },
+  /**
+   * Get Container DOM by Event Object
+   * @param e Event
+   *
+   * @returns {Element}
+   */
+  getContainerDOM(e) {
+    let o = null;
+    const l = e.target.dataset.type;
+    return l === "container" ? o = e.target : ["name", "color", "min", "max", "avg", "total", "last"].includes(l) && (o = e.target.parentElement, o != null && o.series || (o = o.parentElement)), o;
+  },
+  /**
+   * Initialize legend event
+   *
+   * @returns {undefined}
+   */
+  initEvent() {
+    if (this.isInitLegend)
+      return;
+    const e = {
+      container: `ev-chart-legend${this.useTable ? "--table__row" : "-container"}`,
+      color: `ev-chart-legend${this.useTable ? "--table__color" : "-color"}`,
+      name: `ev-chart-legend${this.useTable ? "--table__name" : "-name"}`,
+      value: `ev-chart-legend${this.useTable ? "--table__value" : "-value"}`
+    }, o = (t, s) => {
+      const h = t == null ? void 0 : t.getElementsByClassName(e.color)[0], i = t == null ? void 0 : t.getElementsByClassName(e.name)[0], r = t == null ? void 0 : t.getElementsByClassName(e.value), a = t == null ? void 0 : t.series;
+      if (h.style.backgroundColor = s, h.style.borderColor = s, i.style.color = s, r && r.length)
+        for (const c of r)
+          c.style.color = s;
+      a.show = !1, t.dataset.inactive = !0;
+    }, l = (t, s) => {
+      var f, u;
+      let h;
+      const i = t == null ? void 0 : t.getElementsByClassName(e.color)[0], r = t == null ? void 0 : t.getElementsByClassName(e.name)[0], a = t == null ? void 0 : t.getElementsByClassName(e.value), c = t == null ? void 0 : t.series;
+      if (typeof c.color != "string" ? h = c.color[c.color.length - 1][1] : h = c.color, c.type === "line" && c.fill ? (i.style.height = "8px", i.style.backgroundColor = w.rgbaAdjustHalfOpacity(h), i.style.border = `1px solid ${h}`) : i.style.backgroundColor = h, r.style.color = s, a && a.length)
+        for (const v of a) {
+          const g = (u = (f = this.options.legend.table) == null ? void 0 : f.columns[v.dataset.type]) == null ? void 0 : u.style;
+          v.style.color = g != null && g.color ? g.color : s;
+        }
+      c.show = !0, t.dataset.inactive = !1;
+    }, n = () => {
+      (this.data.groups.at(0) ? this.data.groups.at(0).slice().reverse().filter((s) => this.seriesList[s].showLegend).map((s) => [s, this.seriesList[s]]) : Object.entries(this.seriesList).filter(([, s]) => s.showLegend)).forEach(([, s]) => {
+        s.show = !1;
+      });
+    }, d = () => {
+      (this.data.groups.at(0) ? this.data.groups.at(0).slice().reverse().filter((s) => this.seriesList[s].showLegend).map((s) => [s, this.seriesList[s]]) : Object.entries(this.seriesList).filter(([, s]) => s.showLegend)).forEach(([, s]) => {
+        s.show = !0;
+      });
+    };
+    this.onLegendBoxClick = (t) => {
+      var y;
+      const { legend: s } = this.options;
+      if (s != null && s.stopClickEvt)
+        return;
+      const { chartIdx: h } = this.data, i = this.getContainerDOM(t);
+      if (!i)
+        return;
+      const r = i == null ? void 0 : i.getElementsByClassName(e.color)[0], a = i == null ? void 0 : i.getElementsByClassName(e.name)[0], c = (i == null ? void 0 : i.dataset.inactive) === "false";
+      if (!r || !a)
+        return;
+      if (s.clickMode === "active") {
+        const p = Array.from(
+          this.legendBoxDOM.getElementsByClassName(e.container)
+        );
+        p.every((x) => x.dataset.inactive === "false") ? (p.forEach((x) => {
+          o(x, s.inactive);
+        }), n(), l(i, s.color), this.seriesInfo.count = 1) : c ? (o(i, s.inactive), this.seriesInfo.count--) : c || (l(i, s.color), this.seriesInfo.count++), p.every((x) => x.dataset.inactive === "true") && (p.forEach((x) => {
+          l(x, s.color);
+        }), d(), this.seriesInfo.count = p.length);
+      }
+      if (s.clickMode !== "active") {
+        if (c && this.seriesInfo.count === 1)
+          return;
+        c ? (o(i, s.inactive), this.seriesInfo.count--) : (l(i, s.color), this.seriesInfo.count++);
+      }
+      if (this.brushSeries) {
+        const p = [...this.brushSeries.list];
+        p[h] = this.seriesList, this.brushSeries.list = p, this.brushSeries.chartIdx = h;
+      }
+      ((y = this.options.eventBehavior) == null ? void 0 : y.legendClick) !== "emitOnly" && this.update({
+        updateSeries: !1,
+        updateSelTip: { update: !0, keepDomain: !0 }
+      });
+      const u = Object.values(this.seriesList).filter((p) => p.show).map((p) => p.sId), v = u.length === Object.values(this.seriesList).length, g = {
+        e: t,
+        data: {
+          seriesIds: v ? [] : u,
+          isActiveAll: v
+        }
+      };
+      typeof this.listeners["click-legend"] == "function" && this.listeners["click-legend"](g);
+    }, this.onLegendBoxLeave = () => {
+      this.legendHover = null, this.update({
+        updateSeries: !1,
+        updateSelTip: { update: !1, keepDomain: !1 },
+        hitInfo: {
+          legend: null
+        },
+        lightUpdate: !0
+      });
+    }, this.onLegendBoxOver = (t) => {
+      var r;
+      const s = this.getContainerDOM(t);
+      if (!s) {
+        this.onLegendBoxLeave();
+        return;
+      }
+      const i = { sId: (r = s == null ? void 0 : s.series) == null ? void 0 : r.sId, type: this.options.type };
+      this.legendHover = i, this.update({
+        updateSeries: !1,
+        updateSelTip: { update: !1, keepDomain: !1 },
+        hitInfo: {
+          legend: i
+        },
+        lightUpdate: !0
+      });
+    }, this.legendBoxDOM.addEventListener("click", this.onLegendBoxClick), this.legendBoxDOM.addEventListener("mouseover", this.onLegendBoxOver), this.legendBoxDOM.addEventListener("mouseleave", this.onLegendBoxLeave), this.options.legend.virtualScroll && !this.useTable && (this.legendBoxDOM.addEventListener("resize", this.updateVisibleRowCount), this.legendBoxDOM.addEventListener("scroll", this.renderVisibleLegends.bind(this))), this.initResizeEvent();
+  },
+  /**
+   * Init Event on Color Legend
+   * Only Heatmap
+   */
+  initEventForColorLegend() {
+    if (this.isInitLegend)
+      return;
+    const e = {
+      container: `ev-chart-legend${this.useTable ? "--table__row" : "-container"}`,
+      color: `ev-chart-legend${this.useTable ? "--table__color" : "-color"}`,
+      name: `ev-chart-legend${this.useTable ? "--table__name" : "-name"}`
+    }, o = (t, s) => {
+      var f;
+      const h = t == null ? void 0 : t.getElementsByClassName(e.color)[0], i = t == null ? void 0 : t.getElementsByClassName(e.name)[0], r = Object.values(this.seriesList)[0], a = (f = t == null ? void 0 : t.series) == null ? void 0 : f.cId;
+      h.style.backgroundColor = s, h.style.borderColor = s, i.style.color = s;
+      const c = r.colorState.findIndex((u) => u.id === a);
+      c > -1 && (r.colorState[c].show = !1), t.dataset.inactive = !0;
+    }, l = (t, s) => {
+      var f, u;
+      const h = t == null ? void 0 : t.getElementsByClassName(e.color)[0], i = t == null ? void 0 : t.getElementsByClassName(e.name)[0], r = Object.values(this.seriesList)[0], a = (f = t == null ? void 0 : t.series) == null ? void 0 : f.cId;
+      h.style.backgroundColor = (u = t == null ? void 0 : t.series) == null ? void 0 : u.color, i.style.color = s;
+      const c = r.colorState.findIndex((v) => v.id === a);
+      c > -1 && (r.colorState[c].show = !0), t.dataset.inactive = !1;
+    }, n = () => {
+      Object.values(this.seriesList)[0].colorState.forEach((s) => {
+        s.show = !1;
+      });
+    }, d = () => {
+      Object.values(this.seriesList)[0].colorState.forEach((s) => {
+        s.show = !0;
+      });
+    };
+    this.onLegendBoxClick = (t) => {
+      var p;
+      const s = this.options.legend;
+      if (s != null && s.stopClickEvt)
+        return;
+      const h = Object.values(this.seriesList)[0], i = this.getContainerDOM(t);
+      if (!i)
+        return;
+      const r = i == null ? void 0 : i.getElementsByClassName(e.color)[0], a = i == null ? void 0 : i.getElementsByClassName(e.name)[0], c = (i == null ? void 0 : i.dataset.inactive) === "false", f = h.colorState.filter((m) => m.show).length;
+      if (!r || !a)
+        return;
+      if (s.clickMode === "active") {
+        const m = Array.from(
+          this.legendBoxDOM.getElementsByClassName(e.container)
+        );
+        m.every((b) => b.dataset.inactive === "false") ? (m.forEach((b) => {
+          o(b, s.inactive);
+        }), n(), l(i, s.color)) : c ? o(i, s.inactive) : c || l(i, s.color), m.every((b) => b.dataset.inactive === "true") && (m.forEach((b) => {
+          l(b, s.color);
+        }), d());
+      }
+      if (s.clickMode !== "active") {
+        if (c && f === 1)
+          return;
+        c ? o(i, s.inactive) : l(i, s.color);
+      }
+      ((p = this.options.eventBehavior) == null ? void 0 : p.legendClick) !== "emitOnly" && this.update({
+        updateSeries: !1,
+        updateSelTip: { update: !0, keepDomain: !0 }
+      });
+      const u = h.colorState.filter((m) => m.show), v = u.map((m) => +m.id.split("#")[1]), g = h.colorState.length === u.length, y = {
+        e: t,
+        data: {
+          seriesIndices: g ? [] : v,
+          isActiveAll: g
+        }
+      };
+      typeof this.listeners["click-legend"] == "function" && this.listeners["click-legend"](y);
+    }, this.onLegendBoxLeave = () => {
+      this.legendHover = null, Object.values(this.seriesList)[0].colorState.forEach((s) => {
+        s.state = "normal";
+      }), this.update({
+        updateSeries: !1,
+        updateSelTip: { update: !1, keepDomain: !1 },
+        lightUpdate: !0
+      });
+    }, this.onLegendBoxOver = (t) => {
+      var a, c;
+      const s = (a = Object.values(this.seriesList)) == null ? void 0 : a[0], h = this.getContainerDOM(t);
+      if (!h) {
+        this.onLegendBoxLeave();
+        return;
+      }
+      const i = (c = h == null ? void 0 : h.series) == null ? void 0 : c.cId, r = { sId: i, type: this.options.type };
+      this.legendHover = r, s.colorState.forEach((f) => {
+        f.state = f.id === i ? "highlight" : "downplay";
+      }), this.update({
+        updateSeries: !1,
+        updateSelTip: { update: !1, keepDomain: !1 },
+        hitInfo: {
+          legend: r
+        },
+        lightUpdate: !0
+      });
+    }, this.legendBoxDOM.addEventListener("click", this.onLegendBoxClick), this.legendBoxDOM.addEventListener("mouseover", this.onLegendBoxOver), this.legendBoxDOM.addEventListener("mouseleave", this.onLegendBoxLeave), this.initResizeEvent();
+  },
+  initResizeEvent() {
+    this.onResizeMouseDown = (e) => {
+      e.stopPropagation(), e.preventDefault();
+      const o = this.options, l = o.legend.position, n = o.title.show ? o.title.height : 0, d = this.ghostDOM;
+      this.resizeDOM.style.display = "none", this.wrapperDOM.appendChild(d), l === "left" || l === "right" ? (d.style.top = `${n}px`, d.style.left = this.resizeDOM.style.left, d.style.right = this.resizeDOM.style.right, d.style.height = this.resizeDOM.style.height) : (d.classList.add("horizontal"), l === "top" ? d.style.top = this.resizeDOM.style.top : l === "bottom" && (d.style.bottom = this.resizeDOM.style.bottom)), this.wrapperDOM.addEventListener("mousemove", this.mouseMove, !1), this.wrapperDOM.addEventListener("mouseup", this.mouseUp, !1);
+    }, this.resizeDOM && (this.resizeDOM.addEventListener("mousedown", this.onResizeMouseDown), this.mouseMove = this.onMouseMove.bind(this), this.mouseUp = this.onMouseUp.bind(this));
+  },
+  /**
+   * To update legend, reset all process.
+   *
+   * @returns {undefined}
+   */
+  updateLegend() {
+    this.resetLegend(), this.isHeatMapType ? this.addColorLegendList() : this.addLegendList();
+  },
+  /**
+   * To update value text on legend table
+   * Only chartOption > legend > table > use : true
+   *
+   * @returns {undefined}
+   */
+  updateLegendTableValues() {
+    var n, d, t, s, h;
+    const e = (t = (d = (n = this.options) == null ? void 0 : n.legend) == null ? void 0 : d.table) == null ? void 0 : t.columns, o = this.getAggregations(), l = (s = this.legendBoxDOM) == null ? void 0 : s.getElementsByClassName("ev-chart-legend--table__row");
+    if (l && l.length)
+      for (const i of l) {
+        const r = i == null ? void 0 : i.getElementsByClassName("ev-chart-legend--table__value");
+        if (r && r.length)
+          for (const a of r) {
+            const c = a.dataset.type;
+            if (c !== "name") {
+              const f = i.series.sId, u = (h = o == null ? void 0 : o[f]) == null ? void 0 : h[c];
+              a.textContent = this.getFormattedValue(e[c], u);
+            }
+          }
+      }
+  },
+  /**
+   * Force Update Legend. Remove and Create
+   *
+   * @returns {undefined}
+   */
+  forceUpdateLegend() {
+    this.destroyLegend(), this.initLegend();
+  },
+  /**
+   * To update legend, remove all of legendBoxDOM's children
+   * (except spacers when virtualScroll is enabled)
+   *
+   * @returns {undefined}
+   */
+  resetLegend() {
+    var o, l;
+    const e = this.legendBoxDOM;
+    if (e) {
+      if (this.useTable) {
+        const n = this.legendTableDOM;
+        for (; n.hasChildNodes(); )
+          n.removeChild(n.firstChild);
+        this.setLegendColumnHeader();
+      } else if (this.options.legend.virtualScroll)
+        ((l = (o = this.legendDOM) == null ? void 0 : o.style) == null ? void 0 : l.display) === "none" ? this.legendNeedsUpdate = !0 : (this.updateVisibleRowCount(), this.renderVisibleLegends());
+      else
+        for (; e.hasChildNodes(); )
+          e.removeChild(e.firstChild);
+      this.seriesInfo.count = 0;
+    }
+  },
+  /**
+   * To update legend, remove all of legendBoxDOM's children
+   *
+   * @returns {undefined}
+   */
+  destroyLegend() {
+    const e = this.legendDOM;
+    this.renderVisibleLegendsFrameId != null && (cancelAnimationFrame(this.renderVisibleLegendsFrameId), this.renderVisibleLegendsFrameId = null), this.updateVisibleRowCountFrameId != null && (cancelAnimationFrame(this.updateVisibleRowCountFrameId), this.updateVisibleRowCountFrameId = null), e && (e.remove(), this.legendDOM = null, this.legendBoxDOM = null, this.resizeDOM = null, this.isInitLegend = !1, this.seriesInfo.count = 0);
+  },
+  /**
+   * Create DOM for each series
+   *
+   * @returns {undefined}
+   */
+  /**
+   * 새로운 범례 아이템을 생성하고 범례 영역에 추가
+   * @param {Object} series - 시리즈 정보 객체
+   */
+  addLegend(e) {
+    const o = this.options.legend, l = document.createElement("div"), n = document.createElement("span"), d = document.createElement("div");
+    l.className = "ev-chart-legend-container", l.dataset.inactive = !e.show, l.series = e, n.className = "ev-chart-legend-color", e.type === "line" && e.point && !e.fill && (n.className += " ev-chart-legend-color--point-line"), d.className = "ev-chart-legend-name";
+    let t;
+    e.show ? typeof e.color != "string" ? t = e.color[e.color.length - 1][1] : t = e.color : t = o.inactive, e.type === "line" && e.fill ? (n.style.height = "8px", n.style.backgroundColor = e.show ? w.rgbaAdjustHalfOpacity(t) : o.inactive, n.style.border = `1px solid ${t}`) : n.style.backgroundColor = t, n.dataset.type = "color", d.style.color = o.color, d.textContent = e.name, d.setAttribute("title", e.name), d.dataset.type = "name", l.appendChild(n), l.appendChild(d), o.position === "top" || o.position === "bottom" ? (l.style.width = `${o.width - 8}px`, l.style.margin = "0 4px") : l.style.width = "100%", l.style.height = `${this.legendItemHeight}px`, l.style.display = "inline-block", l.style.overflow = "hidden", l.dataset.type = "container", this.legendBoxDOM.insertBefore(l, this.legendBottomSpacer), e.show && this.seriesInfo.count++;
+  },
+  /**
+   * Add Legend Items With aggregation Values
+   * Only chartOption > legend > table > use : true
+   * @param series
+   */
+  addLegendWithValues(e) {
+    var a, c, f, u, v;
+    const o = this.options.legend, l = (a = o == null ? void 0 : o.table) == null ? void 0 : a.columns, n = (c = this.getAggregations()) == null ? void 0 : c[e == null ? void 0 : e.sId];
+    if (!n || !l)
+      return;
+    const d = document.createElement("tr");
+    d.className = "ev-chart-legend--table__row", d.dataset.inactive = !e.show, w.setDOMStyle(d, (u = (f = o.table) == null ? void 0 : f.style) == null ? void 0 : u.row), d.series = e, d.dataset.type = "container";
+    const t = document.createElement("td");
+    t.className = "ev-chart-legend--table__color-wrapper", t.dataset.type = "color";
+    const s = document.createElement("div");
+    s.className = "ev-chart-legend--table__color", s.dataset.type = "color";
+    let h;
+    switch (e.show ? typeof e.color != "string" ? h = e.color[e.color.length - 1][1] : h = e.color : h = o.inactive, e.type) {
+      case "line": {
+        e.fill ? (s.style.backgroundColor = w.rgbaAdjustHalfOpacity(h), s.style.border = `1px solid ${h}`) : (e.point && (s.className += " ev-chart-legend--table__color--point-line"), s.className += " ev-chart-legend--table__color--line", s.style.backgroundColor = h);
+        break;
+      }
+      case "bar":
+      case "pie":
+      default: {
+        s.style.height = "10px", s.style.backgroundColor = h;
+        break;
+      }
+    }
+    e.type === "line" && e.fill ? (s.style.height = "8px", s.style.backgroundColor = e.show ? w.rgbaAdjustHalfOpacity(h) : o.inactive, s.style.border = `1px solid ${h}`) : s.style.backgroundColor = h, t.appendChild(s), d.appendChild(t);
+    const i = document.createElement("td");
+    i.className = "ev-chart-legend--table__name", i.style.color = e.show ? o.color : o.inactive, i.textContent = e.name, i.setAttribute("title", e.name), i.dataset.type = "name", w.setDOMStyle(i, (v = l == null ? void 0 : l.name) == null ? void 0 : v.style), e.show || (i.style.color = o.inactive), d.appendChild(i);
+    const r = Object.keys(l);
+    r == null || r.forEach((g) => {
+      var y;
+      if (g !== "name" && l[g].use) {
+        const p = this.getFormattedValue(l[g], n[g]), m = document.createElement("td");
+        m.className = "ev-chart-legend--table__value", m.style.color = e.show ? o.color : o.inactive, m.textContent = p, m.dataset.type = g.toString(), w.setDOMStyle(m, (y = l[g]) == null ? void 0 : y.style), e.show || (m.style.color = o.inactive), d.appendChild(m);
+      }
+    }), this.legendTableDOM.appendChild(d), e.show && this.seriesInfo.count++;
+  },
+  /**
+   * Set legend components position by option
+   *
+   * @returns {undefined}
+   */
+  setLegendPosition() {
+    var v, g, y, p, m, L, x, b, C;
+    const e = this.options, o = (v = e == null ? void 0 : e.legend) == null ? void 0 : v.position, l = (g = this.wrapperDOM) == null ? void 0 : g.style, n = (y = this.legendDOM) == null ? void 0 : y.style, d = (p = this.legendBoxDOM) == null ? void 0 : p.style, t = (m = this.resizeDOM) == null ? void 0 : m.style;
+    let s, h;
+    const i = (L = e == null ? void 0 : e.title) != null && L.show ? (x = e == null ? void 0 : e.title) == null ? void 0 : x.height : 0, r = i + ((b = e == null ? void 0 : e.legend) == null ? void 0 : b.height), { top: a = 0, bottom: c = 0, left: f = 0, right: u = 0 } = ((C = e == null ? void 0 : e.legend) == null ? void 0 : C.padding) ?? {};
+    if (!(!l || !n))
+      switch (d.padding = `${a}px ${u}px ${c}px ${f}px`, o) {
+        case "top":
+          l.padding = `${r}px 0 0 0`, s = this.chartDOM.getBoundingClientRect(), h = parseInt(n.paddingTop) + parseInt(n.paddingBottom), d.width = "100%", d.height = `${e.legend.height - h}px`, n.top = `${i}px`, n.right = "", n.bottom = "", n.left = "", n.width = `${s.width}px`, n.height = `${e.legend.height + (t ? 4 : 0)}px`, t && (t.top = `${r}px`, t.right = "", t.bottom = "", t.left = "", t.width = `${s.width}px`, t.height = "4px", t.cursor = "row-resize");
+          break;
+        case "right":
+          l.padding = `${i}px ${e.legend.width}px 0 0`, s = this.chartDOM.getBoundingClientRect(), d.width = `${e.legend.width - 10}px`, d.maxHeight = `${s.height}px`, n.paddingLeft = "10px", n.top = `${i}px`, n.right = "0px", n.bottom = "", n.left = "", n.width = `${e.legend.width}px`, n.height = `${s.height}px`, t && (t.top = `${i}px`, t.right = `${e.legend.width}px`, t.bottom = "", t.left = "", t.width = "4px", t.height = `${s.height}px`, t.cursor = "col-resize");
+          break;
+        case "bottom":
+          l.padding = `${i}px 0 ${e.legend.height}px 0`, s = this.chartDOM.getBoundingClientRect(), h = parseInt(n.paddingTop) + parseInt(n.paddingBottom), d.width = "100%", d.height = `${e.legend.height - h}px`, n.top = "", n.right = "", n.bottom = "0px", n.left = "0px", n.width = `${s.width}px`, n.height = `${e.legend.height + (t ? 4 : 0)}px`, t && (t.top = "", t.right = "", t.bottom = `${e.legend.height}px`, t.left = "", t.width = `${s.width}px`, t.height = "4px", t.cursor = "row-resize");
+          break;
+        case "left":
+          l.padding = `${i}px 0 0 ${e.legend.width}px`, s = this.chartDOM.getBoundingClientRect(), d.width = `${e.legend.width}px`, d.maxHeight = `${s.height}px`, d.display = "absolute", d.bottom = "0px", n.top = `${i}px`, n.right = "", n.bottom = "", n.left = "0px", n.width = `${e.legend.width}px`, n.height = `${s.height}px`, t && (t.top = `${i}px`, t.right = "", t.bottom = "", t.left = `${e.legend.width}px`, t.width = "4px", t.height = `${s.height}px`, t.cursor = "col-resize");
+          break;
+      }
+  },
+  /**
+   * Update legend components size
+   *
+   * @returns {undefined}
+   */
+  updateLegendContainerSize() {
+    var l;
+    if (!this.options || !this.legendBoxDOM)
+      return;
+    const e = (l = this.options) == null ? void 0 : l.legend, o = this.legendBoxDOM.getElementsByClassName("ev-chart-legend-container");
+    if (o)
+      for (let n = 0; n < o.length; n++)
+        e.position === "top" || e.position === "bottom" ? (o[n].style.width = `${e.width - 8}px`, o[n].style.margin = "0 4px") : o[n].style.width = "100%";
+  },
+  /**
+   * When user moves resizeDOM, this function will change css
+   *
+   * @returns {undefined}
+   */
+  onMouseMove(e) {
+    e.stopPropagation(), e.preventDefault();
+    const o = this.wrapperDOM.getBoundingClientRect(), l = this.wrapperDOM.offsetWidth, n = this.wrapperDOM.offsetHeight, d = this.options.title.show ? this.options.title.height : 0, t = this.options.legend.position, s = 150, h = 70, i = 120, r = 20;
+    let a;
+    switch (t) {
+      case "left":
+        a = e.clientX - o.left, a < i ? a = i : a > l - s && (a = l - s), this.ghostDOM.style.left = `${a}px`;
+        break;
+      case "right":
+        a = e.clientX - o.left, a < s ? a = s : a > l - i && (a = l - i), this.ghostDOM.style.left = `${a}px`;
+        break;
+      case "top":
+        a = e.clientY - o.top, a < r + d ? a = r + d : a > n - h && (a = n - h), this.ghostDOM.style.top = `${a}px`;
+        break;
+      case "bottom":
+        a = e.clientY - o.top, a < h + d ? a = h + d : a > n - r && (a = n - r), this.ghostDOM.style.bottom = `${this.wrapperDOM.offsetHeight - a}px`;
+        break;
+    }
+    this.isLegendMove = !0;
+  },
+  /**
+   * callback for mouseup on ghostDOM, this function will change legend and chart size.
+   *
+   * @returns {undefined}
+   */
+  onMouseUp(e) {
+    e.stopPropagation(), e.preventDefault(), this.wrapperDOM.removeEventListener("mousemove", this.mouseMove, !1), this.wrapperDOM.removeEventListener("mouseup", this.mouseUp, !1);
+    const o = this.options, l = o.legend.position, n = this.resizeDOM.style, d = this.legendDOM.style, t = this.legendBoxDOM.style, s = this.ghostDOM.style, h = this.wrapperDOM.style, i = o.title.show ? o.title.height : 0, r = +this.legendDOM.style.paddingLeft.replace("px", "");
+    let a;
+    if (this.isLegendMove)
+      switch (l) {
+        case "top":
+          n.top = s.top, a = +s.top.replace("px", ""), d.height = `${a - i}px`, t.height = `${a - i - 4}px`, o.legend.height = a - i - 4, h.padding = `${a}px 0 0 0`;
+          break;
+        case "right":
+          n.left = s.left, a = +s.left.replace("px", ""), d.width = `${this.wrapperDOM.offsetWidth - a - 4}px`, t.width = `${this.wrapperDOM.offsetWidth - a - 4 - r}px`, o.legend.width = this.wrapperDOM.offsetWidth - a - 4, h.padding = `${i}px ${this.wrapperDOM.offsetWidth - a}px 0 0`;
+          break;
+        case "bottom":
+          n.bottom = s.bottom, a = this.wrapperDOM.offsetHeight - +s.bottom.replace("px", ""), d.height = `${this.wrapperDOM.offsetHeight - a}px`, t.height = `${a - i - 4}px`, o.legend.height = this.wrapperDOM.offsetHeight - a, h.padding = `${i}px 0 ${this.wrapperDOM.offsetHeight - a}px 0`;
+          break;
+        case "left":
+          n.left = s.left, a = +s.left.replace("px", ""), d.width = `${a}px`, t.width = `${a}px`, o.legend.width = a, h.padding = `${i}px 0 0 ${a - 4}px`;
+          break;
+      }
+    n.display = "block", this.ghostDOM.remove(), this.isLegendMove && (this.render(), this.isLegendMove = !1);
+  },
+  /**
+   * Show legend components by manipulating css
+   *
+   * @returns {undefined}
+   */
+  showLegend() {
+    this.resizeDOM && (this.resizeDOM.style.display = "block"), this.legendDOM && (this.legendDOM.style.display = "block"), this.legendNeedsUpdate && this.options.legend.virtualScroll && !this.useTable && (this.legendNeedsUpdate = !1, this.updateVisibleRowCount(), this.renderVisibleLegends());
+  },
+  /**
+   * Hide legend components by manipulating css
+   *
+   * @returns {undefined}
+   */
+  hideLegend() {
+    var t, s, h, i, r;
+    const e = this.options, o = (t = this.wrapperDOM) == null ? void 0 : t.style, l = (s = this.resizeDOM) == null ? void 0 : s.style, n = (h = this.legendDOM) == null ? void 0 : h.style, d = (i = e == null ? void 0 : e.title) != null && i.show ? (r = e == null ? void 0 : e.title) == null ? void 0 : r.height : 0;
+    !n || !o || (l && (l.display = "none"), n.display = "none", n.width = "0", n.height = "0", o.padding = `${d}px 0 0 0`);
+  },
+  /**
+   * Get formatted value by formatter function
+   * Only chartOption > legend > table > use : true
+   * @param formatter
+   * @param decimalPoint
+   * @param value
+   * @returns {string}
+   */
+  getFormattedValue({ formatter: e, decimalPoint: o }, l) {
+    if (l == null)
+      return "Null";
+    let n;
+    return e && (n = e(+l)), (!e || typeof n != "string") && (n = w.labelSignFormat(+l, o)), n;
+  }
+};
+export {
+  O as default
+};