evui 3.3.48 → 3.3.50

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

@@ -121,10 +121,6 @@ const modules = {
         const offset = this.getMousePosition(e);
         const hitInfo = this.getItemByPosition(offset, false);
 
-        if (hitInfo.label !== null) {
-          this.render(hitInfo);
-        }
-
         ({
           label: args.label,
           value: args.value,
@@ -132,6 +128,14 @@ const modules = {
           maxIndex: args.dataIndex,
           acc: args.acc,
         } = hitInfo);
+
+        if (this.options.type === 'heatMap') {
+          args.deselect = this.setDeselectItem(hitInfo);
+        }
+
+        if (hitInfo.label !== null) {
+          this.render(hitInfo);
+        }
       } else if (this.options.selectLabel.use && this.options.selectLabel.useClick) {
         const offset = this.getMousePosition(e);
         const clickedLabelInfo = this.getLabelInfoByPosition(offset);
@@ -619,10 +623,16 @@ const modules = {
    */
   initSelectedInfo() {
     if (this.options.selectLabel.use) {
-      const { limit } = this.options.selectLabel;
       if (!this.defaultSelectInfo) {
         this.defaultSelectInfo = { dataIndex: [] };
       }
+
+      if (this.options.type === 'heatMap') {
+        this.initSelectedInfoForHeatMap();
+        return;
+      }
+
+      const { limit } = this.options.selectLabel;
       const infoObj = this.defaultSelectInfo;
       infoObj.dataIndex.splice(limit);
       infoObj.label = infoObj.dataIndex.map(i => this.data.labels[i]);
@@ -636,6 +646,26 @@ const modules = {
     }
   },
 
+  /**
+   * init defaultSelectInfo object for HeatMap.
+   * - at selectLabel using: set each series data and label text
+   */
+  initSelectedInfoForHeatMap() {
+    const { limit } = this.options.selectLabel;
+    const isHorizontal = this.options.horizontal;
+
+    const infoObj = this.defaultSelectInfo;
+    infoObj.dataIndex.splice(limit);
+
+    const targetLabel = isHorizontal ? 'y' : 'x';
+    infoObj.label = infoObj.dataIndex.map(i => this.data.labels[targetLabel][i]);
+
+    const dataValues = Object.values(this.data.data)[0];
+    infoObj.data = dataValues.filter(({ x, y }) =>
+      (infoObj.label.includes(isHorizontal ? y : x)),
+    );
+  },
+
   /**
    * Add or delete selected label index, according to policy and option
    * (set each series data and label text)
@@ -788,6 +818,19 @@ const modules = {
       yMax: yMax ?? dataRangeY.graphMax,
     };
   },
+
+  setDeselectItem(hitInfo) {
+    let deselect = false;
+    if (this.options.selectItem.useDeselectItem) {
+      const isEqualSelectItem = hitInfo?.maxIndex === this.defaultSelectItemInfo?.dataIndex;
+      if (!isNaN(hitInfo?.maxIndex) && isEqualSelectItem) {
+        deselect = true;
+        this.defaultSelectItemInfo = null;
+        return true;
+      }
+    }
+    return deselect;
+  },
 };
 
 export default modules;

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

@@ -427,6 +427,7 @@ const modules = {
       }
 
       const targetId = targetDOM?.series?.cId;
+      const legendHitInfo = { sId: targetId, type: this.options.type };
 
       series.colorState.forEach((colorItem) => {
         colorItem.state = colorItem.id === targetId ? 'highlight' : 'downplay';
@@ -435,6 +436,9 @@ const modules = {
       this.update({
         updateSeries: false,
         updateSelTip: { update: false, keepDomain: false },
+        hitInfo: {
+          legend: legendHitInfo,
+        },
       });
     };
 

package/src/components/chart/scale/scale.js

@@ -251,7 +251,7 @@ class Scale {
     }
 
     if (this.showAxis) {
-      ctx.lineWidth = 2;
+      ctx.lineWidth = this.axisLineWidth;
       aliasPixel = Util.aliasPixel(ctx.lineWidth);
 
       ctx.beginPath();

package/src/components/chart/scale/scale.step.js

@@ -110,7 +110,7 @@ class StepScale extends Scale {
       }
 
       ctx.fillStyle = this.labelStyle.color;
-      ctx.lineWidth = 1;
+      ctx.lineWidth = this.axisLineWidth;
       const aliasPixel = Util.aliasPixel(ctx.lineWidth);
 
       ctx.beginPath();

package/src/components/chart/scale/scale.time.category.js

@@ -146,7 +146,7 @@ class TimeCategoryScale extends Scale {
     }
 
     ctx.fillStyle = this.labelStyle.color;
-    ctx.lineWidth = 1;
+    ctx.lineWidth = this.axisLineWidth;
     const aliasPixel = Util.aliasPixel(ctx.lineWidth);
 
     ctx.beginPath();

package/src/components/chart/uses.js

@@ -127,6 +127,14 @@ const DEFAULT_OPTIONS = {
       fontWeight: 400,
     },
     useSeriesOpacity: false,
+    useDeselectItem: false,
+    showBorder: false,
+    borderStyle: {
+      color: '#FFFFFF',
+      lineWidth: 1,
+      opacity: 1,
+      radius: 0,
+    },
   },
   selectLabel: {
     use: false,
@@ -196,8 +204,8 @@ const DEFAULT_OPTIONS = {
   heatMapColor: {
     min: '#FFFFFF',
     max: '#0052FF',
-    categoryCnt: 1,
-    categoryColors: [],
+    rangeCount: 1,
+    colorsByRange: [],
     stroke: {
       show: false,
       color: '#FFFFFF',
@@ -248,7 +256,14 @@ export const useModel = (selectedLabel) => {
     click: async (e) => {
       await nextTick();
       if (e.label) {
-        emit('update:selectedItem', { seriesID: e.seriesId, dataIndex: e.dataIndex });
+        let selectedItem = { seriesID: e.seriesId, dataIndex: e.dataIndex };
+        if ('deselect' in e) {
+          if (e.deselect) {
+            selectedItem = null;
+          }
+          delete e.deselect;
+        }
+        emit('update:selectedItem', selectedItem);
       }
       if (e.selected?.dataIndex) {
         if (selectedLabel?.value) {

package/src/components/grid/uses.js

@@ -845,6 +845,8 @@ export const contextMenuEvent = (params) => {
             menuItem.disabled = !menuItem.validate(menuItem.itemId, row);
           }
 
+          menuItem.selectedRow = row ?? [];
+
           return menuItem;
         });
 

package/src/components/treeGrid/uses.js

@@ -585,6 +585,8 @@ export const contextMenuEvent = (params) => {
             menuItem.disabled = !menuItem.validate(menuItem.itemId, row);
           }
 
+          menuItem.selectedRow = row ?? [];
+
           return menuItem;
         });