evui 3.3.10 → 3.3.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.10",
+  "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

@@ -153,7 +153,7 @@ class EvChart {
    * @returns {undefined}
    */
   drawSeries(hitInfo) {
-    const { maxTip, selectLabel } = this.options;
+    const { maxTip, selectLabel, selectItem } = this.options;
 
     const opt = {
       ctx: this.bufferCtx,
@@ -181,30 +181,69 @@ class EvChart {
       for (let jx = 0; jx < chartTypeSet.length; jx++) {
         const series = this.seriesList[chartTypeSet[jx]];
 
-        if (chartType === 'line' || chartType === 'scatter' || chartType === 'heatMap') {
-          series.draw(opt);
-        } else if (chartType === 'bar') {
-          const { thickness, borderRadius } = this.options;
-          series.draw({ thickness, borderRadius, showSeriesCount, showIndex, ...opt });
-
-          if (series.show) {
-            showIndex++;
+        switch (chartType) {
+          case 'line':
+          case 'heatMap': {
+            series.draw(opt);
+            break;
           }
-        } else {
-          const selectInfo = hitInfo
-            ?? this.lastHitInfo
-            ?? { sId: this.defaultSelectItemInfo?.seriesID };
-
-          if (this.options.sunburst) {
-            this.drawSunburst(selectInfo);
-          } else {
-            this.drawPie(selectInfo);
+          case 'bar': {
+            const { thickness, borderRadius } = this.options;
+            series.draw({ thickness, borderRadius, showSeriesCount, showIndex, ...opt });
+            if (series.show) {
+              showIndex++;
+            }
+            break;
           }
-
-          if (this.options.doughnutHoleSize > 0) {
-            this.drawDoughnutHole();
+          case 'pie': {
+            const selectInfo = hitInfo
+              ?? this.lastHitInfo
+              ?? { sId: this.defaultSelectItemInfo?.seriesID };
+
+            if (this.options.sunburst) {
+              this.drawSunburst(selectInfo);
+            } else {
+              this.drawPie(selectInfo);
+            }
+
+            if (this.options.doughnutHoleSize > 0) {
+              this.drawDoughnutHole();
+            }
+            break;
+          }
+          case 'scatter': {
+            if (selectItem.use && selectItem.useSeriesOpacity) {
+              if (hitInfo) {
+                if (hitInfo?.maxIndex || hitInfo?.maxIndex === 0) {
+                  opt.selectInfo = {
+                    seriesID: hitInfo.sId,
+                    dataIndex: hitInfo.maxIndex,
+                  };
+                } else {
+                  opt.selectInfo = null;
+                }
+              } else if (this.lastHitInfo?.maxIndex || this.lastHitInfo?.maxIndex === 0) {
+                opt.selectInfo = {
+                  seriesID: this.lastHitInfo.sId,
+                  dataIndex: this.lastHitInfo.maxIndex,
+                };
+              } else if (this.defaultSelectItemInfo?.dataIndex
+                || this.defaultSelectItemInfo?.dataIndex === 0) {
+                opt.selectInfo = {
+                  seriesID: this.defaultSelectItemInfo.seriesID,
+                  dataIndex: this.defaultSelectItemInfo.dataIndex,
+                };
+              } else {
+                opt.selectInfo = null;
+              }
+            }
+
+            series.draw(opt);
+            break;
+          }
+          default: {
+            break;
           }
-          break;
         }
       }
     }
@@ -243,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) {
@@ -621,7 +662,7 @@ class EvChart {
     this.labelOffset = this.getLabelOffset();
     this.initSelectedLabelInfo();
 
-    this.render();
+    this.render(updateInfo?.hitInfo);
 
     const isDragMove = this.dragInfo && this.drawSelectionArea;
     if (isDragMove) {

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.ceil(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

@@ -44,15 +44,22 @@ class Line {
       return;
     }
 
-    const { ctx, chartRect, labelOffset, axesSteps } = param;
+    const { ctx, chartRect, labelOffset, axesSteps, selectLabel } = param;
     const extent = this.extent[this.state];
-
-    const fillOpacity = this.fillOpacity * extent.opacity;
+    const selectLabelOption = selectLabel.option;
+    const selectedLabel = selectLabel.selected;
+    const isExistSelectedLabel = selectLabelOption.use
+      && selectLabelOption.useSeriesOpacity
+      && selectedLabel.dataIndex?.length > 0;
+    const downplayOpacity = this.extent.downplay.opacity;
+
+    const fillOpacity = isExistSelectedLabel
+      ? this.fillOpacity * downplayOpacity : this.fillOpacity * extent.opacity;
     const lineWidth = this.lineWidth * extent.lineWidth;
 
     const getOpacity = (colorStr) => {
       const noneDownplayOpacity = colorStr.includes('rgba') ? Util.getOpacity(colorStr) : 1;
-      return this.state === 'downplay' ? 0.1 : noneDownplayOpacity;
+      return this.state === 'downplay' || isExistSelectedLabel ? 0.1 : noneDownplayOpacity;
     };
 
     const mainColor = this.color;
@@ -140,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);
 
@@ -165,14 +174,18 @@ class Line {
 
       ctx.fill();
     }
-
-    if (this.point) {
+    if (this.point || isExistSelectedLabel) {
       ctx.strokeStyle = Util.colorStringToRgba(mainColor, mainColorOpacity);
-      ctx.fillStyle = Util.colorStringToRgba(pointFillColor, pointFillColorOpacity);
+      const focusStyle = Util.colorStringToRgba(pointFillColor, 1);
+      const blurStyle = Util.colorStringToRgba(pointFillColor, pointFillColorOpacity);
 
-      this.data.forEach((curr) => {
+      this.data.forEach((curr, i) => {
         if (curr.xp !== null && curr.yp !== null) {
-          Canvas.drawPoint(ctx, this.pointStyle, this.pointSize, curr.xp, curr.yp);
+          ctx.fillStyle = isExistSelectedLabel && selectedLabel.dataIndex.includes(i)
+            ? focusStyle : blurStyle;
+          if (this.point || selectedLabel.dataIndex.includes(i)) {
+            Canvas.drawPoint(ctx, this.pointStyle, this.pointSize, curr.xp, curr.yp);
+          }
         }
       });
     }

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

@@ -69,18 +69,34 @@ class Scatter {
       return item;
     }, this.data[0]);
 
-    const getOpacity = (colorStr) => {
+    const getOpacity = (colorStr, dataIndex) => {
       const noneDownplayOpacity = colorStr.includes('rgba') ? Util.getOpacity(colorStr) : 1;
-      return this.state === 'downplay' ? 0.1 : noneDownplayOpacity;
+      let resultOpacity = noneDownplayOpacity;
+
+      const { selectInfo } = param;
+      if (selectInfo) {
+        const isSelectedData = selectInfo?.seriesID === this.sId
+          && selectInfo?.dataIndex === dataIndex;
+
+        if (isSelectedData) {
+          resultOpacity = noneDownplayOpacity;
+        } else {
+          resultOpacity = 0.1;
+        }
+      } else {
+        resultOpacity = this.state === 'downplay' ? 0.1 : noneDownplayOpacity;
+      }
+
+      return resultOpacity;
     };
 
-    this.data.forEach((curr) => {
+    this.data.forEach((curr, idx) => {
       if (curr.xp !== null && curr.yp !== null) {
         const color = curr.dataColor || this.color;
-        ctx.strokeStyle = Util.colorStringToRgba(color, getOpacity(color));
+        ctx.strokeStyle = Util.colorStringToRgba(color, getOpacity(color, idx));
 
         const pointFillColor = curr.dataColor || this.pointFill;
-        ctx.fillStyle = Util.colorStringToRgba(pointFillColor, getOpacity(pointFillColor));
+        ctx.fillStyle = Util.colorStringToRgba(pointFillColor, getOpacity(pointFillColor, idx));
 
         Canvas.drawPoint(ctx, this.pointStyle, this.pointSize, curr.xp, curr.yp);
       }
@@ -148,11 +164,11 @@ class Scatter {
   findGraphData(offset) {
     const xp = offset[0];
     const yp = offset[1];
-    const item = { data: null, hit: false, color: this.color };
+    const item = { data: null, hit: false, color: this.color, index: null };
     const pointSize = this.pointSize;
     const gdata = this.data;
 
-    const foundItem = gdata.find((data) => {
+    const targetIndex = gdata.findIndex((data) => {
       const x = data.xp;
       const y = data.yp;
 
@@ -162,8 +178,9 @@ class Scatter {
         && (yp <= y + pointSize);
     });
 
-    if (foundItem) {
-      item.data = foundItem;
+    if (targetIndex > -1) {
+      item.data = gdata[targetIndex];
+      item.index = targetIndex;
       item.hit = true;
     }