evui 3.3.57 → 3.3.59

package/package.json

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

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

@@ -115,7 +115,7 @@ class Bar {
     this.chartRect = chartRect;
     this.labelOffset = labelOffset;
     this.borderRadius = param.borderRadius;
-    this.range = [minIndex, maxIndex];
+    this.filteredCount = totalCount;
 
     let categoryPoint = null;
 
@@ -304,11 +304,7 @@ class Bar {
     const item = { data: null, hit: false, color: this.color };
     const gdata = this.data;
 
-    let totalCount = gdata.length;
-    const [min, max] = this.range ?? [];
-    if (truthyNumber(min) && truthyNumber(max)) {
-      totalCount = (max - min) + 1;
-    }
+    const totalCount = this.filteredCount ?? gdata.length;
 
     let s = 0;
     let e = totalCount - 1;
@@ -350,11 +346,7 @@ class Bar {
     const item = { data: null, hit: false, color: this.color };
     const gdata = this.data;
 
-    let totalCount = gdata.length;
-    const [min, max] = this.range ?? [];
-    if (truthyNumber(min) && truthyNumber(max)) {
-      totalCount = (max - min) + 1;
-    }
+    const totalCount = this.filteredCount ?? gdata.length;
 
     let s = 0;
     let e = totalCount - 1;

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

@@ -250,6 +250,11 @@ class HeatMap {
     this.size.w = xArea / minmaxX.oriSteps;
     this.size.h = yArea / minmaxY.oriSteps;
 
+    this.filterdCount = {
+      x: minmaxX.oriSteps,
+      y: minmaxY.oriSteps,
+    };
+
     const getOpacity = (item, opacity, index) => {
       if (!legendHitInfo) {
         let isDownplay;
@@ -337,14 +342,14 @@ class HeatMap {
 
           xp += axisLineWidth;
 
-          this.drawItem(ctx, xp, yp, w, h, borderOpt);
-          ctx.restore();
-
           item.xp = xp;
           item.yp = yp;
           item.w = w;
           item.h = h;
 
+          this.drawItem(ctx, xp, yp, w, h, borderOpt);
+          ctx.restore();
+
           if (this.showValue.use) {
             this.drawValueLabels({
               context: ctx,
@@ -479,16 +484,17 @@ class HeatMap {
     } else {
       isShow = this.colorState.find(({ id }) => id === cId)?.show;
     }
+
     ctx.save();
     ctx.shadowOffsetX = 0;
     ctx.shadowOffsetY = 0;
     ctx.shadowBlur = 4;
 
     if (x !== null && y !== null && isShow) {
-      const color = gdata.dataColor;
+      const color = Util.colorStringToRgba(gdata.dataColor);
       ctx.shadowColor = Util.colorStringToRgba('#959494');
-      ctx.strokeStyle = Util.colorStringToRgba(color);
-      ctx.fillStyle = Util.colorStringToRgba(color);
+      ctx.strokeStyle = color;
+      ctx.fillStyle = color;
 
       if (this.stroke.show) {
         const { lineWidth } = this.stroke;
@@ -500,6 +506,7 @@ class HeatMap {
           h -= (lineWidth);
         }
       }
+
       this.drawItem(ctx, x - 0.5, y - 0.5, w + 1, h + 1, this.stroke);
 
       ctx.restore();
@@ -552,6 +559,7 @@ class HeatMap {
 
   findBlockRange({ xcp, xep, ycp, yep, range }) {
     const labels = this.labels;
+    const axesLineWidth = 1;
 
     const blockRange = {
       xsp: Math.min(xcp, xep),
@@ -561,9 +569,12 @@ 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 { x1, x2, y1, y2 } = range;
-      const gapX = (x2 - x1) / labels.x.length;
-      const gapY = (y2 - y1) / labels.y.length;
+      const gapX = (x2 - x1) / labelXCount;
+      const gapY = (y2 - y1) / labelYCount;
 
       const point = {
         xsp: xcp,
@@ -579,14 +590,14 @@ class HeatMap {
 
         if (dir === 'x') {
           gap = gapX;
-          startPoint = x1;
+          startPoint = x1 + axesLineWidth;
         } else {
           gap = gapY;
           startPoint = y1;
         }
 
         const findItem = labels[dir].findIndex((item, index) => {
-          itemPoint = Math.round(startPoint + (gap * index)) + Util.aliasPixel(1);
+          itemPoint = startPoint + (gap * index);
           return itemPoint <= target && target <= itemPoint + gap;
         });
 

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

@@ -182,18 +182,19 @@ class Line {
     }
 
     // Draw points
-    if (!isBrush && (this.point || useSelectLabel)) {
+    if (!isBrush) {
       ctx.strokeStyle = Util.colorStringToRgba(mainColor, mainColorOpacity);
       const focusStyle = Util.colorStringToRgba(pointFillColor, 1);
       const blurStyle = Util.colorStringToRgba(pointFillColor, pointFillColorOpacity);
 
       this.data.forEach((curr, ix) => {
-        const isSelectedLabel = selectedLabelIndexList.includes(ix);
         if (curr.xp === null || curr.yp === null) {
           return;
         }
 
-        if (this.point || isSelectedLabel) {
+        const isSingle = this.data[ix - 1]?.o === null && this.data[ix + 1]?.o === null;
+        const isSelectedLabel = selectedLabelIndexList.includes(ix);
+        if (this.point || isSingle || isSelectedLabel) {
           ctx.fillStyle = isSelectedLabel && !legendHitInfo ? focusStyle : blurStyle;
           Canvas.drawPoint(ctx, this.pointStyle, this.pointSize, curr.xp, curr.yp);
         }

package/src/components/grid/Grid.vue

@@ -82,7 +82,6 @@
                 'margin-right': (orderedColumns.length - 1 === index
                 && hasVerticalScrollBar && hasHorizontalScrollBar) ? `${scrollWidth}px` : '0px',
               }"
-              @click.stop="onSort(column)"
             >
               <!-- Filter Status -->
               <span
@@ -95,20 +94,21 @@
               <span
                 :title="column.caption"
                 class="column-name"
+                @click.stop="onSort(column)"
               >
                 {{ column.caption }}
+                <!-- Sort Icon -->
+                <template v-if="sortField === column.field">
+                  <ev-icon
+                    v-if="sortOrder === 'desc'"
+                    icon="ev-icon-triangle-down"
+                  />
+                  <ev-icon
+                    v-if="sortOrder === 'asc'"
+                    icon="ev-icon-triangle-up"
+                  />
+                </template>
               </span>
-              <!-- Sort Icon -->
-              <template v-if="sortField === column.field">
-                <ev-icon
-                  v-if="sortOrder === 'desc'"
-                  icon="ev-icon-triangle-down"
-                />
-                <ev-icon
-                  v-if="sortOrder === 'asc'"
-                  icon="ev-icon-triangle-up"
-                />
-              </template>
               <!-- Filter Button -->
               <span
                 v-if="isFiltering"

package/src/components/grid/style/grid.scss

@@ -79,6 +79,7 @@
 .column-name {
   display: inline-block;
   float: left;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: bold;