evui 3.4.99 → 3.4.101

package/package.json

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

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

@@ -192,7 +192,7 @@ class EvChart {
       }
       notFormattedLabels.push(graphMax);
     } else {
-      notFormattedLabels = this.data.labels ?? [];
+      notFormattedLabels = this.data.labels?.y ?? this.data.labels ?? [];
     }
 
     const yMaxWidth = this.axesY[0]?.getLabelWidthHasMaxLength(notFormattedLabels);

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

@@ -27,6 +27,19 @@ class HeatMap {
       h: 0,
     };
     this.type = 'heatMap';
+
+    this.currentLabelInfo = {
+      x: {
+        steps: 0,
+        min: 0,
+        max: 0,
+      },
+      y: {
+        steps: 0,
+        min: 0,
+        max: 0,
+      },
+    };
   }
 
   /**
@@ -251,9 +264,17 @@ class HeatMap {
     this.size.w = xArea / minmaxX.oriSteps;
     this.size.h = yArea / minmaxY.oriSteps;
 
-    this.filterdCount = {
-      x: minmaxX.oriSteps,
-      y: minmaxY.oriSteps,
+    this.currentLabelInfo = {
+      x: {
+        steps: minmaxX.oriSteps,
+        min: minmaxX.graphMin,
+        max: minmaxX.graphMax,
+      },
+      y: {
+        steps: minmaxY.oriSteps,
+        min: minmaxY.graphMin,
+        max: minmaxY.graphMax,
+      },
     };
 
     const getOpacity = (item, opacity, index) => {
@@ -603,8 +624,8 @@ class HeatMap {
     };
 
     if (labels.x.length && labels.y.length) {
-      const labelXCount = this.filterdCount?.x ?? labels.x.length;
-      const labelYCount = this.filterdCount?.y ?? labels.y.length;
+      const labelXCount = this.currentLabelInfo.x.steps || labels.x.length;
+      const labelYCount = this.currentLabelInfo.y.steps || labels.y.length;
 
       const { x1, x2, y1, y2 } = range;
       const gapX = (x2 - x1) / labelXCount;
@@ -654,8 +675,14 @@ class HeatMap {
     return blockRange;
   }
 
+  getFilteredLabel(labels, count, min, max) {
+    return labels.length !== count
+      ? labels.filter(label => min <= label && label <= max)
+      : labels;
+  }
+
   findSelectionRange(rangeInfo) {
-    const { xcp, ycp, width, height, range } = rangeInfo;
+    const { xsp, ycp, width, height, range } = rangeInfo;
 
     let selectionRange = null;
 
@@ -663,30 +690,39 @@ class HeatMap {
     const { x: labelX, y: labelY } = this.labels;
 
     if (labelX.length && labelY.length) {
-      const gapX = (x2 - x1) / labelX.length;
-      const gapY = (y2 - y1) / labelY.length;
+      const {
+        x: { steps: xCurrentCount, min: xMin, max: xMax },
+        y: { steps: yCurrentCount, min: yMin, max: yMax },
+      } = this.currentLabelInfo;
 
-      const xsp = xcp;
-      const xep = xcp + width;
+      const labelXCount = xCurrentCount || labelX.x.length;
+      const labelYCount = yCurrentCount || labelY.y.length;
+      const gapX = (x2 - x1) / labelXCount;
+      const gapY = (y2 - y1) / labelYCount;
+
+      const xep = xsp + width;
       const ysp = ycp;
-      const yep = ycp + height;
+      const yep = ysp + height;
 
       const xIndex = {
         min: Math.floor((xsp - x1) / gapX),
         max: Math.floor((xep - x1 - gapX) / gapX),
       };
 
-      const lastIndexY = labelY.length - 1;
+      const lastIndexY = labelYCount - 1;
       const yIndex = {
         min: lastIndexY - Math.floor((yep - y1 - gapY) / gapY),
         max: lastIndexY - Math.floor((ysp - y1) / gapY),
       };
 
+      const filteredLabelX = this.getFilteredLabel(labelX, labelXCount, xMin, xMax);
+      const filteredLabelY = this.getFilteredLabel(labelY, labelYCount, yMin, yMax);
+
       selectionRange = {
-        xMin: labelX[xIndex.min],
-        xMax: labelX[xIndex.max],
-        yMin: labelY[yIndex.min],
-        yMax: labelY[yIndex.max],
+        xMin: filteredLabelX[xIndex.min],
+        xMax: filteredLabelX[xIndex.max],
+        yMin: filteredLabelY[yIndex.min],
+        yMax: filteredLabelY[yIndex.max],
       };
     }
 

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

@@ -354,10 +354,18 @@ const modules = {
 
     this.onWheel = (e) => {
       const isTooltipVisible = this.tooltipDOM?.style?.display === 'block';
+      const customTooltip = document.querySelector(this.options.tooltip.htmlScrollTarget);
 
-      if (isTooltipVisible) {
+      if (isTooltipVisible
+        || (customTooltip && customTooltip.scrollHeight > customTooltip.clientHeight)) {
         e.preventDefault();
-        this.tooltipBodyDOM.scrollTop += e.deltaY;
+
+        if (isTooltipVisible) {
+          this.tooltipBodyDOM.scrollTop += e.deltaY;
+        }
+        if (customTooltip) {
+          customTooltip.scrollTop += e.deltaY;
+        }
       }
     };
 

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

@@ -711,6 +711,7 @@ const modules = {
           data: hitInfoItems[sId].data,
           color: hitInfoItems[sId].color,
           name: hitInfoItems[sId].name,
+          dataId: hitInfoItems[sId].id,
         });
       });
 

package/src/components/grid/uses.js

@@ -801,7 +801,13 @@ export const sortEvent = (params) => {
           if ((!aCol || typeof aCol === 'string') && (!bCol || typeof bCol === 'string')) {
             aCol = aCol || '';
             bCol = bCol || '';
-            return sortFn(aCol?.toLowerCase(), bCol?.toLowerCase());
+            const lowerA = aCol.toLowerCase();
+            const lowerB = bCol.toLowerCase();
+            if (aCol !== bCol && lowerA === lowerB) {
+              const diffIndex = Array.from(aCol).findIndex((char, idx) => char !== bCol[idx]);
+              return sortFn(aCol[diffIndex], bCol[diffIndex]);
+            }
+            return sortFn(lowerA, lowerB);
           }
           return 0;
         });