evui 3.3.39 → 3.3.41

package/src/components/chart/plugins/plugins.interaction.js

@@ -63,6 +63,7 @@ const modules = {
      *
      * @returns {undefined}
      */
+
     this.onMouseLeave = () => {
       const { tooltip, dragSelection } = this.options;
 
@@ -111,6 +112,10 @@ const modules = {
      * @returns {undefined}
      */
     this.onClick = (e) => {
+      if (this.isMouseMove) {
+        this.isMouseMove = false;
+        return;
+      }
       const args = { e };
       if (this.options.selectItem.use && this.options.selectItem.useClick) {
         const offset = this.getMousePosition(e);
@@ -239,6 +244,7 @@ const modules = {
       let yep;
 
       dragInfo.isMove = true;
+      this.isMouseMove = true;
 
       if (aOffsetX < aRange.x1) {
         xep = aRange.x1;
@@ -295,13 +301,31 @@ const modules = {
 
         this.dragInfoBackup = defaultsDeep({}, dragInfo);
 
-        if (typeof this.listeners['drag-select'] === 'function') {
+        if (typeof this.listeners['drag-select'] === 'function' && !this.options?.zoom?.use) {
           this.listeners['drag-select'](args);
+        } else {
+          const {
+            xsp,
+            range: chartRange,
+            width: dragWidth,
+          } = dragInfo;
+          const dragXsp = xsp - chartRange.x1;
+
+          args.range.dragSelectionInfo = {
+            dragXsp,
+            dragXep: dragXsp + dragWidth,
+            exceptAxesYChartWidth: chartRange.x2 - chartRange.x1,
+            exceptAxesXChartHeight: chartRange.y2 - chartRange.y1,
+            chartRange,
+            chartTitle: this.options.title.text,
+          };
+
+          this.options.zoom.getRangeInfo(args);
         }
-      }
 
-      if (!this.options.dragSelection.keepDisplay) {
-        this.removeSelectionArea();
+        if (!this.options.dragSelection.keepDisplay) {
+          this.removeSelectionArea();
+        }
       }
 
       this.dragInfo = null;

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

@@ -176,6 +176,7 @@ const modules = {
             cId: colorItem.id,
             color: colorItem.color,
             name,
+            show: true,
           });
         }
       }
@@ -230,7 +231,8 @@ const modules = {
      * @returns {undefined}
      */
     this.onLegendBoxClick = (e) => {
-      const opt = this.options.legend;
+      const { legend: opt } = this.options;
+      const { chartIdx } = this.data;
 
       const targetDOM = this.getContainerDOM(e);
       if (!targetDOM) {
@@ -290,6 +292,14 @@ const modules = {
       series.show = !series.show;
       targetDOM.classList.toggle('inactive');
 
+      if (this.brushSeries) {
+        const seriesList = [...this.brushSeries.list];
+        seriesList[chartIdx] = this.seriesList;
+
+        this.brushSeries.list = seriesList;
+        this.brushSeries.chartIdx = chartIdx;
+      }
+
       this.update({
         updateSeries: false,
         updateSelTip: { update: true, keepDomain: true },

package/src/components/chart/plugins/plugins.title.js

@@ -20,14 +20,7 @@ const modules = {
       this.createTitle();
     }
 
-    const opt = this.options.title;
-    Object.keys(opt.style).forEach((key) => {
-      this.titleDOM.style[key] = opt.style[key];
-    });
-
-    this.titleDOM.textContent = opt.text;
-    this.titleDOM.style.height = `${opt.height}px`;
-    this.titleDOM.style.lineHeight = `${opt.height}px`;
+    this.updateTitle();
 
     this.isInitTitle = true;
   },
@@ -51,6 +44,18 @@ const modules = {
     this.titleDOM.style.display = 'none';
     this.wrapperDOM.style.paddingTop = '0px';
   },
+
+  updateTitle() {
+    const opt = this.options.title;
+
+    Object.keys(opt.style).forEach((key) => {
+      this.titleDOM.style[key] = opt.style[key];
+    });
+
+    this.titleDOM.textContent = opt.text;
+    this.titleDOM.style.height = `${opt.height}px`;
+    this.titleDOM.style.lineHeight = `${opt.height}px`;
+  },
 };
 
 export default modules;

package/src/components/chart/scale/scale.js

@@ -311,7 +311,10 @@ class Scale {
 
         if (this.type === 'x') {
           labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-          ctx.fillText(labelText, labelCenter, labelPoint);
+          if (options?.brush?.showLabel || !options.brush) {
+            ctx.fillText(labelText, labelCenter, labelPoint);
+          }
+
           if (!isBlurredLabel
             && options?.selectItem?.showLabelTip
             && hitInfo?.label
@@ -341,10 +344,12 @@ class Scale {
           }
         } else {
           labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-          ctx.fillText(labelText, labelPoint, labelCenter);
+          if (options?.brush?.showLabel || !options.brush) {
+            ctx.fillText(labelText, labelPoint, labelCenter);
+          }
 
           if (ix === steps) {
-            linePosition += 1;
+            linePosition -= 1;
           }
 
           if (ix !== 0 && this.showGrid) {

package/src/components/chart/style/chart.scss

@@ -7,6 +7,13 @@
   height: 100%;
 }
 
+.ev-chart-brush-wrapper {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
 .ev-chart-container {
   position: relative;
   overflow: hidden;
@@ -14,6 +21,13 @@
   height: 100%;
 }
 
+.ev-chart-brush-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
 .ev-chart-title {
   position: absolute;
   top: 0;

package/src/components/chart/uses.js

@@ -1,6 +1,7 @@
-import { ref, computed, getCurrentInstance, nextTick } from 'vue';
-import { cloneDeep, defaultsDeep } from 'lodash-es';
+import { ref, computed, getCurrentInstance, nextTick, reactive, onUpdated, watch } from 'vue';
+import { cloneDeep, defaultsDeep, isEqual } from 'lodash-es';
 import { getQuantity } from '@/common/utils';
+import EvChartZoom from '@/components/chart/chartZoom.core';
 
 const DEFAULT_OPTIONS = {
   padding: {
@@ -130,6 +131,7 @@ const DEFAULT_OPTIONS = {
   selectLabel: {
     use: false,
     useClick: true,
+    tipText: 'value',
     limit: 1,
     useDeselectOverflow: false,
     showTip: false,
@@ -138,6 +140,17 @@ const DEFAULT_OPTIONS = {
     fixedPosTop: false,
     useApproximateValue: false,
     tipBackground: '#000000',
+    indicatorColor: '#000000',
+    tipStyle: {
+      height: 20,
+      background: '#000000',
+      textColor: '#FFFFFF',
+      fontSize: 14,
+      fontFamily: 'Roboto',
+      fontWeight: 400,
+    },
+    showTextTip: false,
+    showIndicator: false,
   },
   selectSeries: {
     use: false,
@@ -151,6 +164,34 @@ const DEFAULT_OPTIONS = {
     fillColor: '#38ACEC',
     opacity: 0.65,
   },
+  zoom: {
+    bufferMemoryCnt: 100,
+    toolbar: {
+      show: false,
+      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',
@@ -174,7 +215,7 @@ const DEFAULT_DATA = {
   data: {},
 };
 
-export const useModel = () => {
+export const useModel = (selectedLabel) => {
   const { props, emit } = getCurrentInstance();
 
   const getNormalizedOptions = (options) => {
@@ -191,14 +232,14 @@ export const useModel = () => {
         left: 2,
         bottom: 4,
       };
-}
+    }
 
     return normalizedOptions;
   };
   const getNormalizedData = data => defaultsDeep(data, DEFAULT_DATA);
 
   const selectItemInfo = cloneDeep(props.selectedItem);
-  const selectLabelInfo = cloneDeep(props.selectedLabel);
+  const selectLabelInfo = cloneDeep(props.selectedLabel ?? selectedLabel?.value);
   const selectSeriesInfo = cloneDeep(props.selectedSeries);
 
   const eventListeners = {
@@ -208,7 +249,11 @@ export const useModel = () => {
         emit('update:selectedItem', { seriesID: e.seriesId, dataIndex: e.dataIndex });
       }
       if (e.selected?.dataIndex) {
-        emit('update:selectedLabel', { dataIndex: e.selected.dataIndex });
+        if (selectedLabel?.value) {
+          selectedLabel.value.dataIndex = e.selected.dataIndex;
+        } else {
+          emit('update:selectedLabel', { dataIndex: e.selected.dataIndex });
+        }
       }
       if (e.selected?.seriesId) {
         emit('update:selectedSeries', { seriesId: e.selected.seriesId });
@@ -262,3 +307,281 @@ export const useWrapper = (options) => {
     wrapperStyle,
   };
 };
+
+export const useZoomModel = (
+  evChartNormalizedOptions,
+  { wrapper: evChartWrapper, evChartGroupRef },
+  selectedLabelOrItem,
+) => {
+  const { props, slots, emit } = getCurrentInstance();
+
+  const isExecuteZoom = ref(false);
+  const isUseZoomMode = ref(false);
+  const evChartToolbarRef = ref();
+
+  const evChartZoomOptions = reactive({ zoom: evChartNormalizedOptions.zoom });
+  const brushIdx = reactive({
+    start: 0,
+    end: -1,
+    isUseButton: false,
+    isUseScroll: false,
+  });
+
+  let evChartZoom = null;
+  const evChartInfo = reactive({
+    dom: [],
+    props: {
+      data: [],
+      options: [],
+    },
+  });
+  const evChartClone = reactive({ data: null, options: null });
+  const brushChartIdx = ref([]);
+
+  const getRangeInfo = (zoomInfo) => {
+    if (zoomInfo.data.length && zoomInfo.range && isUseZoomMode.value) {
+      evChartZoom.dragZoom(zoomInfo);
+    }
+  };
+
+  const setEvChartOptions = () => {
+    evChartInfo.props.options.forEach((option, idx) => {
+      option.zoom = {
+        ...option.zoom,
+        use: isUseZoomMode.value,
+        getRangeInfo,
+      };
+
+      if (isUseZoomMode.value) {
+        option.dragSelection = {
+          ...option.dragSelection,
+          use: true,
+          keepDisplay: false,
+        };
+      } else {
+        const {
+          use: originUseOption,
+          keepDisplay: originKeepDisplayOption,
+        } = evChartClone.options[idx].dragSelection ?? {};
+
+        option.dragSelection = {
+          use: !!originUseOption,
+          keepDisplay: !!originKeepDisplayOption,
+        };
+      }
+    });
+  };
+
+  const createEvChartZoom = () => {
+    if (evChartGroupRef) {
+      evChartInfo.dom = evChartGroupRef.value.querySelectorAll('.ev-chart-container');
+
+      let chartIdx = 0;
+      if (evChartInfo.dom.length) {
+        slots.default(evChartInfo.dom).forEach(({ type, props: evChartProps }) => {
+          if (type?.name === 'EvChart') {
+            const { options, data } = evChartProps;
+
+            data.chartIdx = chartIdx;
+            chartIdx++;
+
+            evChartInfo.props.data.push(data);
+            evChartInfo.props.options.push(options);
+          } else if (type?.name === 'EvChartBrush') {
+            brushChartIdx.value.push(evChartProps?.options?.chartIdx ?? 0);
+          }
+        });
+      }
+    } else {
+      evChartInfo.dom = [evChartWrapper.value.querySelector('.ev-chart-container')];
+      evChartInfo.props.data.push(props.data);
+      evChartInfo.props.options.push(props.options);
+    }
+
+    if (evChartInfo.props.data.length) {
+      evChartClone.data = cloneDeep(evChartInfo.props.data);
+      evChartClone.options = cloneDeep(evChartInfo.props.options);
+
+      const emitFunc = {
+        updateZoomStartIdx: startIdx => emit('update:zoomStartIdx', startIdx),
+        updateZoomEndIdx: endIdx => emit('update:zoomEndIdx', endIdx),
+      };
+
+      evChartZoom = new EvChartZoom(
+        evChartInfo,
+        evChartClone,
+        evChartZoomOptions,
+        evChartToolbarRef.value,
+        isExecuteZoom,
+        brushIdx,
+        emitFunc,
+      );
+    }
+  };
+
+  const toggleUseZoom = (target) => {
+    if (evChartClone.data[0].labels.length <= 1) {
+      return;
+    }
+
+    isUseZoomMode.value = !isUseZoomMode.value;
+
+    if (target) {
+      target.classList.toggle('active');
+    } else {
+      const dragZoomIcon = evChartToolbarRef.value.querySelector('.dragZoom');
+
+      dragZoomIcon.classList.toggle('active');
+    }
+
+    setEvChartOptions();
+
+    evChartZoom.setIconStyle(isUseZoomMode.value);
+    evChartZoom.setEventListener(isUseZoomMode.value);
+  };
+
+  const onClickToolbar = (e, iconType) => {
+    if (!evChartZoom.isAnimationFinish) {
+      return;
+    }
+
+    switch (iconType) {
+      case 'dragZoom':
+        toggleUseZoom(e.target);
+        break;
+      case 'reset':
+        evChartZoom.initZoom();
+        break;
+      case 'previous':
+      case 'latest':
+        evChartZoom.clickMoveZoomArea(iconType);
+        break;
+      default:
+        break;
+    }
+  };
+
+  onUpdated(() => {
+    if (evChartToolbarRef.value) {
+      evChartZoom.setIcon(evChartToolbarRef.value);
+    }
+  });
+
+  const setOptionsForUseZoom = (newOpt) => {
+    const isUpdateZoomOptions = !isEqual(newOpt.zoom, evChartZoomOptions.zoom);
+
+    if (isUpdateZoomOptions) {
+      evChartZoomOptions.zoom = newOpt.zoom;
+
+      if (evChartZoom) {
+        if (!evChartZoomOptions.zoom.toolbar.show && isUseZoomMode.value) {
+          toggleUseZoom();
+        }
+
+        evChartZoom.setEvChartZoomOptions(evChartZoomOptions);
+      } else if (evChartZoomOptions.zoom.toolbar.show && !evChartGroupRef) {
+        createEvChartZoom();
+      }
+    }
+  };
+
+  const setDataForUseZoom = (newData) => {
+    if (!isExecuteZoom.value) {
+      evChartClone.data = evChartGroupRef ? cloneDeep(newData) : [cloneDeep(newData)];
+      isUseZoomMode.value = false;
+
+      setEvChartOptions();
+
+      brushIdx.end = -1;
+      for (let i = 0; i < brushChartIdx.value.length; i++) {
+        const data = evChartClone.data[brushChartIdx.value[i]];
+
+        if (data.labels.length) {
+          brushIdx.start = 0;
+          brushIdx.end = data.labels.length - 1;
+        }
+      }
+
+      if (evChartZoom) {
+        evChartZoom.updateEvChartCloneData(evChartClone, isUseZoomMode.value);
+      }
+    }
+
+    isExecuteZoom.value = false;
+  };
+
+  const controlZoomIdx = (zoomStartIdx, zoomEndIdx) => {
+    if (evChartZoom.isUseToolbar) {
+        evChartZoom.isUseToolbar = false;
+        return;
+    }
+
+    if (isUseZoomMode.value) {
+      evChartZoom.executeZoom(zoomStartIdx, zoomEndIdx);
+      evChartZoom.setZoomAreaMemory(zoomStartIdx, zoomEndIdx);
+    }
+  };
+
+  watch(() => [
+    brushIdx.start,
+    brushIdx.end,
+  ], ([
+    curBrushStartIdx,
+    curBrushEndIdx,
+  ], [
+    prevBrushStartIdx,
+  ]) => {
+    if (selectedLabelOrItem?.value) {
+      if (typeof selectedLabelOrItem.value.dataIndex === 'number') {
+        if (curBrushStartIdx >= (prevBrushStartIdx ?? 0)) {
+          selectedLabelOrItem.value.dataIndex -= curBrushStartIdx - (prevBrushStartIdx ?? 0);
+        } else {
+          selectedLabelOrItem.value.dataIndex += prevBrushStartIdx - curBrushStartIdx;
+        }
+      } else {
+        for (let idx = 0; idx < selectedLabelOrItem.value.dataIndex.length; idx++) {
+          if (curBrushStartIdx >= (prevBrushStartIdx ?? 0)) {
+            selectedLabelOrItem.value.dataIndex[idx] -= curBrushStartIdx - (prevBrushStartIdx ?? 0);
+          } else {
+            selectedLabelOrItem.value.dataIndex[idx] += prevBrushStartIdx - curBrushStartIdx;
+          }
+        }
+      }
+    }
+
+    if (brushIdx.isUseButton || brushIdx.isUseScroll) {
+      evChartZoom.executeZoom(curBrushStartIdx, curBrushEndIdx);
+    }
+  });
+
+  watch(() => [
+    brushIdx.isUseButton,
+    brushIdx.isUseScroll,
+  ], ([
+    curIsUseButton,
+    curIsUseScroll,
+  ], [
+    prevIsUseButton,
+    prevIsUseScroll,
+  ]) => {
+    if (prevIsUseButton && !curIsUseButton) {
+      evChartZoom.setZoomAreaMemory(brushIdx.start, brushIdx.end);
+    } else if (prevIsUseScroll && !curIsUseScroll) {
+      evChartZoom.zoomAreaMemory.current[0] = [brushIdx.start, brushIdx.end];
+    }
+  });
+
+  return {
+    evChartZoomOptions,
+    evChartInfo,
+    evChartToolbarRef,
+    evChartClone,
+    brushIdx,
+
+    createEvChartZoom,
+    setOptionsForUseZoom,
+    setDataForUseZoom,
+    controlZoomIdx,
+    onClickToolbar,
+  };
+};