evui 3.3.40 → 3.3.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.40",
+  "version": "3.3.41",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

package/src/components/chart/Chart.vue

@@ -78,7 +78,7 @@
       const injectIsChartGroup = inject('isChartGroup', false);
       const injectBrushSeries = inject('brushSeries', { list: [], chartIdx: null });
       const injectGroupSelectedLabel = inject('groupSelectedLabel', null);
-      const injectBrushIdx = inject('brushIdx', { start: 0, end: 0 });
+      const injectBrushIdx = inject('brushIdx', { start: 0, end: -1 });
 
       const {
         eventListeners,

package/src/components/chart/chart.core.js

@@ -707,6 +707,8 @@ class EvChart {
     if (options.title.show) {
       if (!this.isInitTitle) {
         this.initTitle();
+      } else {
+        this.updateTitle();
       }
 
       this.showTitle();

package/src/components/chart/chartZoom.core.js

@@ -438,7 +438,7 @@ export default class EvChartZoom {
       }
     };
 
-    if (isUseZoomMode) {
+    if (isUseZoomMode && this.dragZoomIcon.classList.contains('active')) {
       const { previous, latest } = this.zoomAreaMemory;
 
       toggleIconStyle(this.previousIcon, previous.length);

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/uses.js

@@ -232,7 +232,7 @@ export const useModel = (selectedLabel) => {
         left: 2,
         bottom: 4,
       };
-}
+    }
 
     return normalizedOptions;
   };
@@ -308,7 +308,6 @@ export const useWrapper = (options) => {
   };
 };
 
-
 export const useZoomModel = (
   evChartNormalizedOptions,
   { wrapper: evChartWrapper, evChartGroupRef },
@@ -323,7 +322,7 @@ export const useZoomModel = (
   const evChartZoomOptions = reactive({ zoom: evChartNormalizedOptions.zoom });
   const brushIdx = reactive({
     start: 0,
-    end: 0,
+    end: -1,
     isUseButton: false,
     isUseScroll: false,
   });
@@ -337,6 +336,7 @@ export const useZoomModel = (
     },
   });
   const evChartClone = reactive({ data: null, options: null });
+  const brushChartIdx = ref([]);
 
   const getRangeInfo = (zoomInfo) => {
     if (zoomInfo.data.length && zoomInfo.range && isUseZoomMode.value) {
@@ -387,6 +387,8 @@ export const useZoomModel = (
 
             evChartInfo.props.data.push(data);
             evChartInfo.props.options.push(options);
+          } else if (type?.name === 'EvChartBrush') {
+            brushChartIdx.value.push(evChartProps?.options?.chartIdx ?? 0);
           }
         });
       }
@@ -490,8 +492,15 @@ export const useZoomModel = (
 
       setEvChartOptions();
 
-      brushIdx.start = 0;
-      brushIdx.end = evChartClone.data[0].labels.length - 1;
+      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);

package/src/components/chartBrush/ChartBrush.vue

