evui 3.3.11 → 3.3.14

package/package.json

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

package/src/components/chart/Chart.vue

@@ -24,6 +24,10 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         type: Object,
         default: null,
       },
+      selectedSeries: {
+        type: Object,
+        default: null,
+      },
       options: {
         type: Object,
         default: () => ({}),
@@ -43,6 +47,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
       'drag-select',
       'update:selectedItem',
       'update:selectedLabel',
+      'update:selectedSeries',
     ],
     setup(props) {
       let evChart = {};
@@ -52,6 +57,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         eventListeners,
         selectItemInfo,
         selectLabelInfo,
+        selectSeriesInfo,
         getNormalizedData,
         getNormalizedOptions,
       } = useModel();
@@ -67,13 +73,20 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
       );
 
       const createChart = () => {
+        let selected;
+        if (normalizedOptions.selectLabel.use) {
+          selected = selectLabelInfo;
+        } else if (normalizedOptions.selectSeries.use) {
+          selected = selectSeriesInfo;
+        }
+
         evChart = new EvChart(
           wrapper.value,
           normalizedData,
           normalizedOptions,
           eventListeners,
           selectItemInfo,
-          selectLabelInfo,
+          selected,
         );
       };
 
@@ -115,7 +128,13 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
 
         await watch(() => props.selectedLabel, (newValue) => {
           if (newValue.dataIndex) {
-            evChart.renderWithSelectLabel(newValue.dataIndex);
+            evChart.renderWithSelected(newValue.dataIndex);
+          }
+        }, { deep: true });
+
+        await watch(() => props.selectedSeries, (newValue) => {
+          if (newValue.seriesId) {
+            evChart.renderWithSelected(newValue.seriesId);
           }
         }, { deep: true });
       });

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

@@ -14,7 +14,7 @@ import Pie from './plugins/plugins.pie';
 import Tip from './element/element.tip';
 
 class EvChart {
-  constructor(target, data, options, listeners, defaultSelectItemInfo, defaultSelectLabelInfo) {
+  constructor(target, data, options, listeners, defaultSelectItemInfo, defaultSelectInfo) {
     Object.keys(Model).forEach(key => Object.assign(this, Model[key]));
     Object.assign(this, Title);
     Object.assign(this, Legend);
@@ -66,7 +66,7 @@ class EvChart {
     };
 
     this.defaultSelectItemInfo = defaultSelectItemInfo;
-    this.defaultSelectLabelInfo = defaultSelectLabelInfo;
+    this.defaultSelectInfo = defaultSelectInfo;
   }
 
   /**
@@ -93,7 +93,7 @@ class EvChart {
 
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
-    this.initSelectedLabelInfo();
+    this.initSelectedInfo();
 
     this.drawChart();
 
@@ -153,7 +153,7 @@ class EvChart {
    * @returns {undefined}
    */
   drawSeries(hitInfo) {
-    const { maxTip, selectLabel, selectItem } = this.options;
+    const { maxTip, selectLabel, selectItem, selectSeries } = this.options;
 
     const opt = {
       ctx: this.bufferCtx,
@@ -161,7 +161,8 @@ class EvChart {
       labelOffset: this.labelOffset,
       axesSteps: this.axesSteps,
       maxTipOpt: { background: maxTip.background, color: maxTip.color },
-      selectLabel: { option: selectLabel, selected: this.defaultSelectLabelInfo },
+      selectLabel: { option: selectLabel, selected: this.defaultSelectInfo },
+      selectSeries: { option: selectSeries, selected: this.defaultSelectInfo },
     };
 
     let showIndex = 0;
@@ -282,7 +283,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) {
@@ -329,7 +332,7 @@ class EvChart {
         this.labelOffset,
         this.axesSteps.x[index],
         hitInfo,
-        this.defaultSelectLabelInfo);
+        this.defaultSelectInfo);
     });
 
     this.axesY.forEach((axis, index) => {
@@ -338,7 +341,7 @@ class EvChart {
         this.labelOffset,
         this.axesSteps.y[index],
         hitInfo,
-        this.defaultSelectLabelInfo);
+        this.defaultSelectInfo);
     });
   }
 
@@ -658,7 +661,7 @@ class EvChart {
     this.axesY = this.createAxes('y', options.axesY);
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
-    this.initSelectedLabelInfo();
+    this.initSelectedInfo();
 
     this.render(updateInfo?.hitInfo);
 

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

@@ -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;
@@ -165,14 +172,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);
+          }
         }
       });
     }