evui 3.3.3 → 3.3.4

package/package.json

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

package/src/components/chart/Chart.vue

@@ -16,6 +16,10 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
   export default {
     name: 'EvChart',
     props: {
+      selectedItem: {
+        type: Object,
+        default: null,
+      },
       options: {
         type: Object,
         default: () => ({}),
@@ -33,6 +37,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
       'click',
       'dbl-click',
       'drag-select',
+      'update:selectedItem',
     ],
     setup(props) {
       let evChart = {};
@@ -40,6 +45,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
 
       const {
         eventListeners,
+        selectInfo,
         getNormalizedData,
         getNormalizedOptions,
       } = useModel();
@@ -60,6 +66,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
           normalizedData,
           normalizedOptions,
           eventListeners,
+          selectInfo,
         );
       };
 
@@ -93,6 +100,12 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
             updateSelTip: { update: true, keepDomain: false },
           });
         }, { deep: true });
+
+        await watch(() => props.selectedItem, (newValue) => {
+          if (newValue?.seriesID && !isNaN(newValue?.dataIndex)) {
+            evChart.selectItemByData(newValue);
+          }
+        }, { deep: true });
       });
 
       onBeforeUnmount(() => {
@@ -120,16 +133,11 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         }
       }, props.resizeTimeout);
 
-      const selectItemByLabel = (label) => {
-        evChart.selectItemByLabel(label);
-      };
-
       return {
         wrapper,
         wrapperStyle,
         onResize,
         redraw,
-        selectItemByLabel,
       };
     },
   };

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

