evui 3.3.41 → 3.3.43

package/dist/evui.common.js

@@ -290,20 +290,6 @@ $({ target: 'Object', stat: true }, {
 });
 
 
-/***/ }),
-
-/***/ "08a2":
-/***/ (function(module, exports, __webpack_require__) {
-
-// Imports
-var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
-exports = ___CSS_LOADER_API_IMPORT___(false);
-// Module
-exports.push([module.i, ".ev-chart-group__wrapper[data-v-bd8c6660]{display:flex;height:100%;flex-direction:column}", ""]);
-// Exports
-module.exports = exports;
-
-
 /***/ }),
 
 /***/ "0924":
@@ -7575,6 +7561,17 @@ module.exports = function (Iterable, NAME, IteratorConstructor, next, DEFAULT, I
 };
 
 
+/***/ }),
+
+/***/ "7f2c":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_ChartGroup_vue_vue_type_style_index_0_id_2db10c44_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("97ea");
+/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_ChartGroup_vue_vue_type_style_index_0_id_2db10c44_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_ChartGroup_vue_vue_type_style_index_0_id_2db10c44_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "7f9a":
@@ -7638,17 +7635,6 @@ module.exports = function (it) {
 };
 
 
-/***/ }),
-
-/***/ "8352":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_ChartGroup_vue_vue_type_style_index_0_id_bd8c6660_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("c920");
-/* harmony import */ var _node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_ChartGroup_vue_vue_type_style_index_0_id_bd8c6660_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_v16_dist_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_v16_dist_index_js_ref_0_1_ChartGroup_vue_vue_type_style_index_0_id_bd8c6660_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "83ab":
@@ -7971,7 +7957,7 @@ $({ target: 'Number', stat: true }, {
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.3.41\"}");
+module.exports = JSON.parse("{\"a\":\"3.3.43\"}");
 
 /***/ }),
 
