evui 3.4.214 → 3.5.0

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

@@ -0,0 +1,281 @@
+import { convertToPercent as b } from "../../../common/utils.js";
+const S = 28, C = {
+  width: 70,
+  height: 60
+}, w = {
+  /**
+   * Create legend DOM
+   *
+   * @returns {undefined}
+   */
+  createLegendLayout() {
+    this.legendDOM = document.createElement("div"), this.legendDOM.className = "ev-chart-legend", this.legendBoxDOM = document.createElement("div"), this.legendBoxDOM.className = "ev-chart-legend-box", this.containerDOM = document.createElement("div"), this.containerDOM.className = "ev-chart-legend-container", this.legendBoxDOM.appendChild(this.containerDOM), this.legendDOM.appendChild(this.legendBoxDOM), this.wrapperDOM.appendChild(this.legendDOM);
+  },
+  /**
+   * 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() {
+    this.isInitLegend || (this.createLegendLayout(), this.createLegend()), Object.values(this.seriesList).forEach((e) => {
+      this.setLegendStyle(e);
+    }), this.initEvent(), this.isInitLegend = !0, this.legendDragInfo = {
+      dragging: !1,
+      isStart: !0
+    };
+  },
+  /**
+   * Initialize legend event
+   *
+   * @returns {undefined}
+   */
+  initEvent() {
+    this.isInitLegend || (this.onLegendMouseDown = (e) => {
+      e.stopPropagation(), e.preventDefault();
+      const a = e.target.dataset.type;
+      let t;
+      if (a === "handle")
+        t = e.target;
+      else if (a === "handle-btn")
+        t = e.target.parentElement;
+      else if (a === "handle-btn-color")
+        t = e.target.parentElement.parentElement;
+      else
+        return;
+      const s = Object.values(this.seriesList);
+      if (!s.length)
+        return;
+      const { colorState: d } = s[0], { start: n, end: i } = d[0];
+      d[0].selectedValue = null, this.clearOverlay(), this.legendDragInfo.dragging = !0, this.legendDragInfo.isStart = n !== i ? t.className.includes("start") : this.legendDragInfo.isStart, t.classList.add("dragging"), this.legendBoxDOM.addEventListener("mousemove", this.onLegendMouseMove, !1), this.legendBoxDOM.addEventListener("mouseup", this.onLegendMouseUp, !1);
+    }, this.onLegendMouseMove = (e) => {
+      e.stopPropagation(), e.preventDefault();
+      const { dragging: a, isStart: t } = this.legendDragInfo;
+      if (a) {
+        let s = this.getSelectedValue(e);
+        s = this.isSide ? 100 - s : s;
+        const d = t ? "start" : "end", n = Object.values(this.seriesList);
+        if (!n.length)
+          return;
+        const { colorState: i } = n[0], { start: l, end: o } = i[0];
+        if (t && s > o || !t && s < l)
+          return;
+        i[0][d] = s, this.update({
+          updateSeries: !1,
+          updateSelTip: { update: !1, keepDomain: !1 }
+        });
+      }
+    }, this.onLegendMouseUp = () => {
+      this.legendDragInfo.dragging = !1;
+      const e = this.containerDOM.getElementsByClassName(
+        "ev-chart-legend-handle dragging"
+      )[0];
+      e == null || e.classList.remove("dragging"), this.legendBoxDOM.removeEventListener("mouseup", this.onLegendMouseUp, !1);
+    }, this.onLegendBoxOver = (e) => {
+      const a = e.target.dataset.type, t = Object.values(this.seriesList);
+      if (!t.length)
+        return;
+      const { colorState: s, valueOpt: d } = t[0], n = s[0];
+      let i = this.getSelectedValue(e);
+      if (i = this.isSide ? 100 - i : i, ["line", "thumb", "layer", "overlay", "overlay-item"].includes(a))
+        if (n.start <= i && i <= n.end)
+          n.selectedValue = i, this.createLegendOverlay(i, d);
+        else
+          return;
+      else if (["handle", "handle-btn", "handle-btn-color"].includes(a)) {
+        const l = e.target.className.includes("start");
+        n.selectedValue = l ? n.start : n.end, this.clearOverlay();
+      } else
+        return;
+      this.legendHover = { sId: "gradient", type: this.options.type }, this.update({
+        updateSeries: !1,
+        updateSelTip: { update: !1, keepDomain: !1 }
+      });
+    }, this.onLegendBoxLeave = () => {
+      this.legendDragInfo.dragging = !1, this.legendHover = null, this.clearOverlay();
+      const e = Object.values(this.seriesList);
+      if (!e.length)
+        return;
+      const { colorState: a } = e[0];
+      a[0].selectedValue = null, this.update({
+        updateSeries: !1,
+        updateSelTip: { update: !1, keepDomain: !1 }
+      });
+    }, this.legendBoxDOM.addEventListener("mousedown", this.onLegendMouseDown), this.legendBoxDOM.addEventListener("mouseover", this.onLegendBoxOver), this.legendBoxDOM.addEventListener("mouseleave", this.onLegendBoxLeave));
+  },
+  getSelectedValue(e) {
+    const { x: a, y: t, width: s, height: d } = this.containerDOM.getBoundingClientRect(), n = !this.isSide, i = n ? a : t, l = n ? s : d;
+    let o = n ? e.clientX : e.clientY;
+    o < i ? o = i : o > i + l && (o = i + l);
+    const r = o - i;
+    return +b(r, l);
+  },
+  /**
+   * To update legend, reset all process.
+   *
+   * @returns {undefined}
+   */
+  updateLegend() {
+    this.resetLegend(), this.createLegend(), Object.values(this.seriesList).forEach((e) => {
+      this.setLegendStyle(e);
+    });
+  },
+  /**
+   * To update legend, remove all of legendBoxDOM's children
+   *
+   * @returns {undefined}
+   */
+  resetLegend() {
+    const e = this.containerDOM;
+    if (e)
+      for (; e.hasChildNodes(); )
+        e.removeChild(e.firstChild);
+  },
+  clearOverlay() {
+    const e = this.containerDOM.getElementsByClassName("ev-chart-legend-line")[0], a = e == null ? void 0 : e.getElementsByClassName("ev-chart-legend-overlay")[0];
+    if (a) {
+      e.removeChild(a);
+      const s = e.getElementsByClassName("ev-chart-legend-thumb")[0].children;
+      if (s && s.length)
+        for (const d of s)
+          d.style.opacity = 1;
+    }
+  },
+  createLegendOverlay(e, a) {
+    this.clearOverlay();
+    const t = this.legendHandleSize, { min: s, max: d } = a;
+    if (s === void 0 || d === void 0)
+      return;
+    const n = this.containerDOM.getElementsByClassName("ev-chart-legend-line")[0], i = document.createElement("div");
+    i.className = "ev-chart-legend-overlay", i.dataset.type = "overlay";
+    const l = document.createElement("div");
+    l.className = "ev-chart-legend-overlay-tooltip", l.innerText = Math.floor(s + (d - s) * (e / 100));
+    const o = document.createElement("span");
+    o.className = "ev-chart-legend-overlay-item", o.dataset.type = "overlay-item";
+    let r, m;
+    const u = Math.floor(t / 2) + 14;
+    this.isSide ? (m = `top:${100 - e}%;left:${u}px;transform:translateY(-50%);`, r = `top:${100 - e}%;transform:translateY(-50%);`) : (m = `top:-${u}px;left:${e}%;transform:translateX(-50%);`, r = `left:${e}%;transform:translateX(-50%);`), r += `width:${t - 10}px;height:${t - 10}px;`, l.style.cssText = m, o.style.cssText = r, i.appendChild(l), i.appendChild(o), n == null || n.appendChild(i);
+    const c = n == null ? void 0 : n.getElementsByClassName("ev-chart-legend-thumb")[0];
+    if (c) {
+      const h = c.children;
+      if (h && h.length)
+        for (const g of h)
+          g.style.opacity = 0.2;
+    }
+  },
+  createLegendHandle(e) {
+    const a = document.createElement("span");
+    a.className = `ev-chart-legend-handle-btn-color ${e}`, a.dataset.type = "handle-btn-color";
+    const t = document.createElement("div");
+    t.className = `ev-chart-legend-handle-btn ${e}`, t.dataset.type = "handle-btn", t.appendChild(a);
+    const s = document.createElement("div");
+    return s.className = `ev-chart-legend-handle ${e}`, s.dataset.type = "handle", s.appendChild(t), s;
+  },
+  createLegendLabel() {
+    const e = document.createElement("span");
+    e.className = "ev-chart-legend-label-text";
+    const a = document.createElement("div");
+    return a.className = "ev-chart-legend-label", a;
+  },
+  /**
+   * Create legend DOM
+   *
+   * @returns {undefined}
+   */
+  createLegend() {
+    if (!Object.values(this.seriesList).length)
+      return;
+    const e = this.options.legend;
+    this.isSide = !["top", "bottom"].includes(e.position);
+    const a = this.isSide ? e.width : e.height;
+    this.legendHandleSize = a > S ? S : a;
+    const t = this.legendHandleSize, s = this.createLegendHandle(this.isSide ? "end" : "start", t), d = this.createLegendHandle(this.isSide ? "start" : "end", t), n = document.createElement("div");
+    n.className = "ev-chart-legend-line-layer", n.dataset.type = "line-layer";
+    const i = document.createElement("div");
+    i.className = "ev-chart-legend-thumb", i.dataset.type = "thumb", i.appendChild(this.createLegendLabel()), i.appendChild(this.createLegendLabel());
+    const l = document.createElement("div");
+    l.className = "ev-chart-legend-line", l.dataset.type = "line", l.appendChild(n), l.appendChild(i), this.containerDOM.appendChild(l), this.containerDOM.appendChild(s), this.containerDOM.appendChild(d);
+  },
+  setLegendStyle(e) {
+    const a = this.isSide ? "top" : "right", t = this.legendHandleSize, { valueOpt: s, colorState: d } = e, { min: n, max: i, decimalPoint: l } = s, { start: o, end: r } = d[0], m = e.getColorForGradient(o), u = e.getColorForGradient(r);
+    let c = `linear-gradient(to ${a}, `;
+    c += `${m}, ${u})`;
+    const h = Math.floor(t / 2) + 14;
+    let g = `width:${t}px;height:${t}px;`, p, f, y, v = `background:${c};`;
+    this.isSide ? (g += `margin-top:-${t / 2}px;`, p = `left:${h}px;transform:translateY(-50%);top:`, f = `top:${100 - r}%;`, y = `top:${100 - o}%;`, v += `top:${100 - r}%;height:${r - o}%;`) : (g += `margin-left:-${t / 2}px;`, p = `top:-${h}px;transform:translateX(-50%);left:`, f = `left:${o}%;`, y = `left:${r}%;`, v += `left:${o}%;width:${r - o}%;`);
+    const O = (n + (i - n) * (o / 100)).toFixed(l), x = (n + (i - n) * (r / 100)).toFixed(l), $ = this.containerDOM.getElementsByClassName("ev-chart-legend-thumb")[0];
+    $.style.cssText = v;
+    const D = $.getElementsByClassName("ev-chart-legend-label");
+    D[0].style.cssText = `${p}0%;`, D[1].style.cssText = `${p}100%;`, n !== void 0 && i !== void 0 && (D[0].innerText = this.isSide ? x : O, D[1].innerText = this.isSide ? O : x);
+    const M = this.containerDOM.getElementsByClassName("ev-chart-legend-handle");
+    M[0].style.cssText = g + f, M[1].style.cssText = g + y;
+    const L = this.containerDOM.getElementsByClassName("ev-chart-legend-handle-btn-color");
+    L[0].style.backgroundColor = this.isSide ? u : m, L[1].style.backgroundColor = this.isSide ? m : u;
+  },
+  /**
+   * Set legend components position by option
+   *
+   * @returns {undefined}
+   */
+  setLegendPosition() {
+    var f, y, v, O;
+    const e = this.options, a = (f = e == null ? void 0 : e.legend) == null ? void 0 : f.position, { width: t, height: s } = C, d = this.legendHandleSize, n = (y = e == null ? void 0 : e.title) != null && y.show ? (v = e == null ? void 0 : e.title) == null ? void 0 : v.height : 0, i = n + s, { top: l = 0, bottom: o = 0, left: r = 0, right: m = 0 } = ((O = e == null ? void 0 : e.legend) == null ? void 0 : O.padding) ?? {}, u = this.wrapperDOM.style;
+    if (!u)
+      return;
+    let c, h, g, p;
+    switch (a) {
+      case "top":
+        u.padding = `${i}px 0 0 0`, p = this.chartDOM.getBoundingClientRect(), h = `padding:${d + 7}px ${m}px ${o}px ${r}px;`, h += "width:100%", h += `height${s}px;`, c = `width:${p.width}px;`, c += `height:${s}px;`, c += `top:${n}px;`;
+        break;
+      case "right":
+        u.padding = `${n}px ${t}px 0 0`, p = this.chartDOM.getBoundingClientRect(), h = `padding:${l}px ${m}px ${o}px ${r}px;`, h += `width:${t}px;`, h += "height:100%;", h += `max-height:${p.height}px;`, c = `width:${t}px;`, c += `height:${p.height}px;`, c += `top:${n}px;right:0px;`;
+        break;
+      case "bottom":
+        u.padding = `${n}px 0 ${s}px 0`, p = this.chartDOM.getBoundingClientRect(), h = `padding:${d + 7}px ${m}px ${o}px ${r}px;`, h += "width:100%;", h += `height:${s}px;`, c = `width:${p.width}px;`, c += `height:${s}px;`, c += "bottom:0px;left:0px;";
+        break;
+      case "left":
+        u.padding = `${n}px 0 0 ${t}px`, p = this.chartDOM.getBoundingClientRect(), h = `padding:${l}px ${m}px ${o}px ${r}px;`, h += "display:absolute;", h += "bottom:0px;", h += `width:${t}px;`, h += "height:100%;", h += `maxHeight:${p.height}px;`, c = `width:${t}px;`, c += `height:${p.height}px;`, c += `top:${n}px;left:0px`;
+        break;
+    }
+    if (["top", "bottom"].includes(a)) {
+      const x = p.width / 2;
+      g = `left:${p.width / 2 - x / 2}px;`, g += `width:${x}px;`, g += `height:${d}px;`, g += "padding:4px 0;", g += "margin:0 4px;";
+    } else {
+      const x = p.height / 2;
+      g = `top:${p.height / 2 - x / 2}px;`, g += "left:5px;", g += `width:${d}px;`, g += `height:${x}px;`, g += "padding:0 4px;", g += "margin:4px 0;";
+    }
+    this.containerDOM.style.cssText = g, this.legendBoxDOM.style.cssText = h, this.legendDOM.style.cssText = c;
+  },
+  /**
+   * Update legend components size
+   *
+   * @returns {undefined}
+   */
+  updateLegendContainerSize() {
+    Object.values(this.seriesList).forEach((e) => {
+      this.setLegendStyle(e);
+    });
+  },
+  /**
+   * Show legend components by manipulating css
+   *
+   * @returns {undefined}
+   */
+  showLegend() {
+    this.resizeDOM && (this.resizeDOM.style.display = "block"), this.legendDOM && (this.legendDOM.style.display = "block");
+  },
+  /**
+   * Hide legend components by manipulating css
+   *
+   * @returns {undefined}
+   */
+  hideLegend() {
+    var d, n, i, l;
+    const e = this.options, a = (d = this.wrapperDOM) == null ? void 0 : d.style, t = (n = this.legendDOM) == null ? void 0 : n.style, s = (i = e == null ? void 0 : e.title) != null && i.show ? (l = e == null ? void 0 : e.title) == null ? void 0 : l.height : 0;
+    !t || !a || (t.display = "none", t.width = "0", t.height = "0", a.padding = `${s}px 0 0 0`);
+  }
+};
+export {
+  w as default
+};