evui 3.4.56 → 3.4.58

package/package.json

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

package/src/components/chart/Chart.vue

@@ -95,6 +95,7 @@
       const injectIsChartGroup = inject('isChartGroup', false);
       const injectBrushSeries = inject('brushSeries', { list: [], chartIdx: null });
       const injectGroupSelectedLabel = inject('groupSelectedLabel', null);
+      const injectGroupHoveredLabel = inject('groupHoveredLabel', null);
       const injectBrushIdx = inject('brushIdx', { start: 0, end: -1 });
       const injectEvChartPropsInGroup = inject('evChartPropsInGroup', []);
 
@@ -105,7 +106,7 @@
         selectSeriesInfo,
         getNormalizedData,
         getNormalizedOptions,
-      } = useModel(injectGroupSelectedLabel);
+      } = useModel(injectGroupSelectedLabel, injectGroupHoveredLabel);
 
       const normalizedData = getNormalizedData(props.data);
       const normalizedOptions = getNormalizedOptions(props.options);
@@ -278,6 +279,19 @@
         });
       });
 
+      watch(() => injectGroupHoveredLabel?.value, (newHoveredLabel) => {
+        if (!newHoveredLabel) {
+          return;
+        }
+        if (props.options.syncHover !== false) {
+          if (newHoveredLabel.label == null) {
+            evChart.overlayClear();
+          } else {
+            evChart.drawSyncedIndicator(newHoveredLabel);
+          }
+        }
+      }, { deep: true, flush: 'post' });
+
       onMounted(async () => {
         if (injectEvChartPropsInGroup?.value) {
           injectEvChartPropsInGroup.value.push(props);

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

@@ -170,6 +170,10 @@ class EvChart {
     this.chartRect = this.getChartRect();
   }
 
+  drawSyncedIndicator({ horizontal, label, mousePosition }) {
+    this.drawSyncedIndicator({ horizontal, label, mousePosition });
+  }
+
   /**
    * To draw canvas chart, it processes several sequential jobs
    * @param {any} [hitInfo=undefined]    from mousemove callback (object or object[] of undefined)

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

@@ -61,6 +61,12 @@ const modules = {
 
       if (indicator.use && type !== 'pie' && type !== 'scatter' && type !== 'heatMap') {
         this.drawIndicator(offset, indicator.color);
+        const label = this.getTimeLabel(offset);
+        args.hoveredLabel = {
+          horizontal: this.options.horizontal,
+          label,
+          mousePosition: [e.clientX, e.clientY],
+        };
       }
 
       if (typeof this.listeners['mouse-move'] === 'function') {
@@ -92,6 +98,7 @@ const modules = {
       if (tooltip.use) {
         this.tooltipClear();
       }
+      this.listeners['mouse-leave']();
     };
 
     /**

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

@@ -1,5 +1,6 @@
 import { convertToPercent } from '@/common/utils';
 import debounce from '@/common/utils.debounce';
+import { inRange } from 'lodash-es';
 import Canvas from '../helpers/helpers.canvas';
 import Util from '../helpers/helpers.util';
 
@@ -778,6 +779,94 @@ const modules = {
       ctx.closePath();
     }
   },
+  /**
+   * Get hovered axis label with mousemove
+   * @param {object} offset   mousemove callback
+   *
+   * @returns {number | null} hovered axis label
+   */
+  getTimeLabel(offset) {
+    const options = this.options;
+
+    if (
+      options.syncHover === false
+      || (!options.horizontal && !options.axesX.every(({ type }) => type === 'time'))
+      || (options.horizontal && !options.axesY.every(({ type }) => type === 'time'))) {
+      return null;
+    }
+
+    const fromTime = +this.data.labels?.[0];
+    const toTime = +this.data.labels?.[this.data.labels.length - 1];
+    if (fromTime == null || toTime == null) {
+      return null;
+    }
+
+    const [offsetX, offsetY] = offset;
+    const graphPos = {
+      x1: this.chartRect.x1 + this.labelOffset.left,
+      x2: this.chartRect.x2 - this.labelOffset.right,
+      y1: this.chartRect.y1 + this.labelOffset.top,
+      y2: this.chartRect.y2 - this.labelOffset.bottom,
+    };
+
+    if (options.horizontal) {
+      const chartHeight = graphPos.y2 - graphPos.y1;
+      const hoverYAxis = offsetY - graphPos.y1;
+      const hoverTime = ((hoverYAxis * (toTime - fromTime)) / chartHeight) + fromTime;
+      return Math.round(hoverTime);
+    }
+      const chartWidth = graphPos.x2 - graphPos.x1;
+      const hoverXAxis = offsetX - graphPos.x1;
+      const hoverTime = ((hoverXAxis * (toTime - fromTime)) / chartWidth) + fromTime;
+      return Math.round(hoverTime);
+  },
+  /**
+   * Draw chart indicator with other grouped chart's mousemove
+   * @param {object} hoveredLabel   chart direction and hovered axis label
+   *
+   * @returns {undefined}
+   */
+  drawSyncedIndicator({ horizontal, label, mousePosition }) {
+    if (!mousePosition || !!horizontal !== !!this.options.horizontal) {
+      return;
+    }
+    if (
+      this.options.syncHover === false
+      || (!horizontal && !this.options.axesX.every(({ type }) => type === 'time'))
+      || (horizontal && !this.options.axesY.every(({ type }) => type === 'time'))) {
+      return;
+    }
+    const fromTime = +this.data.labels?.[0];
+    const toTime = +this.data.labels?.[this.data.labels.length - 1];
+    if (fromTime == null || toTime == null) {
+      return;
+    }
+    const [clientX, clientY] = mousePosition;
+    const { top, bottom, left, right } = this.chartDOM.getBoundingClientRect();
+
+    const isHoveredChart = inRange(clientX, left, right) && inRange(clientY, bottom, top);
+    if (isHoveredChart) {
+      return;
+    }
+
+    this.overlayClear();
+    const graphPos = {
+      x1: this.chartRect.x1 + this.labelOffset.left,
+      x2: this.chartRect.x2 - this.labelOffset.right,
+      y1: this.chartRect.y1 + this.labelOffset.top,
+      y2: this.chartRect.y2 - this.labelOffset.bottom,
+    };
+
+    if (horizontal) {
+      const chartHeight = graphPos.y2 - graphPos.y1;
+      const offsetY = (chartHeight * (label - fromTime)) / (toTime - fromTime) + graphPos.y1;
+      this.drawIndicator([graphPos.x2, offsetY], this.options.indicator.color);
+    } else {
+      const chartWidth = graphPos.x2 - graphPos.x1;
+      const offsetX = (chartWidth * (label - fromTime)) / (toTime - fromTime) + graphPos.x1;
+      this.drawIndicator([offsetX, graphPos.y2], this.options.indicator.color);
+    }
+  },
 
   /**
    * Clear tooltip canvas

package/src/components/chart/uses.js

@@ -253,7 +253,7 @@ const DEFAULT_DATA = {
   data: {},
 };
 
-export const useModel = (injectGroupSelectedLabel) => {
+export const useModel = (injectGroupSelectedLabel, injectGroupHoveredLabel) => {
   const { props, emit } = getCurrentInstance();
 
   const getNormalizedOptions = (options) => {
@@ -338,9 +338,17 @@ export const useModel = (injectGroupSelectedLabel) => {
       emit('drag-select', e);
     },
     'mouse-move': async (e) => {
+      if (injectGroupHoveredLabel?.value) {
+        injectGroupHoveredLabel.value = e.hoveredLabel;
+      }
       await nextTick();
       emit('mouse-move', e);
     },
+    'mouse-leave': () => {
+      if (injectGroupHoveredLabel?.value) {
+        injectGroupHoveredLabel.value.label = null;
+      }
+    },
   };
 
   return {

package/src/components/chartGroup/ChartGroup.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { onMounted, watch, provide, toRef, computed } from 'vue';
+import { onMounted, ref, watch, provide, toRef, computed } from 'vue';
 import evChartToolbar from '../chart/ChartToolbar';
 import { useGroupModel } from './uses';
 import { useZoomModel } from '../chart/uses';
@@ -50,6 +50,7 @@ export default {
     'update:groupSelectedLabel',
     'update:zoomStartIdx',
     'update:zoomEndIdx',
+    'update:groupHoveredLabel',
   ],
   setup(props, { emit }) {
     const {
@@ -70,6 +71,18 @@ export default {
       set: val => emit('update:groupSelectedLabel', val),
     });
     provide('groupSelectedLabel', groupSelectedLabel);
+    const groupHoveredLabel = ref(null);
+    provide('groupHoveredLabel', groupHoveredLabel);
+
+    watch(() => props.options.syncHover, (newSyncHover) => {
+      if (newSyncHover) {
+        groupHoveredLabel.value = { label: '', horizontal: false };
+      } else {
+        groupHoveredLabel.value = null;
+      }
+    }, {
+      immediate: true,
+    });
 
     const {
       evChartZoomOptions,

package/src/components/grid/Grid.vue

@@ -1234,7 +1234,7 @@ export default {
         stores.orderedColumns.map((column) => {
           const item = column;
 
-          if (!props.columns[column.index].width && !item.resized) {
+          if (!props.columns[column.index]?.width && !item.resized) {
             item.width = 0;
           }
 

package/src/components/treeGrid/TreeGrid.vue

@@ -798,7 +798,7 @@ export default {
         stores.orderedColumns.map((column) => {
           const item = column;
 
-          if (!props.columns[column.index].width && !item.resized) {
+          if (!props.columns[column.index]?.width && !item.resized) {
             item.width = 0;
           }
 

package/src/components/treeGrid/uses.js

@@ -279,7 +279,7 @@ export const resizeEvent = (params) => {
         stores.orderedColumns.forEach((column) => {
           const item = column;
 
-          if (!props.columns[column.index].width && !item.resized) {
+          if (!props.columns[column.index]?.width && !item.resized) {
             item.width = 0;
           }