evui 3.3.47 → 3.3.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.47",
+  "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/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,
       });
     }

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/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,