evui 3.4.116 → 3.4.117

package/dist/evui.umd.js

@@ -11180,7 +11180,7 @@ module.exports = exports;
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.4.116\"}");
+module.exports = JSON.parse("{\"a\":\"3.4.117\"}");
 
 /***/ }),
 
@@ -38826,7 +38826,21 @@ var modules = {
         } else {
           seriesIDs.forEach(function (seriesID) {
             var series = _this.seriesList[seriesID];
-            var sData = data[seriesID];
+            var hasPassingValueInData = data[seriesID].some(function (item) {
+              return item === series.passingValue;
+            });
+            series.hasPassingValueInData = hasPassingValueInData;
+            var sData = data[seriesID].map(function (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) {
@@ -39220,7 +39234,9 @@ var 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: function addSeriesStackDS(data, label, bsIds) {
     var _this4 = this;
@@ -39272,8 +39288,7 @@ var modules = {
           if (oData != null) {
             gdata = bdata + oData;
           } else {
-            gdata = null;
-            bdata = 0;
+            gdata = odata;
           }
         } else {
           bdata = 0;
@@ -39292,7 +39307,9 @@ var 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: function addSeriesDS(data, label, isBase) {
     var _this$seriesList$Obje,
@@ -39369,7 +39386,10 @@ var 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: function addData(gdata, ldata) {
     var _gdataColor;
@@ -39945,12 +39965,18 @@ var 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: function getLabelInfoByPosition(offset, targetAxis) {
     var _Object$values$sort$, _Object$values$sort$2, _scrollbarOpt, _scale, _scale$labels, _scale3, _scale3$labels;
@@ -40057,11 +40083,14 @@ var 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: function getCurMouseLabelVal(targetAxis, offset, labelIndex) {
     var _this9 = this;
@@ -41091,6 +41120,57 @@ var defaultsDeep = _baseRest(function(args) {
 
 /* harmony default export */ var lodash_es_defaultsDeep = (defaultsDeep);
 
+// CONCATENATED MODULE: ./node_modules/lodash-es/isNil.js
+/**
+ * Checks if `value` is `null` or `undefined`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is nullish, else `false`.
+ * @example
+ *
+ * _.isNil(null);
+ * // => true
+ *
+ * _.isNil(void 0);
+ * // => true
+ *
+ * _.isNil(NaN);
+ * // => false
+ */
+function isNil(value) {
+  return value == null;
+}
+
+/* harmony default export */ var lodash_es_isNil = (isNil);
+
+// CONCATENATED MODULE: ./node_modules/lodash-es/isUndefined.js
+/**
+ * Checks if `value` is `undefined`.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is `undefined`, else `false`.
+ * @example
+ *
+ * _.isUndefined(void 0);
+ * // => true
+ *
+ * _.isUndefined(null);
+ * // => false
+ */
+function isUndefined(value) {
+  return value === undefined;
+}
+
+/* harmony default export */ var lodash_es_isUndefined = (isUndefined);
+
 // CONCATENATED MODULE: ./src/components/chart/helpers/helpers.constant.js
 var AXIS_UNITS = {
   x: {
@@ -41138,7 +41218,8 @@ var LINE_OPTION = {
   fill: false,
   fillOpacity: 0.4,
   showLegend: true,
-  passingValue: null
+  passingValue: null,
+  interpolation: 'none'
 };
 var BAR_OPTION = {
   show: true,
@@ -41325,13 +41406,13 @@ var TIME_INTERVALS = {
 /* harmony default export */ var helpers_canvas = ({
   /**
    * 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: function calculateX(value, min, max, area) {
     var startPoint = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
@@ -41371,13 +41452,13 @@ var TIME_INTERVALS = {
 
   /**
    * 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: function calculateY(value, min, max, area) {
     var startPoint = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
@@ -41625,7 +41706,6 @@ var TIME_INTERVALS = {
 
 
 
-
 var element_line_Line = /*#__PURE__*/function () {
   function Line(sId, opt, sIdx) {
     var _this = this;
@@ -41662,6 +41742,8 @@ var element_line_Line = /*#__PURE__*/function () {
         lineWidth: 2
       }
     };
+    /** @type {import('../model/index').ChartSeriesDataPoint[]} */
+
     this.data = [];
     this.beforeMouseXp = 0;
     this.beforeMouseYp = 0;
@@ -41669,17 +41751,33 @@ var element_line_Line = /*#__PURE__*/function () {
     this.size = {
       comboOffset: 0
     };
-    this.usePassingValue = !!this.passingValue;
   }
-  /**
-   * Draw series data
-   * @param {object} param     object for drawing series data
-   *
-   * @returns {undefined}
-   */
-
 
   _createClass(Line, [{
+    key: "useLinearInterpolation",
+    value: function 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 {LineDrawParam} param     object for drawing series data
+     *
+     * @returns {undefined}
+     */
+
+  }, {
     key: "draw",
     value: function draw(param) {
       var _selectLabel$selected,
@@ -41742,8 +41840,7 @@ var element_line_Line = /*#__PURE__*/function () {
       }
 
       var endPoint = chartRect.y2 - labelOffset.bottom;
-      var x;
-      var y;
+      var isLinearInterpolation = this.useLinearInterpolation();
       var barAreaByCombo = 0;
       var minmaxX = axesSteps.x[this.xAxisIndex];
       var minmaxY = axesSteps.y[this.yAxisIndex];
@@ -41768,51 +41865,40 @@ var element_line_Line = /*#__PURE__*/function () {
       }; // draw line
 
 
-      var needCutoff = false;
-      this.data.reduce(function (prev, curr) {
-        x = getXPos(curr.x);
-        y = getYPos(curr.y);
+      var prevValid;
+      this.data.forEach(function (curr) {
+        var _prevValid, _prevValid2;
 
-        if (x !== null) {
-          x += helpers_util.aliasPixel(x);
-        }
+        var x = getXPos(curr.x);
+        var y = getYPos(curr.y);
 
-        if (_this2.usePassingValue) {
-          if (curr.o === _this2.passingValue) {
-            y = getYPos(prev.y);
+        if (_this2.isExistGrp && isLinearInterpolation && curr.o === null) {
+          var _curr$b;
 
-            if (prev.o === null) {
-              needCutoff = true;
-            }
+          y = getYPos((_curr$b = curr.b) !== null && _curr$b !== void 0 ? _curr$b : 0);
+        }
 
-            if (_this2.isExistGrp && !needCutoff) {
-              var _curr$b;
+        if (x !== null) {
+          x += helpers_util.aliasPixel(x);
+        }
 
-              y = getYPos((_curr$b = curr.b) !== null && _curr$b !== void 0 ? _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 (!_this2.isExistGrp) {
+            return;
           }
         }
 
-        var isNullValue = helpers_util.isNullOrUndefined(prev.o) || helpers_util.isNullOrUndefined(curr.o) || helpers_util.isNullOrUndefined(curr.x) || helpers_util.isNullOrUndefined(curr.y);
-
-        if (isNullValue || needCutoff) {
+        if (lodash_es_isNil((_prevValid = prevValid) === null || _prevValid === void 0 ? void 0 : _prevValid.y) && !_this2.isExistGrp || !isLinearInterpolation && (lodash_es_isNil((_prevValid2 = prevValid) === null || _prevValid2 === void 0 ? void 0 : _prevValid2.y) || lodash_es_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) {
@@ -41852,20 +41938,22 @@ var element_line_Line = /*#__PURE__*/function () {
         var valueArray = this.data.map(function (item) {
           return item === null || item === void 0 ? void 0 : item.o;
         });
+        /** @type {Array<[number, number]>} */
+
         var needFillDataIndexList = [];
 
         for (var i = 0; i < valueArray.length + 1; i++) {
-          if (helpers_util.isNullOrUndefined(valueArray[i])) {
+          if (isLinearInterpolation && lodash_es_isUndefined(valueArray[i]) || !isLinearInterpolation && lodash_es_isNil(valueArray[i])) {
             if (start !== null && end !== null) {
               var temp = valueArray.slice(start, i);
               var lastNormalValueIndex = temp.findLastIndex(function (item) {
-                return item !== helpers_util.isNullOrUndefined(item) && item !== _this2.passingValue;
+                return !lodash_es_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;
@@ -41895,7 +41983,7 @@ var element_line_Line = /*#__PURE__*/function () {
 
             if (ix === startIndex) {
               ctx.moveTo(currData.xp, currData.yp);
-            } else if (_this2.isExistGrp || _this2.passingValue !== currData.o) {
+            } else if (_this2.isExistGrp || currData.o !== null) {
               ctx.lineTo(currData.xp, currData.yp);
             }
 
@@ -41921,14 +42009,19 @@ var element_line_Line = /*#__PURE__*/function () {
         ctx.strokeStyle = helpers_util.colorStringToRgba(mainColor, mainColorOpacity);
         var focusStyle = helpers_util.colorStringToRgba(pointFillColor, 1);
         var blurStyle = helpers_util.colorStringToRgba(pointFillColor, pointFillColorOpacity);
+        var isLinearSingle = this.interpolation === 'linear' && this.data.filter(function (item) {
+          return item.o !== null;
+        }).length === 1;
         this.data.forEach(function (curr, ix) {
           var _this2$data, _this2$data2;
 
-          if (curr.xp === null || curr.yp === null || curr.o === _this2.passingValue) {
+          if (curr.xp === null || curr.yp === null || curr.o === null) {
             return;
           }
 
-          var isSingle = helpers_util.isNullOrUndefined((_this2$data = _this2.data[ix - 1]) === null || _this2$data === void 0 ? void 0 : _this2$data.o) && helpers_util.isNullOrUndefined((_this2$data2 = _this2.data[ix + 1]) === null || _this2$data2 === void 0 ? void 0 : _this2$data2.o);
+          var prevData = (_this2$data = _this2.data[ix - 1]) === null || _this2$data === void 0 ? void 0 : _this2$data.o;
+          var nextData = (_this2$data2 = _this2.data[ix + 1]) === null || _this2$data2 === void 0 ? void 0 : _this2$data2.o;
+          var isSingle = !isLinearInterpolation && lodash_es_isNil(prevData) && lodash_es_isNil(nextData) || isLinearSingle;
           var isSelectedLabel = selectedLabelIndexList.includes(ix);
 
           if (_this2.point || isSingle || isSelectedLabel) {
@@ -41959,7 +42052,7 @@ var element_line_Line = /*#__PURE__*/function () {
           o = gdata.o;
       ctx.save();
 
-      if (xp !== null && yp !== null && o !== this.passingValue && this.pointHighlight) {
+      if (xp !== null && yp !== null && o !== null && this.pointHighlight) {
         ctx.strokeStyle = helpers_util.colorStringToRgba(this.color, 0);
         ctx.fillStyle = helpers_util.colorStringToRgba(this.color, this.highlight.maxShadowOpacity);
         helpers_canvas.drawPoint(ctx, this.pointStyle, this.highlight.maxShadowSize, xp, yp);
@@ -41997,6 +42090,7 @@ var element_line_Line = /*#__PURE__*/function () {
         return !helpers_util.isNullOrUndefined(data.x);
       });
       var SPARE_XP = 0.5;
+      var isLinearInterpolation = this.useLinearInterpolation();
 
       if (gdata !== null && gdata !== void 0 && gdata.length) {
         if (typeof dataIndex === 'number' && this.show) {
@@ -42080,7 +42174,7 @@ var element_line_Line = /*#__PURE__*/function () {
         }
       }
 
-      if (this.usePassingValue && (item === null || item === void 0 ? void 0 : (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.o) === this.passingValue) {
+      if (isLinearInterpolation && (item === null || item === void 0 ? void 0 : (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.o) === null) {
         item.data = null;
       }
 
@@ -44752,6 +44846,47 @@ var model_series_modules = {
   Store: model_store,
   Series: model_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
+ */
 // CONCATENATED MODULE: ./src/components/chart/scale/scale.js
 
 
@@ -51238,7 +51373,7 @@ var plugins_interaction_modules = {
         if (item !== null && item !== void 0 && item.data) {
           var gdata = void 0;
 
-          if (item.data.o === null) {
+          if (item.data.o === null && series.interpolation !== 'zero') {
             if (!series.isExistGrp) {
               gdata = isHorizontal ? item.data.x : item.data.y;
             }
@@ -54573,8 +54708,9 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     }
     /**
      * Get chart DOM size and set canvas size
+     * @typedef {import('./model/index').ChartDOMSize} ChartDOMSize
      *
-     * @returns {object} chart size information
+     * @returns {ChartDOMSize} chart size information
      */
 
   }, {
@@ -54594,8 +54730,9 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     }
     /**
      * Calculate chart size
+     * @typedef {import('./model/index').ChartRect} ChartRect
      *
-     * @returns {object} chart size information
+     * @returns {ChartRect} chart size information
      */
 
   }, {