evui 3.3.2 → 3.3.6

package/package.json

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

package/src/components/button/Button.vue

@@ -1,5 +1,6 @@
 <template>
   <button
+    ref="buttonRef"
     class="ev-button"
     :class="{
       disabled,
@@ -17,6 +18,8 @@
 </template>
 
 <script>
+import { onMounted, ref } from 'vue';
+
 export default {
   name: 'EvButton',
   props: {
@@ -52,6 +55,19 @@ export default {
   emits: {
     click: null,
   },
+  setup(props) {
+    const buttonRef = ref(null);
+
+    onMounted(() => {
+      if (props.autoFocus) {
+        buttonRef.value.focus();
+      }
+    });
+
+    return {
+      buttonRef,
+    };
+  },
 };
 </script>
 

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
@@ -690,6 +712,8 @@ class EvChart {
       this.overlayCanvas.removeEventListener('mouseleave', this.onMouseLeave);
       this.overlayCanvas.removeEventListener('dblclick', this.onDblClick);
       this.overlayCanvas.removeEventListener('click', this.onClick);
+      this.overlayCanvas.removeEventListener('mousedown', this.onMouseDown);
+      this.overlayCanvas.removeEventListener('wheel', this.onWheel);
     }
 
     if (this.options.tooltip.use) {

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

@@ -1,52 +1,74 @@
 import { numberWithComma } from '@/common/utils';
+import dayjs from 'dayjs';
 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;
+    const selTipOpt = opt.selectItem;
+    let maxArgs;
 
-    if (maxTipOpt.use || selectItemOpt.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);
-
-      if (maxTipOpt.use && maxArgs) {
-        this.drawTextTip({ opt: maxTipOpt, tipType: 'max', ...maxArgs });
+    if (selTipOpt.use && tipLocationInfo) {
+      const seriesInfo = this.seriesList[tipLocationInfo?.sId];
 
-        if (maxTipOpt.showIndicator) {
-          this.drawFixedIndicator({ opt: maxTipOpt, ...maxArgs });
-        }
+      if (!seriesInfo?.show) {
+        return;
       }
 
-      if (selectItemOpt.use && selArgs) {
+      const selArgs = this.calculateTipInfo(
+        seriesInfo,
+        'sel',
+        tipLocationInfo,
+      );
+
+      if (selArgs) {
         let isSamePos = false;
 
-        if (maxTipOpt.use && maxArgs && maxArgs.dp === selArgs.dp) {
+        if (maxTipOpt.use && maxArgs?.dp === selArgs.dp) {
           isSamePos = true;
         }
 
-        if (selectItemOpt.showTextTip || selectItemOpt.showTip) {
-          this.drawTextTip({ opt: selectItemOpt, tipType: 'sel', isSamePos, ...selArgs });
+        if (selTipOpt.showTextTip || selTipOpt.showTip) {
+          if (selTipOpt.tipText === 'label') {
+            const axisOpt = isHorizontal ? opt.axesY[0] : opt.axesX[0];
+            const label = selArgs.label;
+            selArgs.text = axisOpt.type === 'time' ? dayjs(label).format(axisOpt.timeFormat) : label;
+          } else {
+            selArgs.text = numberWithComma(selArgs.value);
+          }
+
+          this.drawTextTip({ opt: selTipOpt, tipType: 'sel', isSamePos, ...selArgs });
         }
 
-        if (selectItemOpt.showIndicator) {
-          this.drawFixedIndicator({ opt: selectItemOpt, ...selArgs });
+        if (selTipOpt.showIndicator) {
+          this.drawFixedIndicator({ opt: selTipOpt, ...selArgs });
         }
       }
 
-      if (hitInfo && hitInfo.label !== null) {
-        this.lastHitInfo = hitInfo;
+      if (tipLocationInfo && tipLocationInfo.label !== null) {
+        this.lastHitInfo = tipLocationInfo;
+      }
+    }
+
+    if (maxTipOpt.use) {
+      const maxSID = this.minMax[isHorizontal ? 'x' : 'y'][0].maxSID;
+      maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
+
+      if (maxTipOpt.use && maxArgs) {
+        maxArgs.text = numberWithComma(maxArgs.value);
+        this.drawTextTip({ opt: maxTipOpt, tipType: 'max', ...maxArgs });
+
+        if (maxTipOpt.showIndicator) {
+          this.drawFixedIndicator({ opt: maxTipOpt, ...maxArgs });
+        }
       }
     }
   },
@@ -104,19 +126,24 @@ const modules = {
     }
 
     let value = isHorizontal ? series.minMax.maxX : series.minMax.maxY;
-
+    let label;
     if (tipType === 'sel') {
       if (hitInfo && hitInfo.value !== null) {
         value = hitInfo.useStack ? hitInfo.acc : hitInfo.value;
+        label = hitInfo.label;
         lastTip.value = value;
+        lastTip.label = label;
       } else if (lastTip.value !== null) {
         value = lastTip.value;
+        label = lastTip.label;
       } else if (lastTip.pos !== null) {
         const item = type === 'bar'
           ? this.getItemByLabelIndex(lastTip.pos) : this.getItemByLabel(lastTip.pos);
 
         value = item.useStack ? item.acc : item.value;
+        label = item.label;
         lastTip.value = value;
+        lastTip.label = label;
       }
     }
 
@@ -145,7 +172,7 @@ const modules = {
     }
 
     const sizeObj = { xArea, yArea, graphX, graphY, xsp, xep, ysp };
-    const dataObj = { dp, value, text: numberWithComma(value), type };
+    const dataObj = { dp, value, label, type };
 
     return { ...sizeObj, ...dataObj };
   },

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') {
@@ -155,15 +160,17 @@ const modules = {
       }
     };
 
-    if (this.options?.tooltip?.useScrollbar) {
-      this.overlayCanvas.addEventListener('wheel', (e) => {
-        const isTooltipVisible = this.tooltipDOM.style.display === 'block';
+    this.onWheel = (e) => {
+      const isTooltipVisible = this.tooltipDOM.style.display === 'block';
 
-        if (isTooltipVisible) {
-          e.preventDefault();
-          this.tooltipBodyDOM.scrollTop += e.deltaY;
-        }
-      });
+      if (isTooltipVisible) {
+        e.preventDefault();
+        this.tooltipBodyDOM.scrollTop += e.deltaY;
+      }
+    };
+
+    if (this.options?.tooltip?.useScrollbar) {
+      this.overlayCanvas.addEventListener('wheel', this.onWheel, { passive: false });
     }
 
     this.overlayCanvas.addEventListener('mousemove', this.onMouseMove);
@@ -398,130 +405,22 @@ 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) {
+    this.defaultSelectInfo = 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 = {
@@ -73,6 +73,7 @@ const DEFAULT_OPTIONS = {
   selectItem: {
     use: false,
     showTextTip: false,
+    tipText: 'value',
     showTip: false,
     showIndicator: false,
     fixedPosTop: false,
@@ -97,7 +98,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 +111,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 +133,7 @@ export const useModel = () => {
 
   return {
     eventListeners,
+    selectInfo,
     getNormalizedData,
     getNormalizedOptions,
   };

package/src/components/grid/Grid.vue

@@ -471,7 +471,7 @@ export default {
       setStore(props.rows);
     });
     onActivated(() => {
-      updateVScroll();
+      onResize();
     });
     const ROW_INDEX = 0;
     const ROW_CHECK_INDEX = 1;
@@ -584,7 +584,10 @@ export default {
     watch(
       () => filterInfo.searchValue,
       (value) => {
-        onSearch(value?.value ?? value);
+        const searchValue = value?.value ?? value;
+        if (searchValue) {
+          onSearch(searchValue);
+        }
       }, { immediate: true },
     );
     const isFilterButton = field => filterInfo.isFiltering && field !== 'db-icon' && field !== 'user-icon';