evui 3.5.0 → 3.5.2

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

@@ -1,281 +0,0 @@
-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
-};