evui 3.3.12 → 3.3.13

package/package.json

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

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

@@ -282,7 +282,9 @@ class EvChart {
    */
   createAxes(dir, axes = []) {
     const ctx = this.bufferCtx;
-    const labels = this.data.labels;
+    const labels = this.options.type === 'heatMap'
+      ? this.data.labels[dir]
+      : this.data.labels;
     const options = this.options;
     return axes.map((axis) => {
       switch (axis.type) {

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

@@ -1,36 +1,24 @@
 import { merge } from 'lodash-es';
-import Canvas from '../helpers/helpers.canvas';
 import Util from '../helpers/helpers.util';
-import { COLOR, HEAT_MAP_OPTION } from '../helpers/helpers.constant';
+import { HEAT_MAP_OPTION } from '../helpers/helpers.constant';
 
 class HeatMap {
-  constructor(sId, opt, sIdx) {
+  constructor(sId, opt, colorOpt) {
     const merged = merge({}, HEAT_MAP_OPTION, opt);
       Object.keys(merged).forEach((key) => {
         this[key] = merged[key];
     });
 
-    ['color', 'pointFill', 'fillColor'].forEach((colorProp) => {
-      if (this[colorProp] === undefined) {
-        this[colorProp] = COLOR[sIdx];
-      }
-    });
-
-    this.colorAxis = this.createColorAxis(opt.colorOpt);
-    this.errorColor = opt.colorOpt.error;
-    this.borderColor = opt.colorOpt.border;
+    this.createColorAxis(colorOpt);
 
     this.sId = sId;
     this.data = [];
-    this.spaces = opt.spaces || { x: null, y: null };
+    this.labels = {};
+    this.valueOpt = {};
     this.size = {
       w: 0,
       h: 0,
     };
-    this.valueOpt = {
-      max: 0,
-      interval: 0,
-    };
     this.type = 'heatMap';
   }
 
@@ -41,7 +29,7 @@ class HeatMap {
    */
   createColorAxis(colorOpt) {
     const colorAxis = [];
-    const { min, max, categoryCnt } = colorOpt;
+    const { min, max, categoryCnt, error, stroke } = colorOpt;
 
     const minColor = min.includes('#') ? Util.hexToRgb(min) : min;
     const maxColor = max.includes('#') ? Util.hexToRgb(max) : max;
@@ -66,30 +54,66 @@ class HeatMap {
        });
     }
 
-    return colorAxis;
+    this.colorAxis = colorAxis;
+    this.errorColor = error;
+    this.stroke = stroke;
   }
 
   getColorIndex(value) {
     const existError = this.valueOpt.existError;
-    const maxIndex = this.colorAxis.length;
-    if (value < 0) {
-      return maxIndex - 1;
+    const maxIndex = this.colorAxis.length - 1;
+    if (existError && value < 0) {
+      return maxIndex;
     }
 
     const colorIndex = Math.floor(value / this.valueOpt.interval);
     if (colorIndex >= maxIndex) {
-      return existError ? maxIndex - 2 : maxIndex - 1;
+      return existError ? maxIndex - 1 : maxIndex;
     }
 
     return colorIndex;
   }
 
-  drawItem(ctx, xp, yp) {
+  drawItem(ctx, x, y, w, h) {
     ctx.beginPath();
-    ctx.strokeRect(xp - this.size.w, yp + Math.SQRT2, this.size.w, this.size.h);
-    ctx.fillRect(xp - this.size.w, yp + Math.SQRT2, this.size.w, this.size.h);
+    if (this.stroke.show) {
+      ctx.fillRect(x, y, w, h);
+      ctx.strokeRect(x, y, w, h);
+    } else {
+      const aliasPixel = Util.aliasPixel(1);
+      ctx.fillRect(
+        x,
+        y - aliasPixel,
+        w + aliasPixel,
+        h + aliasPixel,
+      );
+    }
     ctx.closePath();
-    ctx.stroke();
+  }
+
+  calculateXY(dir, value, startPoint) {
+    let point = null;
+
+    if (this.labels[dir] && this.labels[dir].length) {
+      const index = this.labels[dir].findIndex(label => label === value);
+
+      if (index > -1) {
+        point = dir === 'x'
+          ? startPoint + (this.size.w * index)
+          : startPoint - (this.size.h * (index + 1));
+      } else {
+        const timeIndex = this.labels[dir].findIndex(label =>
+          new Date(label).getTime() === new Date(value).getTime(),
+        );
+        if (timeIndex > -1) {
+          point = dir === 'x'
+            ? startPoint + (this.size.w * timeIndex)
+            : startPoint - (this.size.h * (timeIndex + 1));
+        }
+      }
+    }
+
+    return point;
   }
 
   draw(param) {
@@ -97,10 +121,7 @@ class HeatMap {
       return;
     }
 
-    const { ctx, chartRect, labelOffset, axesSteps } = param;
-
-    const minmaxX = axesSteps.x[this.xAxisIndex];
-    const minmaxY = axesSteps.y[this.yAxisIndex];
+    const { ctx, chartRect, labelOffset } = param;
 
     const xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
     const yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
@@ -108,29 +129,128 @@ class HeatMap {
     const xsp = chartRect.x1 + labelOffset.left;
     const ysp = chartRect.y2 - labelOffset.bottom;
 
-    this.size.w = Math.floor(xArea / (this.spaces.x || (minmaxX.graphMax - minmaxX.graphMin)));
-    this.size.h = Math.floor(yArea / (this.spaces.y || (minmaxY.graphMax - minmaxY.graphMin)));
+    this.size.w = xArea / this.labels.x.length;
+    this.size.h = yArea / this.labels.y.length;
 
     this.data.forEach((item) => {
-      item.xp = Canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
-      item.yp = Canvas.calculateY(item.y, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
-
-      const { xp, yp, o: value } = item;
-
-      if (xp !== null && yp !== null) {
+      let xp = this.calculateXY('x', item.x, xsp);
+      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 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) {
-          ctx.strokeStyle = Util.colorStringToRgba(this.borderColor, opacity);
           ctx.fillStyle = Util.colorStringToRgba(item.dataColor, opacity);
-          this.drawItem(ctx, xp, yp);
+          if (this.stroke.show) {
+            const { color, lineWidth } = this.stroke;
+            ctx.strokeStyle = Util.colorStringToRgba(color, opacity);
+            ctx.lineWidth = lineWidth;
+            xp += (lineWidth * 1.5);
+            yp += (lineWidth * 1.5);
+            w -= (lineWidth * 2);
+            h -= (lineWidth * 2);
+          }
+          this.drawItem(ctx, xp, yp, w, h);
+
+          if (this.showValue.use) {
+            this.drawValueLabels({
+              context: ctx,
+              data: item,
+              positions: {
+                x: xp,
+                y: yp,
+                w,
+                h,
+              },
+            });
+          }
         }
+
+        item.xp = xp;
+        item.yp = yp;
+        item.w = w;
+        item.h = h;
       }
     });
   }
 
+  /**
+   * Draw value label if series 'use' of showValue option is true
+   *
+   * @param context           canvas context
+   * @param data              series value data (model.store.js addData return value)
+   */
+  drawValueLabels({ context, data, positions }) {
+    const { fontSize, textColor, align, formatter, decimalPoint } = this.showValue;
+    const { x, y, w, h } = positions;
+    const ctx = context;
+
+    ctx.save();
+    ctx.beginPath();
+
+    ctx.font = `normal normal normal ${fontSize}px Roboto`;
+    ctx.fillStyle = textColor;
+    ctx.lineWidth = 1;
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = align !== 'center' ? 'left' : 'center';
+
+    const value = data.o;
+
+    let formattedTxt;
+    if (formatter) {
+      formattedTxt = formatter(value);
+    }
+
+    if (!formatter || typeof formattedTxt !== 'string') {
+      formattedTxt = Util.labelSignFormat(value, decimalPoint);
+    }
+
+    const vw = Math.round(ctx.measureText(formattedTxt).width);
+    const vh = fontSize;
+    const centerX = x + (w / 2);
+    const centerY = y + (h / 2);
+
+    if (vw >= w || formattedTxt < 0) {
+      return;
+    }
+
+    switch (align) {
+      case 'top': {
+        const xPos = centerX - (vw / 2);
+        const yPos = centerY - (vh / 2);
+        ctx.fillText(formattedTxt, xPos, yPos);
+        break;
+      }
+      case 'right': {
+        const xPos = x + w - vw;
+        ctx.fillText(formattedTxt, xPos, centerY);
+        break;
+      }
+      case 'bottom': {
+        const xPos = centerX - (vw / 2);
+        const yPos = centerY + (vh / 2);
+        ctx.fillText(formattedTxt, xPos, yPos);
+        break;
+      }
+      case 'left':
+        ctx.fillText(formattedTxt, x, centerY);
+        break;
+      default: {
+        const xPos = centerX - (vw / 2);
+        ctx.fillText(formattedTxt, xPos, centerY);
+        break;
+      }
+    }
+
+    ctx.restore();
+  }
+
   /**
    *Returns items in range
    * @param {object} params  range values
@@ -141,9 +261,20 @@ class HeatMap {
     const gdata = this.data;
     const xep = xsp + width;
     const yep = ysp + height;
-    return gdata.filter(seriesData =>
-      (xsp - 1 <= seriesData.xp && seriesData.xp <= xep + 1
-        && ysp - 1 <= seriesData.yp && seriesData.yp <= yep + 1));
+    return gdata.filter(({ xp, yp, w, h }) => {
+      const x1 = xp;
+      const x2 = xp + w;
+      const y1 = yp;
+      const y2 = yp + h;
+
+      return ((x1 <= xsp && x2 >= xsp) && (y1 <= ysp && y2 >= ysp))
+         || ((x1 <= xep && x2 >= xep) && (y1 <= ysp && y2 >= ysp))
+         || ((x1 <= xsp && x2 >= xsp) && (y1 <= yep && y2 >= yep))
+         || ((x1 <= xep && x2 >= xep) && (y1 <= yep && y2 >= yep))
+         || ((x1 >= xsp && x1 <= xep) && (y1 >= ysp && y1 <= yep))
+         || ((x1 >= xsp && x1 <= xep) && (y2 >= ysp && y2 <= yep))
+         || ((x2 >= xsp && x2 <= xep) && (y1 >= ysp && y1 <= yep));
+    });
   }
 
   /**
@@ -159,13 +290,29 @@ class HeatMap {
 
     const x = gdata.xp;
     const y = gdata.yp;
+    const w = gdata.w;
+    const h = gdata.h;
 
     ctx.save();
     if (x !== null && y !== null) {
       const color = gdata.dataColor;
       ctx.strokeStyle = Util.colorStringToRgba(color, 1);
       ctx.fillStyle = Util.colorStringToRgba(color, this.highlight.maxShadowOpacity);
-      this.drawItem(ctx, x, y);
+      ctx.shadowColor = color;
+      this.drawItem(ctx, x, y, w, h);
+
+      if (this.showValue.use) {
+        this.drawValueLabels({
+          context: ctx,
+          data: gdata,
+          positions: {
+            x,
+            y,
+            w,
+            h,
+          },
+        });
+      }
     }
 
     ctx.restore();
@@ -186,16 +333,13 @@ class HeatMap {
       color: null,
       name: null,
     };
-    const wSize = this.size.w;
-    const hSize = this.size.h;
     const gdata = this.data;
 
     const foundItem = gdata.find((data) => {
-      const x = data.xp;
-      const y = data.yp;
+      const { xp: x, yp: y, w: wSize, h: hSize } = data;
 
-      return (x - wSize <= xp)
-        && (xp <= x)
+      return (x <= xp)
+        && (xp <= x + wSize)
         && (y <= yp)
         && (yp <= y + hSize);
     });

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

@@ -147,6 +147,8 @@ class Line {
       if (this.stackIndex) {
         const reversedDataList = this.data.slice().reverse();
         reversedDataList.forEach((curr, ix) => {
+          ctx.beginPath();
+
           x = getXPos(curr.x);
           y = getYPos(curr.b);
 

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

@@ -129,17 +129,19 @@ export const PLOT_BAND_OPTION = {
 };
 
 export const HEAT_MAP_OPTION = {
-  ...LINE_OPTION,
-  colorOpt: {
-    min: '#FFFFFF',
-    max: '#0052FF',
-    categoryCnt: 5,
-    border: '#FFFFFF',
-    error: '#FF0000',
-  },
-  spaces: {
-    x: 0,
-    y: 0,
+  show: true,
+  highlight: {
+    maxShadowOpacity: 0.4,
+  },
+  xAxisIndex: 0,
+  yAxisIndex: 0,
+  showLegend: true,
+  showValue: {
+    use: false,
+    fontSize: 12,
+    textColor: '#000000',
+    formatter: null,
+    decimalPoint: 0,
   },
 };
 

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

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

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

@@ -1,6 +1,5 @@
 import { reverse } from 'lodash-es';
 import Util from '../helpers/helpers.util';
-import { TIME_INTERVALS } from '../helpers/helpers.constant';
 
 const modules = {
   /**
@@ -37,8 +36,9 @@ const modules = {
             const sData = data[seriesID];
 
             if (series && sData) {
+              series.labels = label;
               series.data = this.addSeriesDSForHeatMap(sData);
-              series.minMax = this.getSeriesMinMaxForHeatMap(series.data, series.spaces);
+              series.minMax = this.getSeriesMinMax(series.data);
               series.valueOpt = this.getSeriesValueOptForHeatMap(series);
             }
           });
@@ -301,17 +301,20 @@ const modules = {
   /**
    * Take data to create data for each series
    * @param {array} data data array for each series
+   * @param {object}  label   chart label
+   *
    * @returns {array} data info added position and etc
    */
   addSeriesDSForHeatMap(data) {
-    return data.map(item => ({
-      x: item.x,
-      y: item.y,
-      o: item.value,
+    return data.map(({ x, y, value }) => ({
+      x,
+      y,
+      o: value,
       xp: null,
       yp: null,
+      w: null,
+      h: null,
       dataColor: null,
-      value: item.value,
       cId: null,
     }));
   },
@@ -414,73 +417,14 @@ const modules = {
     return def;
   },
 
-  adjustMinMax(max, min, opt, space) {
-    if ((opt.type === 'time' && opt.categoryMode) || opt.type === 'step') {
-      return {
-        max,
-        min,
-      };
-    }
-
-    let targetMax = max;
-    let targetMin = min;
-    if (targetMax > 0 && opt.interval && space) {
-      if (targetMax < (opt.interval * space)) {
-        targetMax += opt.interval;
-      }
-    }
-
-    let targetInterval = opt.interval;
-    if (opt.type === 'time') {
-      if (typeof targetInterval === 'string') {
-        targetInterval = TIME_INTERVALS[targetInterval].size;
-      } else if (typeof targetInterval === 'object') {
-        targetInterval = targetInterval.time * TIME_INTERVALS[targetInterval.unit].size;
-      }
-    }
-
-    if (!opt.startToZero || targetMin > 0) {
-      const targetSpace = space ? (space - 1) : (targetMax - targetMin);
-      const targetStep = Math.ceil((max - targetMin) / targetSpace);
-        targetMin = targetMin < targetStep ? 0 : targetMin - targetStep;
-    }
-
-    return {
-      max: targetMax,
-      min: targetMin,
-    };
-  },
-  /**
-   * Take series data to create min/max info for each series
-   * @param data
-   * @param spaces
-   * @returns {*|{maxDomain: null, minY: null, minX: null, maxY: null, maxX: null}}
-   */
-  getSeriesMinMaxForHeatMap(data, spaces) {
-    const axesXOption = this.options.axesX[0];
-    const axesYOption = this.options.axesY[0];
-    const seriesMinMax = this.getSeriesMinMax(data);
-
-    const adjustX = this.adjustMinMax(seriesMinMax.maxX, seriesMinMax.minX, axesXOption, spaces.x);
-    seriesMinMax.maxX = adjustX.max;
-    seriesMinMax.minX = adjustX.min;
-
-    const adjustY = this.adjustMinMax(seriesMinMax.maxY, seriesMinMax.minY, axesYOption, spaces.y);
-    seriesMinMax.maxY = adjustY.max;
-    seriesMinMax.minY = adjustY.min;
-
-    return seriesMinMax;
-  },
-
   getSeriesValueOptForHeatMap(series) {
     const data = series.data;
-    const colorOpt = series.colorOpt;
-    const colorAxis = series.colorAxis;
+    const colorOpt = this.options.heatMapColor;
     const categoryCnt = colorOpt.categoryCnt;
 
     let maxValue = 0;
     let isExistError = false;
-    data.forEach(({ value }) => {
+    data.forEach(({ o: value }) => {
       if (maxValue < value) {
         maxValue = value;
       }
@@ -488,18 +432,19 @@ const modules = {
         isExistError = true;
       }
     });
-    const valueInterval = Math.ceil(maxValue / categoryCnt);
-    if (isExistError && colorAxis.length === categoryCnt) {
-      colorAxis.push({
+
+    if (isExistError && series.colorAxis.length === categoryCnt) {
+      series.colorAxis.push({
         id: `color#${categoryCnt}`,
         value: colorOpt.error,
         state: 'normal',
         show: true,
       });
     }
+
     return {
       max: maxValue,
-      interval: valueInterval,
+      interval: Math.ceil(maxValue / categoryCnt),
       existError: isExistError,
     };
   },

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

@@ -56,6 +56,8 @@ const modules = {
           this.setTooltipLayoutPosition(hitInfo, e);
           if (type === 'scatter') {
             this.drawTooltipForScatter(hitInfo, this.tooltipCtx);
+          } else if (type === 'heatMap') {
+            this.drawToolTipForHeatMap(hitInfo, this.tooltipCtx);
           } else {
             this.drawTooltip(hitInfo, this.tooltipCtx);
           }
@@ -112,7 +114,7 @@ const modules = {
           this.render(hitInfo);
         }
 
-        ({ label: args.label, value: args.value, sId: args.seriesId } = hitInfo);
+        ({ label: args.label, value: args.value, sId: args.seriesId, acc: args.acc } = hitInfo);
       }
 
       if (typeof this.listeners['dbl-click'] === 'function') {
@@ -140,6 +142,7 @@ const modules = {
           value: args.value,
           sId: args.seriesId,
           maxIndex: args.dataIndex,
+          acc: args.acc,
         } = hitInfo);
       }
 

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

@@ -80,10 +80,12 @@ const modules = {
     Object.values(seriesList).forEach((series) => {
       if (!series.isExistGrp && series.showLegend) {
         const { colorAxis, valueOpt } = series;
+        const { max, interval, existError } = valueOpt;
         colorAxis.forEach((colorItem, index) => {
-          const maxValue = valueOpt.interval * (index + 1);
-          const minValue = maxValue - valueOpt.interval;
-          const name = valueOpt.existError && index === colorAxis.length - 1
+          const minValue = interval * index;
+          const maxValue = index === colorAxis.length - 1
+            ? max : minValue + interval - 1;
+          const name = existError && index === colorAxis.length - 1
             ? 'error' : `${minValue} - ${maxValue}`;
           this.addLegend({
             cId: colorItem.id,

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

@@ -27,6 +27,11 @@ const modules = {
 
     const chartWidth = centerX - (padding.left + padding.right);
     const chartHeight = centerY - (padding.bottom + padding.top);
+    if ((typeof chartWidth === 'number' && chartWidth < 0)
+      || (typeof chartHeight === 'number' && chartHeight < 0)) {
+      return;
+    }
+
     const innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
     const outerRadius = Math.min(chartWidth, chartHeight);
 
@@ -109,8 +114,14 @@ const modules = {
 
     const centerX = width / 2;
     const centerY = height / 2;
+
     const chartWidth = centerX - (padding.left + padding.right);
     const chartHeight = centerY - (padding.bottom + padding.top);
+    if ((typeof chartWidth === 'number' && chartWidth < 0)
+      || (typeof chartHeight === 'number' && chartHeight < 0)) {
+      return;
+    }
+
     const innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
     const outerRadius = Math.min(chartWidth, chartHeight);
 
@@ -190,8 +201,14 @@ const modules = {
 
     const centerX = width / 2;
     const centerY = height / 2;
+
     const chartWidth = centerX - (padding.left + padding.right);
     const chartHeight = centerY - (padding.bottom + padding.top);
+    if ((typeof chartWidth === 'number' && chartWidth < 0)
+      || (typeof chartHeight === 'number' && chartHeight < 0)) {
+      return;
+    }
+
     const radius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
 
     ctx.save();