evui 3.3.48 → 3.3.49

package/package.json

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

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

@@ -219,12 +219,33 @@ class EvChart {
         const series = this.seriesList[chartTypeSet[jx]];
 
         switch (chartType) {
-          case 'line':
+          case 'line': {
+            const legendHitInfo = hitInfo?.legend;
+
+            series.draw({
+              legendHitInfo,
+              ...opt,
+            });
+            break;
+          }
           case 'heatMap': {
             const legendHitInfo = hitInfo?.legend;
 
+            let selectInfo;
+            const defaultSelectInfo = this.defaultSelectItemInfo;
+            if (defaultSelectInfo?.dataIndex || defaultSelectInfo?.dataIndex === 0) {
+              selectInfo = { ...defaultSelectInfo };
+            } else {
+              selectInfo = null;
+            }
+
             series.draw({
               legendHitInfo,
+              selectInfo,
+              selectItem: {
+                option: selectItem,
+                selected: selectInfo,
+              },
               ...opt,
             });
             break;
@@ -718,7 +739,7 @@ class EvChart {
 
     if (options.legend.show) {
       const useTable = !!options.legend?.table?.use
-        && options.type !== 'heatmap'
+        && options.type !== 'heatMap'
         && options.type !== 'scatter';
 
       if (!this.isInitLegend) {

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

@@ -4,12 +4,13 @@ import { HEAT_MAP_OPTION } from '../helpers/helpers.constant';
 import { convertToPercent } from '../../../common/utils';
 
 class HeatMap {
-  constructor(sId, opt, colorOpt, isGradient) {
+  constructor(sId, opt, colorOpt, isHorizontal, isGradient) {
     const merged = merge({}, HEAT_MAP_OPTION, opt);
       Object.keys(merged).forEach((key) => {
         this[key] = merged[key];
     });
 
+    this.isHorizontal = isHorizontal;
     this.isGradient = isGradient;
     this.createColorState(colorOpt);
 
@@ -35,7 +36,7 @@ class HeatMap {
   createColorState(colorOpt) {
     const colorState = [];
     const regex = /[^0-9]&[^,]/g;
-    const { min, max, categoryCnt, categoryColors, error, stroke } = colorOpt;
+    const { min, max, rangeCount, colorsByRange, error, stroke } = colorOpt;
 
     const minColor = min.includes('#') ? Util.hexToRgb(min) : min.replace(regex, '');
     const maxColor = max.includes('#') ? Util.hexToRgb(max) : max.replace(regex, '');
@@ -47,14 +48,13 @@ class HeatMap {
       colorState.push({
         minColor: { minR, minG, minB },
         maxColor: { maxR, maxG, maxB },
-        categoryCnt,
+        rangeCount,
         start: 0,
         end: 100,
         selectedValue: null,
       });
-    } else if (categoryColors.length) {
-      colorOpt.categoryCnt = categoryColors.length;
-      categoryColors.forEach(({ color, label }, ix) => {
+    } else if (colorsByRange.length) {
+      colorsByRange.forEach(({ color, label }, ix) => {
         colorState.push({
           id: `color#${ix}`,
           color,
@@ -64,11 +64,11 @@ class HeatMap {
         });
       });
     } else {
-      const unitR = Math.floor((minR - maxR) / (categoryCnt - 1));
-      const unitG = Math.floor((minG - maxG) / (categoryCnt - 1));
-      const unitB = Math.floor((minB - maxB) / (categoryCnt - 1));
+      const unitR = Math.floor((minR - maxR) / (rangeCount - 1));
+      const unitG = Math.floor((minG - maxG) / (rangeCount - 1));
+      const unitB = Math.floor((minB - maxB) / (rangeCount - 1));
 
-      for (let ix = 0; ix < categoryCnt; ix++) {
+      for (let ix = 0; ix < rangeCount; ix++) {
         const r = +minR - (unitR * ix);
         const g = +minG - (unitG * ix);
         const b = +minB - (unitB * ix);
@@ -100,7 +100,7 @@ class HeatMap {
     return `rgb(${r},${g},${b})`;
   }
 
-  getColorIndexForIcon(value) {
+  getColorIndexByValue(value) {
     const { existError, min, interval, decimalPoint } = this.valueOpt;
     const maxIndex = this.colorState.length - 1;
     if (existError && value < 0) {
@@ -120,7 +120,7 @@ class HeatMap {
     const { min, max } = this.valueOpt;
     const itemInfo = {
       show: false,
-      opacity: 0,
+      opacity: 1,
       dataColor: null,
       id: null,
       isHighlight: null,
@@ -132,12 +132,11 @@ class HeatMap {
         itemInfo.show = true;
         itemInfo.isHighlight = selectedValue !== null
           && (Math.floor(value) === Math.floor(min + ((max - min) * (selectedValue / 100))));
-        itemInfo.opacity = 1;
         itemInfo.dataColor = value < 0
           ? this.errorColor : this.getColorForGradient(ratio);
       }
     } else {
-      const colorIndex = this.getColorIndexForIcon(value);
+      const colorIndex = this.getColorIndexByValue(value);
       const { show, state, color, id } = this.colorState[colorIndex];
       itemInfo.show = show;
       itemInfo.opacity = state === 'downplay' ? 0.1 : 1;
@@ -147,16 +146,22 @@ class HeatMap {
     return itemInfo;
   }
 
-  drawItem(ctx, x, y, w, h) {
+  drawItem(ctx, x, y, w, h, borderOpt) {
     ctx.beginPath();
-    if (this.stroke.show) {
-      const { radius } = this.stroke;
-      if (radius > 0 && radius < h && radius < w) {
-        ctx.moveTo(x + radius, y);
-        ctx.arcTo(x + w, y, x + w, y + h, radius);
-        ctx.arcTo(x + w, y + h, x, y + h, radius);
-        ctx.arcTo(x, y + h, x, y, radius);
-        ctx.arcTo(x, y, x + w, y, radius);
+    if (borderOpt.show) {
+      const { radius } = borderOpt;
+      if (radius > 0) {
+        const minSize = Math.min(w, h);
+        let r = radius;
+        if (r > (minSize / 2)) {
+          r = Math.floor(minSize / 2);
+        }
+        ctx.moveTo(x + r, y);
+        ctx.arcTo(x + w, y, x + w, y + h, r);
+        ctx.arcTo(x + w, y + h, x, y + h, r);
+        ctx.arcTo(x, y + h, x, y, r);
+        ctx.arcTo(x, y, x + w, y, r);
+        ctx.stroke();
         ctx.fill();
       } else {
         ctx.strokeRect(x, y, w, h);
@@ -204,7 +209,15 @@ class HeatMap {
       return;
     }
 
-    const { ctx, chartRect, labelOffset, overlayCtx } = param;
+    const {
+      ctx,
+      chartRect,
+      labelOffset,
+      overlayCtx,
+      selectLabel,
+      legendHitInfo,
+      selectItem,
+    } = param;
 
     const xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
     const yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
@@ -215,34 +228,80 @@ class HeatMap {
     this.size.w = xArea / this.labels.x.length;
     this.size.h = yArea / this.labels.y.length;
 
-    this.data.forEach((item) => {
-      let xp = this.calculateXY('x', item.x, xsp);
+    const getOpacity = (item, opacity, index) => {
+      const selectLabelOption = selectLabel?.option;
+      const useSelectLabel = selectLabelOption?.use && selectLabelOption?.useSeriesOpacity;
+      const selectItemOption = selectItem?.option;
+      const useSelectItem = selectItemOption?.use && selectItemOption?.useSeriesOpacity;
+      if (!legendHitInfo) {
+        let isDownplay = false;
+        if (useSelectItem) {
+          isDownplay = selectItem?.selected && index !== selectItem?.selected?.dataIndex;
+        } else if (useSelectLabel) {
+          const selectedLabelList = selectLabel?.selected?.label;
+          isDownplay = selectedLabelList.length
+            && !selectedLabelList.includes(this.isHorizontal ? item.y : item.x);
+        }
+        return isDownplay ? 0.1 : 1;
+      }
+      return opacity;
+    };
+
+    this.data.forEach((item, index) => {
+      const axisLineWidth = 1;
+      let xp = this.calculateXY('x', item.x, xsp) + axisLineWidth;
       let yp = this.calculateXY('y', item.y, ysp);
       let w = this.size.w;
       let h = this.size.h;
+
       const value = item.o;
 
       if (xp !== null && yp !== null
          && (value !== null && value !== undefined)) {
-        const { show, opacity, dataColor, id, isHighlight } = this.getItemInfo(value);
+        const {
+          show,
+          opacity,
+          dataColor,
+          id,
+          isHighlight,
+        } = this.getItemInfo(value);
+
+        const itemOpacity = getOpacity(item, opacity, index);
+
         item.dataColor = dataColor;
         item.cId = id;
         ctx.save();
+
         if (show) {
-          ctx.fillStyle = Util.colorStringToRgba(item.dataColor, opacity);
-          if (this.stroke.show) {
-            const { color, lineWidth, opacity: sOpacity } = this.stroke;
+          ctx.fillStyle = Util.colorStringToRgba(item.dataColor, itemOpacity);
+
+          let borderOpt = this.stroke;
+          const selectItemOption = selectItem?.option;
+          const useSelectItem = selectItemOption?.use && selectItemOption?.showBorder;
+          const isHit = (index === selectItem?.selected?.dataIndex);
+          if (useSelectItem && isHit) {
+            borderOpt = {
+              show: selectItemOption?.showBorder,
+              ...selectItemOption?.borderStyle,
+            };
+          }
+
+          if (borderOpt.show) {
+            const { color, lineWidth, opacity: borderOpacity } = borderOpt;
             ctx.strokeStyle = Util.colorStringToRgba(
               color,
-              opacity === 1 ? sOpacity : opacity,
+              itemOpacity === 1 ? borderOpacity : itemOpacity,
             );
+
             ctx.lineWidth = lineWidth;
-            xp += (lineWidth * 1.5);
-            yp += (lineWidth * 1.5);
-            w -= (lineWidth * 2);
-            h -= (lineWidth * 2);
+
+            xp += (lineWidth * 0.5);
+            yp += (lineWidth * 0.5);
+            w -= (lineWidth);
+            h -= (lineWidth);
           }
-          this.drawItem(ctx, xp, yp, w, h);
+
+          this.drawItem(ctx, xp, yp, w, h, borderOpt);
           ctx.restore();
 
           item.xp = xp;
@@ -369,10 +428,10 @@ class HeatMap {
     const gdata = item.data;
     const ctx = context;
 
-    const x = gdata.xp;
-    const y = gdata.yp;
-    const w = gdata.w;
-    const h = gdata.h;
+    let x = gdata.xp;
+    let y = gdata.yp;
+    let w = gdata.w;
+    let h = gdata.h;
     const cId = gdata.cId;
 
     let isShow;
@@ -385,16 +444,24 @@ class HeatMap {
       isShow = this.colorState.find(({ id }) => id === cId)?.show;
     }
     ctx.save();
-    ctx.shadowOffsetX = 2;
-    ctx.shadowOffsetY = 2;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
     ctx.shadowBlur = 4;
 
     if (x !== null && y !== null && isShow) {
       const color = gdata.dataColor;
-      ctx.shadowColor = Util.colorStringToRgba('#605F5F');
+      ctx.shadowColor = Util.colorStringToRgba('#959494');
       ctx.strokeStyle = Util.colorStringToRgba(color);
       ctx.fillStyle = Util.colorStringToRgba(color);
-      this.drawItem(ctx, x - 2, y - 2, w + 4, h + 4);
+
+      if (this.stroke.show) {
+        const { lineWidth } = this.stroke;
+        x += (lineWidth * 0.5);
+        y += (lineWidth * 0.5);
+        w -= (lineWidth);
+        h -= (lineWidth);
+      }
+      this.drawItem(ctx, x - 0.5, y - 0.5, w + 1, h + 1, this.stroke);
 
       ctx.restore();
 
@@ -424,7 +491,7 @@ class HeatMap {
     };
     const gdata = this.data;
 
-    const foundItem = gdata.find((data) => {
+    const itemIndex = gdata.findIndex((data) => {
       const { xp: x, yp: y, w: wSize, h: hSize } = data;
 
       return (x <= xp)
@@ -433,9 +500,11 @@ class HeatMap {
         && (yp <= y + hSize);
     });
 
-    if (foundItem) {
+    if (itemIndex > -1) {
+      const foundItem = gdata[itemIndex];
       item.data = foundItem;
       item.color = foundItem.dataColor;
+      item.index = itemIndex;
       item.hit = true;
     }
 

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

@@ -19,7 +19,8 @@ const modules = {
     let isExistSelectedLabel;
 
     if (labelTipOpt.use && labelTipOpt.showTip) {
-      isExistSelectedLabel = this.drawLabelTip();
+      const isHeatMap = opt.type === 'heatMap';
+      isExistSelectedLabel = isHeatMap ? this.drawLabelTipForHeatMap() : this.drawLabelTip();
     }
 
     const executeDrawIndicator = (tipOpt) => {
@@ -365,6 +366,55 @@ const modules = {
 
     return drawTip;
   },
+
+  /**
+   * Draw Selected Label Tip
+   * @returns {boolean} Whether drew at least one tip
+   */
+  drawLabelTipForHeatMap() {
+    const opt = this.options;
+    const isHorizontal = !!opt.horizontal;
+    const labelTipOpt = opt.selectLabel;
+    const { dataIndex } = this.defaultSelectInfo;
+    let drawTip = false;
+
+    if (dataIndex) {
+      drawTip = true;
+
+      const chartRect = this.chartRect;
+      const labelOffset = this.labelOffset;
+      const aPos = {
+        x1: chartRect.x1 + labelOffset.left,
+        x2: chartRect.x2 - labelOffset.right,
+        y1: chartRect.y1 + labelOffset.top,
+        y2: chartRect.y2 - labelOffset.bottom,
+      };
+      const labelAxes = isHorizontal ? this.axesY[0] : this.axesX[0];
+      const labelStartPoint = aPos[labelAxes.units.rectStart];
+      const labelEndPoint = aPos[labelAxes.units.rectEnd];
+      const labelGap = (labelEndPoint - labelStartPoint) / labelAxes.labels.length;
+
+      const valueAxes = isHorizontal ? this.axesX[0] : this.axesY[0];
+      const offset = 6 * (isHorizontal ? 1 : -1);
+      const gp = aPos[valueAxes.units.rectEnd] + offset;
+
+      dataIndex?.forEach((index) => {
+        const labelCenter = Math.round(labelStartPoint + (labelGap * index));
+        const dp = labelCenter + (labelGap / 2);
+
+        this.showTip({
+          context: this.bufferCtx,
+          x: isHorizontal ? gp : dp,
+          y: isHorizontal ? dp : gp,
+          opt: labelTipOpt,
+          isSamePos: false,
+        });
+      });
+    }
+
+    return drawTip;
+  },
+
   /**
    * Calculate x, y position to draw text tip
    * @param {object} param     object for drawing text tip

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

@@ -86,6 +86,7 @@ export const AXIS_OPTION = {
   startToZero: false,
   showAxis: true,
   axisLineColor: '#C9CFDC',
+  axisLineWidth: 1,
   showGrid: true,
   gridLineColor: '#C9CFDC',
   showIndicator: false,

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

@@ -56,7 +56,7 @@ const modules = {
       this.seriesInfo.charts.heatMap.push(id);
       const { heatMapColor, legend } = this.options;
       const isGradient = legend.type === 'gradient';
-      return new HeatMap(id, opt, heatMapColor, isGradient);
+      return new HeatMap(id, opt, heatMapColor, isHorizontal, isGradient);
     }
 
     return false;

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

@@ -420,7 +420,7 @@ const modules = {
   getSeriesValueOptForHeatMap(series) {
     const { data, colorState, isGradient } = series;
     const colorOpt = this.options.heatMapColor;
-    const categoryCnt = colorOpt.categoryCnt;
+    const rangeCount = colorOpt.colorsByRange.length || colorOpt.rangeCount;
     const decimalPoint = colorOpt.decimalPoint;
 
     let minValue;
@@ -444,10 +444,10 @@ const modules = {
     if (
       isExistError
       && !isGradient
-      && colorState.length === categoryCnt
+      && colorState.length === rangeCount
     ) {
       colorState.push({
-        id: `color#${categoryCnt}`,
+        id: `color#${rangeCount}`,
         color: colorOpt.error,
         state: 'normal',
         label: 'Error',
@@ -455,10 +455,10 @@ const modules = {
       });
     }
 
-    let interval = maxValue > minValue ? Math.floor((maxValue - minValue) / categoryCnt) : 1;
-    if ((maxValue - minValue) <= categoryCnt) {
+    let interval = maxValue > minValue ? Math.floor((maxValue - minValue) / rangeCount) : 1;
+    if ((maxValue - minValue) <= rangeCount) {
       if (decimalPoint > 0) {
-        interval = +((maxValue - minValue) / categoryCnt).toFixed(decimalPoint);
+        interval = +((maxValue - minValue) / rangeCount).toFixed(decimalPoint);
       } else {
         interval = 1;
       }

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) {