@@ -8882,6 +8868,21 @@ var update = add("6e9caba0", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ "97ea":
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__("d9d2");
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = __webpack_require__("499e").default
+var update = add("05d41eae", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ "99af":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -10599,21 +10600,6 @@ module.exports = function (METHOD_NAME) {
 };
 
 
-/***/ }),
-
-/***/ "c920":
-/***/ (function(module, exports, __webpack_require__) {
-
-// style-loader: Adds some css to the DOM by adding a <style> tag
-
-// load the styles
-var content = __webpack_require__("08a2");
-if(typeof content === 'string') content = [[module.i, content, '']];
-if(content.locals) module.exports = content.locals;
-// add the styles to the DOM
-var add = __webpack_require__("499e").default
-var update = add("7946d016", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ "c975":
@@ -11238,6 +11224,20 @@ $({ target: 'Array', proto: true, forced: !HAS_SPECIES_SUPPORT || !USES_TO_LENGT
 });
 
 
+/***/ }),
+
+/***/ "d9d2":
+/***/ (function(module, exports, __webpack_require__) {
+
+// Imports
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
+exports = ___CSS_LOADER_API_IMPORT___(false);
+// Module
+exports.push([module.i, ".ev-chart-group__wrapper[data-v-2db10c44]{display:flex;height:100%;flex-direction:column}", ""]);
+// Exports
+module.exports = exports;
+
+
 /***/ }),
 
 /***/ "da84":
@@ -21146,7 +21146,9 @@ var calendar_uses_useEvent = function useEvent(param) {
   }, function (curr) {
     selectedValue.value = curr;
 
-    if (props.mode.includes('Time')) {
+    if (props.mode === 'dateRange') {
+      updateCalendarPage(selectedValue.value);
+    } else if (props.mode.includes('Time')) {
       var updateValue = [];
 
       if (props.mode === 'dateTime') {
@@ -35340,27 +35342,33 @@ var element_line_Line = /*#__PURE__*/function () {
         color: this.color
       };
       var gdata = this.data;
-      var s = 0;
-      var e = gdata.length - 1;
 
-      while (s <= e) {
-        var m = Math.floor((s + e) / 2);
-        var x = gdata[m].xp;
-        var y = gdata[m].yp;
+      if (gdata !== null && gdata !== void 0 && gdata.length) {
+        var _gdata$;
 
-        if (x - 6 <= xp && xp <= x + 6) {
-          item.data = gdata[m];
-          item.index = m;
+        var s = 0;
+        var e = gdata.length - 1;
+        var xpInterval = ((_gdata$ = gdata[1]) === null || _gdata$ === void 0 ? void 0 : _gdata$.xp) - gdata[0].xp < 6 ? 1.5 : 6;
 
-          if (y - 6 <= yp && yp <= y + 6) {
-            item.hit = true;
-          }
+        while (s <= e) {
+          var m = Math.floor((s + e) / 2);
+          var x = gdata[m].xp;
+          var y = gdata[m].yp;
 
-          return item;
-        } else if (x + 6 < xp) {
-          s = m + 1;
-        } else {
-          e = m - 1;
+          if (x - xpInterval < xp && xp < x + xpInterval) {
+            item.data = gdata[m];
+            item.index = m;
+
+            if (y - 6 <= yp && yp <= y + 6) {
+              item.hit = true;
+            }
+
+            return item;
+          } else if (x + xpInterval > xp) {
+            e = m - 1;
+          } else {
+            s = m + 1;
+          }
         }
       }
 
@@ -37901,7 +37909,7 @@ var scale_Scale = /*#__PURE__*/function () {
 
             labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
 
-            if (options !== null && options !== void 0 && (_options$brush = options.brush) !== null && _options$brush !== void 0 && _options$brush.showLabel || !options.brush) {
+            if (options !== null && options !== void 0 && (_options$brush = options.brush) !== null && _options$brush !== void 0 && _options$brush.showLabel || !(options !== null && options !== void 0 && options.brush)) {
               ctx.fillText(labelText, labelCenter, labelPoint);
             }
 
@@ -37936,7 +37944,7 @@ var scale_Scale = /*#__PURE__*/function () {
 
             labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
 
-            if (options !== null && options !== void 0 && (_options$brush2 = options.brush) !== null && _options$brush2 !== void 0 && _options$brush2.showLabel || !options.brush) {
+            if (options !== null && options !== void 0 && (_options$brush2 = options.brush) !== null && _options$brush2 !== void 0 && _options$brush2.showLabel || !(options !== null && options !== void 0 && options.brush)) {
               ctx.fillText(labelText, labelPoint, labelCenter);
             }
 
@@ -46481,33 +46489,33 @@ Chart.install = function (app) {
 };
 
 /* harmony default export */ var chart = (Chart);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/chartGroup/ChartGroup.vue?vue&type=template&id=bd8c6660&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/chartGroup/ChartGroup.vue?vue&type=template&id=2db10c44&scoped=true
 
 
-var ChartGroupvue_type_template_id_bd8c6660_scoped_true_withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-bd8c6660");
+var ChartGroupvue_type_template_id_2db10c44_scoped_true_withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-2db10c44");
 
-Object(external_commonjs_vue_commonjs2_vue_root_Vue_["pushScopeId"])("data-v-bd8c6660");
+Object(external_commonjs_vue_commonjs2_vue_root_Vue_["pushScopeId"])("data-v-2db10c44");
 
-var ChartGroupvue_type_template_id_bd8c6660_scoped_true_hoisted_1 = {
+var ChartGroupvue_type_template_id_2db10c44_scoped_true_hoisted_1 = {
   key: 0,
   ref: "evChartToolbarRef"
 };
-var ChartGroupvue_type_template_id_bd8c6660_scoped_true_hoisted_2 = {
+var ChartGroupvue_type_template_id_2db10c44_scoped_true_hoisted_2 = {
   ref: "evChartGroupRef",
   class: "ev-chart-group__wrapper"
 };
 
 Object(external_commonjs_vue_commonjs2_vue_root_Vue_["popScopeId"])();
 
-var ChartGroupvue_type_template_id_bd8c6660_scoped_true_render = /*#__PURE__*/ChartGroupvue_type_template_id_bd8c6660_scoped_true_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
+var ChartGroupvue_type_template_id_2db10c44_scoped_true_render = /*#__PURE__*/ChartGroupvue_type_template_id_2db10c44_scoped_true_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ev_chart_toolbar = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ev-chart-toolbar");
 
-  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, [$setup.zoomOptions.toolbar.show ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", ChartGroupvue_type_template_id_bd8c6660_scoped_true_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_chart_toolbar, {
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, [$setup.zoomOptions.toolbar.show ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", ChartGroupvue_type_template_id_2db10c44_scoped_true_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_chart_toolbar, {
     toolbar: $setup.zoomOptions.toolbar,
     onOnClickToolbar: $setup.onClickToolbar
-  }, null, 8, ["toolbar", "onOnClickToolbar"])], 512)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", ChartGroupvue_type_template_id_bd8c6660_scoped_true_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderSlot"])(_ctx.$slots, "default")], 512)], 64);
+  }, null, 8, ["toolbar", "onOnClickToolbar"])], 512)) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", ChartGroupvue_type_template_id_2db10c44_scoped_true_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderSlot"])(_ctx.$slots, "default")], 512)], 64);
 });
-// CONCATENATED MODULE: ./src/components/chartGroup/ChartGroup.vue?vue&type=template&id=bd8c6660&scoped=true
+// CONCATENATED MODULE: ./src/components/chartGroup/ChartGroup.vue?vue&type=template&id=2db10c44&scoped=true
 
 // CONCATENATED MODULE: ./src/components/chartGroup/uses.js
 
@@ -46594,8 +46602,10 @@ var uses_useGroupModel = function useGroupModel() {
       default: null
     }
   },
