evui 3.4.214 → 3.5.0

package/dist/components/chart/uses.js

@@ -0,0 +1,479 @@
+import { getCurrentInstance as U, ref as k, computed as P, reactive as b, onUpdated as R, watch as S, nextTick as F } from "vue";
+import { cloneDeep as v, defaultsDeep as D, isEqual as N } from "lodash-es";
+import { getQuantity as A } from "../../common/utils.js";
+import V from "./chartZoom.core.js";
+const q = {
+  padding: {
+    top: 20,
+    right: 2,
+    left: 2,
+    bottom: 4
+  },
+  border: 2,
+  title: {
+    show: !1,
+    height: 40,
+    text: "",
+    style: {
+      fontSize: 15,
+      color: "#000",
+      fontFamily: "Roboto"
+    }
+  },
+  legend: {
+    show: !0,
+    type: "icon",
+    position: "right",
+    color: "#353740",
+    inactive: "#aaa",
+    width: 140,
+    height: 24,
+    allowResize: !1,
+    virtualScroll: !1,
+    clickMode: "active",
+    external: !1,
+    table: {
+      use: !1,
+      columns: {
+        name: {
+          title: "Name"
+        },
+        min: {
+          title: "MIN",
+          use: !1
+        },
+        max: {
+          title: "MAX",
+          use: !1
+        },
+        avg: {
+          title: "AVG",
+          use: !1
+        },
+        total: {
+          title: "TOTAL",
+          use: !1
+        },
+        last: {
+          title: "LAST",
+          use: !1
+        }
+      }
+    }
+  },
+  itemHighlight: !0,
+  seriesHighlight: !0,
+  unSelectedOpacity: 0.3,
+  useSelect: !1,
+  doughnutHoleSize: 0,
+  pieStroke: {
+    use: !0,
+    lineWidth: 2,
+    color: "#FFFFFF"
+  },
+  reverse: !1,
+  horizontal: !1,
+  overlapping: {
+    use: !1
+  },
+  width: "100%",
+  height: "100%",
+  thickness: 1,
+  cPadRatio: 0,
+  borderRadius: 0,
+  combo: !1,
+  tooltip: {
+    use: !0,
+    sortByValue: !0,
+    backgroundColor: "#4C4C4C",
+    fontColor: "#FFFFFF",
+    borderColor: "#666666",
+    shadowOpacity: 0.25,
+    useShadow: !1,
+    throttledMove: !1,
+    debouncedHide: !1,
+    useScrollbar: !1,
+    textOverflow: "wrap",
+    fontFamily: "Roboto",
+    colorShape: "rect",
+    fontSize: {
+      title: 16,
+      contents: 14
+    },
+    rowPadding: {
+      top: 0,
+      bottom: 3,
+      right: 20,
+      left: 16
+    },
+    showHeader: !0
+  },
+  indicator: {
+    use: !0,
+    color: "#EE7F44",
+    segments: null
+  },
+  maxTip: {
+    use: !1,
+    fixedPosTop: !1,
+    showIndicator: !1,
+    indicatorColor: "#000000",
+    tipStyle: {
+      height: 20,
+      background: "#000000",
+      textColor: "#FFFFFF",
+      fontSize: 14,
+      fontFamily: "Roboto",
+      fontWeight: 400
+    }
+  },
+  selectItem: {
+    use: !1,
+    useClick: !0,
+    showTextTip: !1,
+    tipText: "value",
+    showTip: !1,
+    showIndicator: !1,
+    fixedPosTop: !1,
+    useApproximateValue: !1,
+    indicatorColor: "#000000",
+    tipStyle: {
+      height: 20,
+      background: "#000000",
+      textColor: "#FFFFFF",
+      fontSize: 14,
+      fontFamily: "Roboto",
+      fontWeight: 400
+    },
+    useSeriesOpacity: !1,
+    useDeselectItem: !1,
+    showBorder: !1,
+    borderStyle: {
+      color: "#FFFFFF",
+      lineWidth: 1,
+      opacity: 1,
+      radius: 0
+    }
+  },
+  selectLabel: {
+    use: !1,
+    useClick: !0,
+    tipText: "value",
+    limit: 1,
+    useDeselectOverflow: !1,
+    showTip: !1,
+    useSeriesOpacity: !0,
+    useLabelOpacity: !0,
+    fixedPosTop: !1,
+    useApproximateValue: !1,
+    tipBackground: "#000000",
+    indicatorColor: "#000000",
+    tipStyle: {
+      height: 20,
+      background: "#000000",
+      textColor: "#FFFFFF",
+      fontSize: 14,
+      fontFamily: "Roboto",
+      fontWeight: 400
+    },
+    showTextTip: !1,
+    showIndicator: !1,
+    useBothAxis: !1
+  },
+  selectSeries: {
+    use: !1,
+    useClick: !0,
+    limit: 1,
+    useDeselectOverflow: !1
+  },
+  dragSelection: {
+    use: !1,
+    keepDisplay: !0,
+    size: 50,
+    fillColor: "#38ACEC",
+    opacity: 0.65
+  },
+  zoom: {
+    bufferMemoryCnt: 100,
+    keepZoomStatus: !1,
+    useAnimation: !0,
+    useWheelMove: !0,
+    toolbar: {
+      show: !1,
+      items: {
+        previous: {
+          icon: "ev-icon-allow2-left",
+          size: "medium",
+          title: "Previous"
+        },
+        latest: {
+          icon: "ev-icon-allow2-right",
+          size: "medium",
+          title: "Latest"
+        },
+        reset: {
+          icon: "ev-icon-redo",
+          size: "medium",
+          title: "Reset"
+        },
+        dragZoom: {
+          icon: "ev-icon-zoomin",
+          size: "medium",
+          title: "Drag Zoom"
+        }
+      }
+    }
+  },
+  heatMapColor: {
+    min: "#FFFFFF",
+    max: "#0052FF",
+    rangeCount: 1,
+    colorsByRange: [],
+    stroke: {
+      show: !1,
+      color: "#FFFFFF",
+      lineWidth: 1,
+      opacity: 1,
+      radius: 0
+    },
+    error: "#FF0000",
+    decimalPoint: 0
+  },
+  seriesReverse: !1,
+  coordinateDedupe: !0,
+  eventBehavior: {
+    legendClick: "update"
+  }
+}, _ = {
+  series: {},
+  groups: [],
+  labels: [],
+  data: {}
+}, K = () => {
+  let i = null, l = 0;
+  const r = 200;
+  return {
+    clickEventCallback: (d) => {
+      l++, l === 1 && (i = setTimeout(() => {
+        l === 1 && d(), l = 0;
+      }, r));
+    },
+    dblClickEventCallback: (d) => {
+      i && (clearTimeout(i), i = null), d(), l = 0;
+    }
+  };
+}, Y = (i, l) => {
+  const { props: r, emit: s } = U(), f = (e) => {
+    const o = D({}, e, q);
+    return (e.type === "scatter" || e.type === "heatMap") && !(e != null && e.tooltip) && (o.tooltip.use = !1), e.type === "pie" && !(e != null && e.padding) && (o.padding = {
+      top: 2,
+      right: 2,
+      left: 2,
+      bottom: 4
+    }), o;
+  }, d = (e) => D(e, _), w = v(r.selectedItem), y = v(r.selectedLabel ?? (i == null ? void 0 : i.value)), c = v(r.selectedSeries), { clickEventCallback: C, dblClickEventCallback: h } = K();
+  return {
+    eventListeners: {
+      click: async (e) => {
+        await F(), C(() => {
+          const { seriesId: o, dataIndex: n, eventTarget: p, targetAxis: Z } = (e == null ? void 0 : e.selected) ?? {}, { eventTarget: x } = (e == null ? void 0 : e.deselected) ?? {};
+          switch (p) {
+            case "item": {
+              o !== null ? (s("update:selectedItem", {
+                seriesID: o,
+                dataIndex: n
+              }), x === "label" && s("update:selectedLabel", { dataIndex: [] })) : s("update:selectedItem", null);
+              break;
+            }
+            case "label": {
+              i != null && i.value ? i.value.dataIndex = n : (s("update:selectedLabel", {
+                dataIndex: n,
+                targetAxis: Z
+              }), x === "item" && s("update:selectedItem", null));
+              break;
+            }
+            case "series": {
+              s("update:selectedSeries", { seriesId: o });
+              break;
+            }
+          }
+          s("click", e);
+        });
+      },
+      "dbl-click": async (e) => {
+        await F(), h(() => {
+          const { eventTarget: o } = e;
+          switch (o) {
+            case "series": {
+              s("update:selectedSeries", { seriesId: e.seriesId ? [e.seriesId] : [] });
+              break;
+            }
+          }
+          s("dbl-click", e);
+        });
+      },
+      "drag-select": async (e) => {
+        await F(), s("drag-select", e);
+      },
+      "mouse-move": async (e) => {
+        l != null && l.value && (l.value = e.hoveredLabel), await F(), s("mouse-move", e);
+      },
+      "mouse-leave": () => {
+        l != null && l.value && (l.value.label = null);
+      },
+      "click-legend": async (e) => {
+        await F(), s("click-legend", e);
+      },
+      "update:legendData": async (e) => {
+        await F(), s("update:legendData", e);
+      },
+      "axes-scale-change": (e) => {
+        s("axes-scale-change", e);
+      }
+    },
+    selectItemInfo: w,
+    selectLabelInfo: y,
+    selectSeriesInfo: c,
+    getNormalizedData: d,
+    getNormalizedOptions: f
+  };
+}, B = (i) => {
+  const l = k(), r = P(() => {
+    const s = (f) => {
+      let d;
+      return f ? d = f.unit ? f.value + f.unit : `${f.value}px` : d = void 0, d;
+    };
+    return {
+      width: s(A(i.width)),
+      height: s(A(i.height))
+    };
+  });
+  return {
+    wrapper: l,
+    wrapperStyle: r
+  };
+}, H = (i, { wrapper: l, evChartGroupRef: r }, s, f) => {
+  const { props: d, emit: w } = U(), y = k(!1), c = k(!1), C = k(!0), h = k(), m = b({ zoom: i.zoom }), e = b({
+    start: 0,
+    end: -1,
+    isUseButton: !1,
+    isUseScroll: !1
+  });
+  let o = null;
+  const n = b({
+    dom: [],
+    props: {
+      data: [],
+      options: []
+    }
+  }), p = b({ data: null, options: null }), Z = k([]), x = (t) => {
+    t.data.length && t.range && c.value && o.dragZoom(t);
+  }, T = () => {
+    n.props.options.forEach((t, a) => {
+      if (t.zoom = {
+        ...t.zoom,
+        use: c.value,
+        getRangeInfo: x
+      }, c.value)
+        t.dragSelection = {
+          ...t.dragSelection,
+          use: !0,
+          keepDisplay: !1
+        };
+      else {
+        const { use: u, keepDisplay: g } = p.options[a].dragSelection ?? {};
+        t.dragSelection = {
+          use: !!u,
+          keepDisplay: !!g
+        };
+      }
+    });
+  }, z = () => {
+    if (r != null && r.value ? (n.dom = r.value.querySelectorAll(".ev-chart-container"), n.dom.length && f.value.forEach(({ data: t, options: a }, u) => {
+      t.chartIdx = u, n.props.data.push(t), n.props.options.push(a), Z.value.push(u);
+    })) : (n.dom = [l.value.querySelector(".ev-chart-container")], n.props.data.push(d.data), n.props.options.push(d.options)), n.props.data.length) {
+      p.data = v(n.props.data), p.options = v(n.props.options);
+      const t = {
+        updateZoomStartIdx: (a) => w("update:zoomStartIdx", a),
+        updateZoomEndIdx: (a) => w("update:zoomEndIdx", a)
+      };
+      o = new V(
+        n,
+        p,
+        m,
+        h.value,
+        y,
+        e,
+        t
+      );
+    }
+  }, E = (t) => {
+    p.data[0].labels.length <= 1 || (c.value = !c.value, t ? t.classList.toggle("active") : h.value.querySelector(".dragZoom").classList.toggle("active"), T(), o.setIconStyle(c.value), o.setEventListener(c.value));
+  }, I = (t, a) => {
+    if (o.isAnimationFinish)
+      switch (a) {
+        case "dragZoom":
+          E(t.target);
+          break;
+        case "reset":
+          o.initZoom();
+          break;
+        case "previous":
+        case "latest":
+          o.clickMoveZoomArea(a);
+          break;
+      }
+  };
+  R(() => {
+    o && h.value && o.setIcon(h.value);
+  });
+  const M = (t) => {
+    !N(t.zoom, m.zoom) && (m.zoom = t.zoom, o ? (!m.zoom.toolbar.show && c.value && E(), o.setEvChartZoomOptions(m.zoom)) : m.zoom.toolbar.show && !r && z());
+  }, O = (t) => {
+    C.value ? (y.value || (p.data = r ? v(t) : [v(t)], m.zoom.keepZoomStatus ? C.value = !1 : (c.value = !1, T()), o && o.updateEvChartCloneData(
+      p,
+      Z,
+      c.value,
+      m.zoom.keepZoomStatus
+    )), y.value = !1) : C.value = !0;
+  }, W = (t, a) => {
+    if (o.isUseToolbar) {
+      o.isUseToolbar = !1;
+      return;
+    }
+    c.value && (o.executeZoom(t, a), o.setZoomAreaMemory(t, a));
+  };
+  return S(
+    () => [e.start, e.end],
+    ([t, a], [u]) => {
+      if (s != null && s.value)
+        if (typeof s.value.dataIndex == "number")
+          t >= (u ?? 0) ? s.value.dataIndex -= t - (u ?? 0) : s.value.dataIndex += u - t;
+        else
+          for (let g = 0; g < s.value.dataIndex.length; g++)
+            t >= (u ?? 0) ? s.value.dataIndex[g] -= t - (u ?? 0) : s.value.dataIndex[g] += u - t;
+      (e.isUseButton || e.isUseScroll) && o.executeZoom(t, a);
+    }
+  ), S(
+    () => [e.isUseButton, e.isUseScroll],
+    ([t, a], [u, g]) => {
+      u && !t ? o.setZoomAreaMemory(e.start, e.end) : g && !a && (o.zoomAreaMemory.current[0] = [e.start, e.end]);
+    }
+  ), {
+    evChartZoomOptions: m,
+    evChartInfo: n,
+    evChartToolbarRef: h,
+    evChartClone: p,
+    brushIdx: e,
+    createEvChartZoom: z,
+    setOptionsForUseZoom: M,
+    setDataForUseZoom: O,
+    controlZoomIdx: W,
+    onClickToolbar: I
+  };
+};
+export {
+  Y as useModel,
+  B as useWrapper,
+  H as useZoomModel
+};

