evui 3.3.9 → 3.3.12

package/package.json

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

package/src/components/chart/Chart.vue

@@ -20,6 +20,10 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         type: Object,
         default: null,
       },
+      selectedLabel: {
+        type: Object,
+        default: null,
+      },
       options: {
         type: Object,
         default: () => ({}),
@@ -38,6 +42,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
       'dbl-click',
       'drag-select',
       'update:selectedItem',
+      'update:selectedLabel',
     ],
     setup(props) {
       let evChart = {};
@@ -45,7 +50,8 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
 
       const {
         eventListeners,
-        selectInfo,
+        selectItemInfo,
+        selectLabelInfo,
         getNormalizedData,
         getNormalizedOptions,
       } = useModel();
@@ -66,7 +72,8 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
           normalizedData,
           normalizedOptions,
           eventListeners,
-          selectInfo,
+          selectItemInfo,
+          selectLabelInfo,
         );
       };
 
@@ -102,13 +109,15 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         }, { deep: true });
 
         await watch(() => props.selectedItem, (newValue) => {
-          if (!newValue?.seriesID) {
-            return;
-          }
-
           const chartType = props.options?.type;
           evChart.selectItemByData(newValue, chartType);
         }, { deep: true });
+
+        await watch(() => props.selectedLabel, (newValue) => {
+          if (newValue.dataIndex) {
+            evChart.renderWithSelectLabel(newValue.dataIndex);
+          }
+        }, { deep: true });
       });
 
       onBeforeUnmount(() => {

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, defaultSelectInfo) {
+  constructor(target, data, options, listeners, defaultSelectItemInfo, defaultSelectLabelInfo) {
     Object.keys(Model).forEach(key => Object.assign(this, Model[key]));
     Object.assign(this, Title);
     Object.assign(this, Legend);
@@ -61,11 +61,12 @@ class EvChart {
     this.seriesList = {};
     this.lastTip = { pos: null, value: null };
     this.seriesInfo = {
-      charts: { pie: [], bar: [], line: [], scatter: [] },
+      charts: { pie: [], bar: [], line: [], scatter: [], heatMap: [] },
       count: 0,
     };
 
-    this.defaultSelectInfo = defaultSelectInfo;
+    this.defaultSelectItemInfo = defaultSelectItemInfo;
+    this.defaultSelectLabelInfo = defaultSelectLabelInfo;
   }
 
   /**
@@ -92,6 +93,7 @@ class EvChart {
 
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
+    this.initSelectedLabelInfo();
 
     this.drawChart();
 
@@ -146,11 +148,12 @@ class EvChart {
 
   /**
    * Draw each series
+   * @param {any} [hitInfo=undefined]    from mousemove callback (object or undefined)
    *
    * @returns {undefined}
    */
   drawSeries(hitInfo) {
-    const maxTip = this.options.maxTip;
+    const { maxTip, selectLabel, selectItem } = this.options;
 
     const opt = {
       ctx: this.bufferCtx,
@@ -158,6 +161,7 @@ class EvChart {
       labelOffset: this.labelOffset,
       axesSteps: this.axesSteps,
       maxTipOpt: { background: maxTip.background, color: maxTip.color },
+      selectLabel: { option: selectLabel, selected: this.defaultSelectLabelInfo },
     };
 
     let showIndex = 0;
@@ -177,37 +181,76 @@ class EvChart {
       for (let jx = 0; jx < chartTypeSet.length; jx++) {
         const series = this.seriesList[chartTypeSet[jx]];
 
-        if (chartType === 'line' || chartType === 'scatter') {
-          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.defaultSelectInfo?.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;
         }
       }
     }
   }
 
   /**
-   * Draw Tip with hitInfo and defaultSelectInfo
+   * Draw Tip with hitInfo and defaultSelectItemInfo
    * @param hitInfo
    */
   drawTip(hitInfo) {
@@ -221,8 +264,8 @@ class EvChart {
       tipLocationInfo = hitInfo;
     } else if (this.lastHitInfo) {
       tipLocationInfo = this.lastHitInfo;
-    } else if (this.defaultSelectInfo) {
-      tipLocationInfo = this.getItem(this.defaultSelectInfo, false);
+    } else if (this.defaultSelectItemInfo) {
+      tipLocationInfo = this.getItem(this.defaultSelectItemInfo, false);
     } else {
       tipLocationInfo = null;
     }
@@ -281,11 +324,21 @@ class EvChart {
    */
   drawAxis(hitInfo) {
     this.axesX.forEach((axis, index) => {
-      axis.draw(this.chartRect, this.labelOffset, this.axesSteps.x[index], hitInfo);
+      axis.draw(
+        this.chartRect,
+        this.labelOffset,
+        this.axesSteps.x[index],
+        hitInfo,
+        this.defaultSelectLabelInfo);
     });
 
     this.axesY.forEach((axis, index) => {
-      axis.draw(this.chartRect, this.labelOffset, this.axesSteps.y[index]);
+      axis.draw(
+        this.chartRect,
+        this.labelOffset,
+        this.axesSteps.y[index],
+        hitInfo,
+        this.defaultSelectLabelInfo);
     });
   }
 
@@ -545,6 +598,7 @@ class EvChart {
           bar: [],
           line: [],
           scatter: [],
+          heatMap: [],
         },
         count: 0,
       };
@@ -604,8 +658,9 @@ class EvChart {
     this.axesY = this.createAxes('y', options.axesY);
     this.axesRange = this.getAxesRange();
     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.bar.js

@@ -131,7 +131,13 @@ class Bar {
       }
 
       const barColor = item.dataColor || this.color;
-      const isDownplay = this.state === 'downplay';
+
+      const selectLabelOption = param.selectLabel.option;
+      const selectedLabel = param.selectLabel.selected ?? { dataIndex: [] };
+
+      const isDownplay = selectLabelOption.use && selectLabelOption.useSeriesOpacity
+          ? selectedLabel.dataIndex.length && !selectedLabel.dataIndex.includes(index)
+          : this.state === 'downplay';
 
       if (typeof barColor !== 'string') {
         ctx.fillStyle = Canvas.createGradient(

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

@@ -0,0 +1,213 @@
+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';
+
+class HeatMap {
+  constructor(sId, opt, sIdx) {
+    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.sId = sId;
+    this.data = [];
+    this.spaces = opt.spaces || { x: null, y: null };
+    this.size = {
+      w: 0,
+      h: 0,
+    };
+    this.valueOpt = {
+      max: 0,
+      interval: 0,
+    };
+    this.type = 'heatMap';
+  }
+
+  /**
+   * create series color axis
+   * @param colorOpt
+   * @returns {*[]}
+   */
+  createColorAxis(colorOpt) {
+    const colorAxis = [];
+    const { min, max, categoryCnt } = colorOpt;
+
+    const minColor = min.includes('#') ? Util.hexToRgb(min) : min;
+    const maxColor = max.includes('#') ? Util.hexToRgb(max) : max;
+
+    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,
+       });
+    }
+
+    return colorAxis;
+  }
+
+  getColorIndex(value) {
+    const existError = this.valueOpt.existError;
+    const maxIndex = this.colorAxis.length;
+    if (value < 0) {
+      return maxIndex - 1;
+    }
+
+    const colorIndex = Math.floor(value / this.valueOpt.interval);
+    if (colorIndex >= maxIndex) {
+      return existError ? maxIndex - 2 : maxIndex - 1;
+    }
+
+    return colorIndex;
+  }
+
+  drawItem(ctx, xp, yp) {
+    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);
+    ctx.closePath();
+    ctx.stroke();
+  }
+
+  draw(param) {
+    if (!this.show) {
+      return;
+    }
+
+    const { ctx, chartRect, labelOffset, axesSteps } = param;
+
+    const minmaxX = axesSteps.x[this.xAxisIndex];
+    const minmaxY = axesSteps.y[this.yAxisIndex];
+
+    const xArea = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
+    const yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
+
+    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.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) {
+        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);
+        }
+      }
+    });
+  }
+
+  /**
+   *Returns items in range
+   * @param {object} params  range values
+   *
+   * @returns {array}
+   */
+  findItems({ xsp, ysp, width, height }) {
+    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));
+  }
+
+  /**
+   * Draw item highlight
+   * @param {object}   item       object for drawing series data
+   * @param {object}   context    canvas context
+   *
+   * @returns {undefined}
+   */
+  itemHighlight(item, context) {
+    const gdata = item.data;
+    const ctx = context;
+
+    const x = gdata.xp;
+    const y = gdata.yp;
+
+    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.restore();
+  }
+
+  /**
+   * Find graph item for tooltip
+   * @param {array}  offset       mouse position
+   *
+   * @returns {object} graph item
+   */
+  findGraphData(offset) {
+    const xp = offset[0];
+    const yp = offset[1];
+    const item = {
+      data: null,
+      hit: false,
+      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;
+
+      return (x - wSize <= xp)
+        && (xp <= x)
+        && (y <= yp)
+        && (yp <= y + hSize);
+    });
+
+    if (foundItem) {
+      item.data = foundItem;
+      item.color = foundItem.dataColor;
+      item.hit = true;
+    }
+
+    return item;
+  }
+}
+
+export default HeatMap;

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);
+          }
         }
       });
     }

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

@@ -27,7 +27,6 @@ class Pie {
     this.doughnutHoleSize = 0;
     this.startAngle = 0;
     this.endAngle = 0;
-    this.slice = null;
     this.state = null;
     this.ctx = null;
     this.isSelect = false;
@@ -71,8 +70,6 @@ class Pie {
     }
 
     ctx.closePath();
-
-    this.slice = slice;
     this.ctx = ctx;
   }
 
@@ -84,8 +81,19 @@ class Pie {
    */
   findGraphData([offsetX, offsetY]) {
     const item = { data: null, hit: false, color: null, index: -1 };
-
-    if (this.show && this.ctx?.isPointInPath(this.slice, offsetX, offsetY)) {
+    const {
+      radius,
+      startAngle,
+      endAngle,
+      centerX,
+      centerY,
+    } = this;
+
+    const distance = Math.sqrt((offsetX - centerX) ** 2 + (offsetY - centerY) ** 2);
+    const radian = (2.5 * Math.PI) - Math.atan2((offsetX - centerX), (offsetY - centerY));
+    const isPointInPath = radius > distance && radian >= startAngle && radian <= endAngle;
+
+    if (this.show && isPointInPath) {
       item.type = this.type;
       item.data = this.data;
       item.hit = true;

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;
     }