evui 3.4.145 → 3.4.147

package/dist/evui.common.js

@@ -11227,7 +11227,7 @@ var update = add("9519e5b6", content, true, {"sourceMap":false,"shadowMode":fals
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.4.145\"}");
+module.exports = JSON.parse("{\"a\":\"3.4.147\"}");
 
 /***/ }),
 
@@ -38456,7 +38456,10 @@ function isNil(value) {
 
 
 
+ // Text Size 측정용 singleton canvas
 
+var textMeasureCanvas = document.createElement('canvas');
+var textMeasureCtx = textMeasureCanvas.getContext('2d');
 /* harmony default export */ var helpers_util = ({
   /**
    * Transforming hex to rgb code
@@ -38666,6 +38669,32 @@ function isNil(value) {
     };
   },
 
+  /**
+   * Calculate text size with Canvas
+   * @param {string} text         text is needed to check size
+   * @param {string} fontStyle    text font style
+   * @returns {{width: number; height: number;}} text size information
+   */
+  calcTextSizeCanvas: function calcTextSizeCanvas(text, fontStyle) {
+    if (!text) {
+      return {
+        width: 2,
+        height: 2
+      };
+    }
+
+    textMeasureCtx.font = fontStyle;
+    var metrics = textMeasureCtx.measureText(text);
+    var fontSizeMatch = fontStyle.match(/(\d+(?:\.\d+)?)px/);
+    var fontSize = fontSizeMatch ? Number(fontSizeMatch[1]) : 14; // DOM 기본 line-height 보정 (대략 1.2 ~ 1.3)
+
+    var lineHeight = fontSize * 1.2;
+    return {
+      width: Math.max(Math.ceil(metrics.width), 2),
+      height: Math.max(Math.ceil(lineHeight), 2)
+    };
+  },
+
   /**
    * Comparing strings
    * @param {array} array    compared array
@@ -38694,7 +38723,7 @@ function isNil(value) {
   /**
    * Truncate the long string to short string with ellipsis until fitting maxWidth
    * @param {string} str         target string
-   * @param {number} maxWidth    maximum string width on canvas
+   * @param {number} maxWidth    maximum string width on canva
    * @param {Object} ctx         canvas context
    * @param {string} direction   left or right  (default: right)
    */
@@ -38875,6 +38904,11 @@ function isNil(value) {
 
 
 
+
+
+
+
+
 
 
 
@@ -39077,6 +39111,8 @@ var modules = {
         var xAxisTime = Math.floor(_item.x / 1000) * 1000;
 
         if (this.dataSet[key].fromTime <= xAxisTime) {
+          var _item$value;
+
           var index = this.dataSet[key].endIndex - (this.dataSet[key].toTime - xAxisTime) / 1000;
 
           if (index < 0) {
@@ -39086,6 +39122,7 @@ var modules = {
           this.dataSet[key].dataGroup[index].data.push({
             x: _item.x,
             y: _item.y,
+            o: (_item$value = _item.value) !== null && _item$value !== void 0 ? _item$value : _item.y,
             color: _item.color
           });
           this.dataSet[key].dataGroup[index].max = Math.max(this.dataSet[key].dataGroup[index].max, _item.y);
@@ -39343,30 +39380,54 @@ var modules = {
     var _this4 = this;
 
     var sIdx = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    var seriesList = this.seriesList;
     var isHorizontal = this.options.horizontal;
     var sdata = [];
+    var basePositionCache = new Map();
 
     var getBaseDataPosition = function getBaseDataPosition(baseIndex, dataIndex) {
-      var nextBaseSeriesIndex = baseIndex - 1;
-      var baseSeries = _this4.seriesList[bsIds[baseIndex]];
-      var baseDataList = baseSeries.data;
-      var baseData = baseDataList[dataIndex];
-      var position = isHorizontal ? baseData === null || baseData === void 0 ? void 0 : baseData.x : baseData === null || baseData === void 0 ? void 0 : baseData.y;
-      var isPassingValue = baseSeries.passingValue === (baseData === null || baseData === void 0 ? void 0 : baseData.o);
+      var key = baseIndex << 20 | dataIndex;
+
+      if (basePositionCache.has(key)) {
+        return basePositionCache.get(key);
+      }
+
+      var result = 0;
+      var idx = baseIndex;
+
+      while (idx >= 0) {
+        var baseSeries = seriesList[bsIds[idx]];
 
-      if (isPassingValue || position == null || !baseSeries.show) {
-        if (nextBaseSeriesIndex > -1) {
-          return getBaseDataPosition(nextBaseSeriesIndex, dataIndex);
+        if (baseSeries !== null && baseSeries !== void 0 && baseSeries.show && Array.isArray(baseSeries === null || baseSeries === void 0 ? void 0 : baseSeries.data)) {
+          var baseData = baseSeries.data[dataIndex];
+
+          var _ref = baseData !== null && baseData !== void 0 ? baseData : {},
+              _ref$x = _ref.x,
+              x = _ref$x === void 0 ? null : _ref$x,
+              _ref$y = _ref.y,
+              y = _ref$y === void 0 ? null : _ref$y,
+              _ref$o = _ref.o,
+              o = _ref$o === void 0 ? null : _ref$o;
+
+          var position = isHorizontal ? x : y;
+          var isPassingValue = helpers_util.isNullOrUndefined(baseSeries.passingValue) === false && (baseSeries === null || baseSeries === void 0 ? void 0 : baseSeries.passingValue) === o;
+
+          if (position != null && !isPassingValue) {
+            result = position;
+            break;
+          }
         }
 
-        return 0;
+        idx--;
       }
 
-      return position;
+      basePositionCache.set(key, result);
+      return result;
     };
 
+    var lastBaseIndex = bsIds.length - 1;
     data.forEach(function (curr, index) {
-      var baseIndex = bsIds.length - 1 < 0 ? 0 : bsIds.length - 1;
+      var baseIndex = Math.max(0, lastBaseIndex);
       var bdata = getBaseDataPosition(baseIndex, index); // base(previous) series data
 
       var odata = curr; // current series original data
@@ -39375,10 +39436,10 @@ var modules = {
 
       var gdata = curr; // current series data which added previous series's value
 
-      if (bdata != null && ldata != null) {
+      if (ldata != null) {
         var _odata$value, _odata;
 
-        if (gdata && _typeof(gdata) === 'object' && (curr.x || curr.y)) {
+        if (gdata && _typeof(gdata) === 'object' && ('x' in gdata || 'y' in gdata)) {
           odata = isHorizontal ? curr.x : curr.y;
           ldata = isHorizontal ? curr.y : curr.x;
         }
@@ -39461,12 +39522,12 @@ var modules = {
    * @returns {array} data info added position and etc
    */
   addSeriesDSForHeatMap: function addSeriesDSForHeatMap(data) {
-    return data.map(function (_ref) {
-      var x = _ref.x,
-          y = _ref.y,
-          value = _ref.value,
-          _ref$color = _ref.color,
-          color = _ref$color === void 0 ? null : _ref$color;
+    return data.map(function (_ref2) {
+      var x = _ref2.x,
+          y = _ref2.y,
+          value = _ref2.value,
+          _ref2$color = _ref2.color,
+          color = _ref2$color === void 0 ? null : _ref2$color;
       return {
         x: x,
         y: y,
@@ -39617,8 +39678,8 @@ var modules = {
     var minValue;
     var maxValue = 0;
     var isExistError = false;
-    data.forEach(function (_ref2) {
-      var value = _ref2.o;
+    data.forEach(function (_ref3) {
+      var value = _ref3.o;
 
       if (maxValue < value) {
         maxValue = Math.max(maxValue, value);
@@ -39910,9 +39971,9 @@ var modules = {
     };
     var seriesList = this.data.series;
     var pointSize = (_Object$values$sort$ = (_Object$values$sort$2 = Object.values(seriesList).sort(function (a, b) {
-      var _ref3, _b$pointSize;
+      var _ref4, _b$pointSize;
 
-      return (_ref3 = (_b$pointSize = b.pointSize) !== null && _b$pointSize !== void 0 ? _b$pointSize : 0 - a.pointSize) !== null && _ref3 !== void 0 ? _ref3 : 0;
+      return (_ref4 = (_b$pointSize = b.pointSize) !== null && _b$pointSize !== void 0 ? _b$pointSize : 0 - a.pointSize) !== null && _ref4 !== void 0 ? _ref4 : 0;
     })[0]) === null || _Object$values$sort$2 === void 0 ? void 0 : _Object$values$sort$2.pointSize) !== null && _Object$values$sort$ !== void 0 ? _Object$values$sort$ : 3; // default pointSize 3
 
     var _this$options = this.options,
@@ -39944,10 +40005,10 @@ var modules = {
           _scrollbarOpt2$interv = _scrollbarOpt2.interval,
           interval = _scrollbarOpt2$interv === void 0 ? 1 : _scrollbarOpt2$interv;
 
-      var _ref4 = range !== null && range !== void 0 ? range : [0, scale.labels.length],
-          _ref5 = _slicedToArray(_ref4, 2),
-          min = _ref5[0],
-          max = _ref5[1];
+      var _ref5 = range !== null && range !== void 0 ? range : [0, scale.labels.length],
+          _ref6 = _slicedToArray(_ref5, 2),
+          min = _ref6[0],
+          max = _ref6[1];
 
       var labelCount = Math.floor((+max - +min) / interval) + 1;
       var labelGap = (endPoint - startPoint) / labelCount;
@@ -42380,13 +42441,14 @@ var element_scatter_Scatter = /*#__PURE__*/function () {
 
     ['color', 'pointFill', 'fillColor', 'overflowColor'].forEach(function (colorProp) {
       if (_this[colorProp] === undefined) {
-        _this[colorProp] = COLOR[sIdx];
+        _this[colorProp] = COLOR[sIdx % COLOR.length];
       }
     });
     this.sId = sId;
     this.data = [];
     this.type = 'scatter';
     this.realTimeScatter = realTimeScatter;
+    this._rtTotalCount = 0;
   }
   /**
    * Draw series data
@@ -42530,6 +42592,7 @@ var element_scatter_Scatter = /*#__PURE__*/function () {
       var minmaxY = axesSteps.y[this.yAxisIndex];
       var pointStyle = typeof this.pointStyle === 'string' ? this.pointStyle : this.pointStyle.value;
       var pointSize = typeof this.pointSize === 'number' ? this.pointSize : this.pointSize.value;
+      var totalCount = 0;
 
       for (var i = 0; i < ((_this$data$this$sId = this.data[this.sId]) === null || _this$data$this$sId === void 0 ? void 0 : (_this$data$this$sId$d = _this$data$this$sId.dataGroup) === null || _this$data$this$sId$d === void 0 ? void 0 : _this$data$this$sId$d.length); i++) {
         var _this$data$this$sId, _this$data$this$sId$d;
@@ -42538,6 +42601,7 @@ var element_scatter_Scatter = /*#__PURE__*/function () {
           var _this$data$this$sId2, _this$data$this$sId2$, _this$data$this$sId3, _this$data$this$sId3$;
 
           var item = (_this$data$this$sId3 = this.data[this.sId]) === null || _this$data$this$sId3 === void 0 ? void 0 : (_this$data$this$sId3$ = _this$data$this$sId3.dataGroup[i]) === null || _this$data$this$sId3$ === void 0 ? void 0 : _this$data$this$sId3$.data[j];
+          totalCount++;
           var isDedupeOnRT = coordinateDedupe !== false;
           var shouldDraw = void 0;
 
@@ -42564,7 +42628,11 @@ var element_scatter_Scatter = /*#__PURE__*/function () {
             }
           }
         }
-      }
+      } // findGraphData(realTimeScatter)에서 역순 탐색 시 global index 계산에 사용한다.
+      // draw 단계에서 이미 전체 순회를 하기 때문에 여기서 캐시하면 mousemove마다 카운트용 1패스를 줄일 수 있다.
+
+
+      this._rtTotalCount = totalCount;
     }
     /**
      * Filters and returns data items based on input coordinates
@@ -42670,7 +42738,6 @@ var element_scatter_Scatter = /*#__PURE__*/function () {
   }, {
     key: "findGraphData",
     value: function findGraphData(offset) {
-      if (this.realTimeScatter) return false;
       var xp = offset[0];
       var yp = offset[1];
       var item = {
@@ -42680,6 +42747,46 @@ var element_scatter_Scatter = /*#__PURE__*/function () {
         index: null
       };
       var pointSize = this.pointSize;
+
+      if (this.realTimeScatter) {
+        var _this$data$this$sId4;
+
+        var dataGroup = (_this$data$this$sId4 = this.data[this.sId]) === null || _this$data$this$sId4 === void 0 ? void 0 : _this$data$this$sId4.dataGroup;
+
+        if (!dataGroup) {
+          return item;
+        }
+
+        var totalCount = this._rtTotalCount;
+        var currentIndex = totalCount - 1;
+
+        for (var i = dataGroup.length - 1; i >= 0; i--) {
+          var group = dataGroup[i];
+
+          if (group !== null && group !== void 0 && group.data) {
+            for (var j = group.data.length - 1; j >= 0; j--) {
+              var dataItem = group.data[j];
+
+              if (dataItem.xp !== null && dataItem.yp !== null) {
+                var x = dataItem.xp;
+                var y = dataItem.yp;
+
+                if (x - pointSize <= xp && xp <= x + pointSize && y - pointSize <= yp && yp <= y + pointSize) {
+                  item.data = dataItem;
+                  item.index = currentIndex;
+                  item.hit = true;
+                  return item;
+                }
+              }
+
+              currentIndex--;
+            }
+          }
+        }
+
+        return item;
+      }
+
       var gdata = this.data;
       var targetIndex = gdata.findIndex(function (data) {
         var x = data.xp;
@@ -42737,7 +42844,7 @@ var element_bar_Bar = /*#__PURE__*/function () {
     }
 
     if (this.color === undefined) {
-      this.color = COLOR[sIdx];
+      this.color = COLOR[sIdx % COLOR.length];
     }
 
     this.type = 'bar';
@@ -43717,7 +43824,7 @@ var element_pie_Pie = /*#__PURE__*/function () {
     }
 
     if (this.color === undefined) {
-      this.color = COLOR[sIdx];
+      this.color = COLOR[sIdx % COLOR.length];
     }
 
     this.sId = sId;
@@ -44332,19 +44439,25 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
               }, selectItemOption === null || selectItemOption === void 0 ? void 0 : selectItemOption.borderStyle);
             }
 
-            if (borderOpt.show) {
+            var isBorderDrawable = false;
+
+            if (borderOpt.show && borderOpt.lineWidth > 0) {
               var _borderOpt = borderOpt,
                   color = _borderOpt.color,
                   lineWidth = _borderOpt.lineWidth,
                   borderOpacity = _borderOpt.opacity;
-              ctx.strokeStyle = helpers_util.colorStringToRgba(color, itemOpacity === 1 ? borderOpacity : itemOpacity); // item 사이즈 보다 border 선 굵기가 큰 경우 lineWidth props 무시
+              var totalStrokeWidth = lineWidth * 2;
+              isBorderDrawable = totalStrokeWidth < Math.floor(w) && totalStrokeWidth < Math.floor(h);
+              ctx.strokeStyle = isBorderDrawable ? helpers_util.colorStringToRgba(color, itemOpacity === 1 ? borderOpacity : itemOpacity) : undefined; // item 사이즈 보다 border 선 굵기가 큰 경우 lineWidth props 무시
 
-              if (lineWidth < w && lineWidth < h) {
+              if (isBorderDrawable) {
                 ctx.lineWidth = lineWidth;
-                xp += lineWidth * 0.5;
-                yp += lineWidth * 0.5;
-                w -= lineWidth;
-                h -= lineWidth;
+                xp += lineWidth;
+                yp += lineWidth;
+                w -= totalStrokeWidth;
+                h -= totalStrokeWidth;
+              } else {
+                ctx.lineWidth = 0;
               }
             }
 
@@ -44354,7 +44467,9 @@ var element_heatmap_HeatMap = /*#__PURE__*/function () {
             item.w = w;
             item.h = h;
 
-            _this2.drawItem(ctx, xp, yp, w, h, borderOpt);
+            _this2.drawItem(ctx, xp, yp, w, h, _objectSpread2(_objectSpread2({}, borderOpt), {}, {
+              show: isBorderDrawable
+            }));
 
             ctx.restore();
 
@@ -45161,26 +45276,28 @@ var scale_Scale = /*#__PURE__*/function () {
         max: maxValue,
         minLabel: minLabel,
         maxLabel: maxLabel,
-        size: helpers_util.calcTextSize(maxLabel, helpers_util.getLabelStyle(this.labelStyle), (_this$labelStyle = this.labelStyle) === null || _this$labelStyle === void 0 ? void 0 : _this$labelStyle.padding)
+        size: helpers_util.calcTextSizeCanvas(maxLabel, helpers_util.getLabelStyle(this.labelStyle), (_this$labelStyle = this.labelStyle) === null || _this$labelStyle === void 0 ? void 0 : _this$labelStyle.padding)
       };
     }
     /**
      * return width what has max length
      * @param {string[]} notFormattedLabels
+     * @param {object} chartRect - unused in base class, used in StepScale override
      * @reutrn number maxWidth
      */
+    // eslint-disable-next-line no-unused-vars
 
   }, {
     key: "getLabelWidthHasMaxLength",
-    value: function getLabelWidthHasMaxLength(notFormattedLabels) {
+    value: function getLabelWidthHasMaxLength(notFormattedLabels, chartRect) {
       var _this2 = this;
 
       return (notFormattedLabels !== null && notFormattedLabels !== void 0 ? notFormattedLabels : []).reduce(function (max, label) {
-        var _Util$calcTextSize$wi, _Util$calcTextSize;
+        var _Util$calcTextSizeCan, _Util$calcTextSizeCan2;
 
         var formattedLabel = _this2.getLabelFormat(label);
 
-        var width = (_Util$calcTextSize$wi = (_Util$calcTextSize = helpers_util.calcTextSize(formattedLabel, helpers_util.getLabelStyle(_this2.labelStyle))) === null || _Util$calcTextSize === void 0 ? void 0 : _Util$calcTextSize.width) !== null && _Util$calcTextSize$wi !== void 0 ? _Util$calcTextSize$wi : 0;
+        var width = (_Util$calcTextSizeCan = (_Util$calcTextSizeCan2 = helpers_util.calcTextSizeCanvas(formattedLabel, helpers_util.getLabelStyle(_this2.labelStyle))) === null || _Util$calcTextSizeCan2 === void 0 ? void 0 : _Util$calcTextSizeCan2.width) !== null && _Util$calcTextSizeCan !== void 0 ? _Util$calcTextSizeCan : 0;
         return Math.max(max, width);
       }, 0);
     }
@@ -46451,6 +46568,7 @@ var scale_logarithmic_LogarithmicScale = /*#__PURE__*/function (_Scale) {
 
 
 
+
 var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
   _inherits(StepScale, _Scale);
 
@@ -46521,7 +46639,7 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
         maxIndex: maxIndex,
         minLabel: this.getLabelFormat(minValue, maxWidth),
         maxLabel: this.getLabelFormat(maxValue, maxWidth),
-        size: helpers_util.calcTextSize(this.getLabelFormat(maxValue, maxWidth), helpers_util.getLabelStyle(this.labelStyle))
+        size: helpers_util.calcTextSizeCanvas(this.getLabelFormat(maxValue, maxWidth), helpers_util.getLabelStyle(this.labelStyle))
       };
     }
   }, {
@@ -46906,6 +47024,36 @@ var scale_step_StepScale = /*#__PURE__*/function (_Scale) {
       var dir = this.labelStyle.fitDir;
       return helpers_util.truncateLabelWithEllipsis(value, maxWidth, ctx, dir);
     }
+    /**
+     * return width what has max length
+     * ellipsis가 적용된 label의 width를 계산 (fontSize 적용)
+     * @param {string[]} notFormattedLabels
+     * @param {object} chartRect
+     * @returns {number} maxWidth
+     */
+
+  }, {
+    key: "getLabelWidthHasMaxLength",
+    value: function getLabelWidthHasMaxLength(notFormattedLabels, chartRect) {
+      var _notFormattedLabels$l,
+          _this$labelStyle$maxW3,
+          _this$labelStyle5,
+          _this3 = this;
+
+      // fontSize를 포함한 labelStyle 가져오기
+      var labelStyle = helpers_util.getLabelStyle(this.labelStyle);
+      var labelCount = (_notFormattedLabels$l = notFormattedLabels === null || notFormattedLabels === void 0 ? void 0 : notFormattedLabels.length) !== null && _notFormattedLabels$l !== void 0 ? _notFormattedLabels$l : 0;
+      var maxWidth = (_this$labelStyle$maxW3 = (_this$labelStyle5 = this.labelStyle) === null || _this$labelStyle5 === void 0 ? void 0 : _this$labelStyle5.maxWidth) !== null && _this$labelStyle$maxW3 !== void 0 ? _this$labelStyle$maxW3 : (chartRect === null || chartRect === void 0 ? void 0 : chartRect.chartWidth) / (labelCount + 2);
+      return (notFormattedLabels !== null && notFormattedLabels !== void 0 ? notFormattedLabels : []).reduce(function (max, label) {
+        var _Util$calcTextSizeCan, _Util$calcTextSizeCan2;
+
+        // ellipsis가 적용된 label의 width를 계산
+        var formattedLabel = _this3.getLabelFormat(label, maxWidth);
+
+        var width = (_Util$calcTextSizeCan = (_Util$calcTextSizeCan2 = helpers_util.calcTextSizeCanvas(formattedLabel, labelStyle)) === null || _Util$calcTextSizeCan2 === void 0 ? void 0 : _Util$calcTextSizeCan2.width) !== null && _Util$calcTextSizeCan !== void 0 ? _Util$calcTextSizeCan : 0;
+        return Math.max(max, width);
+      }, 0);
+    }
   }]);
 
   return StepScale;
@@ -48004,7 +48152,8 @@ var plugins_legend_modules = {
         },
         hitInfo: {
           legend: null
-        }
+        },
+        lightUpdate: true
       });
     };
     /**
@@ -48040,7 +48189,8 @@ var plugins_legend_modules = {
         },
         hitInfo: {
           legend: legendHitInfo
-        }
+        },
+        lightUpdate: true
       });
     };
 
@@ -48252,7 +48402,8 @@ var plugins_legend_modules = {
         updateSelTip: {
           update: false,
           keepDomain: false
-        }
+        },
+        lightUpdate: true
       });
     };
     /**
@@ -48293,7 +48444,8 @@ var plugins_legend_modules = {
         },
         hitInfo: {
           legend: legendHitInfo
-        }
+        },
+        lightUpdate: true
       });
     };
 
@@ -50216,7 +50368,9 @@ var plugins_scrollbar_module = {
         updateSelTip: {
           update: false,
           keepDomain: false
-        }
+        },
+        updateByScrollbar: true,
+        lightUpdate: minValue > 1
       });
     }
   },
@@ -52338,6 +52492,7 @@ var plugins_interaction_modules = {
         formattedTxt = tooltipValueFormatter({
           x: isHorizontal ? value : itemData === null || itemData === void 0 ? void 0 : itemData.x,
           y: isHorizontal ? itemData === null || itemData === void 0 ? void 0 : itemData.y : value,
+          o: itemData === null || itemData === void 0 ? void 0 : itemData.o,
           name: seriesName,
           seriesId: seriesId,
           dataId: dataId
@@ -55037,7 +55192,6 @@ var element_tip_modules = {
 
 
 
-
 
 
 var chart_core_EvChart = /*#__PURE__*/function () {
@@ -55228,51 +55382,38 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   }, {
     key: "adjustXAndYAxisWidth",
     value: function adjustXAndYAxisWidth() {
-      var _this$options$axesX,
-          _this$options$axesY,
-          _this2 = this,
-          _this$axesSteps,
-          _this$axesSteps2,
-          _this$axesY$,
-          _this$axesY$$labelSty,
-          _this$axesY$2,
-          _this$axesY$2$labelSt,
-          _this$axesX$,
-          _this$axesX$$labelSty,
-          _this$axesX$2,
-          _this$axesX$2$labelSt,
-          _this$axesX$3,
-          _this$axesY$3,
+      var _this2 = this,
           _this$axesRange,
           _this$axesRange$x,
           _this$axesRange2,
-          _this$axesRange3,
-          _this$axesRange3$y,
-          _this$axesRange4;
+          _this$axesRange2$y;
 
-      // fitWidth(maxWidth에 넘을 시 말줄임표 들어가는 기능)을 사용중인 step Axis인 경우에는 적용 제외
-      var isStepXAxisUseFitWidth = (_this$options$axesX = this.options.axesX) === null || _this$options$axesX === void 0 ? void 0 : _this$options$axesX.some(function (axisX) {
-        var _axisX$labelStyle;
-
-        return axisX.type === 'step' && ((_axisX$labelStyle = axisX.labelStyle) === null || _axisX$labelStyle === void 0 ? void 0 : _axisX$labelStyle.fitWidth);
-      });
-      var isStepYAxisUseFitWidth = (_this$options$axesY = this.options.axesY) === null || _this$options$axesY === void 0 ? void 0 : _this$options$axesY.some(function (axisY) {
-        var _axisY$labelStyle;
-
-        return axisY.type === 'step' && ((_axisY$labelStyle = axisY.labelStyle) === null || _axisY$labelStyle === void 0 ? void 0 : _axisY$labelStyle.fitWidth);
-      });
-
-      var getNotFormattedLabels = function getNotFormattedLabels(axesSteps) {
+      var getNotFormattedLabels = function getNotFormattedLabels(axesSteps, axisType, axis) {
         var _ref2 = axesSteps !== null && axesSteps !== void 0 ? axesSteps : {},
             interval = _ref2.interval,
             graphMin = _ref2.graphMin,
             graphMax = _ref2.graphMax,
             _ref2$steps = _ref2.steps,
-            steps = _ref2$steps === void 0 ? 0 : _ref2$steps;
+            steps = _ref2$steps === void 0 ? 0 : _ref2$steps,
+            minIndex = _ref2.minIndex,
+            maxIndex = _ref2.maxIndex,
+            indexInterval = _ref2.indexInterval;
+
+        var result = []; // StepScale의 경우 실제로 표시될 모든 라벨들을 포함
 
-        var result = [];
+        if ((axis === null || axis === void 0 ? void 0 : axis.type) === 'step' && minIndex !== undefined && maxIndex !== undefined && indexInterval !== undefined) {
+          var _ref3, _labels$x, _ref4, _labels$y;
 
-        if (interval) {
+          var labels = _this2.data.labels;
+          var axisLabels = axisType === 'x' ? (_ref3 = (_labels$x = labels === null || labels === void 0 ? void 0 : labels.x) !== null && _labels$x !== void 0 ? _labels$x : labels) !== null && _ref3 !== void 0 ? _ref3 : [] : (_ref4 = (_labels$y = labels === null || labels === void 0 ? void 0 : labels.y) !== null && _labels$y !== void 0 ? _labels$y : labels) !== null && _ref4 !== void 0 ? _ref4 : [];
+          result = [];
+
+          for (var i = minIndex; i <= maxIndex; i += indexInterval) {
+            if (axisLabels[i] !== undefined) {
+              result.push(axisLabels[i]);
+            }
+          }
+        } else if (interval) {
           result = Array.from({
             length: steps
           }, function (_, i) {
@@ -55280,38 +55421,46 @@ var chart_core_EvChart = /*#__PURE__*/function () {
           });
           result.push(graphMax);
         } else {
-          var _ref3, _labels$y;
+          var _ref5, _labels$x2, _ref6, _labels$y2;
 
-          var labels = _this2.data.labels;
-          result = (_ref3 = (_labels$y = labels === null || labels === void 0 ? void 0 : labels.y) !== null && _labels$y !== void 0 ? _labels$y : labels) !== null && _ref3 !== void 0 ? _ref3 : [];
+          var _labels = _this2.data.labels;
+          result = axisType === 'x' ? (_ref5 = (_labels$x2 = _labels === null || _labels === void 0 ? void 0 : _labels.x) !== null && _labels$x2 !== void 0 ? _labels$x2 : _labels) !== null && _ref5 !== void 0 ? _ref5 : [] : (_ref6 = (_labels$y2 = _labels === null || _labels === void 0 ? void 0 : _labels.y) !== null && _labels$y2 !== void 0 ? _labels$y2 : _labels) !== null && _ref6 !== void 0 ? _ref6 : [];
         }
 
         return result;
       };
 
-      var notFormattedXLabels = getNotFormattedLabels((_this$axesSteps = this.axesSteps) === null || _this$axesSteps === void 0 ? void 0 : _this$axesSteps.x[0]);
-      var notFormattedYLabels = getNotFormattedLabels((_this$axesSteps2 = this.axesSteps) === null || _this$axesSteps2 === void 0 ? void 0 : _this$axesSteps2.y[0]);
-      var yFixWidth = truthyNumber((_this$axesY$ = this.axesY[0]) === null || _this$axesY$ === void 0 ? void 0 : (_this$axesY$$labelSty = _this$axesY$.labelStyle) === null || _this$axesY$$labelSty === void 0 ? void 0 : _this$axesY$$labelSty.fixWidth) ? (_this$axesY$2 = this.axesY[0]) === null || _this$axesY$2 === void 0 ? void 0 : (_this$axesY$2$labelSt = _this$axesY$2.labelStyle) === null || _this$axesY$2$labelSt === void 0 ? void 0 : _this$axesY$2$labelSt.fixWidth : 0;
-      var xFixWidth = truthyNumber((_this$axesX$ = this.axesX[0]) === null || _this$axesX$ === void 0 ? void 0 : (_this$axesX$$labelSty = _this$axesX$.labelStyle) === null || _this$axesX$$labelSty === void 0 ? void 0 : _this$axesX$$labelSty.fixWidth) ? (_this$axesX$2 = this.axesX[0]) === null || _this$axesX$2 === void 0 ? void 0 : (_this$axesX$2$labelSt = _this$axesX$2.labelStyle) === null || _this$axesX$2$labelSt === void 0 ? void 0 : _this$axesX$2$labelSt.fixWidth : 0;
-      var xMaxWidth = (_this$axesX$3 = this.axesX[0]) === null || _this$axesX$3 === void 0 ? void 0 : _this$axesX$3.getLabelWidthHasMaxLength(notFormattedXLabels);
-      var yMaxWidth = (_this$axesY$3 = this.axesY[0]) === null || _this$axesY$3 === void 0 ? void 0 : _this$axesY$3.getLabelWidthHasMaxLength(notFormattedYLabels);
       var adjustedRange = {
-        x: !isStepXAxisUseFitWidth ? (_this$axesRange = this.axesRange) === null || _this$axesRange === void 0 ? void 0 : (_this$axesRange$x = _this$axesRange.x) === null || _this$axesRange$x === void 0 ? void 0 : _this$axesRange$x.map(function (value) {
+        x: (_this$axesRange = this.axesRange) === null || _this$axesRange === void 0 ? void 0 : (_this$axesRange$x = _this$axesRange.x) === null || _this$axesRange$x === void 0 ? void 0 : _this$axesRange$x.map(function (value, index) {
+          var _this2$axesSteps, _axis$labelStyle, _axis$getLabelWidthHa, _axis$getLabelWidthHa2;
+
+          var axis = _this2.axesX[index];
+          var axesSteps = (_this2$axesSteps = _this2.axesSteps) === null || _this2$axesSteps === void 0 ? void 0 : _this2$axesSteps.x[index];
+          var notFormattedLabels = getNotFormattedLabels(axesSteps, 'x', axis);
+          var fixWidth = truthyNumber(axis === null || axis === void 0 ? void 0 : (_axis$labelStyle = axis.labelStyle) === null || _axis$labelStyle === void 0 ? void 0 : _axis$labelStyle.fixWidth) ? axis.labelStyle.fixWidth : 0;
+          var maxWidth = (_axis$getLabelWidthHa = axis === null || axis === void 0 ? void 0 : (_axis$getLabelWidthHa2 = axis.getLabelWidthHasMaxLength) === null || _axis$getLabelWidthHa2 === void 0 ? void 0 : _axis$getLabelWidthHa2.call(axis, notFormattedLabels, _this2.chartRect)) !== null && _axis$getLabelWidthHa !== void 0 ? _axis$getLabelWidthHa : 0;
           return _objectSpread2(_objectSpread2({}, value), {}, {
             size: {
-              width: xFixWidth || Math.max(xMaxWidth, value.size.width),
+              width: fixWidth || Math.max(maxWidth, value.size.width),
               height: value.size.height
             }
           });
-        }) : (_this$axesRange2 = this.axesRange) === null || _this$axesRange2 === void 0 ? void 0 : _this$axesRange2.x,
-        y: !isStepYAxisUseFitWidth ? (_this$axesRange3 = this.axesRange) === null || _this$axesRange3 === void 0 ? void 0 : (_this$axesRange3$y = _this$axesRange3.y) === null || _this$axesRange3$y === void 0 ? void 0 : _this$axesRange3$y.map(function (value) {
+        }),
+        y: (_this$axesRange2 = this.axesRange) === null || _this$axesRange2 === void 0 ? void 0 : (_this$axesRange2$y = _this$axesRange2.y) === null || _this$axesRange2$y === void 0 ? void 0 : _this$axesRange2$y.map(function (value, index) {
+          var _this2$axesSteps2, _axis$labelStyle2, _axis$getLabelWidthHa3, _axis$getLabelWidthHa4;
+
+          var axis = _this2.axesY[index];
+          var axesSteps = (_this2$axesSteps2 = _this2.axesSteps) === null || _this2$axesSteps2 === void 0 ? void 0 : _this2$axesSteps2.y[index];
+          var notFormattedLabels = getNotFormattedLabels(axesSteps, 'y', axis);
+          var fixWidth = truthyNumber(axis === null || axis === void 0 ? void 0 : (_axis$labelStyle2 = axis.labelStyle) === null || _axis$labelStyle2 === void 0 ? void 0 : _axis$labelStyle2.fixWidth) ? axis.labelStyle.fixWidth : 0;
+          var maxWidth = (_axis$getLabelWidthHa3 = axis === null || axis === void 0 ? void 0 : (_axis$getLabelWidthHa4 = axis.getLabelWidthHasMaxLength) === null || _axis$getLabelWidthHa4 === void 0 ? void 0 : _axis$getLabelWidthHa4.call(axis, notFormattedLabels, _this2.chartRect)) !== null && _axis$getLabelWidthHa3 !== void 0 ? _axis$getLabelWidthHa3 : 0;
           return _objectSpread2(_objectSpread2({}, value), {}, {
             size: {
-              width: yFixWidth || Math.max(yMaxWidth, value.size.width),
+              width: fixWidth || Math.max(maxWidth, value.size.width),
               height: value.size.height
             }
           });
-        }) : (_this$axesRange4 = this.axesRange) === null || _this$axesRange4 === void 0 ? void 0 : _this$axesRange4.y
+        })
       };
       this.axesRange = adjustedRange;
       this.labelOffset = this.getLabelOffset(adjustedRange);
@@ -55805,15 +55954,15 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   }, {
     key: "getChartRect",
     value: function getChartRect() {
-      var _this$options$axesX2, _this$options$axesX2$, _this$options$axesY2, _this$options$axesY2$;
+      var _this$options$axesX, _this$options$axesX$, _this$options$axesY, _this$options$axesY$;
 
       var _this$getChartDOMRect = this.getChartDOMRect(),
           width = _this$getChartDOMRect.width,
           height = _this$getChartDOMRect.height;
 
       var padding = this.options.padding;
-      var xAxisTitleOpt = (_this$options$axesX2 = this.options.axesX) === null || _this$options$axesX2 === void 0 ? void 0 : (_this$options$axesX2$ = _this$options$axesX2[0]) === null || _this$options$axesX2$ === void 0 ? void 0 : _this$options$axesX2$.title;
-      var yAxisTitleOpt = (_this$options$axesY2 = this.options.axesY) === null || _this$options$axesY2 === void 0 ? void 0 : (_this$options$axesY2$ = _this$options$axesY2[0]) === null || _this$options$axesY2$ === void 0 ? void 0 : _this$options$axesY2$.title;
+      var xAxisTitleOpt = (_this$options$axesX = this.options.axesX) === null || _this$options$axesX === void 0 ? void 0 : (_this$options$axesX$ = _this$options$axesX[0]) === null || _this$options$axesX$ === void 0 ? void 0 : _this$options$axesX$.title;
+      var yAxisTitleOpt = (_this$options$axesY = this.options.axesY) === null || _this$options$axesY === void 0 ? void 0 : (_this$options$axesY$ = _this$options$axesY[0]) === null || _this$options$axesY$ === void 0 ? void 0 : _this$options$axesY$.title;
       var titleMargin = 10;
       var xAxisTitleHeight = 0;
 
@@ -55952,9 +56101,9 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       var lw = 0;
       var lh = 0;
       axesX.forEach(function (axis, index) {
-        var _axis$labelStyle;
+        var _axis$labelStyle3;
 
-        if ((_axis$labelStyle = axis.labelStyle) !== null && _axis$labelStyle !== void 0 && _axis$labelStyle.show) {
+        if ((_axis$labelStyle3 = axis.labelStyle) !== null && _axis$labelStyle3 !== void 0 && _axis$labelStyle3.show) {
           lw = range.x[index].size.width + labelBuffer.width;
           lh = range.x[index].size.height + labelBuffer.height;
 
@@ -55973,9 +56122,9 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         }
       });
       axesY.forEach(function (axis, index) {
-        var _axis$labelStyle2;
+        var _axis$labelStyle4;
 
-        if ((_axis$labelStyle2 = axis.labelStyle) !== null && _axis$labelStyle2 !== void 0 && _axis$labelStyle2.show) {
+        if ((_axis$labelStyle4 = axis.labelStyle) !== null && _axis$labelStyle4 !== void 0 && _axis$labelStyle4.show) {
           lw = range.y[index].size.width + labelBuffer.width;
 
           if (axis.position === 'left') {
@@ -56004,7 +56153,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   }, {
     key: "update",
     value: function update(updateInfo) {
-      var _this$updateScrollbar, _this$options$realTim2, _renderHitInfo, _this$legendHover;
+      var _renderHitInfo, _this$legendHover;
 
       var options = this.options;
       var data = this.data.data;
@@ -56015,13 +56164,20 @@ var chart_core_EvChart = /*#__PURE__*/function () {
           updateSelTip = updateInfo.updateSelTip,
           updateLegend = updateInfo.updateLegend,
           updateData = updateInfo.updateData,
-          updateTooltip = updateInfo.updateTooltip;
+          updateTooltip = updateInfo.updateTooltip,
+          updateByScrollbar = updateInfo.updateByScrollbar,
+          lightUpdate = updateInfo.lightUpdate;
 
       if (!this.isInit) {
         return;
       }
 
-      (_this$updateScrollbar = this.updateScrollbar) === null || _this$updateScrollbar === void 0 ? void 0 : _this$updateScrollbar.call(this, updateData);
+      if (updateByScrollbar) {
+        var _this$updateScrollbar;
+
+        (_this$updateScrollbar = this.updateScrollbar) === null || _this$updateScrollbar === void 0 ? void 0 : _this$updateScrollbar.call(this, updateData);
+      }
+
       this.resetProps();
       this.updateSeries = updateSeries;
 
@@ -56060,54 +56216,60 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         }
       }
 
-      if (groups.length) {
-        this.addGroupInfo(groups);
-      }
+      if (!lightUpdate) {
+        var _this$options$realTim2;
 
-      if ((_this$options$realTim2 = this.options.realTimeScatter) !== null && _this$options$realTim2 !== void 0 && _this$options$realTim2.use) {
-        if (!this.dataSet) {
-          this.dataSet = {};
-        }
+        // group update
+        if (groups.length) {
+          this.addGroupInfo(groups);
+        } // dataSet update
 
-        this.createRealTimeScatterDataSet(data);
-      } else {
-        this.createDataSet(data, labels);
-      } // title update
 
+        if ((_this$options$realTim2 = this.options.realTimeScatter) !== null && _this$options$realTim2 !== void 0 && _this$options$realTim2.use) {
+          if (!this.dataSet) {
+            this.dataSet = {};
+          }
 
-      if (options.title.show) {
-        if (!this.isInitTitle) {
-          this.initTitle();
+          this.createRealTimeScatterDataSet(data);
         } else {
-          this.updateTitle();
-        }
+          this.createDataSet(data, labels);
+        } // title update
 
-        this.showTitle();
-      } else if (this.isInitTitle) {
-        this.hideTitle();
-      } // legend Update
 
+        if (options.title.show) {
+          if (!this.isInitTitle) {
+            this.initTitle();
+          } else {
+            this.updateTitle();
+          }
 
-      if (options.legend.show) {
-        var _options$legend, _options$legend$table;
+          this.showTitle();
+        } else if (this.isInitTitle) {
+          this.hideTitle();
+        } // legend Update
 
-        var useTable = !!((_options$legend = options.legend) !== null && _options$legend !== void 0 && (_options$legend$table = _options$legend.table) !== null && _options$legend$table !== void 0 && _options$legend$table.use) && options.type !== 'heatMap' && options.type !== 'scatter';
 
-        if (!this.isInitLegend) {
-          this.initLegend();
-        } else if (updateSeries) {
-          this.updateLegend();
-        } else if (updateLegend) {
-          this.forceUpdateLegend();
-        } else if (useTable && updateData) {
-          this.updateLegendTableValues();
-        }
+        if (options.legend.show) {
+          var _options$legend, _options$legend$table;
 
-        this.setLegendPosition();
-        this.updateLegendContainerSize();
-        this.showLegend();
-      } else if (this.isInitLegend) {
-        this.hideLegend();
+          var useTable = !!((_options$legend = options.legend) !== null && _options$legend !== void 0 && (_options$legend$table = _options$legend.table) !== null && _options$legend$table !== void 0 && _options$legend$table.use) && options.type !== 'heatMap' && options.type !== 'scatter';
+
+          if (!this.isInitLegend) {
+            this.initLegend();
+          } else if (updateSeries) {
+            this.updateLegend();
+          } else if (updateLegend) {
+            this.forceUpdateLegend();
+          } else if (useTable && updateData) {
+            this.updateLegendTableValues();
+          }
+
+          this.setLegendPosition();
+          this.updateLegendContainerSize();
+          this.showLegend();
+        } else if (this.isInitLegend) {
+          this.hideLegend();
+        }
       } // Tooltip Update
 
 
@@ -56125,7 +56287,6 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         }
       }
 
-      this.chartRect = this.getChartRect();
       this.minMax = this.getStoreMinMax();
       this.axesX = this.createAxes('x', options.axesX);
       this.axesY = this.createAxes('y', options.axesY);