@@ -13,7 +13,7 @@ import Pie from './plugins/plugins.pie';
 import Tip from './element/element.tip';
 
 class EvChart {
-  constructor(target, data, options, listeners) {
+  constructor(target, data, options, listeners, defaultSelectInfo) {
     Object.keys(Model).forEach(key => Object.assign(this, Model[key]));
     Object.assign(this, Title);
     Object.assign(this, Legend);
@@ -63,6 +63,8 @@ class EvChart {
       charts: { pie: [], bar: [], line: [], scatter: [] },
       count: 0,
     };
+
+    this.defaultSelectInfo = defaultSelectInfo;
   }
 
   /**
@@ -199,6 +201,26 @@ class EvChart {
     }
   }
 
+  /**
+   * Draw Tip with hitInfo and defaultSelectInfo
+   * @param hitInfo
+   */
+  drawTip(hitInfo) {
+    let tipLocationInfo;
+
+    if (hitInfo) {
+      tipLocationInfo = hitInfo;
+    } else if (this.lastHitInfo) {
+      tipLocationInfo = this.lastHitInfo;
+    } else if (this.defaultSelectInfo) {
+      tipLocationInfo = this.getItem(this.defaultSelectInfo, false);
+    } else {
+      tipLocationInfo = null;
+    }
+
+    this.drawTips(tipLocationInfo);
+  }
+
   /**
    * Create axes
    * @param {string} dir    axis direction
@@ -533,6 +555,7 @@ class EvChart {
       if (!updateSelTip.keepDomain) {
         this.lastTip.pos = null;
         this.lastHitInfo = null;
+        this.defaultSelectInfo = null;
       }
     }
 

package/src/components/chart/element/element.tip.js

@@ -3,23 +3,21 @@ import Canvas from '../helpers/helpers.canvas';
 
 const modules = {
   /**
-   * Draw TextTip with hitInfo
-   * @param {object} [hitInfo=undefined]    mouse hit information
+   * Draw TextTip with tip's locationInfo
+   * @param {object} [tipLocationInfo=undefined]   tip location information
    *
    * @returns {undefined}
    */
-  drawTip(hitInfo) {
+  drawTips(tipLocationInfo) {
     const opt = this.options;
     const isHorizontal = !!opt.horizontal;
     const maxTipOpt = opt.maxTip;
     const selectItemOpt = opt.selectItem;
+    let maxArgs;
 
-    if (maxTipOpt.use || selectItemOpt.use) {
+    if (maxTipOpt.use) {
       const maxSID = this.minMax[isHorizontal ? 'x' : 'y'][0].maxSID;
-      const selSID = (hitInfo && hitInfo.sId ? hitInfo.sId : this.lastHitInfo?.sId) ?? maxSID;
-
-      const maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
-      const selArgs = this.calculateTipInfo(this.seriesList[selSID], 'sel', hitInfo);
+      maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
 
       if (maxTipOpt.use && maxArgs) {
         this.drawTextTip({ opt: maxTipOpt, tipType: 'max', ...maxArgs });
@@ -28,11 +26,25 @@ const modules = {
           this.drawFixedIndicator({ opt: maxTipOpt, ...maxArgs });
         }
       }
+    }
+
+    if (selectItemOpt.use && tipLocationInfo) {
+      const seriesInfo = this.seriesList[tipLocationInfo?.sId];
+
+      if (!seriesInfo?.show) {
+        return;
+      }
+
+      const selArgs = this.calculateTipInfo(
+        seriesInfo,
+        'sel',
+        tipLocationInfo,
+      );
 
       if (selectItemOpt.use && selArgs) {
         let isSamePos = false;
 
-        if (maxTipOpt.use && maxArgs && maxArgs.dp === selArgs.dp) {
+        if (maxTipOpt.use && maxArgs?.dp === selArgs.dp) {
           isSamePos = true;
         }
 
@@ -45,8 +57,8 @@ const modules = {
         }
       }
 
-      if (hitInfo && hitInfo.label !== null) {
-        this.lastHitInfo = hitInfo;
+      if (tipLocationInfo && tipLocationInfo.label !== null) {
+        this.lastHitInfo = tipLocationInfo;
       }
     }
   },

package/src/components/chart/model/model.store.js

@@ -387,43 +387,16 @@ const modules = {
   },
 
   /**
-   * Get graph item by label index
-   * @param {number} pos  label index position
-   *
-   * @returns {object} graph item
-   */
-  getItemByLabelIndex(pos) {
-    if (pos < 0) {
-      return false;
-    }
-
-    return this.getItem(pos);
-  },
-
-  /**
-   * Get graph item by label
-   * @param {any} label  label value for searching graph item
+   * Get graph items for each series by label index
+   * @param {number} labelIndex  label index
    *
    * @returns {object} graph item
    */
-  getItemByLabel(label) {
-    if (label === null || label === undefined) {
+  getItemByLabelIndex(labelIndex) {
+    if (labelIndex < 0) {
       return false;
     }
 
-    const labels = this.data.labels;
-    const labelIndex = labels && labels.indexOf ? labels.indexOf(label) : -1;
-
-    return this.getItem(labelIndex);
-  },
-
-  /**
-   * Get graph items for each series by label index
-   * @param {number} labelIndex  label index
-   *
-   * @returns {object} graph item
-   */
-  getItem(labelIndex) {
     const sIds = Object.keys(this.seriesList);
     const isHorizontal = !!this.options.horizontal;
 
@@ -479,6 +452,91 @@ const modules = {
     return findInfo;
   },
 
+  getItem({ seriesID, dataIndex }, useApproximate = false) {
+    const dataInfo = this.getDataByValues(seriesID, dataIndex);
+    return this.getItemByPosition([dataInfo.xp, dataInfo.yp], useApproximate);
+  },
+  /**
+   *
+   * @param seriesID
+   * @param dataIndex
+   * @returns {*}
+   */
+  getDataByValues(seriesID, dataIndex) {
+    const series = this.seriesList[seriesID];
+    if (!series || isNaN(dataIndex) || dataIndex < 0 || series?.data.length <= dataIndex) {
+      return false;
+    }
+
+    return series.data[dataIndex];
+  },
+
+  /**
+   * Find graph item by position x and y
+   * @param {array}   offset          position x and y
+   * @param {boolean} useApproximate  if it's true. it'll look for closed item on mouse position
+   *
+   * @returns {object} clicked item information
+   */
+  getItemByPosition(offset, useApproximate = false) {
+    const sIds = Object.keys(this.seriesList);
+    const isHorizontal = !!this.options.horizontal;
+
+    let maxl = null;
+    let maxp = null;
+    let maxg = null;
+    let maxSID = '';
+    let acc = 0;
+    let useStack = false;
+    let maxIndex = null;
+
+    for (let ix = 0; ix < sIds.length; ix++) {
+      const sId = sIds[ix];
+      const series = this.seriesList[sId];
+      const findFn = useApproximate ? series.findApproximateData : series.findGraphData;
+
+      if (findFn) {
+        const item = findFn.call(series, offset, isHorizontal);
+        const data = item.data;
+        const index = item.index;
+
+        if (data) {
+          const ldata = isHorizontal ? data.y : data.x;
+          const lp = isHorizontal ? data.yp : data.xp;
+
+          if (ldata !== null && ldata !== undefined) {
+            const g = isHorizontal ? data.o || data.x : data.o || data.y;
+
+            if (series.stackIndex) {
+              acc += !isNaN(data.o) ? data.o : 0;
+              useStack = true;
+            } else {
+              acc += data.y;
+            }
+
+            if (maxg === null || maxg <= g) {
+              maxg = g;
+              maxSID = sId;
+              maxl = ldata;
+              maxp = lp;
+              maxIndex = index;
+            }
+          }
+        }
+      }
+    }
+
+    return {
+      label: maxl,
+      pos: maxp,
+      value: maxg === null ? 0 : maxg,
+      sId: maxSID,
+      acc,
+      useStack,
+      maxIndex,
+    };
+  },
+
   /**
    * Create min/max information for all of data
    * @property seriesList

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

@@ -101,7 +101,7 @@ const modules = {
 
       if (selectItem.use) {
         const offset = this.getMousePosition(e);
-        const hitInfo = this.findClickedData(offset, selectItem.useApproximateValue);
+        const hitInfo = this.getItemByPosition(offset, selectItem.useApproximateValue);
 
 
         if (hitInfo.label !== null) {
@@ -125,13 +125,18 @@ const modules = {
       const args = { e };
       if (this.options.selectItem.use) {
         const offset = this.getMousePosition(e);
-        const hitInfo = this.findClickedData(offset);
+        const hitInfo = this.getItemByPosition(offset, false);
 
         if (hitInfo.label !== null) {
           this.render(hitInfo);
         }
 
-        ({ label: args.label, value: args.value, sId: args.seriesId } = hitInfo);
+        ({
+          label: args.label,
+          value: args.value,
+          sId: args.seriesId,
+          maxIndex: args.dataIndex,
+        } = hitInfo);
       }
 
       if (typeof this.listeners.click === 'function') {
@@ -398,130 +403,21 @@ const modules = {
   },
 
   /**
-   * Find clicked graph item on mouse position
-   * @param {array}   offset          return value from getMousePosition()
-   * @param {boolean} useApproximate  if it's true. it'll look for closed item on mouse position
-   *
-   * @returns {object} clicked item information
-   */
-  findClickedData(offset, useApproximate) {
-    const sIds = Object.keys(this.seriesList);
-    const isHorizontal = !!this.options.horizontal;
-
-    let maxl = null;
-    let maxp = null;
-    let maxg = null;
-    let maxSID = '';
-    let acc = 0;
-    let useStack = false;
-    let maxIndex = null;
-
-    for (let ix = 0; ix < sIds.length; ix++) {
-      const sId = sIds[ix];
-      const series = this.seriesList[sId];
-      const findFn = useApproximate ? series.findApproximateData : series.findGraphData;
-
-      if (findFn) {
-        const item = findFn.call(series, offset, isHorizontal);
-        const data = item.data;
-        const index = item.index;
-
-        if (data) {
-          const ldata = isHorizontal ? data.y : data.x;
-          const lp = isHorizontal ? data.yp : data.xp;
-
-          if (ldata !== null && ldata !== undefined) {
-            const g = isHorizontal ? data.o || data.x : data.o || data.y;
-
-            if (series.stackIndex) {
-              acc += !isNaN(data.o) ? data.o : 0;
-              useStack = true;
-            } else {
-              acc += data.y;
-            }
-
-            if (maxg === null || maxg <= g) {
-              maxg = g;
-              maxSID = sId;
-              maxl = ldata;
-              maxp = lp;
-              maxIndex = index;
-            }
-          }
-        }
-      }
-    }
-
-    return {
-      label: maxl,
-      pos: maxp,
-      value: maxg === null ? 0 : maxg,
-      sId: maxSID,
-      acc,
-      useStack,
-      maxIndex,
-    };
-  },
-
-  /**
-   * Find graph item by label entered from user
-   * @param {any} label   label value
    *
-   * @returns {boolean} if it wasn't able to find it, return false. if not, return true and render.
+   * @param targetInfo
+   * @returns {boolean}
    */
-  selectItemByLabel(label) {
-    const findInfo = this.getItemByLabel(label);
+  selectItemByData(targetInfo) {
+    const foundInfo = this.getItem(targetInfo, false);
 
-    if (findInfo) {
-      this.render(findInfo);
+    if (foundInfo) {
+      this.render(foundInfo);
     } else {
       return false;
     }
 
     return true;
   },
-  findHitItem2(offset) {
-    const mouseX = offset[0];
-    const mouseY = offset[1];
-
-    const width = this.chartRect.chartWidth;
-    const height = this.chartRect.chartHeight;
-    const centerX = (width / 2) + this.chartRect.padding.left;
-    const centerY = (height / 2) + this.chartRect.padding.top;
-
-    const dx = mouseX - centerX;
-    const dy = mouseY - centerY;
-
-    let angle;
-    angle = ((Math.atan2(-dy, -dx) * 180) / Math.PI) - 90;
-    angle = angle < 0 ? 360 + angle : angle;
-    const rad = ((angle * Math.PI) / 180) + (1.5 * Math.PI);
-    const distance = Math.round(Math.sqrt((dx ** 2) + (dy ** 2)));
-
-    const graphData = this.graphData;
-    let gdata;
-    let dsIndex = null;
-    let sId = null;
-
-    for (let ix = 0, ixLen = graphData.length; ix < ixLen; ix++) {
-      gdata = graphData[ix];
-      if (distance > gdata.ir && distance < gdata.or) {
-        dsIndex = ix;
-      }
-    }
-
-    if (graphData[dsIndex]) {
-      for (let ix = 0, ixLen = graphData[dsIndex].data.length; ix < ixLen; ix++) {
-        gdata = graphData[dsIndex].data[ix];
-
-        if (rad > gdata.sa && rad < gdata.ea) {
-          sId = gdata.id;
-        }
-      }
-    }
-
-    return { dsIndex, sId };
-  },
 
   /**
    * Find items by series within a range

package/src/components/chart/uses.js

@@ -1,5 +1,5 @@
 import { ref, computed, getCurrentInstance, nextTick } from 'vue';
-import { defaultsDeep } from 'lodash-es';
+import { cloneDeep, defaultsDeep } from 'lodash-es';
 import { getQuantity } from '@/common/utils';
 
 const DEFAULT_OPTIONS = {
@@ -97,7 +97,7 @@ const DEFAULT_DATA = {
 };
 
 export const useModel = () => {
-  const { emit } = getCurrentInstance();
+  const { props, emit } = getCurrentInstance();
 
   const getNormalizedOptions = (options) => {
     const normalizedOptions = defaultsDeep({}, options, DEFAULT_OPTIONS);
@@ -110,9 +110,14 @@ export const useModel = () => {
   };
   const getNormalizedData = data => defaultsDeep(data, DEFAULT_DATA);
 
+  const selectInfo = cloneDeep(props.selectedItem);
+
   const eventListeners = {
     click: async (e) => {
       await nextTick();
+      if (e.label) {
+        emit('update:selectedItem', { seriesID: e.seriesId, dataIndex: e.dataIndex });
+      }
       emit('click', e);
     },
     'dbl-click': async (e) => {
@@ -127,6 +132,7 @@ export const useModel = () => {
 
   return {
     eventListeners,
+    selectInfo,
     getNormalizedData,
     getNormalizedOptions,
   };

package/src/components/treeGrid/uses.js

@@ -1,4 +1,5 @@
 import { getCurrentInstance, nextTick } from 'vue';
+import { cloneDeep } from 'lodash-es';
 import { numberWithComma } from '@/common/utils';
 
 export const commonFunctions = () => {
@@ -613,6 +614,7 @@ export const treeEvent = (params) => {
         }
         if (node.children) {
           node.hasChild = true;
+          node.children = cloneDeep(node.children);
           node.children.forEach(child =>
             setNodeData({
               node: child,