-  emits: ['update:zoomStartIdx', 'update:zoomEndIdx'],
-  setup: function setup(props) {
+  emits: ['update:groupSelectedLabel', 'update:zoomStartIdx', 'update:zoomEndIdx'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+
     var _useGroupModel = uses_useGroupModel(),
         getNormalizedOptions = _useGroupModel.getNormalizedOptions,
         isExecuteZoom = _useGroupModel.isExecuteZoom,
@@ -46606,8 +46616,13 @@ var uses_useGroupModel = function useGroupModel() {
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["provide"])('isExecuteZoom', isExecuteZoom);
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["provide"])('isChartGroup', true);
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["provide"])('brushSeries', brushSeries);
-    var groupSelectedLabel = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
-      return props.groupSelectedLabel;
+    var groupSelectedLabel = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])({
+      get: function get() {
+        return props.groupSelectedLabel;
+      },
+      set: function set(val) {
+        return emit('update:groupSelectedLabel', val);
+      }
     });
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["provide"])('groupSelectedLabel', groupSelectedLabel);
 
@@ -46649,10 +46664,10 @@ var uses_useGroupModel = function useGroupModel() {
     });
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
       return [props.zoomStartIdx, props.zoomEndIdx];
-    }, function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-          zoomStartIdx = _ref2[0],
-          zoomEndIdx = _ref2[1];
+    }, function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          zoomStartIdx = _ref3[0],
+          zoomEndIdx = _ref3[1];
 
       if (brushIdx.isUseButton || brushIdx.isUseScroll) {
         return;
@@ -46670,8 +46685,8 @@ var uses_useGroupModel = function useGroupModel() {
 });
 // CONCATENATED MODULE: ./src/components/chartGroup/ChartGroup.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./src/components/chartGroup/ChartGroup.vue?vue&type=style&index=0&id=bd8c6660&lang=scss&scoped=true
-var ChartGroupvue_type_style_index_0_id_bd8c6660_lang_scss_scoped_true = __webpack_require__("8352");
+// EXTERNAL MODULE: ./src/components/chartGroup/ChartGroup.vue?vue&type=style&index=0&id=2db10c44&lang=scss&scoped=true
+var ChartGroupvue_type_style_index_0_id_2db10c44_lang_scss_scoped_true = __webpack_require__("7f2c");
 
 // CONCATENATED MODULE: ./src/components/chartGroup/ChartGroup.vue
 
@@ -46681,7 +46696,7 @@ var ChartGroupvue_type_style_index_0_id_bd8c6660_lang_scss_scoped_true = __webpa
 
 
 
-const ChartGroup_exports_ = /*#__PURE__*/exportHelper_default()(ChartGroupvue_type_script_lang_js, [['render',ChartGroupvue_type_template_id_bd8c6660_scoped_true_render],['__scopeId',"data-v-bd8c6660"]])
+const ChartGroup_exports_ = /*#__PURE__*/exportHelper_default()(ChartGroupvue_type_script_lang_js, [['render',ChartGroupvue_type_template_id_2db10c44_scoped_true_render],['__scopeId',"data-v-2db10c44"]])
 
 /* harmony default export */ var ChartGroup = (ChartGroup_exports_);
 // CONCATENATED MODULE: ./src/components/chartGroup/index.js
