evui 3.4.116 → 3.4.117

package/package.json

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

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

@@ -576,8 +576,9 @@ class EvChart {
 
   /**
    * Get chart DOM size and set canvas size
+   * @typedef {import('./model/index').ChartDOMSize} ChartDOMSize
    *
-   * @returns {object} chart size information
+   * @returns {ChartDOMSize} chart size information
    */
   getChartDOMRect() {
     const rect = this.chartDOM?.getBoundingClientRect();
@@ -592,8 +593,9 @@ class EvChart {
 
   /**
    * Calculate chart size
+   * @typedef {import('./model/index').ChartRect} ChartRect
    *
-   * @returns {object} chart size information
+   * @returns {ChartRect} chart size information
    */
   getChartRect() {
     const { width, height } = this.getChartDOMRect();

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

@@ -1,4 +1,4 @@
-import { defaultsDeep } from 'lodash-es';
+import { defaultsDeep, isNil, isUndefined } from 'lodash-es';
 import { COLOR, LINE_OPTION } from '../helpers/helpers.constant';
 import Util from '../helpers/helpers.util';
 import Canvas from '../helpers/helpers.canvas';
@@ -26,6 +26,7 @@ class Line {
       normal: { opacity: 1, lineWidth: 1 },
       highlight: { opacity: 1, lineWidth: 2 },
     };
+    /** @type {import('../model/index').ChartSeriesDataPoint[]} */
     this.data = [];
     this.beforeMouseXp = 0;
     this.beforeMouseYp = 0;
@@ -33,12 +34,26 @@ class Line {
     this.size = {
       comboOffset: 0,
     };
-    this.usePassingValue = !!this.passingValue;
   }
 
+  useLinearInterpolation() {
+    return this.interpolation === 'linear' || (this.interpolation === 'none' && !!this.passingValue && this.hasPassingValueInData);
+  }
+
+  /**
+   * @typedef {Object} LineDrawParam
+   * @property {CanvasRenderingContext2D} ctx - 캔버스 렌더링 컨텍스트
+   * @property {object} chartRect - 차트 영역 정보
+   * @property {object} labelOffset - 라벨 오프셋 정보
+   * @property {object} axesSteps - 축 스텝 정보
+   * @property {object} [selectLabel] - 선택된 라벨 정보
+   * @property {object} [selectSeries] - 선택된 시리즈 정보
+   * @property {object} [legendHitInfo] - 범례 히트 정보
+   * @property {boolean} [isBrush] - 브러시 사용 여부
+   */
   /**
    * Draw series data
-   * @param {object} param     object for drawing series data
+   * @param {LineDrawParam} param     object for drawing series data
    *
    * @returns {undefined}
    */
@@ -91,8 +106,8 @@ class Line {
 
     const endPoint = chartRect.y2 - labelOffset.bottom;
 
-    let x;
-    let y;
+    const isLinearInterpolation = this.useLinearInterpolation();
+
     let barAreaByCombo = 0;
 
     const minmaxX = axesSteps.x[this.xAxisIndex];
@@ -114,51 +129,37 @@ class Line {
     const getYPos = val => Canvas.calculateY(val, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
 
     // draw line
-    let needCutoff = false;
-    this.data.reduce((prev, curr) => {
-      x = getXPos(curr.x);
-      y = getYPos(curr.y);
+    let prevValid;
+    this.data.forEach((curr) => {
+      let x = getXPos(curr.x);
+      let y = getYPos(curr.y);
+
+      if (this.isExistGrp && isLinearInterpolation && curr.o === null) {
+        y = getYPos(curr.b ?? 0);
+      }
 
       if (x !== null) {
         x += Util.aliasPixel(x);
       }
 
-      if (this.usePassingValue) {
-        if (curr.o === this.passingValue) {
-          y = getYPos(prev.y);
-
-          if (prev.o === null) {
-            needCutoff = true;
-          }
-
-          if (this.isExistGrp && !needCutoff) {
-            y = getYPos(curr.b ?? 0);
-            ctx.lineTo(x, y);
-          }
-
-          curr.xp = x;
-          curr.yp = y;
+      curr.xp = x;
+      curr.yp = y;
 
-          return curr;
+      if (isLinearInterpolation && curr.o === null) {
+        if (!this.isExistGrp) {
+          return;
         }
       }
 
-      const isNullValue = Util.isNullOrUndefined(prev.o)
-        || Util.isNullOrUndefined(curr.o)
-        || Util.isNullOrUndefined(curr.x)
-        || Util.isNullOrUndefined(curr.y);
-      if (isNullValue || needCutoff) {
+      if ((isNil(prevValid?.y) && !this.isExistGrp)
+        || (!isLinearInterpolation && (isNil(prevValid?.y) || isNil(curr.o)))) {
         ctx.moveTo(x, y);
-        needCutoff = false;
       } else {
         ctx.lineTo(x, y);
       }
 
-      curr.xp = x; // eslint-disable-line
-      curr.yp = y; // eslint-disable-line
-
-      return curr;
-    }, this.data[0]);
+      prevValid = curr;
+    });
 
     ctx.stroke();
     if (this.segments) {
@@ -195,19 +196,21 @@ class Line {
       // ex) [10, passing, null, 10, 10, passing, 10] -> [[0, 1], [3, 6]]
       let start = null;
       let end = null;
-      const valueArray = this.data.map(item => item?.o);
+      const valueArray = this.data.map(item => (item?.o));
+      /** @type {Array<[number, number]>} */
       const needFillDataIndexList = [];
       for (let i = 0; i < valueArray.length + 1; i++) {
-        if (Util.isNullOrUndefined(valueArray[i])) {
+        if ((isLinearInterpolation && isUndefined(valueArray[i]))
+          || (!isLinearInterpolation && isNil(valueArray[i]))) {
           if (start !== null && end !== null) {
             const temp = valueArray.slice(start, i);
             const lastNormalValueIndex = temp.findLastIndex(
-              item => item !== Util.isNullOrUndefined(item) && item !== this.passingValue);
+              item => !isNil(item) && item !== null);
             needFillDataIndexList.push([start, start + lastNormalValueIndex]);
             start = null;
             end = null;
           }
-        } else if (valueArray[i] === this.passingValue) {
+        } else if (isLinearInterpolation && valueArray[i] === null) {
           end = i;
         } else {
           start = start === null ? i : start;
@@ -231,7 +234,7 @@ class Line {
 
           if (ix === startIndex) {
             ctx.moveTo(currData.xp, currData.yp);
-          } else if (this.isExistGrp || this.passingValue !== currData.o) {
+          } else if (this.isExistGrp || currData.o !== null) {
             ctx.lineTo(currData.xp, currData.yp);
           }
 
@@ -256,14 +259,18 @@ class Line {
       ctx.strokeStyle = Util.colorStringToRgba(mainColor, mainColorOpacity);
       const focusStyle = Util.colorStringToRgba(pointFillColor, 1);
       const blurStyle = Util.colorStringToRgba(pointFillColor, pointFillColorOpacity);
+      const isLinearSingle = this.interpolation === 'linear' && this.data.filter(item => item.o !== null).length === 1;
 
       this.data.forEach((curr, ix) => {
-        if (curr.xp === null || curr.yp === null || curr.o === this.passingValue) {
+        if (curr.xp === null || curr.yp === null || curr.o === null) {
           return;
         }
 
-        const isSingle = Util.isNullOrUndefined(this.data[ix - 1]?.o)
-          && Util.isNullOrUndefined(this.data[ix + 1]?.o);
+        const prevData = this.data[ix - 1]?.o;
+        const nextData = this.data[ix + 1]?.o;
+
+        const isSingle = (!isLinearInterpolation && isNil(prevData) && isNil(nextData))
+          || isLinearSingle;
         const isSelectedLabel = selectedLabelIndexList.includes(ix);
         if (this.point || isSingle || isSelectedLabel) {
           ctx.fillStyle = isSelectedLabel && !legendHitInfo ? focusStyle : blurStyle;
@@ -290,7 +297,7 @@ class Line {
     const { xp, yp, o } = gdata;
 
     ctx.save();
-    if (xp !== null && yp !== null && o !== this.passingValue && this.pointHighlight) {
+    if (xp !== null && yp !== null && o !== null && this.pointHighlight) {
       ctx.strokeStyle = Util.colorStringToRgba(this.color, 0);
       ctx.fillStyle = Util.colorStringToRgba(this.color, this.highlight.maxShadowOpacity);
       Canvas.drawPoint(ctx, this.pointStyle, this.highlight.maxShadowSize, xp, yp);
@@ -320,6 +327,7 @@ class Line {
     const item = { data: null, hit: false, color: this.color };
     const gdata = this.data.filter(data => !Util.isNullOrUndefined(data.x));
     const SPARE_XP = 0.5;
+    const isLinearInterpolation = this.useLinearInterpolation();
 
     if (gdata?.length) {
       if (typeof dataIndex === 'number' && this.show) {
@@ -402,7 +410,7 @@ class Line {
       }
     }
 
-    if (this.usePassingValue && item?.data?.o === this.passingValue) {
+    if (isLinearInterpolation && item?.data?.o === null) {
       item.data = null;
     }
 

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

@@ -3,13 +3,13 @@ import Util from './helpers.util';
 export default {
   /**
    * Calculate X position
-   * @param {any}    value         graph value
+   * @param {number|null|undefined}    value         graph value
    * @param {number} min           min value
    * @param {number} max           max value
    * @param {number} area          height for axis
    * @param {number} startPoint    startPoint
    *
-   * @returns {any} position
+   * @returns {number|null} position
    */
   calculateX(value, min, max, area, startPoint = 0) {
     if (value === null || value === undefined) {
@@ -45,13 +45,13 @@ export default {
 
   /**
    * Calculate Y position
-   * @param {any}    value         graph value
+   * @param {number|null|undefined}    value         graph value
    * @param {number} min           min value
    * @param {number} max           max value
    * @param {number} area          height for axis
    * @param {number} startPoint    startPoint
    *
-   * @returns {any} position
+   * @returns {number|null} position
    */
   calculateY(value, min, max, area, startPoint = 0) {
     let calcY;

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

@@ -45,6 +45,7 @@ export const LINE_OPTION = {
   fillOpacity: 0.4,
   showLegend: true,
   passingValue: null,
+  interpolation: 'none',
 };
 
 export const BAR_OPTION = {

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

@@ -2,3 +2,49 @@ import Store from './model.store';
 import Series from './model.series';
 
 export default { Store, Series };
+
+
+  /**
+   * @typedef {Object} ChartDOMSize
+   * @property {number} width - 차트 DOM의 너비
+   * @property {number} height - 차트 DOM의 높이
+   */
+
+  /**
+   * @typedef {Object} ChartRect
+   * @property {number} x1 - 차트 영역의 시작 X 좌표
+   * @property {number} x2 - 차트 영역의 끝 X 좌표
+   * @property {number} y1 - 차트 영역의 시작 Y 좌표
+   * @property {number} y2 - 차트 영역의 끝 Y 좌표
+   * @property {number} chartWidth - 실제 차트 그리기 영역의 너비
+   * @property {number} chartHeight - 실제 차트 그리기 영역의 높이
+   * @property {number} width - 전체 차트 컨테이너의 너비
+   * @property {number} height - 전체 차트 컨테이너의 높이
+   */
+
+
+    /**
+   * @typedef {Object} MouseLabelValue
+   * @property {string|number} labelVal - 마우스 위치에 해당하는 라벨 값
+   * @property {number} labelIdx - 라벨 인덱스 (없으면 -1)
+   */
+
+
+      /**
+   * @typedef {Object} ChartSeriesDataPoint
+   * @property {number|null} x - x축 값 또는 라벨
+   * @property {number|null} y - y축 값 또는 데이터 값
+   * @property {number|null} o - 원본 데이터 값
+   * @property {number|null} b - 스택형 차트의 베이스 값
+   * @property {number|null} xp - x좌표 위치(픽셀 등)
+   * @property {number|null} yp - y좌표 위치(픽셀 등)
+   * @property {number|null} w - 너비
+   * @property {number|null} h - 높이
+   * @property {string|null} dataColor - 데이터 색상
+   * @property {string|null} dataTextColor - 텍스트 색상
+   */
+
+
+   /**
+    * @typedef {'none' | 'linear' | 'zero'} InterpolationType
+    */

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

@@ -46,7 +46,19 @@ const modules = {
         } else {
           seriesIDs.forEach((seriesID) => {
             const series = this.seriesList[seriesID];
-            const sData = data[seriesID];
+
+            const hasPassingValueInData = data[seriesID].some(item => item === series.passingValue);
+            series.hasPassingValueInData = hasPassingValueInData;
+
+            const sData = data[seriesID].map((item) => {
+              if (series.interpolation === 'zero' && !item) {
+                return 0;
+              }
+              if (item === series.passingValue) {
+                return null;
+              }
+              return item;
+            });
 
             if (series && sData) {
               if (series.isExistGrp && series.stackIndex && !series.isOverlapping) {
@@ -386,7 +398,9 @@ const modules = {
    * @param {array}   bsIds   stacked base data ID List
    * @param {number}  sIdx    series ordered index
    *
-   * @returns {array} data for each series
+   * @typedef {import('./index').ChartSeriesDataPoint} ChartSeriesDataPoint
+   *
+   * @returns {ChartSeriesDataPoint[]} data for each series
    */
   addSeriesStackDS(data, label, bsIds, sIdx = 0) {
     const isHorizontal = this.options.horizontal;
@@ -429,8 +443,7 @@ const modules = {
           if (oData != null) {
             gdata = bdata + oData;
           } else {
-            gdata = null;
-            bdata = 0;
+            gdata = odata;
           }
         } else {
           bdata = 0;
@@ -450,7 +463,9 @@ const modules = {
    * @param {object}  label   chart label
    * @param {boolean}  isBase   is Base(bottommost) series at stack chart
    *
-   * @returns {array} data for each series
+   * @typedef {import('./index').ChartSeriesDataPoint} ChartSeriesDataPoint
+   *
+   * @returns {ChartSeriesDataPoint[]} data for each series
    */
   addSeriesDS(data, label, isBase) {
     const isHorizontal = this.options.horizontal;
@@ -470,7 +485,8 @@ const modules = {
         const isPassingValueWithStack = isBase
           && !Util.isNullOrUndefined(passingValue)
           && gdata === passingValue;
-        sdata.push(this.addData(isPassingValueWithStack ? 0 : gdata, ldata, gdata));
+        sdata.push(this.addData(isPassingValueWithStack ? 0 : gdata, ldata, gdata,
+        ));
       }
     });
 
@@ -520,8 +536,10 @@ const modules = {
    * @param {object}  ldata    label data (x-axis value for vertical chart)
    * @param {object}  odata    original data (without stacked value)
    * @param {object}  bdata    base data (stacked value)
-
-   * @returns {object} data for each graph point
+   *
+   * @typedef {import('./index').ChartSeriesDataPoint} ChartSeriesDataPoint
+   *
+   * @returns {ChartSeriesDataPoint} data for each graph point
    */
   addData(gdata, ldata, odata = null, bdata = null) {
     let data;
@@ -1008,12 +1026,17 @@ const modules = {
 
     return result;
   },
+  /**
+   * @typedef {Object} LabelInfoResult
+   * @property {number} labelIndex - 선택된 라벨의 인덱스
+   * @property {object} hitInfo - 해당 위치에서의 히트 정보 (getItemByPosition 반환값)
+   */
   /**
    * Find label info by position x and y
    * @param {array}   offset          position x and y
    * @param {string | null}  targetAxis    target Axis Location ('xAxis', 'yAxis' , null)
    *
-   * @returns {object} clicked label information
+   * @returns {LabelInfoResult} clicked label information
    */
   getLabelInfoByPosition(offset, targetAxis) {
     const [x, y] = offset;
@@ -1097,11 +1120,14 @@ const modules = {
 
   /**
    * Get current mouse target label value in label array or calculated using mouse position
+   *
+   * @typedef {import('./index').MouseLabelValue} MouseLabelValue
+   *
    * @param {string}   targetAxis          target Axis Location ('xAxis', 'yAxis')
    * @param {array}  offset    return value from getMousePosition()
    * @param {number}  labelIndex
    *
-   * @returns {object} current mouse target label value
+   * @returns {MouseLabelValue} current mouse target label value
    */
   getCurMouseLabelVal(targetAxis, offset, labelIndex) {
     const { type: chartType, horizontal } = this.options;

package/src/components/chart/plugins/plugins.interaction.js

@@ -868,7 +868,7 @@ const modules = {
         if (item?.data) {
           let gdata;
 
-          if (item.data.o === null) {
+          if (item.data.o === null && series.interpolation !== 'zero') {
             if (!series.isExistGrp) {
               gdata = isHorizontal ? item.data.x : item.data.y;
             }