@@ -32,7 +32,7 @@ export default {
     const injectEvChartInfo = inject('evChartInfo', { props: { options: [] } });
     const injectBrushIdx = inject('brushIdx', {
       start: 0,
-      end: 0,
+      end: -1,
       isUseButton: false,
       isUseScroll: false,
     });

package/src/components/chartBrush/chartBrush.core.js

@@ -15,6 +15,8 @@ export default class EvChartBrush {
 
   init(isResize) {
     if (this.brushIdx.start > this.brushIdx.end) {
+      this.initEventState();
+      this.removeBrushCanvas();
       return;
     }
 
@@ -72,52 +74,55 @@ export default class EvChartBrush {
     const brushIdx = this.debounceBrushIdx ?? this.brushIdx;
 
     const labelEndIdx = this.evChartData.value.labels.length - 1;
-    this.labelEndIdx = labelEndIdx;
-    const axesXInterval = (evChartRange.x2 - evChartRange.x1) / labelEndIdx;
-    const brushRectX = brushIdx.start * axesXInterval * pixelRatio;
-    const brushRectWidth = (
-      brushCanvasWidth - (
-        labelEndIdx - (brushIdx.end - brushIdx.start)
-      ) * axesXInterval
-    ) * pixelRatio;
-    const brushRectHeight = this.evChartBrushOptions.value.height - evChartRange.y1;
-    const brushButtonLeftXPos = brushRectX;
-    const brushButtonRightXPos = brushRectX + brushRectWidth;
-
-    if (!brushCanvas.style.position) {
-      brushCanvas.style.position = 'absolute';
-      brushCanvas.style.top = `${evChartRange.y1}px`;
-      brushCanvas.style.left = `${evChartRange.x1 - (brushButtonWidth / 2)}px`;
-    }
 
-    if (!isEqualWidth) {
-      brushCanvas.width = (brushCanvasWidth * pixelRatio);
-      brushCanvas.style.width = `${brushCanvasWidth}px`;
-      brushCanvas.height = brushCanvasHeight * pixelRatio;
-      brushCanvas.style.height = `${brushCanvasHeight}px`;
-    }
+    if (labelEndIdx >= 0) {
+      this.labelEndIdx = labelEndIdx;
+      const axesXInterval = (evChartRange.x2 - evChartRange.x1) / labelEndIdx;
+      const brushRectX = brushIdx.start * axesXInterval * pixelRatio;
+      const brushRectWidth = (
+        brushCanvasWidth - (
+          labelEndIdx - (brushIdx.end - brushIdx.start)
+        ) * axesXInterval
+      ) * pixelRatio;
+      const brushRectHeight = this.evChartBrushOptions.value.height - evChartRange.y1;
+      const brushButtonLeftXPos = brushRectX;
+      const brushButtonRightXPos = brushRectX + brushRectWidth;
+
+      if (!brushCanvas.style.position) {
+        brushCanvas.style.position = 'absolute';
+        brushCanvas.style.top = `${evChartRange.y1}px`;
+        brushCanvas.style.left = `${evChartRange.x1 - (brushButtonWidth / 2)}px`;
+      }
 
-    const ctx = brushCanvas.getContext('2d');
-
-    ctx.clearRect(
-      0,
-      0,
-      brushCanvasWidth * pixelRatio,
-      brushCanvasHeight * pixelRatio,
-    );
-
-    ctx.fillStyle = this.evChartBrushOptions.value.selection.fillColor;
-    ctx.globalAlpha = this.evChartBrushOptions.value.selection.opacity;
-    ctx.fillRect(brushRectX, 0, brushRectWidth, brushRectHeight);
-    ctx.fillRect(brushButtonLeftXPos, 0, brushButtonWidth, brushRectHeight);
-    ctx.fillRect(brushButtonRightXPos - brushButtonWidth, 0, brushButtonWidth, brushRectHeight);
-
-    this.evChartBrushPos = {
-      leftX: brushButtonLeftXPos / pixelRatio,
-      rightX: brushButtonRightXPos / pixelRatio,
-      buttonWidth: brushButtonWidth,
-      axesXInterval,
-    };
+      if (!isEqualWidth) {
+        brushCanvas.width = (brushCanvasWidth * pixelRatio);
+        brushCanvas.style.width = `${brushCanvasWidth}px`;
+        brushCanvas.height = brushCanvasHeight * pixelRatio;
+        brushCanvas.style.height = `${brushCanvasHeight}px`;
+      }
+
+      const ctx = brushCanvas.getContext('2d');
+
+      ctx.clearRect(
+        0,
+        0,
+        brushCanvasWidth * pixelRatio,
+        brushCanvasHeight * pixelRatio,
+      );
+
+      ctx.fillStyle = this.evChartBrushOptions.value.selection.fillColor;
+      ctx.globalAlpha = this.evChartBrushOptions.value.selection.opacity;
+      ctx.fillRect(brushRectX, 0, brushRectWidth, brushRectHeight);
+      ctx.fillRect(brushButtonLeftXPos, 0, brushButtonWidth, brushRectHeight);
+      ctx.fillRect(brushButtonRightXPos - brushButtonWidth, 0, brushButtonWidth, brushRectHeight);
+
+      this.evChartBrushPos = {
+        leftX: brushButtonLeftXPos / pixelRatio,
+        rightX: brushButtonRightXPos / pixelRatio,
+        buttonWidth: brushButtonWidth,
+        axesXInterval,
+      };
+    }
   }
 
   addEvent() {