evui 3.3.8 → 3.3.11

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

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) {
@@ -45,29 +51,30 @@ const modules = {
             selArgs.text = numberWithComma(selArgs.value);
           }
 
-          this.drawTextTip({ opt: selTipOpt, tipType: 'sel', isSamePos, ...selArgs });
+          this.drawTextTip({ opt: selTipOpt, tipType: 'sel', seriesOpt: seriesInfo, isSamePos, ...selArgs });
         }
 
         if (selTipOpt.showIndicator) {
-          this.drawFixedIndicator({ opt: selTipOpt, ...selArgs });
+          this.drawFixedIndicator({ opt: selTipOpt, seriesOpt: seriesInfo, ...selArgs });
         }
       }
 
-      if (tipLocationInfo && tipLocationInfo.label !== null) {
+      if (tipLocationInfo && tipLocationInfo?.label && tipLocationInfo?.label === 0) {
         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);
+      const seriesInfo = this.seriesList[maxSID];
+      maxArgs = this.calculateTipInfo(seriesInfo, 'max', null);
 
       if (maxTipOpt.use && maxArgs) {
         maxArgs.text = numberWithComma(maxArgs.value);
-        this.drawTextTip({ opt: maxTipOpt, tipType: 'max', ...maxArgs });
+        this.drawTextTip({ opt: maxTipOpt, tipType: 'max', seriesOpt: seriesInfo, ...maxArgs });
 
         if (maxTipOpt.showIndicator) {
-          this.drawFixedIndicator({ opt: maxTipOpt, ...maxArgs });
+          this.drawFixedIndicator({ opt: maxTipOpt, seriesOpt: seriesInfo, ...maxArgs });
         }
       }
     }
@@ -76,7 +83,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
@@ -169,6 +177,14 @@ const modules = {
         xArea - size.comboOffset,
         xsp + (size.comboOffset / 2),
       );
+    } else if (type === 'scatter') {
+      dp = Canvas.calculateX(
+        ldata,
+        graphX.graphMin,
+        graphX.graphMax,
+        xArea,
+        xsp,
+      );
     }
 
     const sizeObj = { xArea, yArea, graphX, graphY, xsp, xep, ysp };
