evui 3.3.12 → 3.3.15

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

@@ -102,7 +102,8 @@ class Line {
     const getXPos = val => Canvas.calculateX(val, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
     const getYPos = val => Canvas.calculateY(val, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
 
-    this.data.reduce((prev, curr, ix, item) => {
+    // draw line
+    this.data.reduce((prev, curr, ix) => {
       x = getXPos(curr.x);
       y = getYPos(curr.y);
 
@@ -110,22 +111,12 @@ class Line {
         x += Util.aliasPixel(x);
       }
 
-      if (y === null || x === null) {
-        if (ix - 1 > -1) {
-          // draw fill(area) series not stacked
-          if (this.fill && prev.y !== null && !this.stackIndex) {
-            ctx.stroke();
-            ctx.lineTo(prev.xp, endPoint);
-            ctx.lineTo(item[startFillIndex].xp, endPoint);
-
-            ctx.fill();
-            ctx.beginPath();
-          }
-        }
+      if (ix === 0) {
+        ctx.moveTo(x, y);
+      }
 
-        startFillIndex = ix + 1;
-      } else if (ix === 0 || prev.y === null || curr.y === null
-        || prev.x === null || curr.x === null) {
+      const isNullValue = prev.y === null || curr.y === null || prev.x === null || curr.x === null;
+      if (isNullValue) {
         ctx.moveTo(x, y);
       } else {
         ctx.lineTo(x, y);
@@ -139,39 +130,45 @@ class Line {
 
     ctx.stroke();
 
-    const dataLen = this.data.length;
+    // draw fill
+    if (this.fill && this.data.length) {
+      ctx.beginPath();
 
-    if (this.fill && dataLen) {
       ctx.fillStyle = Util.colorStringToRgba(mainColor, fillOpacity);
 
-      if (this.stackIndex) {
-        const reversedDataList = this.data.slice().reverse();
-        reversedDataList.forEach((curr, ix) => {
-          x = getXPos(curr.x);
-          y = getYPos(curr.b);
-
-          const prev = reversedDataList[ix - 1];
-          if (curr.o !== null) {
-            if (prev && prev.o == null) {
-              ctx.moveTo(x, getYPos(curr.b + curr.o));
-            }
-
-            ctx.lineTo(x, y);
-
-            if (ix === reversedDataList.length - 1) {
-              ctx.lineTo(x, getYPos(curr.b + curr.o));
-            }
-          } else if (prev && prev.o) {
-            ctx.lineTo(getXPos(prev.x), getYPos(prev.b + prev.o));
+      this.data.forEach((currData, ix) => {
+        const isEmptyPoint = data => data?.x === null || data?.y === null
+          || data?.x === undefined || data?.y === undefined;
+
+        const nextData = this.data[ix + 1];
+
+        if (isEmptyPoint(currData)) {
+          startFillIndex = ix + 1;
+
+          if (!isEmptyPoint(nextData)) {
+            ctx.moveTo(nextData.xp, nextData.yp);
           }
-        });
-      } else if (startFillIndex < dataLen) {
-        ctx.lineTo(this.data[dataLen - 1].xp, endPoint);
-        ctx.lineTo(this.data[startFillIndex].xp, endPoint);
-      }
+
+          return;
+        }
+
+        ctx.lineTo(currData.xp, currData.yp);
+
+        if (isEmptyPoint(nextData)) {
+          for (let jx = ix; jx >= startFillIndex; jx--) {
+            const prevData = this.data[jx];
+            const xp = prevData.xp;
+            const bp = getYPos(prevData.b) ?? endPoint;
+            ctx.lineTo(xp, bp);
+          }
+
+          ctx.closePath();
+        }
+      });
 
       ctx.fill();
     }
+
     if (this.point || isExistSelectedLabel) {
       ctx.strokeStyle = Util.colorStringToRgba(mainColor, mainColorOpacity);
       const focusStyle = Util.colorStringToRgba(pointFillColor, 1);

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

@@ -45,7 +45,6 @@ class Pie {
     const slice = new Path2D();
 
     const radius = this.isSelect ? this.radius + 5 : this.radius;
-    const doughnutHoleRadius = this.radius * this.doughnutHoleSize;
 
     const color = this.color;
     const noneDownplayOpacity = color.includes('rgba') ? Util.getOpacity(color) : 1;
@@ -66,7 +65,7 @@ class Pie {
     }
 
     if (this.showValue?.use) {
-      this.drawValueLabels(ctx, doughnutHoleRadius);
+      this.drawValueLabels(ctx);
     }
 
     ctx.closePath();
@@ -115,7 +114,6 @@ class Pie {
   itemHighlight(item, context) {
     const ctx = context;
     const radius = this.isSelect ? this.radius + 5 : this.radius;
-    const doughnutHoleRadius = this.radius * this.doughnutHoleSize;
 
     ctx.save();
     ctx.shadowOffsetX = 0;
@@ -133,7 +131,7 @@ class Pie {
     ctx.fill();
 
     if (this.showValue?.use) {
-      this.drawValueLabels(ctx, doughnutHoleRadius);
+      this.drawValueLabels(ctx);
     }
 
     ctx.closePath();
@@ -146,19 +144,9 @@ class Pie {
    * @param context           canvas context
    */
   drawValueLabels(context) {
-    const { fontSize, textColor, formatter } = this.showValue;
     const ctx = context;
-
-    ctx.save();
-    ctx.beginPath();
-
-    ctx.font = `normal normal normal ${fontSize}px Roboto`;
-    ctx.fillStyle = textColor;
-    ctx.lineWidth = 1;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-
     const value = this.data.o;
+    const { fontSize, textColor, formatter } = this.showValue;
 
     let formattedTxt;
     if (formatter) {
@@ -180,15 +168,27 @@ class Pie {
       && radius >= valueWidth * ratio
       && radius >= valueHeight * ratio
     ) {
+      ctx.save();
+      ctx.beginPath();
+
+      const noneDownplayOpacity = textColor.includes('rgba') ? Util.getOpacity(textColor) : 1;
+      const opacity = this.state === 'downplay' ? 0.1 : noneDownplayOpacity;
+
+      ctx.font = `normal normal normal ${fontSize}px Roboto`;
+      ctx.fillStyle = Util.colorStringToRgba(textColor, opacity);
+      ctx.lineWidth = 1;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+
       const halfRadius = (radius / 2) + this.doughnutHoleSize;
       const centerAngle = ((this.endAngle - this.startAngle) / 2) + this.startAngle;
       const xPos = halfRadius * Math.cos(centerAngle) + this.centerX;
       const yPos = halfRadius * Math.sin(centerAngle) + this.centerY;
 
       ctx.fillText(formattedTxt, xPos, yPos);
-    }
 
-    ctx.restore();
+      ctx.restore();
+    }
   }
 }
 

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

@@ -250,7 +250,7 @@ const modules = {
     const opt = this.options;
     const isHorizontal = !!opt.horizontal;
     const labelTipOpt = opt.selectLabel;
-    const { dataIndex, data, label } = this.defaultSelectLabelInfo;
+    const { dataIndex, data, label } = this.defaultSelectInfo;
     let drawTip = false;
 
     if (dataIndex.length) {

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

@@ -129,17 +129,19 @@ export const PLOT_BAND_OPTION = {
 };
 
 export const HEAT_MAP_OPTION = {
-  ...LINE_OPTION,
-  colorOpt: {
-    min: '#FFFFFF',
-    max: '#0052FF',
-    categoryCnt: 5,
-    border: '#FFFFFF',
-    error: '#FF0000',
-  },
-  spaces: {
-    x: 0,
-    y: 0,
+  show: true,
+  highlight: {
+    maxShadowOpacity: 0.4,
+  },
+  xAxisIndex: 0,
+  yAxisIndex: 0,
+  showLegend: true,
+  showValue: {
+    use: false,
+    fontSize: 12,
+    textColor: '#000000',
+    formatter: null,
+    decimalPoint: 0,
   },
 };
 

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

@@ -54,7 +54,7 @@ const modules = {
       return new Pie(id, opt, index);
     } else if (type === 'heatMap') {
       this.seriesInfo.charts.heatMap.push(id);
-      return new HeatMap(id, opt, index);
+      return new HeatMap(id, opt, this.options.heatMapColor);
     }
 
     return false;

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

@@ -1,6 +1,5 @@
 import { reverse } from 'lodash-es';
 import Util from '../helpers/helpers.util';
-import { TIME_INTERVALS } from '../helpers/helpers.constant';
 
 const modules = {
   /**
@@ -37,8 +36,9 @@ const modules = {
             const sData = data[seriesID];
 
             if (series && sData) {
+              series.labels = label;
               series.data = this.addSeriesDSForHeatMap(sData);
-              series.minMax = this.getSeriesMinMaxForHeatMap(series.data, series.spaces);
+              series.minMax = this.getSeriesMinMax(series.data);
               series.valueOpt = this.getSeriesValueOptForHeatMap(series);
             }
           });
@@ -301,17 +301,20 @@ const modules = {
   /**
    * Take data to create data for each series
    * @param {array} data data array for each series
+   * @param {object}  label   chart label
+   *
    * @returns {array} data info added position and etc
    */
   addSeriesDSForHeatMap(data) {
-    return data.map(item => ({
-      x: item.x,
-      y: item.y,
-      o: item.value,
+    return data.map(({ x, y, value }) => ({
+      x,
+      y,
+      o: value,
       xp: null,
       yp: null,
+      w: null,
+      h: null,
       dataColor: null,
-      value: item.value,
       cId: null,
     }));
   },
@@ -414,92 +417,42 @@ 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 colorOpt = this.options.heatMapColor;
     const categoryCnt = colorOpt.categoryCnt;
 
+    let minValue;
     let maxValue = 0;
+
     let isExistError = false;
-    data.forEach(({ value }) => {
+    data.forEach(({ o: value }) => {
       if (maxValue < value) {
-        maxValue = value;
+        maxValue = Math.max(maxValue, value);
       }
+
       if (value < 0) {
         isExistError = true;
+      } else if (minValue === undefined) {
+        minValue = value;
+      } else {
+        minValue = Math.min(minValue, value);
       }
     });
-    const valueInterval = Math.ceil(maxValue / categoryCnt);
-    if (isExistError && colorAxis.length === categoryCnt) {
-      colorAxis.push({
+
+    if (isExistError && series.colorAxis.length === categoryCnt) {
+      series.colorAxis.push({
         id: `color#${categoryCnt}`,
         value: colorOpt.error,
         state: 'normal',
         show: true,
       });
     }
+
     return {
+      min: minValue,
       max: maxValue,
-      interval: valueInterval,
+      interval: Math.ceil((maxValue - minValue) / categoryCnt),
       existError: isExistError,
     };
   },
@@ -673,6 +626,101 @@ const modules = {
     };
   },
 
+  /**
+   * Find seriesId by position x and y
+   * @param {array}   offset          position x and y
+   *
+   * @returns {object} clicked series id
+   */
+  getSeriesIdByPosition(offset) {
+    const [clickedX, clickedY] = offset;
+    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 valueAxes = this.axesY[0];
+    const labelAxes = this.axesX[0];
+    const valueStartPoint = aPos[valueAxes.units.rectStart];
+    const valueEndPoint = aPos[valueAxes.units.rectEnd];
+    const labelStartPoint = aPos[labelAxes.units.rectStart];
+    const labelEndPoint = aPos[labelAxes.units.rectEnd];
+
+    const result = { sId: null };
+
+    if (clickedY > valueEndPoint && clickedY < valueStartPoint
+      && clickedX < labelEndPoint && clickedX > labelStartPoint) {
+      let hitSeries;
+      let positionList;
+      const hitItem = this.findHitItem(offset);
+      const hitSeriesList = Object.keys(hitItem.items);
+
+      switch (this.options.type) {
+        case 'line': {
+          const orderedSeriesList = this.seriesInfo.charts.line;
+          const isStackChart = Object.values(this.seriesList).some(({ stackIndex }) => stackIndex);
+
+          if (hitSeriesList.length) { // 클릭한 위치에 data 가 존재하는 경우
+            if (isStackChart) {
+              positionList = orderedSeriesList.filter(sId => hitSeriesList.includes(sId))
+                .map(sId => ({ sId, position: hitItem.items[sId]?.data?.yp }));
+              hitSeries = positionList.find(({ position }) => clickedY > position)?.sId;
+            } else {
+              hitSeries = Object.entries(hitItem.items).find(([, { hit }]) => hit)?.[0];
+            }
+          } else { // 클릭한 위치에 data 가 존재하지 않는 경우
+            const visibleSeriesList = orderedSeriesList.filter(sId => this.seriesList[sId].show);
+            positionList = visibleSeriesList.map(sId => ({
+              sId,
+              position: this.seriesList[sId].data?.map(({ xp, yp }) => [xp, yp]),
+            }));
+            const dataIndex = positionList[0].position?.findIndex(([xp]) => xp >= clickedX);
+            const vectorList = positionList.map(({ sId, position }) => ({
+              sId,
+              vector: { start: position[dataIndex - 1], end: position[dataIndex] },
+            }));
+
+            // canvas 의 클릭 위치값은 제 4 사분면의 위치이므로 clickedY, y1, y2 의 값은 음수를 취한다.
+            if (isStackChart) {
+              hitSeries = vectorList.find(({ vector }) => {
+                const [x1, y1] = vector.start;
+                const [x2, y2] = vector.end;
+                const v1 = [x2 - x1, y1 - y2];
+                const v2 = [x2 - clickedX, clickedY - y2];
+                const xp = v1[0] * v2[1] - v1[1] * v2[0];
+
+                return vector.start.every(v => typeof v === 'number')
+                  && vector.end.every(v => typeof v === 'number')
+                  && xp > 0;
+              })?.sId;
+            } else {
+              hitSeries = vectorList.find(({ vector }) => {
+                const [x1, y1] = vector.start;
+                const [x2, y2] = vector.end;
+                const a = (y1 - y2) / (x2 - x1);
+                const b = -1;
+                const c = -y1 - a * x1;
+                const distance = Math.abs(a * clickedX - b * clickedY + c)
+                  / Math.sqrt(a ** 2 + b ** 2);
+
+                return distance < 3;
+              })?.sId;
+            }
+          }
+          break;
+        }
+        default:
+          break;
+      }
+
+      result.sId = hitSeries;
+    }
+
+    return result;
+  },
   /**
    * Find label info by position x and y
    * @param {array}   offset          position x and y