@@ -46716,14 +46731,33 @@ function ChartBrushvue_type_template_id_7d0c10ab_render(_ctx, _cache, $props, $s
 
 
 
+var BRUSH_UPDATE_MODE = {
+  WHEEL: {
+    UP: 'MOVEUP_WHEEL',
+    DOWN: 'MOVEDOWN_WHEEL'
+  },
+  GRAB: {
+    UP: 'MOVEUP_GRAB',
+    DOWN: 'MOVEDOWN_GRAB'
+  },
+  BUTTON: {
+    INCREASE: 'INCREASE',
+    DECREASE: 'DECREASE'
+  }
+};
+var BUTTON_TYPE = {
+  LEFT: 'leftX',
+  RIGHT: 'rightX'
+};
+
 var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
   function EvChartBrush(evChart, evChartData, evChartBrushOptions, brushIdx, evChartBrushRef) {
     _classCallCheck(this, EvChartBrush);
 
     this.evChart = evChart;
-    this.evChartData = evChartData;
     this.evChartBrushOptions = evChartBrushOptions;
     this.evChartBrushRef = evChartBrushRef;
+    this.evChartData = evChartData;
     this.brushIdx = brushIdx;
 
     if (evChartBrushOptions.value.useDebounce) {
@@ -46738,7 +46772,6 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
     key: "init",
     value: function init(isResize) {
       if (this.brushIdx.start > this.brushIdx.end) {
-        this.initEventState();
         this.removeBrushCanvas();
         return;
       }
@@ -46770,11 +46803,11 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
   }, {
     key: "drawBrushRect",
     value: function drawBrushRect(_ref) {
-      var _this$debounceBrushId;
-
       var brushCanvas = _ref.brushCanvas,
           isResize = _ref.isResize,
-          isDebounce = _ref.isDebounce;
+          isDebounce = _ref.isDebounce,
+          mode = _ref.mode,
+          offsetX = _ref.offsetX;
       var _this$evChart = this.evChart,
           chartRect = _this$evChart.chartRect,
           labelOffset = _this$evChart.labelOffset;
@@ -46783,21 +46816,57 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
         return;
       }
 
+      var labelEndIdx = this.evChartData.value.labels.length - 1;
+      this.labelEndIdx = labelEndIdx;
       var evChartRange = {
         x1: chartRect.x1 + labelOffset.left,
         x2: chartRect.x2 - labelOffset.right,
         y1: chartRect.y1 + labelOffset.top,
         y2: chartRect.y2 - labelOffset.bottom
       };
-      var pixelRatio = window.devicePixelRatio || 1;
+      var canvasPosInfo = this.setCanvasWidthHeight(evChartRange, brushCanvas);
+
+      if (isResize && this.isEqualWidth) {
+        return;
+      }
+
+      if (labelEndIdx >= 0) {
+        var brushPosInfo = this.setBrushXAndWidth(canvasPosInfo, offsetX, isDebounce, mode);
+
+        if (canvasPosInfo && brushPosInfo) {
+          this.drawBrush(canvasPosInfo, brushPosInfo, evChartRange, brushCanvas);
+        }
+      }
+    }
+  }, {
+    key: "setCanvasWidthHeight",
+    value: function setCanvasWidthHeight(evChartRange, brushCanvas) {
       var brushButtonWidth = 6;
       var brushCanvasWidth = evChartRange.x2 - evChartRange.x1 + brushButtonWidth;
       var brushCanvasHeight = evChartRange.y2 - evChartRange.y1;
-      var isEqualWidth = brushCanvas.width === Math.floor(brushCanvasWidth * pixelRatio);
+      var axesXInterval = (evChartRange.x2 - evChartRange.x1) / this.labelEndIdx;
+      var pixelRatio = window.devicePixelRatio || 1;
+      this.isEqualWidth = brushCanvas.width === Math.floor(brushCanvasWidth * pixelRatio);
+      return {
+        brushButtonWidth: brushButtonWidth,
+        brushCanvasHeight: brushCanvasHeight,
+        brushCanvasWidth: brushCanvasWidth,
+        axesXInterval: axesXInterval,
+        pixelRatio: pixelRatio
+      };
+    }
+  }, {
+    key: "setBrushXAndWidth",
+    value: function setBrushXAndWidth(canvasPosInfo) {
+      var _this$debounceBrushId;
 
-      if (isResize && isEqualWidth) {
-        return;
-      }
+      var offsetX = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var isDebounce = arguments.length > 2 ? arguments[2] : undefined;
+      var mode = arguments.length > 3 ? arguments[3] : undefined;
+      var brushButtonWidth = canvasPosInfo.brushButtonWidth,
+          brushCanvasWidth = canvasPosInfo.brushCanvasWidth,
+          axesXInterval = canvasPosInfo.axesXInterval,
+          pixelRatio = canvasPosInfo.pixelRatio;
 
       if (!isDebounce && this.debounceBrushIdx) {
         this.debounceBrushIdx.start = this.brushIdx.start;
@@ -46805,44 +46874,109 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
       }
 
       var brushIdx = (_this$debounceBrushId = this.debounceBrushIdx) !== null && _this$debounceBrushId !== void 0 ? _this$debounceBrushId : this.brushIdx;
-      var labelEndIdx = this.evChartData.value.labels.length - 1;
 
-      if (labelEndIdx >= 0) {
-        this.labelEndIdx = labelEndIdx;
-        var axesXInterval = (evChartRange.x2 - evChartRange.x1) / labelEndIdx;
-        var brushRectX = brushIdx.start * axesXInterval * pixelRatio;
-        var brushRectWidth = (brushCanvasWidth - (labelEndIdx - (brushIdx.end - brushIdx.start)) * axesXInterval) * pixelRatio;
-        var brushRectHeight = this.evChartBrushOptions.value.height - evChartRange.y1;
-        var brushButtonLeftXPos = brushRectX;
-        var brushButtonRightXPos = brushRectX + brushRectWidth;
-
-        if (!brushCanvas.style.position) {
-          brushCanvas.style.position = 'absolute';
-          brushCanvas.style.top = "".concat(evChartRange.y1, "px");
-          brushCanvas.style.left = "".concat(evChartRange.x1 - brushButtonWidth / 2, "px");
-        }
-
-        if (!isEqualWidth) {
-          brushCanvas.width = brushCanvasWidth * pixelRatio;
-          brushCanvas.style.width = "".concat(brushCanvasWidth, "px");
-          brushCanvas.height = brushCanvasHeight * pixelRatio;
-          brushCanvas.style.height = "".concat(brushCanvasHeight, "px");
-        }
-
-        var ctx = brushCanvas.getContext('2d');
-        ctx.clearRect(0, 0, brushCanvasWidth * pixelRatio, brushCanvasHeight * pixelRatio);
-        ctx.fillStyle = this.evChartBrushOptions.value.selection.fillColor;
-        ctx.globalAlpha = this.evChartBrushOptions.value.selection.opacity;
-        ctx.fillRect(brushRectX, 0, brushRectWidth, brushRectHeight);
-        ctx.fillRect(brushButtonLeftXPos, 0, brushButtonWidth, brushRectHeight);
-        ctx.fillRect(brushButtonRightXPos - brushButtonWidth, 0, brushButtonWidth, brushRectHeight);
-        this.evChartBrushPos = {
-          leftX: brushButtonLeftXPos / pixelRatio,
-          rightX: brushButtonRightXPos / pixelRatio,
-          buttonWidth: brushButtonWidth,
-          axesXInterval: axesXInterval
-        };
+      switch (mode) {
+        case BRUSH_UPDATE_MODE.BUTTON.INCREASE:
+        case BRUSH_UPDATE_MODE.BUTTON.DECREASE:
+          this.brushRectWidth = brushCanvasWidth * pixelRatio;
+
+          if (this.curBrushButtonType === BUTTON_TYPE.LEFT) {
+            this.brushRectWidth = this.beforeBrushRectWidth ? this.beforeBrushRectWidth - offsetX : this.brushRectWidth - offsetX;
+
+            if (this.brushRectWidth <= brushButtonWidth) {
+              this.brushRectWidth = brushButtonWidth;
+            } else {
+              this.brushRectX = offsetX * pixelRatio;
+              this.beforeBrushRectX = this.brushRectX;
+            }
+          } else if (this.curBrushButtonType === BUTTON_TYPE.RIGHT) {
+            this.brushRectWidth = offsetX - this.beforeBrushRectX;
+
+            if (this.brushRectWidth <= brushButtonWidth) {
+              this.brushRectWidth = brushButtonWidth;
+            } else {
+              this.brushRectX = this.beforeBrushRectX;
+              this.beforeBrushRectWidth = this.brushRectWidth + this.brushRectX;
+            }
+          }
+
+          break;
+
+        case BRUSH_UPDATE_MODE.GRAB.UP:
+        case BRUSH_UPDATE_MODE.GRAB.DOWN:
+          if (this.brushRectX <= 0 && mode === BRUSH_UPDATE_MODE.GRAB.DOWN || this.brushRectX + this.brushRectWidth >= brushCanvasWidth && mode === BRUSH_UPDATE_MODE.GRAB.UP) {
+            this.offsetXAndRectXInterval = null;
+          } else {
+            if (!this.offsetXAndRectXInterval) {
+              this.offsetXAndRectXInterval = offsetX - this.brushRectX;
+            }
+
+            this.brushRectX = offsetX - this.offsetXAndRectXInterval;
+          }
+
+          break;
+
+        default:
+          if (!offsetX) {
+            this.brushRectX = brushIdx.start * axesXInterval * pixelRatio;
+            this.brushRectWidth = (brushCanvasWidth - (this.labelEndIdx - (brushIdx.end - brushIdx.start)) * axesXInterval) * pixelRatio;
+            this.beforeBrushRectX = this.brushRectX;
+            this.beforeBrushRectWidth = this.brushRectWidth + this.brushRectX;
+          }
+
+          break;
       }
+
+      return {
+        brushRectX: this.brushRectX,
+        brushRectWidth: this.brushRectWidth
+      };
+    }
+  }, {
+    key: "drawBrush",
+    value: function drawBrush(canvasPosInfo, brushPosInfo, evChartRange, brushCanvas) {
+      var brushButtonWidth = canvasPosInfo.brushButtonWidth,
+          brushCanvasHeight = canvasPosInfo.brushCanvasHeight,
+          brushCanvasWidth = canvasPosInfo.brushCanvasWidth,
+          axesXInterval = canvasPosInfo.axesXInterval,
+          pixelRatio = canvasPosInfo.pixelRatio;
+      var brushRectX = brushPosInfo.brushRectX,
+          brushRectWidth = brushPosInfo.brushRectWidth;
+      var _this$evChartBrushOpt = this.evChartBrushOptions.value,
+          height = _this$evChartBrushOpt.height,
+          _this$evChartBrushOpt2 = _this$evChartBrushOpt.selection,
+          fillColor = _this$evChartBrushOpt2.fillColor,
+          opacity = _this$evChartBrushOpt2.opacity;
+      var brushRectHeight = height - evChartRange.y1;
+      var brushButtonLeftXPos = brushRectX;
+      var brushButtonRightXPos = brushRectX + brushRectWidth;
+
+      if (!brushCanvas.style.position) {
+        brushCanvas.style.position = 'absolute';
+        brushCanvas.style.top = "".concat(evChartRange.y1, "px");
+        brushCanvas.style.left = "".concat(evChartRange.x1 - brushButtonWidth / 2, "px");
+      }
+
+      if (!this.isEqualWidth) {
+        brushCanvas.width = brushCanvasWidth * pixelRatio;
+        brushCanvas.style.width = "".concat(brushCanvasWidth, "px");
+        brushCanvas.height = brushCanvasHeight * pixelRatio;
+        brushCanvas.style.height = "".concat(brushCanvasHeight, "px");
+      }
+
+      var ctx = brushCanvas.getContext('2d');
+      ctx.clearRect(0, 0, brushCanvasWidth * pixelRatio, brushCanvasHeight * pixelRatio);
+      ctx.fillStyle = fillColor;
+      ctx.globalAlpha = opacity;
+      ctx.fillRect(brushRectX, 0, brushRectWidth, brushRectHeight);
+      ctx.fillRect(brushButtonLeftXPos, 0, brushButtonWidth, brushRectHeight);
+      ctx.fillRect(brushButtonRightXPos - brushButtonWidth, 0, brushButtonWidth, brushRectHeight);
+      this.brushPosInfo = _objectSpread2(_objectSpread2({
+        leftX: brushButtonLeftXPos / pixelRatio,
+        rightX: brushButtonRightXPos / pixelRatio,
+        buttonWidth: brushButtonWidth,
+        axesXInterval: axesXInterval
+      }, canvasPosInfo), brushPosInfo);
     }
   }, {
     key: "addEvent",
@@ -46877,8 +47011,19 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
 
       this.onWheel = function (e) {
         e.preventDefault();
+        var mode = e.deltaY > 0 ? BRUSH_UPDATE_MODE.WHEEL.DOWN : BRUSH_UPDATE_MODE.WHEEL.UP;
+
+        _this.updateBrushIdx(mode);
+
+        if (_this.debounceBrushIdx) {
+          _this.drawBrushRect({
+            brushCanvas: _this.brushCanvas,
+            isDebounce: true,
+            mode: mode
+          });
+        }
 
-        _this.updateBrushIdx(e.deltaY > 0 ? 'movedown' : 'moveup');
+        _this.brushIdx.isUseScroll = true;
       };
 
       this.onMouseUp = function () {
@@ -46904,23 +47049,23 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
       var _this2 = this;
 
       var calDisToCurMouseX = function calDisToCurMouseX(xPos) {
-        return Math.abs(_this2.evChartBrushPos[xPos] - e.offsetX);
+        return Math.abs(_this2.brushPosInfo[xPos] - e.offsetX);
       };
 
-      var buttonType = calDisToCurMouseX('rightX') > calDisToCurMouseX('leftX') ? 'leftX' : 'rightX';
-      this.curBrushButtonType = buttonType;
+      var buttonType = calDisToCurMouseX(BUTTON_TYPE.RIGHT) > calDisToCurMouseX(BUTTON_TYPE.LEFT) ? BUTTON_TYPE.LEFT : BUTTON_TYPE.RIGHT;
 
       var isMoveRight = function isMoveRight(xPos) {
-        return e.offsetX > _this2.evChartBrushPos[xPos];
+        return e.offsetX > _this2.brushPosInfo[xPos];
       };
 
       var isMoveLeft = function isMoveLeft(xPos) {
-        return e.offsetX < _this2.evChartBrushPos[xPos];
+        return e.offsetX < _this2.brushPosInfo[xPos];
       };
 
-      var isOutsideBrush = isMoveLeft('leftX') || isMoveRight('rightX');
-      var isInsideBrush = isMoveRight('leftX') && isMoveLeft('rightX');
-      var isInsideButton = e.offsetX + this.evChartBrushPos.buttonWidth >= this.evChartBrushPos[buttonType] && e.offsetX - this.evChartBrushPos.buttonWidth <= this.evChartBrushPos[buttonType];
+      var isOutsideBrush = isMoveLeft(BUTTON_TYPE.LEFT) || isMoveRight(BUTTON_TYPE.RIGHT);
+      var isInsideBrush = isMoveRight(BUTTON_TYPE.LEFT) && isMoveLeft(BUTTON_TYPE.RIGHT);
+      var isInsideButton = e.offsetX + this.brushPosInfo.buttonWidth >= this.brushPosInfo[buttonType] && e.offsetX - this.brushPosInfo.buttonWidth <= this.brushPosInfo[buttonType];
+      this.curBrushButtonType = isInsideButton && buttonType;
       return {
         isInsideButton: isInsideButton,
         isInsideBrush: isInsideBrush,
@@ -46992,18 +47137,18 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
 
       if (middle > 0.5) {
         if ((brushIdx.end - brushIdx.start) % 2 === 0) {
-          clickIdx = Math.round(e.offsetX / this.evChartBrushPos.axesXInterval);
+          clickIdx = Math.round(e.offsetX / this.brushPosInfo.axesXInterval);
           left = Math.ceil(middle);
           right = Math.floor(middle);
         } else {
-          clickIdx = Math.ceil(e.offsetX / this.evChartBrushPos.axesXInterval);
+          clickIdx = Math.ceil(e.offsetX / this.brushPosInfo.axesXInterval);
           left = Math.ceil(middle);
           right = Math.floor(middle);
         }
       } else {
-        clickIdx = Math.floor(e.offsetX / this.evChartBrushPos.axesXInterval);
+        clickIdx = Math.floor(e.offsetX / this.brushPosInfo.axesXInterval);
 
-        if (e.offsetX - clickIdx * this.evChartBrushPos.axesXInterval > this.evChartBrushPos.axesXInterval / 2) {
+        if (e.offsetX - clickIdx * this.brushPosInfo.axesXInterval > this.brushPosInfo.axesXInterval / 2) {
           left = Math.floor(middle);
           right = Math.ceil(middle);
         } else {
@@ -47045,40 +47190,53 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
   }, {
     key: "mouseDownAndMove",
     value: function mouseDownAndMove(e) {
-      var moveSensitive = this.evChartBrushPos.axesXInterval / 3;
+      var moveSensitive = this.debounceBrushIdx ? 0 : this.brushPosInfo.axesXInterval / 3;
       var mode;
 
       if (e.offsetX > this.beforeMouseXPos) {
         // 오른쪽 이동
         if (this.clickBrushInsideX > 0) {
           if (this.clickBrushInsideX < e.offsetX - moveSensitive) {
-            mode = 'moveup';
+            mode = BRUSH_UPDATE_MODE.GRAB.UP;
+            this.isUseBrushGrab = true;
+            this.brushIdx.isUseScroll = true;
             this.clickBrushInsideX = e.offsetX + moveSensitive;
           }
         } else {
-          var isMoveRight = e.offsetX - this.evChartBrushPos[this.curBrushButtonType] > moveSensitive;
+          var isMoveRight = e.offsetX - this.brushPosInfo[this.curBrushButtonType] > moveSensitive;
 
           if (isMoveRight) {
-            mode = this.curBrushButtonType === 'leftX' ? 'decrease' : 'increase';
+            mode = this.curBrushButtonType === BUTTON_TYPE.LEFT ? BRUSH_UPDATE_MODE.BUTTON.DECREASE : BRUSH_UPDATE_MODE.BUTTON.INCREASE;
+            this.brushIdx.isUseButton = true;
           }
         }
       } else if (e.offsetX < this.beforeMouseXPos) {
         // 왼쪽 이동
         if (this.clickBrushInsideX > 0) {
           if (this.clickBrushInsideX > e.offsetX + moveSensitive) {
-            mode = 'movedown';
+            mode = BRUSH_UPDATE_MODE.GRAB.DOWN;
+            this.isUseBrushGrab = true;
+            this.brushIdx.isUseScroll = true;
             this.clickBrushInsideX = e.offsetX - moveSensitive;
           }
         } else {
-          var isMoveLeft = this.evChartBrushPos[this.curBrushButtonType] - e.offsetX > moveSensitive;
+          var isMoveLeft = this.brushPosInfo[this.curBrushButtonType] - e.offsetX > moveSensitive;
 
           if (isMoveLeft) {
-            mode = this.curBrushButtonType === 'leftX' ? 'increase' : 'decrease';
+            mode = this.curBrushButtonType === BUTTON_TYPE.LEFT ? BRUSH_UPDATE_MODE.BUTTON.INCREASE : BRUSH_UPDATE_MODE.BUTTON.DECREASE;
+            this.brushIdx.isUseButton = true;
           }
         }
       }
 
-      if (mode) {
+      if (this.debounceBrushIdx) {
+        this.drawBrushRect({
+          brushCanvas: this.brushCanvas,
+          isDebounce: true,
+          mode: mode,
+          offsetX: e.offsetX
+        });
+      } else {
         this.updateBrushIdx(mode);
       }
 
@@ -47098,28 +47256,28 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
       var brushIdx = (_this$debounceBrushId3 = this.debounceBrushIdx) !== null && _this$debounceBrushId3 !== void 0 ? _this$debounceBrushId3 : this.brushIdx;
 
       switch (mode) {
-        case 'moveup':
-          if (brushIdx.end === this.labelEndIdx) {
+        case BRUSH_UPDATE_MODE.WHEEL.UP:
+        case BRUSH_UPDATE_MODE.GRAB.UP:
+          if (brushIdx.end >= this.labelEndIdx) {
             return;
           }
 
           brushIdx.start += 1;
           brushIdx.end += 1;
-          this.brushIdx.isUseScroll = true;
           break;
 
-        case 'movedown':
-          if (!brushIdx.start) {
+        case BRUSH_UPDATE_MODE.WHEEL.DOWN:
+        case BRUSH_UPDATE_MODE.GRAB.DOWN:
+          if (brushIdx.start <= 0) {
             return;
           }
 
           brushIdx.start -= 1;
           brushIdx.end -= 1;
-          this.brushIdx.isUseScroll = true;
           break;
 
-        case 'increase':
-          if (this.curBrushButtonType === 'leftX') {
+        case BRUSH_UPDATE_MODE.BUTTON.INCREASE:
+          if (this.curBrushButtonType === BUTTON_TYPE.LEFT) {
             if (!brushIdx.start) {
               return;
             }
@@ -47133,37 +47291,104 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
             brushIdx.end += 1;
           }
 
-          this.brushIdx.isUseButton = true;
           break;
 
-        case 'decrease':
+        case BRUSH_UPDATE_MODE.BUTTON.DECREASE:
           if (brushIdx.start === brushIdx.end - 1) {
             return;
           }
 
-          if (this.curBrushButtonType === 'leftX') {
+          if (this.curBrushButtonType === BUTTON_TYPE.LEFT) {
             brushIdx.start += 1;
           } else {
             brushIdx.end -= 1;
           }
 
-          this.brushIdx.isUseButton = true;
           break;
 
         default:
           break;
       }
+    }
+  }, {
+    key: "updateBrushIdxUseXPos",
+    value: function updateBrushIdxUseXPos() {
+      var _this3 = this;
+
+      if (!this.debounceBrushIdx) {
+        return;
+      }
+
+      var calculateBrushIdxByPos = function calculateBrushIdxByPos() {
+        var brushStartIdx;
+        var brushEndIdx;
+
+        if (_this3.brushPosInfo) {
+          var _this3$brushPosInfo = _this3.brushPosInfo,
+              brushRectX = _this3$brushPosInfo.brushRectX,
+              brushRectWidth = _this3$brushPosInfo.brushRectWidth,
+              brushCanvasWidth = _this3$brushPosInfo.brushCanvasWidth,
+              axesXInterval = _this3$brushPosInfo.axesXInterval;
+
+          if (_this3.brushIdx.isUseButton || _this3.isUseBrushGrab) {
+            brushStartIdx = brushRectX / axesXInterval;
+            brushEndIdx = _this3.labelEndIdx - (brushCanvasWidth - (brushRectX + brushRectWidth)) / axesXInterval;
 
-      if (mode && this.debounceBrushIdx) {
+            if (_this3.curBrushButtonType === BUTTON_TYPE.LEFT) {
+              brushStartIdx = Math.round(brushStartIdx);
+              brushEndIdx = _this3.brushIdx.end;
+
+              if (brushStartIdx === brushEndIdx) {
+                brushStartIdx -= 1;
+              }
+            } else if (_this3.curBrushButtonType === BUTTON_TYPE.RIGHT) {
+              brushStartIdx = _this3.brushIdx.start;
+              brushEndIdx = Math.round(brushEndIdx);
+
+              if (brushStartIdx === brushEndIdx) {
+                brushEndIdx += 1;
+              }
+            } else {
+              brushStartIdx = Math.round(brushStartIdx);
+              brushEndIdx = Math.round(brushEndIdx);
+            }
+
+            if (brushEndIdx > _this3.labelEndIdx) {
+              var excessIdx = brushEndIdx - _this3.labelEndIdx;
+              brushStartIdx -= excessIdx;
+              brushEndIdx -= excessIdx;
+            }
+
+            if (brushStartIdx < 0) {
+              var _excessIdx = Math.abs(brushStartIdx);
+
+              brushStartIdx = 0;
+              brushEndIdx += _excessIdx;
+            }
+          }
+        }
+
+        return {
+          brushStartIdx: brushStartIdx,
+          brushEndIdx: brushEndIdx
+        };
+      };
+
+      var _calculateBrushIdxByP = calculateBrushIdxByPos(),
+          brushStartIdx = _calculateBrushIdxByP.brushStartIdx,
+          brushEndIdx = _calculateBrushIdxByP.brushEndIdx;
+
+      if (this.brushIdx.start === brushStartIdx && this.brushIdx.end === brushEndIdx) {
         this.drawBrushRect({
-          brushCanvas: this.brushCanvas,
-          isResize: false,
-          isDebounce: true
+          brushCanvas: this.brushCanvas
         });
       }
+
+      this.brushIdx.start = brushStartIdx !== null && brushStartIdx !== void 0 ? brushStartIdx : this.debounceBrushIdx.start;
+      this.brushIdx.end = brushEndIdx !== null && brushEndIdx !== void 0 ? brushEndIdx : this.debounceBrushIdx.end;
     }
     /**
-     * @param {boolean} isUpdateBrushIdx to initialize state after update brush index value
+     * @param {boolean} updateBrushIdxUseXPos to initialize state after update brush index value
      *
      * @returns {undefined}
      */
@@ -47171,23 +47396,22 @@ var chartBrush_core_EvChartBrush = /*#__PURE__*/function () {
   }, {
     key: "initEventState",
     value: function initEventState() {
-      var _this3 = this;
+      var _this4 = this;
 
       var promise = new Promise(function (resolve) {
-        if (_this3.debounceBrushIdx && (_this3.brushIdx.isUseButton || _this3.brushIdx.isUseScroll)) {
-          _this3.brushIdx.start = _this3.debounceBrushIdx.start;
-          _this3.brushIdx.end = _this3.debounceBrushIdx.end;
-        }
+        _this4.updateBrushIdxUseXPos();
 
         resolve(true);
       });
       promise.then(function (isUpdateBrushIdx) {
         if (isUpdateBrushIdx) {
-          _this3.clickBrushInsideX = null;
-          _this3.beforeMouseXPos = null;
-          _this3.curBrushButtonType = null;
-          _this3.brushIdx.isUseButton = false;
-          _this3.brushIdx.isUseScroll = false;
+          _this4.clickBrushInsideX = null;
+          _this4.beforeMouseXPos = null;
+          _this4.curBrushButtonType = null;
+          _this4.isUseBrushGrab = false;
+          _this4.offsetXAndRectXInterval = null;
+          _this4.brushIdx.isUseButton = false;
+          _this4.brushIdx.isUseScroll = false;
         }
       });
     }