@@ -179,8 +195,14 @@ const modules = {
   drawFixedIndicator(param) {
     const isHorizontal = !!this.options.horizontal;
     const ctx = this.bufferCtx;
-    const { graphX, graphY, xArea, yArea, xsp, ysp, dp, type, value, opt } = param;
-    const offset = type === 'bar' ? 0 : 3;
+    const { graphX, graphY, xArea, yArea, xsp, ysp, dp, type, value, opt, seriesOpt } = param;
+    let offset = 0;
+
+    if (type === 'line') {
+      offset += 3;
+    } else if (type === 'scatter') {
+      offset += seriesOpt?.pointSize ?? 0;
+    }
 
     let gp;
 
@@ -220,6 +242,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
@@ -230,12 +367,20 @@ const modules = {
     const isHorizontal = !!this.options.horizontal;
     const ctx = this.bufferCtx;
     const { graphX, graphY, xArea, yArea, xsp, xep, ysp } = param;
-    const { dp, value, text, opt, type, tipType, isSamePos } = param;
+    const { dp, value, text, opt, type, tipType, isSamePos, seriesOpt } = param;
 
     const arrowSize = 4;
     const maxTipHeight = 20;
     const borderRadius = 4;
-    const offset = type === 'bar' ? 4 : 6;
+
+    let offset = 1;
+    if (type === 'line') {
+      offset += 6;
+    } else if (type === 'scatter') {
+      offset += seriesOpt?.pointSize;
+    } else if (type === 'bar') {
+      offset += 4;
+    }
 
     let gp;
     let tdp = dp;

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

@@ -59,6 +59,7 @@ export const BAR_OPTION = {
     fontSize: 12,
     textColor: '#000000',
     formatter: null,
+    decimalPoint: 0,
   },
 };
 
@@ -70,6 +71,12 @@ export const PIE_OPTION = {
     color: '#FFFFFF',
     lineWidth: 2,
   },
+  showValue: {
+    use: false,
+    fontSize: 12,
+    textColor: '#000000',
+    formatter: null,
+  },
 };
 
 export const AXIS_OPTION = {
@@ -121,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;

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

@@ -1,5 +1,6 @@
 import { reverse } from 'lodash-es';
 import Util from '../helpers/helpers.util';
+import { TIME_INTERVALS } from '../helpers/helpers.constant';
 
 const modules = {
   /**
@@ -30,6 +31,17 @@ const modules = {
               series.minMax = this.getSeriesMinMax(series.data);
             }
           });
+        } else if (typeKey === 'heatMap') {
+          seriesIDs.forEach((seriesID) => {
+            const series = this.seriesList[seriesID];
+            const sData = data[seriesID];
+
+            if (series && sData) {
+              series.data = this.addSeriesDSForHeatMap(sData);
+              series.minMax = this.getSeriesMinMaxForHeatMap(series.data, series.spaces);
+              series.valueOpt = this.getSeriesValueOptForHeatMap(series);
+            }
+          });
         } else {
           seriesIDs.forEach((seriesID) => {
             const series = this.seriesList[seriesID];
@@ -286,6 +298,24 @@ const modules = {
     });
   },
 
+  /**
+   * Take data to create data for each series
+   * @param {array} data data array for each series
+   * @returns {array} data info added position and etc
+   */
+  addSeriesDSForHeatMap(data) {
+    return data.map(item => ({
+      x: item.x,
+      y: item.y,
+      o: item.value,
+      xp: null,
+      yp: null,
+      dataColor: null,
+      value: item.value,
+      cId: null,
+    }));
+  },
+
   /**
    * Take data to create data object for graph
    * @param {object}  gdata    graph data (y-axis value for vertical chart)
@@ -384,6 +414,96 @@ 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 categoryCnt = colorOpt.categoryCnt;
+
+    let maxValue = 0;
+    let isExistError = false;
+    data.forEach(({ value }) => {
+      if (maxValue < value) {
+        maxValue = value;
+      }
+      if (value < 0) {
+        isExistError = true;
+      }
+    });
+    const valueInterval = Math.ceil(maxValue / categoryCnt);
+    if (isExistError && colorAxis.length === categoryCnt) {
+      colorAxis.push({
+        id: `color#${categoryCnt}`,
+        value: colorOpt.error,
+        state: 'normal',
+        show: true,
+      });
+    }
+    return {
+      max: maxValue,
+      interval: valueInterval,
+      existError: isExistError,
+    };
+  },
+
   /**
    * Get graph items for each series by label index
    * @param {number} labelIndex  label index
@@ -452,8 +572,14 @@ const modules = {
 
   getItem({ seriesID, dataIndex }, useApproximate = false) {
     const dataInfo = this.getDataByValues(seriesID, dataIndex);
+
+    if (!dataInfo || !dataInfo?.xp || !dataInfo?.yp) {
+      return null;
+    }
+
     return this.getItemByPosition([dataInfo.xp, dataInfo.yp], useApproximate);
   },
+
   /**
    *
    * @param seriesID
@@ -547,6 +673,42 @@ const modules = {
     };
   },
 
+  /**
+   * Find label info by position x and y
+   * @param {array}   offset          position x and y
+   *
+   * @returns {object} clicked label information
+   */
+  getLabelInfoByPosition(offset) {
+    const [x, y] = offset;
+    const aPos = {
+      x1: this.chartRect.x1 + this.labelOffset.left,
+      x2: this.chartRect.x2 - this.labelOffset.right,
+      y1: this.chartRect.y1 + this.labelOffset.top,
+      y2: this.chartRect.y2 - this.labelOffset.bottom,
+    };
+
+    const scale = this.options.horizontal ? this.axesY[0] : this.axesX[0];
+    const startPoint = aPos[scale.units.rectStart];
+    const endPoint = aPos[scale.units.rectEnd];
+
+    let labelIndex;
+    let hitInfo;
+    if (scale.labels) {
+      const labelGap = (endPoint - startPoint) / scale.labels.length;
+      const index = Math.floor(((this.options.horizontal ? y : x) - startPoint) / labelGap);
+      labelIndex = scale.labels.length > index ? index : -1;
+    } else {
+      hitInfo = this.getItemByPosition(offset, false);
+      labelIndex = hitInfo.maxIndex;
+    }
+
+    return {
+      labelIndex,
+      hitInfo,
+    };
+  },
+
   /**
    * Create min/max information for all of data
    * @property seriesList
@@ -578,7 +740,8 @@ const modules = {
 
         if (smm && series.show) {
           if (!isHorizontal) {
-            if (smm.minX && ((minmax.x[axisX].min === null || (smm.minX < minmax.x[axisX].min)))) {
+            if (smm.minX !== null
+                && ((minmax.x[axisX].min === null || (smm.minX < minmax.x[axisX].min)))) {
               minmax.x[axisX].min = smm.minX;
             }
             if (minmax.y[axisY].min === null || (smm.minY < minmax.y[axisY].min)) {
@@ -588,7 +751,8 @@ const modules = {
             if (minmax.x[axisX].min === null || (smm.minX < minmax.x[axisX].min)) {
               minmax.x[axisX].min = smm.minX;
             }
-            if (smm.minY && (minmax.y[axisY].min === null || (smm.minY < minmax.y[axisY].min))) {
+            if (smm.minY !== null
+                && (minmax.y[axisY].min === null || (smm.minY < minmax.y[axisY].min))) {
               minmax.y[axisY].min = smm.minY;
             }
           }