evui 3.3.9 → 3.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.9",
+  "version": "3.3.10",
   "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 } = 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,7 +181,7 @@ class EvChart {
       for (let jx = 0; jx < chartTypeSet.length; jx++) {
         const series = this.seriesList[chartTypeSet[jx]];
 
-        if (chartType === 'line' || chartType === 'scatter') {
+        if (chartType === 'line' || chartType === 'scatter' || chartType === 'heatMap') {
           series.draw(opt);
         } else if (chartType === 'bar') {
           const { thickness, borderRadius } = this.options;
@@ -189,7 +193,7 @@ class EvChart {
         } else {
           const selectInfo = hitInfo
             ?? this.lastHitInfo
-            ?? { sId: this.defaultSelectInfo?.seriesID };
+            ?? { sId: this.defaultSelectItemInfo?.seriesID };
 
           if (this.options.sunburst) {
             this.drawSunburst(selectInfo);
@@ -207,7 +211,7 @@ class EvChart {
   }
 
   /**
-   * Draw Tip with hitInfo and defaultSelectInfo
+   * Draw Tip with hitInfo and defaultSelectItemInfo
    * @param hitInfo
    */
   drawTip(hitInfo) {
@@ -221,8 +225,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 +285,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 +559,7 @@ class EvChart {
           bar: [],
           line: [],
           scatter: [],
+          heatMap: [],
         },
         count: 0,
       };
@@ -604,6 +619,7 @@ class EvChart {
     this.axesY = this.createAxes('y', options.axesY);
     this.axesRange = this.getAxesRange();
     this.labelOffset = this.getLabelOffset();
+    this.initSelectedLabelInfo();
 
     this.render();
 

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

@@ -14,9 +14,15 @@ const modules = {
     const isHorizontal = !!opt.horizontal;
     const maxTipOpt = opt.maxTip;
     const selTipOpt = opt.selectItem;
+    const labelTipOpt = opt.selectLabel;
     let maxArgs;
+    let isExistSelectedLabel;
 
-    if (selTipOpt.use && tipLocationInfo) {
+    if (labelTipOpt.use && labelTipOpt.showTip) {
+      isExistSelectedLabel = this.drawLabelTip();
+    }
+
+    if (selTipOpt.use && tipLocationInfo && !isExistSelectedLabel) {
       const seriesInfo = this.seriesList[tipLocationInfo?.sId];
 
       if (!seriesInfo?.show) {
@@ -57,8 +63,7 @@ const modules = {
         this.lastHitInfo = tipLocationInfo;
       }
     }
-
-    if (maxTipOpt.use) {
+    if (maxTipOpt.use && !isExistSelectedLabel) {
       const maxSID = this.minMax[isHorizontal ? 'x' : 'y'][0].maxSID;
       maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
 
@@ -76,7 +81,8 @@ const modules = {
   /**
    * Calculate tip size and contents
    * @param {object} series     series information (max series or selected series)
-   * @param {string} tipType    tip type [sel = user select, max = max value]
+   * @param {string} tipType    tip type
+   * [sel = user select series, label = user select label, max = max value]
    * @param {object} hitInfo    mouse hit information
    *
    * @returns {object} size and tip contents
@@ -220,6 +226,121 @@ const modules = {
     ctx.closePath();
   },
 
+  /**
+   * Draw Selected Label Tip
+   * @returns {boolean} Whether drew at least one tip
+   */
+  drawLabelTip() {
+    const opt = this.options;
+    const isHorizontal = !!opt.horizontal;
+    const labelTipOpt = opt.selectLabel;
+    const { dataIndex, data } = this.defaultSelectLabelInfo;
+    let drawTip = false;
+
+    if (dataIndex.length) {
+      drawTip = true;
+
+      const chartRect = this.chartRect;
+      const labelOffset = this.labelOffset;
+      const aPos = {
+        x1: chartRect.x1 + labelOffset.left,
+        x2: chartRect.x2 - labelOffset.right,
+        y1: chartRect.y1 + labelOffset.top,
+        y2: chartRect.y2 - labelOffset.bottom,
+      };
+
+      const labelAxes = this.options.horizontal ? this.axesY[0] : this.axesX[0];
+      const labelStartPoint = aPos[labelAxes.units.rectStart];
+      const labelEndPoint = aPos[labelAxes.units.rectEnd];
+      const labelGap = (labelEndPoint - labelStartPoint) / labelAxes.labels.length;
+
+      const valueAxes = this.options.horizontal ? this.axesX[0] : this.axesY[0];
+      const valueStartPoint = aPos[valueAxes.units.rectStart];
+
+      const offset = this.options.type === 'bar' ? 4 : 6;
+      const chartWidth = chartRect.chartWidth - (labelOffset.left + labelOffset.right);
+      const chartHeight = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
+
+      dataIndex.forEach((idx, i) => {
+        const labelCenter = Math.round(labelStartPoint + (labelGap * idx));
+        let gp;
+        const dp = labelCenter + (labelGap / 2);
+        if (labelTipOpt.fixedPosTop) {
+          if (isHorizontal) {
+            gp = Canvas.calculateX(
+              this.axesRange.x[0].max,
+              this.axesRange.x[0].min,
+              this.axesRange.x[0].max,
+              chartWidth,
+              valueStartPoint);
+            gp += offset;
+          } else {
+            gp = Canvas.calculateY(
+                this.axesRange.y[0].max,
+                this.axesRange.y[0].min,
+                this.axesRange.y[0].max,
+                chartHeight,
+                valueStartPoint);
+            gp -= offset;
+          }
+        } else if (isHorizontal) {
+          const seriesList = Object.keys(data[i] ?? {});
+          const visibleSeries = seriesList.filter(sId => this.seriesList[sId].show);
+          const visibleValue = visibleSeries.map(sId => data[i][sId]);
+          const isExistGrp = seriesList.some(sId => this.seriesList[sId].isExistGrp);
+
+          let maxValue;
+          if (isExistGrp) {
+            maxValue = visibleValue.reduce((acc, v) => acc + v) ?? 0;
+          } else if (visibleValue.length) {
+            maxValue = Math.max(...visibleValue);
+          } else {
+            maxValue = this.axesRange.x[0].max;
+          }
+
+          gp = Canvas.calculateX(
+            maxValue,
+            this.axesRange.x[0].min,
+            this.axesRange.x[0].max,
+            chartWidth,
+            valueStartPoint);
+          gp += offset;
+        } else {
+          const seriesList = Object.keys(data[i] ?? {});
+          const visibleSeries = seriesList.filter(sId => this.seriesList[sId].show);
+          const visibleValue = visibleSeries.map(sId => data[i][sId]);
+          const isExistGrp = seriesList.some(sId => this.seriesList[sId].isExistGrp);
+
+          let maxValue;
+          if (isExistGrp) {
+            maxValue = visibleValue.reduce((acc, v) => acc + v) ?? 0;
+          } else if (visibleValue.length) {
+            maxValue = Math.max(...visibleValue);
+          } else {
+            maxValue = this.axesRange.y[0].max;
+          }
+
+          gp = Canvas.calculateY(
+              maxValue,
+              this.axesRange.y[0].min,
+              this.axesRange.y[0].max,
+              chartHeight,
+              valueStartPoint);
+          gp -= offset;
+        }
+
+        this.showTip({
+          context: this.bufferCtx,
+          x: isHorizontal ? gp : dp,
+          y: isHorizontal ? dp : gp,
+          opt: labelTipOpt,
+          isSamePos: false,
+        });
+      });
+    }
+
+    return drawTip;
+  },
   /**
    * Calculate x, y position to draw text tip
    * @param {object} param     object for drawing text tip

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

@@ -128,6 +128,21 @@ export const PLOT_BAND_OPTION = {
   color: '#FAE59D',
 };
 
+export const HEAT_MAP_OPTION = {
+  ...LINE_OPTION,
+  colorOpt: {
+    min: '#FFFFFF',
+    max: '#0052FF',
+    categoryCnt: 5,
+    border: '#FFFFFF',
+    error: '#FF0000',
+  },
+  spaces: {
+    x: 0,
+    y: 0,
+  },
+};
+
 
 export const TIME_INTERVALS = {
   millisecond: {

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

@@ -3,6 +3,7 @@ import Scatter from '../element/element.scatter';
 import Bar from '../element/element.bar';
 import TimeBar from '../element/element.bar.time';
 import Pie from '../element/element.pie';
+import HeatMap from '../element/element.heatmap';
 
 const modules = {
   /**
@@ -51,6 +52,9 @@ const modules = {
     } else if (type === 'pie') {
       this.seriesInfo.charts.pie.push(id);
       return new Pie(id, opt, index);
+    } else if (type === 'heatMap') {
+      this.seriesInfo.charts.heatMap.push(id);
+      return new HeatMap(id, opt, index);
     }
 
     return false;