evui 3.4.110 → 3.4.111

package/package.json

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

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

@@ -570,8 +570,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();
@@ -586,8 +587,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,23 @@ class Line {
     this.size = {
       comboOffset: 0,
     };
-    this.usePassingValue = !!this.passingValue;
+    this.usePassingValue = !isUndefined(this.passingValue) && this.interpolation === 'linear';
   }
 
+  /**
+   * @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 +103,6 @@ class Line {
 
     const endPoint = chartRect.y2 - labelOffset.bottom;
 
-    let x;
-    let y;
     let barAreaByCombo = 0;
 
     const minmaxX = axesSteps.x[this.xAxisIndex];
@@ -114,51 +124,39 @@ 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 && this.usePassingValue && curr.o === this.passingValue) {
+        y = getYPos(curr.b ?? 0);
+      }
 
       if (x !== null) {
         x += Util.aliasPixel(x);
       }
 
-      if (this.usePassingValue) {
-        if (curr.o === this.passingValue) {
-          y = getYPos(prev.y);
+      curr.xp = x;
+      curr.yp = 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;
-
-          return curr;
+      if (this.usePassingValue && curr.o === this.passingValue) {
+        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.usePassingValue && this.passingValue !== prevValid?.o)
+        || (!this.usePassingValue && isNil(curr.o) && this.interpolation !== 'zero')
+        || (!this.usePassingValue && isNil(prevValid?.y))
+        || (isNil(curr.o) && curr.y == null && this.passingValue !== 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 +193,22 @@ 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])) {
+        const isNoneInterpolation = this.interpolation === 'none' || (this.usePassingValue && this.passingValue !== null);
+
+        if (isNoneInterpolation ? isNil(valueArray[i]) : isUndefined(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 !== this.passingValue);
             needFillDataIndexList.push([start, start + lastNormalValueIndex]);
             start = null;
             end = null;
           }
-        } else if (valueArray[i] === this.passingValue) {
+        } else if (this.usePassingValue && valueArray[i] === this.passingValue) {
           end = i;
         } else {
           start = start === null ? i : start;
@@ -231,7 +232,7 @@ class Line {
 
           if (ix === startIndex) {
             ctx.moveTo(currData.xp, currData.yp);
-          } else if (this.isExistGrp || this.passingValue !== currData.o) {
+          } else if (this.isExistGrp || this.passingValue !== currData.o || (this.interpolation === 'zero' && isNil(currData.o))) {
             ctx.lineTo(currData.xp, currData.yp);
           }
 

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

@@ -50,9 +50,13 @@ const modules = {
 
             if (series && sData) {
               if (series.isExistGrp && series.stackIndex && !series.isOverlapping) {
-                series.data = this.addSeriesStackDS(sData, label, series.bsIds, series.stackIndex);
+                series.data = this.addSeriesStackDS(
+                  sData, label, series.bsIds, series.stackIndex, series.interpolation,
+                );
               } else {
-                series.data = this.addSeriesDS(sData, label, series.isExistGrp);
+                series.data = this.addSeriesDS(
+                  sData, label, series.isExistGrp, series.interpolation,
+                );
               }
               series.minMax = this.getSeriesMinMax(series.data);
             }
@@ -385,10 +389,13 @@ const modules = {
    * @param {object}  label   chart label
    * @param {array}   bsIds   stacked base data ID List
    * @param {number}  sIdx    series ordered index
+   * @param {import('./index').InterpolationType}  interpolation   interpolation type
    *
-   * @returns {array} data for each series
+   * @typedef {import('./index').ChartSeriesDataPoint} ChartSeriesDataPoint
+   *
+   * @returns {ChartSeriesDataPoint[]} data for each series
    */
-  addSeriesStackDS(data, label, bsIds, sIdx = 0) {
+  addSeriesStackDS(data, label, bsIds, sIdx = 0, interpolation = 'none') {
     const isHorizontal = this.options.horizontal;
     const sdata = [];
 
@@ -429,15 +436,14 @@ const modules = {
           if (oData != null) {
             gdata = bdata + oData;
           } else {
-            gdata = null;
-            bdata = 0;
+            gdata = odata;
           }
         } else {
           bdata = 0;
           gdata = oData;
         }
 
-        sdata.push(this.addData(gdata, ldata, odata, bdata));
+        sdata.push(this.addData(gdata, ldata, odata, bdata, interpolation));
       }
     });
 
@@ -449,10 +455,13 @@ const modules = {
    * @param {object}  data    chart series info
    * @param {object}  label   chart label
    * @param {boolean}  isBase   is Base(bottommost) series at stack chart
+   * @param {import('./index').InterpolationType}  interpolation   interpolation type
+   *
+   * @typedef {import('./index').ChartSeriesDataPoint} ChartSeriesDataPoint
    *
-   * @returns {array} data for each series
+   * @returns {ChartSeriesDataPoint[]} data for each series
    */
-  addSeriesDS(data, label, isBase) {
+  addSeriesDS(data, label, isBase, interpolation = 'none') {
     const isHorizontal = this.options.horizontal;
     const sdata = [];
     const passingValue = this.seriesList[Object.keys(this.seriesList)[0]]?.passingValue;
@@ -470,7 +479,13 @@ 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,
+          null,
+          interpolation,
+        ));
       }
     });
 
@@ -520,10 +535,13 @@ 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
+   * @param {import('./index').InterpolationType}  interpolation   interpolation type
+   *
+   * @typedef {import('./index').ChartSeriesDataPoint} ChartSeriesDataPoint
+   *
+   * @returns {ChartSeriesDataPoint} data for each graph point
    */
-  addData(gdata, ldata, odata = null, bdata = null) {
+  addData(gdata, ldata, odata = null, bdata = null, interpolation = 'none') {
     let data;
     let gdataValue = null;
     let odataValue = null;
@@ -536,7 +554,7 @@ const modules = {
       gdataColor = gdata.color;
       dataTextColor = gdata.textColor;
     } else {
-      gdataValue = gdata ?? null;
+      gdataValue = interpolation === 'zero' && !gdata ? bdata ?? 0 : gdata ?? null;
     }
 
     if (odata !== null && typeof odata === 'object') {
@@ -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;
             }