package/dist/components/chartBrush/ChartBrush.vue.js

@@ -0,0 +1,198 @@
+import { resolveDirective as N, withDirectives as O, openBlock as R, createElementBlock as W, normalizeStyle as X, createCommentVNode as Y, ref as $, inject as v, computed as B, watch as m, onMounted as q, onUpdated as A, onBeforeUnmount as P, onDeactivated as V, onActivated as F } from "vue";
+import { cloneDeep as w, debounce as G, isEqual as x } from "lodash-es";
+import H from "vue-resize-observer";
+import J from "../chart/chart.core.js";
+import { useModel as K, useWrapper as Q } from "../chart/uses.js";
+import Z from "./chartBrush.core.js";
+import { useBrushModel as ee } from "./uses.js";
+import te from "../../_virtual/_plugin-vue_export-helper.js";
+const se = {
+  name: "EvChartBrush",
+  directives: {
+    resize: H
+  },
+  props: {
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(I) {
+    let t = null, i = null;
+    const l = $(!1), u = v("evChartClone", { data: [] }), S = v("evChartInfo", { props: { options: [] } }), c = v("brushIdx", {
+      start: 0,
+      end: -1,
+      isUseButton: !1,
+      isUseScroll: !1
+    }), h = v("brushSeries", { list: [], chartIdx: null }), { getNormalizedBrushOptions: k } = ee(), a = B(() => k(I.options)), {
+      eventListeners: D,
+      selectItemInfo: E,
+      selectLabelInfo: _,
+      selectSeriesInfo: L,
+      getNormalizedData: T,
+      getNormalizedOptions: U
+    } = K(), n = B(
+      () => T((u.data ?? [])[a.value.chartIdx])
+    ), d = B(() => {
+      var r, o;
+      const e = S.props.options[a.value.chartIdx], s = {
+        ...e,
+        brush: {
+          use: !0,
+          ...a.value
+        },
+        height: a.value.height,
+        zoom: {
+          use: !1
+        },
+        dragSelection: {
+          use: !1
+        },
+        title: {
+          show: !1
+        },
+        tooltip: {
+          use: !1
+        },
+        legend: {
+          show: !1
+        },
+        selectLabel: {
+          use: !1
+        },
+        selectSeries: {
+          use: !1
+        },
+        axesX: [
+          {
+            ...(r = e == null ? void 0 : e.axesX) == null ? void 0 : r[0],
+            title: {
+              use: !1
+            }
+          }
+        ],
+        axesY: [
+          {
+            ...(o = e == null ? void 0 : e.axesY) == null ? void 0 : o[0],
+            title: {
+              use: !1
+            }
+          }
+        ]
+      };
+      return U(s);
+    }), { wrapper: f, wrapperStyle: M } = Q(
+      d.value
+    );
+    m(
+      () => h.list,
+      () => {
+        f.value && h.chartIdx === a.value.chartIdx && (t.seriesList = h.list[a.value.chartIdx], t.update({
+          updateSeries: !1,
+          updateSelTip: { update: !1, keepDomain: !1 }
+        }));
+      }
+    ), m(d, (e, s) => {
+      var r;
+      e.brush.chartIdx <= ((r = u.data) == null ? void 0 : r.length) - 1 ? i && !x(s.brush, e.brush) ? i.removeBrushWrapper() : t && !x(e, s) && (t.options = w(e), t.update({
+        updateSeries: !1,
+        updateSelTip: { update: !1, keepDomain: !1 }
+      })) : (t.data = w(n.value), t.update({
+        updateSeries: !0,
+        updateSelTip: { update: !1, keepDomain: !1 },
+        updateData: !1
+      }), i.removeBrushCanvas());
+    }), m(
+      () => u.data,
+      (e) => {
+        if (t) {
+          const s = e[a.value.chartIdx];
+          if (s) {
+            const r = !x(s.series, t.data.series), o = h.list[a.value.chartIdx];
+            typeof o == "object" && Object.keys(o).length && Object.keys(s.series).forEach((C) => {
+              var j;
+              "show" in s.series[C] || (s.series[C].show = ((j = o[C]) == null ? void 0 : j.show) ?? !0);
+            }), t.data = w(s), t.update({
+              updateSeries: r,
+              updateSelTip: { update: !1, keepDomain: !1 },
+              updateData: !1
+            });
+          }
+        }
+      }
+    );
+    const b = () => {
+      let e;
+      d.value.selectLabel.use ? e = _ : d.value.selectSeries.use && (e = L), t = new J(
+        f.value,
+        n.value,
+        d.value,
+        D,
+        E,
+        e
+      );
+    }, y = () => {
+      i = new Z(
+        t,
+        n,
+        a,
+        c,
+        f
+      );
+    }, z = () => {
+      t && t.init();
+    }, p = (e) => {
+      i && i.init(e);
+    };
+    m(
+      () => [c.start, c.end],
+      () => {
+        var e;
+        f.value && a.value.chartIdx <= ((e = u.data) == null ? void 0 : e.length) - 1 && p();
+      }
+    ), q(async () => {
+      a.value.show && (await b(), await z(), y(), p()), l.value = !0;
+    }), A(async () => {
+      var e;
+      if (a.value.show && a.value.chartIdx <= ((e = u.data) == null ? void 0 : e.length) - 1) {
+        const s = h.list[a.value.chartIdx];
+        typeof s == "object" && Object.keys(s).length && Object.keys(n.value.series).forEach((r) => {
+          var o;
+          "show" in n.value.series[r] || (n.value.series[r].show = ((o = s[r]) == null ? void 0 : o.show) ?? !0);
+        }), await b(), await z(), y(), p();
+      }
+    }), P(() => {
+      t && "destroy" in t && t.destroy(), i && i.destroy(), l.value = !1;
+    }), V(() => {
+      t && "hideTooltip" in t && t.hideTooltip();
+    });
+    const g = G(() => {
+      t && "resize" in t && new Promise((s) => t.resize(s)).then((s) => {
+        s && p(s);
+      });
+    }, 0);
+    return F(() => {
+      l.value && g();
+    }), {
+      evChartBrushOptions: a,
+      evChartBrushRef: f,
+      evChartBrushStyle: M,
+      onResize: g
+    };
+  }
+};
+function ae(I, t, i, l, u, S) {
+  const c = N("resize");
+  return l.evChartBrushOptions.show ? O((R(), W("div", {
+    key: 0,
+    ref: "evChartBrushRef",
+    style: X(l.evChartBrushStyle),
+    class: "ev-chart-brush"
+  }, null, 4)), [
+    [c, l.onResize]
+  ]) : Y("", !0);
+}
+const de = /* @__PURE__ */ te(se, [["render", ae]]);
+export {
+  de as default
+};