evui 3.3.18 → 3.3.21

package/package.json

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

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

@@ -8,6 +8,7 @@ import StepScale from './scale/scale.step';
 import TimeCategoryScale from './scale/scale.time.category';
 import Title from './plugins/plugins.title';
 import Legend from './plugins/plugins.legend';
+import GradientLegend from './plugins/plugins.legend.gradient';
 import Interaction from './plugins/plugins.interaction';
 import Tooltip from './plugins/plugins.tooltip';
 import Pie from './plugins/plugins.pie';
@@ -23,6 +24,10 @@ class EvChart {
     Object.assign(this, Pie);
     Object.assign(this, Tip);
 
+    if (options.type === 'heatMap' && options.legend.type === 'gradient') {
+      Object.assign(this, GradientLegend);
+    }
+
     this.target = target;
     this.data = data;
     this.options = options;
@@ -163,6 +168,7 @@ class EvChart {
       maxTipOpt: { background: maxTip.background, color: maxTip.color },
       selectLabel: { option: selectLabel, selected: this.defaultSelectInfo },
       selectSeries: { option: selectSeries, selected: this.defaultSelectInfo },
+      overlayCtx: this.overlayCtx,
     };
 
     let showIndex = 0;
@@ -443,8 +449,8 @@ class EvChart {
     const { width, height } = this.getChartDOMRect();
 
     const padding = this.options.padding;
-    const xAxisTitleOpt = this.options.axesX[0]?.title;
-    const yAxisTitleOpt = this.options.axesY[0]?.title;
+    const xAxisTitleOpt = this.options.axesX?.[0]?.title;
+    const yAxisTitleOpt = this.options.axesY?.[0]?.title;
     const titleMargin = 10;
 
     let xAxisTitleHeight = 0;

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

@@ -1,4 +1,5 @@
 import { defaultsDeep } from 'lodash-es';
+import { truthy } from '@/common/utils';
 import { COLOR, BAR_OPTION } from '../helpers/helpers.constant';
 import Canvas from '../helpers/helpers.canvas';
 import Util from '../helpers/helpers.util';
@@ -359,13 +360,11 @@ class Bar {
     ctx.textAlign = isHorizontal && align !== 'center' ? 'left' : 'center';
 
     let value;
-    const isStacked = !isNaN(data.o);
-    if (data.o === null) {
-      value = isHorizontal ? data.x : data.y;
-    } else if (isStacked) {
+    const isStacked = truthy(this.stackIndex);
+    if (isStacked) {
       value = data.o;
     } else {
-      value = '';
+      value = (isHorizontal ? data.x : data.y) ?? '';
     }
 
     let formattedTxt;
@@ -374,49 +373,73 @@ class Bar {
     }
 
     if (!formatter || typeof formattedTxt !== 'string') {
-      formattedTxt = Util.labelSignFormat(value, decimalPoint);
+      formattedTxt = Util.labelSignFormat(value, decimalPoint) ?? '';
     }
 
-    const vw = Math.round(ctx.measureText(formattedTxt).width);
-    const vh = fontSize + 4;
+    const textWidth = Math.round(ctx.measureText(formattedTxt).width);
+    const textHeight = fontSize + 4;
     const minXPos = x + 10;
     const minYPos = y - 10;
+    const widthFreeSpaceToDraw = w - 10;
+    const heightFreeSpaceToDraw = Math.abs(h + 10);
     const centerX = x + (w / 2) <= minXPos ? minXPos : x + (w / 2);
     const centerY = y + (h / 2) >= minYPos ? minYPos : y + (h / 2);
     const centerYHorizontal = isHighlight ? y + (h / 2) : y - (h / 2);
 
     switch (align) {
-      case 'start':
+      case 'start': {
         if (isHorizontal) {
-          ctx.fillText(formattedTxt, minXPos, centerYHorizontal);
-        } else {
+          if (textWidth < widthFreeSpaceToDraw) {
+            ctx.fillText(formattedTxt, minXPos, centerYHorizontal);
+          }
+        } else if (textHeight < heightFreeSpaceToDraw) {
           ctx.fillText(formattedTxt, centerX, minYPos);
         }
+
         break;
-      case 'center':
+      }
+
+      case 'center': {
         if (isHorizontal) {
-          ctx.fillText(formattedTxt, centerX, centerYHorizontal);
-        } else {
+          if (textWidth < widthFreeSpaceToDraw) {
+            ctx.fillText(formattedTxt, centerX, centerYHorizontal);
+          }
+        } else if (textHeight < heightFreeSpaceToDraw) {
           ctx.fillText(formattedTxt, centerX, centerY);
         }
+
         break;
-      case 'out':
+      }
+
+      case 'out': {
+        if (isStacked) {
+          console.warn('[EVUI][Bar Chart] In case of Stack Bar Chart, \'out\' of \'showValue\'\'s align is not supported.');
+          return;
+        }
+
         if (isHorizontal) {
           ctx.fillText(formattedTxt, minXPos + w, centerYHorizontal);
         } else {
-          ctx.fillText(formattedTxt, centerX, y + h - (vh / 2));
+          ctx.fillText(formattedTxt, centerX, y + h - (textHeight / 2));
         }
+
         break;
-      case 'end':
+      }
+
       default:
+      case 'end': {
         if (isHorizontal) {
-          const xPos = x + w - (vw * 2);
-          ctx.fillText(formattedTxt, xPos <= minXPos ? minXPos : xPos, centerYHorizontal);
-        } else {
-          const yPos = y + h + vh;
+          if (textWidth < widthFreeSpaceToDraw) {
+            const xPos = x + w - (textWidth * 2);
+            ctx.fillText(formattedTxt, xPos <= minXPos ? minXPos : xPos, centerYHorizontal);
+          }
+        } else if (textHeight < heightFreeSpaceToDraw) {
+          const yPos = y + h + textHeight;
           ctx.fillText(formattedTxt, centerX, yPos >= minYPos ? minYPos : yPos);
         }
+
         break;
+      }
     }
 
     ctx.restore();

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

@@ -1,19 +1,24 @@
 import { merge } from 'lodash-es';
 import Util from '../helpers/helpers.util';
 import { HEAT_MAP_OPTION } from '../helpers/helpers.constant';
+import { convertToPercent } from '../../../common/utils';
 
 class HeatMap {
-  constructor(sId, opt, colorOpt) {
+  constructor(sId, opt, colorOpt, isGradient) {
     const merged = merge({}, HEAT_MAP_OPTION, opt);
       Object.keys(merged).forEach((key) => {
         this[key] = merged[key];
     });
 
-    this.createColorAxis(colorOpt);
+    this.isGradient = isGradient;
+    this.createColorState(colorOpt);
 
     this.sId = sId;
     this.data = [];
-    this.labels = {};
+    this.labels = {
+      x: [],
+      y: [],
+    };
     this.valueOpt = {};
     this.size = {
       w: 0,
@@ -27,41 +32,66 @@ class HeatMap {
    * @param colorOpt
    * @returns {*[]}
    */
-  createColorAxis(colorOpt) {
-    const colorAxis = [];
+  createColorState(colorOpt) {
+    const colorState = [];
+    const regex = /[^0-9]&[^,]/g;
     const { min, max, categoryCnt, error, stroke } = colorOpt;
 
-    const minColor = min.includes('#') ? Util.hexToRgb(min) : min;
-    const maxColor = max.includes('#') ? Util.hexToRgb(max) : max;
+    const minColor = min.includes('#') ? Util.hexToRgb(min) : min.replace(regex, '');
+    const maxColor = max.includes('#') ? Util.hexToRgb(max) : max.replace(regex, '');
 
     const [minR, minG, minB] = minColor.split(',');
     const [maxR, maxG, maxB] = maxColor.split(',');
 
-    const unitR = Math.floor((minR - maxR) / (categoryCnt - 1));
-    const unitG = Math.floor((minG - maxG) / (categoryCnt - 1));
-    const unitB = Math.floor((minB - maxB) / (categoryCnt - 1));
-
-    for (let ix = 0; ix < categoryCnt; ix++) {
-       const r = +minR - (unitR * ix);
-       const g = +minG - (unitG * ix);
-       const b = +minB - (unitB * ix);
-
-       colorAxis.push({
-         id: `color#${ix}`,
-         value: `rgb(${r},${g},${b})`,
-         state: 'normal',
-         show: true,
-       });
+    if (this.isGradient) {
+      colorState.push({
+        minColor: { minR, minG, minB },
+        maxColor: { maxR, maxG, maxB },
+        categoryCnt,
+        start: 0,
+        end: 100,
+        selectedValue: null,
+      });
+    } 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));
+
+      for (let ix = 0; ix < categoryCnt; ix++) {
+        const r = +minR - (unitR * ix);
+        const g = +minG - (unitG * ix);
+        const b = +minB - (unitB * ix);
+
+        colorState.push({
+          id: `color#${ix}`,
+          color: `rgb(${r},${g},${b})`,
+          state: 'normal',
+          show: true,
+        });
+      }
     }
 
-    this.colorAxis = colorAxis;
+    this.colorState = colorState;
     this.errorColor = error;
     this.stroke = stroke;
   }
 
-  getColorIndex(value) {
+  getColorForGradient(value) {
+    const { minColor, maxColor } = this.colorState[0];
+
+    const { minR, minG, minB } = minColor;
+    const { maxR, maxG, maxB } = maxColor;
+
+    const r = +minR - Math.floor(((minR - maxR) * value) / 100);
+    const g = +minG - Math.floor(((minG - maxG) * value) / 100);
+    const b = +minB - Math.floor(((minB - maxB) * value) / 100);
+
+    return `rgb(${r},${g},${b})`;
+  }
+
+  getColorIndexForIcon(value) {
     const { existError, min, interval, decimalPoint } = this.valueOpt;
-    const maxIndex = this.colorAxis.length - 1;
+    const maxIndex = this.colorState.length - 1;
     if (existError && value < 0) {
       return maxIndex;
     }
@@ -75,11 +105,52 @@ class HeatMap {
     return colorIndex;
   }
 
+  getItemInfo(value) {
+    const { min, max } = this.valueOpt;
+    const itemInfo = {
+      show: false,
+      opacity: 0,
+      dataColor: null,
+      id: null,
+      isHighlight: null,
+    };
+    if (this.isGradient) {
+      const ratio = convertToPercent(value - min, max - min);
+      const { start, end, selectedValue } = this.colorState[0];
+      if (value < 0 || (start <= ratio && ratio <= end)) {
+        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 { show, state, color, id } = this.colorState[colorIndex];
+      itemInfo.show = show;
+      itemInfo.opacity = state === 'downplay' ? 0.1 : 1;
+      itemInfo.dataColor = value < 0 ? this.errorColor : color;
+      itemInfo.id = id;
+    }
+    return itemInfo;
+  }
+
   drawItem(ctx, x, y, w, h) {
     ctx.beginPath();
     if (this.stroke.show) {
-      ctx.strokeRect(x, y, w, h);
-      ctx.fillRect(x, y, w, h);
+      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);
+        ctx.fill();
+      } else {
+        ctx.strokeRect(x, y, w, h);
+        ctx.fillRect(x, y, w, h);
+      }
     } else {
       const aliasPixel = Util.aliasPixel(1);
       ctx.fillRect(
@@ -122,7 +193,7 @@ class HeatMap {
       return;
     }
 
-    const { ctx, chartRect, labelOffset } = param;
+    const { ctx, chartRect, labelOffset, overlayCtx } = param;
 
     const xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
     const yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
@@ -142,11 +213,11 @@ class HeatMap {
 
       if (xp !== null && yp !== null
          && (value !== null && value !== undefined)) {
-        const colorIndex = this.getColorIndex(value);
-        const opacity = this.colorAxis[colorIndex].state === 'downplay' ? 0.1 : 1;
-        item.dataColor = value < 0 ? this.errorColor : this.colorAxis[colorIndex].value;
-        item.cId = this.colorAxis[colorIndex].id;
-        if (this.colorAxis[colorIndex].show) {
+        const { show, opacity, dataColor, id, isHighlight } = this.getItemInfo(value);
+        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;
@@ -161,25 +232,25 @@ class HeatMap {
             h -= (lineWidth * 2);
           }
           this.drawItem(ctx, xp, yp, w, h);
+          ctx.restore();
+
+          item.xp = xp;
+          item.yp = yp;
+          item.w = w;
+          item.h = h;
 
           if (this.showValue.use) {
             this.drawValueLabels({
               context: ctx,
               data: item,
-              positions: {
-                x: xp,
-                y: yp,
-                w,
-                h,
-              },
             });
           }
+          if (isHighlight) {
+            this.itemHighlight({
+              data: item,
+            }, overlayCtx);
+          }
         }
-
-        item.xp = xp;
-        item.yp = yp;
-        item.w = w;
-        item.h = h;
       }
     });
   }
@@ -190,9 +261,9 @@ class HeatMap {
    * @param context           canvas context
    * @param data              series value data (model.store.js addData return value)
    */
-  drawValueLabels({ context, data, positions }) {
+  drawValueLabels({ context, data }) {
     const { fontSize, textColor, align, formatter, decimalPoint } = this.showValue;
-    const { x, y, w, h } = positions;
+    const { xp: x, yp: y, w, h, o: value } = data;
     const ctx = context;
 
     ctx.save();
@@ -204,8 +275,6 @@ class HeatMap {
     ctx.textBaseline = 'middle';
     ctx.textAlign = align !== 'center' ? 'left' : 'center';
 
-    const value = data.o;
-
     let formattedTxt;
     if (formatter) {
       formattedTxt = formatter(value);
@@ -295,31 +364,36 @@ class HeatMap {
     const h = gdata.h;
     const cId = gdata.cId;
 
-    const isShow = this.colorAxis.find(({ id }) => id === cId)?.show;
-
+    let isShow;
+    if (this.isGradient) {
+      const { min, max } = this.valueOpt;
+      const ratio = convertToPercent(gdata.o - min, max - min);
+      const { start, end } = this.colorState[0];
+      isShow = (start <= ratio && ratio <= end) || gdata.o === -1;
+    } else {
+      isShow = this.colorState.find(({ id }) => id === cId)?.show;
+    }
     ctx.save();
+    ctx.shadowOffsetX = 2;
+    ctx.shadowOffsetY = 2;
+    ctx.shadowBlur = 4;
+
     if (x !== null && y !== null && isShow) {
       const color = gdata.dataColor;
-      ctx.strokeStyle = Util.colorStringToRgba(color, 1);
-      ctx.fillStyle = Util.colorStringToRgba(color, this.highlight.maxShadowOpacity);
-      ctx.shadowColor = color;
-      this.drawItem(ctx, x, y, w, h);
+      ctx.shadowColor = Util.colorStringToRgba('#605F5F');
+      ctx.strokeStyle = Util.colorStringToRgba(color);
+      ctx.fillStyle = Util.colorStringToRgba(color);
+      this.drawItem(ctx, x - 2, y - 2, w + 4, h + 4);
+
+      ctx.restore();
 
       if (this.showValue.use) {
         this.drawValueLabels({
           context: ctx,
           data: gdata,
-          positions: {
-            x,
-            y,
-            w,
-            h,
-          },
         });
       }
     }
-
-    ctx.restore();
   }
 
   /**

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

@@ -142,6 +142,7 @@ export const HEAT_MAP_OPTION = {
   show: true,
   highlight: {
     maxShadowOpacity: 0.4,
+    brightness: 150,
   },
   xAxisIndex: 0,
   yAxisIndex: 0,

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

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

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

@@ -418,7 +418,7 @@ const modules = {
   },
 
   getSeriesValueOptForHeatMap(series) {
-    const data = series.data;
+    const { data, colorState, isGradient } = series;
     const colorOpt = this.options.heatMapColor;
     const categoryCnt = colorOpt.categoryCnt;
     const decimalPoint = colorOpt.decimalPoint;
@@ -441,10 +441,14 @@ const modules = {
       }
     });
 
-    if (isExistError && series.colorAxis.length === categoryCnt) {
-      series.colorAxis.push({
+    if (
+      isExistError
+      && !isGradient
+      && colorState.length === categoryCnt
+    ) {
+      colorState.push({
         id: `color#${categoryCnt}`,
-        value: colorOpt.error,
+        color: colorOpt.error,
         state: 'normal',
         show: true,
       });