evui 3.3.46 → 3.3.48

package/package.json

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

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

@@ -35,7 +35,7 @@ class HeatMap {
   createColorState(colorOpt) {
     const colorState = [];
     const regex = /[^0-9]&[^,]/g;
-    const { min, max, categoryCnt, error, stroke } = colorOpt;
+    const { min, max, categoryCnt, categoryColors, error, stroke } = colorOpt;
 
     const minColor = min.includes('#') ? Util.hexToRgb(min) : min.replace(regex, '');
     const maxColor = max.includes('#') ? Util.hexToRgb(max) : max.replace(regex, '');
@@ -52,6 +52,17 @@ class HeatMap {
         end: 100,
         selectedValue: null,
       });
+    } else if (categoryColors.length) {
+      colorOpt.categoryCnt = categoryColors.length;
+      categoryColors.forEach(({ color, label }, ix) => {
+        colorState.push({
+          id: `color#${ix}`,
+          color,
+          label,
+          state: 'normal',
+          show: true,
+        });
+      });
     } else {
       const unitR = Math.floor((minR - maxR) / (categoryCnt - 1));
       const unitG = Math.floor((minG - maxG) / (categoryCnt - 1));

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

@@ -237,35 +237,40 @@ class Line {
    *
    * @returns {object} graph item
    */
-  findGraphData(offset) {
+  findGraphData(offset, isHorizontal, dataIndex) {
     const xp = offset[0];
     const yp = offset[1];
     const item = { data: null, hit: false, color: this.color };
     const gdata = this.data;
 
     if (gdata?.length) {
-      let s = 0;
-      let e = gdata.length - 1;
-
-      const xpInterval = gdata[1]?.xp - gdata[0].xp < 6 ? 1.5 : 6;
-
-      while (s <= e) {
-        const m = Math.floor((s + e) / 2);
-        const x = gdata[m].xp;
-        const y = gdata[m].yp;
-
-        if ((x - xpInterval < xp) && (xp < x + xpInterval)) {
-          item.data = gdata[m];
-          item.index = m;
-
-          if ((y - 6 <= yp) && (yp <= y + 6)) {
-            item.hit = true;
+      if (typeof dataIndex === 'number' && this.show) {
+        item.data = gdata[dataIndex];
+        item.index = dataIndex;
+      } else {
+        let s = 0;
+        let e = gdata.length - 1;
+
+        const xpInterval = gdata[1]?.xp - gdata[0].xp < 6 ? 1.5 : 6;
+
+        while (s <= e) {
+          const m = Math.floor((s + e) / 2);
+          const x = gdata[m].xp;
+          const y = gdata[m].yp;
+
+          if ((x - xpInterval < xp) && (xp < x + xpInterval)) {
+            item.data = gdata[m];
+            item.index = m;
+
+            if ((y - 6 <= yp) && (yp <= y + 6)) {
+              item.hit = true;
+            }
+            return item;
+          } else if (x + xpInterval > xp) {
+            e = m - 1;
+          } else {
+            s = m + 1;
           }
-          return item;
-        } else if (x + xpInterval > xp) {
-          e = m - 1;
-        } else {
-          s = m + 1;
         }
       }
     }

package/src/components/chart/helpers/helpers.util.js

@@ -129,7 +129,7 @@ export default {
   getLabelStyle(style) {
     const {
       fontStyle = 'normal',
-      fontWeight = 'norma',
+      fontWeight = 'normal',
       fontSize = '12',
       fontFamily = 'Roboto',
     } = style;

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

@@ -450,6 +450,7 @@ const modules = {
         id: `color#${categoryCnt}`,
         color: colorOpt.error,
         state: 'normal',
+        label: 'Error',
         show: true,
       });
     }
@@ -549,7 +550,11 @@ const modules = {
         return null;
       }
 
-      itemPosition = [this.getItemByPosition([dataInfo.xp, dataInfo.yp], useApproximate)];
+      itemPosition = [this.getItemByPosition(
+        [dataInfo.xp, dataInfo.yp],
+        useApproximate,
+        dataIndex,
+      )];
     } else {
       const seriesList = Object.entries(this.seriesList);
       let firShowSeriesID;
@@ -570,7 +575,11 @@ const modules = {
           return null;
         }
 
-        return this.getItemByPosition([dataInfo?.xp ?? 0, dataInfo?.yp ?? 0], useApproximate);
+        return this.getItemByPosition(
+          [dataInfo?.xp ?? 0, dataInfo?.yp ?? 0],
+          useApproximate,
+          idx,
+        );
       });
     }
 
@@ -596,10 +605,10 @@ const modules = {
    * 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
-   *
+   * @param {number} dataIndex        selected data index
    * @returns {object} clicked item information
    */
-  getItemByPosition(offset, useApproximate = false) {
+  getItemByPosition(offset, useApproximate = false, dataIndex) {
     const seriesIDs = Object.keys(this.seriesList);
     const isHorizontal = !!this.options.horizontal;
 
@@ -618,7 +627,7 @@ const modules = {
       const findFn = useApproximate ? series.findApproximateData : series.findGraphData;
 
       if (findFn) {
-        const item = findFn.call(series, offset, isHorizontal);
+        const item = findFn.call(series, offset, isHorizontal, dataIndex);
         const data = item.data;
         const index = item.index;
 
@@ -790,6 +799,10 @@ const modules = {
       y2: this.chartRect.y2 - this.labelOffset.bottom,
     };
 
+    const seiresList = this.data.series;
+    const pointSize = Object.values(seiresList).sort(
+      (a, b) => b.pointSize ?? 0 - a.pointSize ?? 0,
+    )[0]?.pointSize ?? 3; // default pointSize 3
     const { horizontal, selectLabel } = this.options;
     const scale = horizontal ? this.axesY[0] : this.axesX[0];
     const startPoint = aPos[scale.units.rectStart];
@@ -803,15 +816,22 @@ const modules = {
       labelIndex = scale.labels.length > index ? index : -1;
     } else {
       let offsetX;
-      if (x < startPoint) {
+      let dataIndex;
+      if (x < startPoint - pointSize) {
         offsetX = startPoint;
-      } else if (x > endPoint) {
+        dataIndex = 0;
+      } else if (x > endPoint + pointSize) {
         offsetX = endPoint;
+        dataIndex = this.data.labels.length - 1;
       } else {
         offsetX = x;
       }
 
-      hitInfo = this.getItemByPosition([offsetX, y], selectLabel?.useApproximateValue);
+      hitInfo = this.getItemByPosition(
+        [offsetX, y],
+        selectLabel?.useApproximateValue,
+        dataIndex,
+      );
       labelIndex = hitInfo.maxIndex ?? -1;
     }
 

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

@@ -147,8 +147,9 @@ const modules = {
         const { min, max, interval, existError, decimalPoint } = valueOpt;
         const length = colorState.length;
         const endIndex = existError ? length - 2 : length - 1;
+
         for (let index = 0; index < length; index++) {
-          const colorItem = colorState[index];
+          const { id, color, label = '' } = colorState[index];
           const minValue = min + (interval * index);
           let maxValue = minValue + interval;
           if (index < endIndex) {
@@ -157,24 +158,25 @@ const modules = {
             maxValue = max + (0.1 ** decimalPoint);
           }
 
-          let name = `${minValue.toFixed(decimalPoint)} - ${maxValue.toFixed(decimalPoint)}`;
-          if (min === undefined || max === undefined) {
-            if (index === 0) {
-              name = '0';
-            } else {
+          let name = label;
+          if (!name) {
+            name = `${minValue.toFixed(decimalPoint)} - ${maxValue.toFixed(decimalPoint)}`;
+            if (min === undefined || max === undefined) {
+              if (index === 0) {
+                name = '0';
+              } else {
+                break;
+              }
+            } else if (minValue > max) {
               break;
+            } else if (interval <= 1 && decimalPoint === 0) {
+              name = minValue;
             }
-          } else if (existError && index === endIndex + 1) {
-            name = 'error';
-          } else if (minValue > max) {
-            break;
-          } else if (interval <= 1 && decimalPoint === 0) {
-            name = minValue;
           }
 
           this.addLegend({
-            cId: colorItem.id,
-            color: colorItem.color,
+            cId: id,
+            color,
             name,
             show: true,
           });

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

@@ -349,6 +349,7 @@ const modules = {
     const series = Object.values(this.seriesList)[0];
 
     let isShow = false;
+    let valueText = hitItem.formatted;
     const { colorState, isGradient } = series;
     if (isGradient) {
       const { min, max } = series.valueOpt;
@@ -356,7 +357,9 @@ const modules = {
       const { start, end } = colorState[0];
       isShow = (start <= ratio && ratio <= end) || hitItem.o === -1;
     } else {
-      isShow = colorState.find(({ id }) => id === hitItem.cId)?.show;
+      const colorItem = colorState.find(({ id }) => id === hitItem.cId);
+      isShow = colorItem?.show;
+      valueText = colorItem?.label ?? valueText;
     }
 
     if (!isShow) {
@@ -392,7 +395,6 @@ const modules = {
 
     const itemX = boxPadding.l + 2;
     const itemY = boxPadding.t + TEXT_HEIGHT + 2;
-    const valueText = hitItem.formatted;
 
     ctx.font = fontStyle;
 

package/src/components/chart/uses.js

@@ -197,6 +197,7 @@ const DEFAULT_OPTIONS = {
     min: '#FFFFFF',
     max: '#0052FF',
     categoryCnt: 1,
+    categoryColors: [],
     stroke: {
       show: false,
       color: '#FFFFFF',

package/src/components/grid/Grid.vue

@@ -609,6 +609,7 @@ export default {
         if (filterInfo.isSearch) {
           onSearch(filterInfo.searchWord);
         }
+        onResize();
       }, { deep: true },
     );
     watch(

package/src/components/treeGrid/TreeGridNode.vue

@@ -33,13 +33,13 @@
         <div>
           <!--Level Depth-->
           <span
-            v-if="cellIndex === 0"
+            v-if="cellIndex === expandColumnIdx"
             :style="getDepthStyle(node.level)"
           >
           </span>
           <!--Expand Icon-->
           <span
-            v-if="cellIndex === 0"
+            v-if="cellIndex === expandColumnIdx"
             :class="{
               expand: node.expand,
               'ev-tree-toggle': true
@@ -63,7 +63,7 @@
           </span>
           <!--Data Icon-->
           <span
-            v-if="cellIndex === 0 && isDataIcon"
+            v-if="cellIndex === expandColumnIdx && isDataIcon"
             :title="node[column.field]"
             :class="{
               expand: node.expand,
@@ -179,6 +179,10 @@ export default {
     const childIconMV = computed(() => (props.childIcon || 'tree-child-icon'));
     const isDataIcon = computed(() => ((parentIconMV.value !== 'none' || childIconMV.value !== 'none')));
 
+    const expandColumnIdx = computed(() => {
+      const expandColumnIndex = props.orderedColumns.findIndex(v => v.expandColumn);
+      return expandColumnIndex > 0 ? expandColumnIndex : 0;
+    });
     const getRowClass = nodeInfo => ({
       row: true,
       'tree-row': true,
@@ -217,6 +221,7 @@ export default {
       node,
       isDataIcon,
       checkboxClass,
+      expandColumnIdx,
       onCheck,
       onExpand,
       onClick,