evui 3.3.38 → 3.3.40

package/dist/evui.umd.js

@@ -284,6 +284,20 @@ $({ 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":
@@ -293,6 +307,21 @@ module.exports = __webpack_require__.p + "img/icon_oracle.0572d3ee.svg";
 
 /***/ }),
 
+/***/ "0b6e":
+/***/ (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__("cdcc");
+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("0311a9bf", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ "0cfb":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -308,6 +337,17 @@ module.exports = !DESCRIPTORS && !fails(function () {
 });
 
 
+/***/ }),
+
+/***/ "0d1d":
+/***/ (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_Chart_vue_vue_type_style_index_0_id_018cc1f3_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("1180");
+/* 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_Chart_vue_vue_type_style_index_0_id_018cc1f3_lang_scss__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_Chart_vue_vue_type_style_index_0_id_018cc1f3_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "0eff":
@@ -360,6 +400,21 @@ module.exports = ''.repeat || function repeat(count) {
 };
 
 
+/***/ }),
+
+/***/ "1180":
+/***/ (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__("850f");
+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("8bf57f30", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ "1276":
@@ -658,21 +713,6 @@ module.exports = (!STRICT_METHOD || !USES_TO_LENGTH) ? function forEach(callback
 } : [].forEach;
 
 
-/***/ }),
-
-/***/ "1839":
-/***/ (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__("1d10");
-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("34615be8", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ "196e":
@@ -4191,20 +4231,6 @@ var userAgent = __webpack_require__("342f");
 module.exports = /(iphone|ipod|ipad).*applewebkit/i.test(userAgent);
 
 
-/***/ }),
-
-/***/ "1d10":
-/***/ (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-wrapper{display:block}.ev-chart-container,.ev-chart-wrapper{position:relative;width:100%;height:100%}.ev-chart-container{overflow:hidden}.ev-chart-title{top:0;left:0;width:100%;padding-left:10px;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ev-chart-legend,.ev-chart-title{position:absolute;overflow:hidden}.ev-chart-legend{padding:5px 0 0 0}.ev-chart-legend-container{position:relative}.ev-chart-legend-color,.ev-chart-legend-color--point-line{position:absolute;top:50%;left:0;transform:translateY(-50%);width:18px;height:4px}.ev-chart-legend-color--point-line:after{display:inline-block;position:absolute;top:-2px;left:5px;width:8px;height:8px;content:\" \";border-radius:50%;background-color:inherit}.ev-chart-legend-name{position:absolute;top:50%;left:0;width:100%;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;margin-left:24px;padding-right:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:400;transform:translateY(-50%)}.ev-chart-legend-name:hover{font-weight:700}.ev-chart-legend-value{float:right;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ev-chart-legend--table{width:100%;font-size:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-collapse:collapse}.ev-chart-legend--table td,.ev-chart-legend--table th{padding:3px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ev-chart-legend--table__row{cursor:pointer;min-height:18px}.ev-chart-legend--table__row:hover{font-weight:700}.ev-chart-legend--table__color{width:18px}.ev-chart-legend--table__color-wrapper{position:relative;min-width:18px}.ev-chart-legend--table__color--line{height:4px}.ev-chart-legend--table__color--point-line{position:absolute;top:50%;left:3px;transform:translateY(-50%);height:4px}.ev-chart-legend--table__color--point-line:after{display:inline-block;position:absolute;top:-2px;left:5px;width:8px;height:8px;content:\" \";border-radius:50%;background-color:inherit}.ev-chart-legend--table__name,.ev-chart-legend--table__value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ev-chart-legend-line{position:relative;width:100%;height:100%;border-radius:10px;background-color:#e3e3e3}.ev-chart-legend-line-layer,.ev-chart-legend-thumb{position:absolute;top:0;left:0;width:100%;height:100%}.ev-chart-legend-thumb{border-radius:10px;color:#000}.ev-chart-legend-handle{position:absolute;top:0;left:0;cursor:pointer}.ev-chart-legend-handle.dragging,.ev-chart-legend-handle:hover{transform:scale(1.2)}.ev-chart-legend-handle-btn{width:100%;height:100%;border-radius:50%;background-color:#fff;transition:transform .1s ease-in-out;box-sizing:border-box;border:2px solid #979797}.ev-chart-legend-handle-btn-color{position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:50%}.ev-chart-legend-label{position:absolute;font-size:12px;line-height:1.4em}.ev-chart-legend-label-text{display:block;white-space:nowrap}.ev-chart-legend-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.ev-chart-legend-overlay .ev-chart-legend-overlay-item{position:absolute;top:1px;left:1px;border-radius:50%;border:1px solid #fff;background-color:transparent}.ev-chart-legend-overlay .ev-chart-legend-overlay-tooltip{position:absolute;font-size:12px;line-height:1.4em}.ev-chart-resize-bar{position:absolute;background:transparent;opacity:.5;z-index:10}.ev-chart-resize-bar:hover,.ev-chart-resize-ghost{background-color:#e2e2e2}.ev-chart-resize-ghost{position:absolute;width:4px;height:100%;cursor:col-resize;opacity:.5}.ev-chart-resize-ghost.horizontal{width:100%;height:4px;cursor:row-resize}.ev-chart-tooltip{position:absolute;z-index:850;top:0;left:0;overflow-y:hidden;overflow-x:hidden;border-radius:8px}.ev-chart-tooltip .ev-chart-tooltip-header{padding:8px 16px 0 16px;overflow:hidden;font-size:16px}.ev-chart-tooltip .ev-chart-tooltip-header--wrap{word-wrap:break-word}.ev-chart-tooltip .ev-chart-tooltip-header--ellipsis{text-overflow:ellipsis;white-space:nowrap}.ev-chart-tooltip .ev-chart-tooltip-body{overflow-x:hidden;overflow-y:hidden}", ""]);
-// Exports
-module.exports = exports;
-
-
 /***/ }),
 
 /***/ "1d80":
@@ -6824,6 +6850,17 @@ exports.push([module.i, ".ev-input,.ev-textarea{width:100%;outline:0;background-
 module.exports = exports;
 
 
+/***/ }),
+
+/***/ "6938":
+/***/ (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_ChartToolbar_vue_vue_type_style_index_0_id_691b9473_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("0b6e");
+/* 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_ChartToolbar_vue_vue_type_style_index_0_id_691b9473_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_ChartToolbar_vue_vue_type_style_index_0_id_691b9473_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "69f3":
@@ -7596,6 +7633,17 @@ 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":
@@ -7641,6 +7689,20 @@ exports.push([module.i, ".ev-window-scroll-lock{overflow:hidden!important}.ev-wi
 module.exports = exports;
 
 
+/***/ }),
+
+/***/ "850f":
+/***/ (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-brush-wrapper,.ev-chart-wrapper{display:block;position:relative;width:100%;height:100%}.ev-chart-brush-container,.ev-chart-container{position:relative;overflow:hidden;width:100%;height:100%}.ev-chart-title{top:0;left:0;width:100%;padding-left:10px;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ev-chart-legend,.ev-chart-title{position:absolute;overflow:hidden}.ev-chart-legend{padding:5px 0 0 0}.ev-chart-legend-container{position:relative}.ev-chart-legend-color,.ev-chart-legend-color--point-line{position:absolute;top:50%;left:0;transform:translateY(-50%);width:18px;height:4px}.ev-chart-legend-color--point-line:after{display:inline-block;position:absolute;top:-2px;left:5px;width:8px;height:8px;content:\" \";border-radius:50%;background-color:inherit}.ev-chart-legend-name{position:absolute;top:50%;left:0;width:100%;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:12px;margin-left:24px;padding-right:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:400;transform:translateY(-50%)}.ev-chart-legend-name:hover{font-weight:700}.ev-chart-legend-value{float:right;text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ev-chart-legend--table{width:100%;font-size:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-collapse:collapse}.ev-chart-legend--table td,.ev-chart-legend--table th{padding:3px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ev-chart-legend--table__row{cursor:pointer;min-height:18px}.ev-chart-legend--table__row:hover{font-weight:700}.ev-chart-legend--table__color{width:18px}.ev-chart-legend--table__color-wrapper{position:relative;min-width:18px}.ev-chart-legend--table__color--line{height:4px}.ev-chart-legend--table__color--point-line{position:absolute;top:50%;left:3px;transform:translateY(-50%);height:4px}.ev-chart-legend--table__color--point-line:after{display:inline-block;position:absolute;top:-2px;left:5px;width:8px;height:8px;content:\" \";border-radius:50%;background-color:inherit}.ev-chart-legend--table__name,.ev-chart-legend--table__value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ev-chart-legend-line{position:relative;width:100%;height:100%;border-radius:10px;background-color:#e3e3e3}.ev-chart-legend-line-layer,.ev-chart-legend-thumb{position:absolute;top:0;left:0;width:100%;height:100%}.ev-chart-legend-thumb{border-radius:10px;color:#000}.ev-chart-legend-handle{position:absolute;top:0;left:0;cursor:pointer}.ev-chart-legend-handle.dragging,.ev-chart-legend-handle:hover{transform:scale(1.2)}.ev-chart-legend-handle-btn{width:100%;height:100%;border-radius:50%;background-color:#fff;transition:transform .1s ease-in-out;box-sizing:border-box;border:2px solid #979797}.ev-chart-legend-handle-btn-color{position:absolute;top:4px;left:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:50%}.ev-chart-legend-label{position:absolute;font-size:12px;line-height:1.4em}.ev-chart-legend-label-text{display:block;white-space:nowrap}.ev-chart-legend-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.ev-chart-legend-overlay .ev-chart-legend-overlay-item{position:absolute;top:1px;left:1px;border-radius:50%;border:1px solid #fff;background-color:transparent}.ev-chart-legend-overlay .ev-chart-legend-overlay-tooltip{position:absolute;font-size:12px;line-height:1.4em}.ev-chart-resize-bar{position:absolute;background:transparent;opacity:.5;z-index:10}.ev-chart-resize-bar:hover,.ev-chart-resize-ghost{background-color:#e2e2e2}.ev-chart-resize-ghost{position:absolute;width:4px;height:100%;cursor:col-resize;opacity:.5}.ev-chart-resize-ghost.horizontal{width:100%;height:4px;cursor:row-resize}.ev-chart-tooltip{position:absolute;z-index:850;top:0;left:0;overflow-y:hidden;overflow-x:hidden;border-radius:8px}.ev-chart-tooltip .ev-chart-tooltip-header{padding:8px 16px 0 16px;overflow:hidden;font-size:16px}.ev-chart-tooltip .ev-chart-tooltip-header--wrap{word-wrap:break-word}.ev-chart-tooltip .ev-chart-tooltip-header--ellipsis{text-overflow:ellipsis;white-space:nowrap}.ev-chart-tooltip .ev-chart-tooltip-body{overflow-x:hidden;overflow-y:hidden}", ""]);
+// Exports
+module.exports = exports;
+
+
 /***/ }),
 
 /***/ "861d":
@@ -7918,7 +7980,7 @@ $({ target: 'Number', stat: true }, {
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.3.38\"}");
+module.exports = JSON.parse("{\"a\":\"3.3.40\"}");
 
 /***/ }),
 
@@ -10546,6 +10608,21 @@ 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":
@@ -10688,6 +10765,20 @@ $({ target: 'Object', stat: true, forced: Object.assign !== assign }, {
 /* unused harmony reexport * */
 
 
+/***/ }),
+
+/***/ "cdcc":
+/***/ (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__toolbar__wrapper[data-v-691b9473]{height:30px;text-align:right;padding-right:30px}.ev-chart__toolbar__wrapper__icon i[data-v-691b9473]{pointer-events:none;opacity:.5;cursor:pointer}.ev-chart__toolbar__wrapper__icon i+i[data-v-691b9473]{margin-left:10px}.ev-chart__toolbar__wrapper__icon .active[data-v-691b9473]{font-weight:700}", ""]);
+// Exports
+module.exports = exports;
+
+
 /***/ }),
 
 /***/ "cdf9":
@@ -12238,17 +12329,6 @@ if(content.locals) module.exports = content.locals;
 var add = __webpack_require__("499e").default
 var update = add("235b9c6e", content, true, {"sourceMap":false,"shadowMode":false});
 
-/***/ }),
-
-/***/ "e83f":
-/***/ (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_Chart_vue_vue_type_style_index_0_id_ca3428ac_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("1839");
-/* 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_Chart_vue_vue_type_style_index_0_id_ca3428ac_lang_scss__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_Chart_vue_vue_type_style_index_0_id_ca3428ac_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "e843":
@@ -18988,7 +19068,7 @@ Slider.install = function (app) {
 
 /* harmony default export */ var components_slider = (Slider);
 // EXTERNAL MODULE: ./src/style/lib/icon.css
-var icon = __webpack_require__("2d5d");
+var lib_icon = __webpack_require__("2d5d");
 
 // 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/icon/Icon.vue?vue&type=template&id=5c77b16f
 
@@ -29970,15 +30050,7 @@ var uses_contextMenuEvent = function contextMenuEvent(params) {
 
   var onContextMenu = function onContextMenu(event) {
     var target = event.target;
-    var tagName = target.tagName.toLowerCase();
-    var rowIndex;
-
-    if (tagName === 'td') {
-      rowIndex = target.parentElement.dataset.index;
-    } else {
-      rowIndex = target.parentElement.parentElement.dataset.index;
-    }
-
+    var rowIndex = target.closest('.row').dataset.index;
     var clickedRow;
 
     if (rowIndex) {
@@ -30830,18 +30902,27 @@ Grid.install = function (app) {
 };
 
 /* harmony default export */ var grid = (Grid);
-// 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/chart/Chart.vue?vue&type=template&id=ca3428ac
+// 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/chart/Chart.vue?vue&type=template&id=018cc1f3
+
+var Chartvue_type_template_id_018cc1f3_hoisted_1 = {
+  key: 0,
+  ref: "evChartToolbarRef"
+};
+function Chartvue_type_template_id_018cc1f3_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_ev_chart_toolbar = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ev-chart-toolbar");
 
-function Chartvue_type_template_id_ca3428ac_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _directive_resize = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("resize");
 
-  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])((Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", {
+  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 && !$setup.injectIsChartGroup ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", Chartvue_type_template_id_018cc1f3_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_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
     ref: "wrapper",
     style: $setup.wrapperStyle,
     class: "ev-chart"
-  }, null, 4)), [[_directive_resize, $setup.onResize]]);
+  }, null, 4), [[_directive_resize, $setup.onResize]])], 64);
 }
-// CONCATENATED MODULE: ./src/components/chart/Chart.vue?vue&type=template&id=ca3428ac
+// CONCATENATED MODULE: ./src/components/chart/Chart.vue?vue&type=template&id=018cc1f3
 
 // CONCATENATED MODULE: ./node_modules/lodash-es/_arrayEach.js
 /**
@@ -33183,17 +33264,49 @@ var modules = {
 
     return findInfo;
   },
-  getItem: function getItem(_ref3) {
-    var seriesID = _ref3.seriesID,
-        dataIndex = _ref3.dataIndex;
+  getItem: function getItem(selectedInfo) {
+    var _this6 = this;
+
     var useApproximate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var dataInfo = this.getDataByValues(seriesID, dataIndex);
+    var seriesID = selectedInfo.seriesID,
+        dataIndex = selectedInfo.dataIndex;
+    var itemPosition;
 
-    if (!dataInfo || !(dataInfo !== null && dataInfo !== void 0 && dataInfo.xp) || !(dataInfo !== null && dataInfo !== void 0 && dataInfo.yp)) {
-      return null;
+    if ('seriesID' in selectedInfo) {
+      var dataInfo = this.getDataByValues(seriesID, dataIndex);
+
+      if (!dataInfo || !(dataInfo !== null && dataInfo !== void 0 && dataInfo.xp) || !(dataInfo !== null && dataInfo !== void 0 && dataInfo.yp)) {
+        return null;
+      }
+
+      itemPosition = [this.getItemByPosition([dataInfo.xp, dataInfo.yp], useApproximate)];
+    } else {
+      var seriesList = Object.entries(this.seriesList);
+      var firShowSeriesID;
+
+      for (var i = 0; i < seriesList.length; i++) {
+        var _seriesList$i = _slicedToArray(seriesList[i], 2),
+            id = _seriesList$i[0],
+            info = _seriesList$i[1];
+
+        if (info.show) {
+          firShowSeriesID = id;
+          break;
+        }
+      }
+
+      itemPosition = dataIndex.map(function (idx) {
+        var dataInfo = _this6.getDataByValues(firShowSeriesID, idx);
+
+        if (!dataInfo || !(dataInfo !== null && dataInfo !== void 0 && dataInfo.xp) || !(dataInfo !== null && dataInfo !== void 0 && dataInfo.yp)) {
+          return null;
+        }
+
+        return _this6.getItemByPosition([dataInfo.xp, dataInfo.yp], useApproximate);
+      });
     }
 
-    return this.getItemByPosition([dataInfo.xp, dataInfo.yp], useApproximate);
+    return itemPosition;
   },
 
   /**
@@ -33299,7 +33412,7 @@ var modules = {
    * @returns {object} clicked series id
    */
   getSeriesIdByPosition: function getSeriesIdByPosition(offset) {
-    var _this6 = this;
+    var _this7 = this;
 
     var _offset = _slicedToArray(offset, 2),
         clickedX = _offset[0],
@@ -33333,8 +33446,8 @@ var modules = {
         case 'line':
           {
             var orderedSeriesList = this.seriesInfo.charts.line;
-            var isStackChart = Object.values(this.seriesList).some(function (_ref4) {
-              var stackIndex = _ref4.stackIndex;
+            var isStackChart = Object.values(this.seriesList).some(function (_ref3) {
+              var stackIndex = _ref3.stackIndex;
               return stackIndex;
             });
 
@@ -33353,16 +33466,16 @@ var modules = {
                     position: (_hitItem$items$sId = hitItem.items[sId]) === null || _hitItem$items$sId === void 0 ? void 0 : (_hitItem$items$sId$da = _hitItem$items$sId.data) === null || _hitItem$items$sId$da === void 0 ? void 0 : _hitItem$items$sId$da.yp
                   };
                 });
-                hitSeries = (_positionList$find = positionList.find(function (_ref5) {
-                  var position = _ref5.position;
+                hitSeries = (_positionList$find = positionList.find(function (_ref4) {
+                  var position = _ref4.position;
                   return clickedY > position;
                 })) === null || _positionList$find === void 0 ? void 0 : _positionList$find.sId;
               } else {
                 var _Object$entries$find;
 
-                hitSeries = (_Object$entries$find = Object.entries(hitItem.items).find(function (_ref6) {
-                  var _ref7 = _slicedToArray(_ref6, 2),
-                      hit = _ref7[1].hit;
+                hitSeries = (_Object$entries$find = Object.entries(hitItem.items).find(function (_ref5) {
+                  var _ref6 = _slicedToArray(_ref5, 2),
+                      hit = _ref6[1].hit;
 
                   return hit;
                 })) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[0];
@@ -33372,29 +33485,29 @@ var modules = {
 
               // 클릭한 위치에 data 가 존재하지 않는 경우
               var visibleSeriesList = orderedSeriesList.filter(function (sId) {
-                return _this6.seriesList[sId].show;
+                return _this7.seriesList[sId].show;
               });
               positionList = visibleSeriesList.map(function (sId) {
-                var _this6$seriesList$sId;
+                var _this7$seriesList$sId;
 
                 return {
                   sId: sId,
-                  position: (_this6$seriesList$sId = _this6.seriesList[sId].data) === null || _this6$seriesList$sId === void 0 ? void 0 : _this6$seriesList$sId.map(function (_ref8) {
-                    var xp = _ref8.xp,
-                        yp = _ref8.yp;
+                  position: (_this7$seriesList$sId = _this7.seriesList[sId].data) === null || _this7$seriesList$sId === void 0 ? void 0 : _this7$seriesList$sId.map(function (_ref7) {
+                    var xp = _ref7.xp,
+                        yp = _ref7.yp;
                     return [xp, yp];
                   })
                 };
               });
-              var dataIndex = (_positionList$0$posit = positionList[0].position) === null || _positionList$0$posit === void 0 ? void 0 : _positionList$0$posit.findIndex(function (_ref9) {
-                var _ref10 = _slicedToArray(_ref9, 1),
-                    xp = _ref10[0];
+              var dataIndex = (_positionList$0$posit = positionList[0].position) === null || _positionList$0$posit === void 0 ? void 0 : _positionList$0$posit.findIndex(function (_ref8) {
+                var _ref9 = _slicedToArray(_ref8, 1),
+                    xp = _ref9[0];
 
                 return xp >= clickedX;
               });
-              var vectorList = positionList.map(function (_ref11) {
-                var sId = _ref11.sId,
-                    position = _ref11.position;
+              var vectorList = positionList.map(function (_ref10) {
+                var sId = _ref10.sId,
+                    position = _ref10.position;
                 return {
                   sId: sId,
                   vector: {
@@ -33412,8 +33525,8 @@ var modules = {
               if (isStackChart) {
                 var _vectorList$find;
 
-                hitSeries = (_vectorList$find = vectorList.find(function (_ref12) {
-                  var vector = _ref12.vector;
+                hitSeries = (_vectorList$find = vectorList.find(function (_ref11) {
+                  var vector = _ref11.vector;
 
                   if (isEmptyVector(vector === null || vector === void 0 ? void 0 : vector.start) && isEmptyVector(vector === null || vector === void 0 ? void 0 : vector.end)) {
                     return false;
@@ -33439,8 +33552,8 @@ var modules = {
               } else {
                 var _vectorList$find2;
 
-                hitSeries = (_vectorList$find2 = vectorList.find(function (_ref13) {
-                  var vector = _ref13.vector;
+                hitSeries = (_vectorList$find2 = vectorList.find(function (_ref12) {
+                  var vector = _ref12.vector;
 
                   if (isEmptyVector(vector === null || vector === void 0 ? void 0 : vector.start) && isEmptyVector(vector === null || vector === void 0 ? void 0 : vector.end)) {
                     return false;
@@ -33523,7 +33636,7 @@ var modules = {
    * @returns {object} min/max info for all of data
    */
   getStoreMinMax: function getStoreMinMax() {
-    var _this7 = this;
+    var _this8 = this;
 
     var keys = Object.keys(this.seriesList);
     var isHorizontal = this.options.horizontal;
@@ -33541,7 +33654,7 @@ var modules = {
     if (keys.length) {
       return keys.reduce(function (acc, key) {
         var minmax = acc;
-        var series = _this7.seriesList[key];
+        var series = _this8.seriesList[key];
         var smm = series.minMax;
         var axisX = series.xAxisIndex;
         var axisY = series.yAxisIndex;
@@ -35031,7 +35144,8 @@ var element_line_Line = /*#__PURE__*/function () {
           axesSteps = param.axesSteps,
           selectLabel = param.selectLabel,
           selectSeries = param.selectSeries,
-          legendHitInfo = param.legendHitInfo; // about selectLabel
+          legendHitInfo = param.legendHitInfo,
+          isBrush = param.isBrush; // about selectLabel
 
       var selectLabelOption = selectLabel === null || selectLabel === void 0 ? void 0 : selectLabel.option;
       var useSelectLabel = (selectLabelOption === null || selectLabelOption === void 0 ? void 0 : selectLabelOption.use) && (selectLabelOption === null || selectLabelOption === void 0 ? void 0 : selectLabelOption.useSeriesOpacity);
@@ -35167,7 +35281,7 @@ var element_line_Line = /*#__PURE__*/function () {
       } // Draw points
 
 
-      if (this.point || useSelectLabel) {
+      if (!isBrush && (this.point || useSelectLabel)) {
         ctx.strokeStyle = helpers_util.colorStringToRgba(mainColor, mainColorOpacity);
         var focusStyle = helpers_util.colorStringToRgba(pointFillColor, 1);
         var blurStyle = helpers_util.colorStringToRgba(pointFillColor, pointFillColorOpacity);
@@ -35403,6 +35517,8 @@ var merge = _createAssigner(function(object, source, srcIndex) {
 
 
 
+
+
 var element_scatter_Scatter = /*#__PURE__*/function () {
   function Scatter(sId, opt, sIdx) {
     var _this = this;
@@ -35448,6 +35564,7 @@ var element_scatter_Scatter = /*#__PURE__*/function () {
       var chartRect = param.chartRect;
       var labelOffset = param.labelOffset;
       var axesSteps = param.axesSteps;
+      var displayOverflow = param.displayOverflow;
       var x;
       var y;
       var aliasPixel;
@@ -35457,6 +35574,15 @@ var element_scatter_Scatter = /*#__PURE__*/function () {
       var yArea = chartRect.chartHeight - (labelOffset.top + labelOffset.bottom);
       var xsp = chartRect.x1 + labelOffset.left;
       var ysp = chartRect.y2 - labelOffset.bottom;
+
+      if (displayOverflow) {
+        this.data = this.data.map(function (val) {
+          return _objectSpread2(_objectSpread2({}, val), {}, {
+            y: val.y > minmaxY.graphMax ? minmaxY.graphMax : val.y
+          });
+        });
+      }
+
       this.data.forEach(function (item) {
         x = helpers_canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
         y = helpers_canvas.calculateY(item.y, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
@@ -37780,10 +37906,13 @@ var scale_Scale = /*#__PURE__*/function () {
           var labelPoint = void 0;
 
           if (this.type === 'x') {
-            var _options$selectItem, _this$options3;
+            var _options$brush, _options$selectItem, _this$options3;
 
             labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-            ctx.fillText(labelText, labelCenter, labelPoint);
+
+            if (options !== null && options !== void 0 && (_options$brush = options.brush) !== null && _options$brush !== void 0 && _options$brush.showLabel || !options.brush) {
+              ctx.fillText(labelText, labelCenter, labelPoint);
+            }
 
             if (!isBlurredLabel && options !== null && options !== void 0 && (_options$selectItem = options.selectItem) !== null && _options$selectItem !== void 0 && _options$selectItem.showLabelTip && hitInfo !== null && hitInfo !== void 0 && hitInfo.label && !((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.horizontal)) {
               var selectedLabel = this.getLabelFormat(Math.min(axisMax, hitInfo.label + 0 * stepValue));
@@ -37812,11 +37941,16 @@ var scale_Scale = /*#__PURE__*/function () {
               ctx.lineTo(linePosition, offsetCounterPoint);
             }
           } else {
+            var _options$brush2;
+
             labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-            ctx.fillText(labelText, labelPoint, labelCenter);
+
+            if (options !== null && options !== void 0 && (_options$brush2 = options.brush) !== null && _options$brush2 !== void 0 && _options$brush2.showLabel || !options.brush) {
+              ctx.fillText(labelText, labelPoint, labelCenter);
+            }
 
             if (ix === steps) {
-              linePosition += 1;
+              linePosition -= 1;
             }
 
             if (ix !== 0 && this.showGrid) {
@@ -39587,7 +39721,8 @@ var plugins_legend_modules = {
           _this3.addLegend({
             cId: colorItem.id,
             color: colorItem.color,
-            name: name
+            name: name,
+            show: true
           });
         }
       }
@@ -39646,6 +39781,7 @@ var plugins_legend_modules = {
 
     this.onLegendBoxClick = function (e) {
       var opt = _this4.options.legend;
+      var chartIdx = _this4.data.chartIdx;
 
       var targetDOM = _this4.getContainerDOM(e);
 
@@ -39706,6 +39842,14 @@ var plugins_legend_modules = {
       series.show = !series.show;
       targetDOM.classList.toggle('inactive');
 
+      if (_this4.brushSeries) {
+        var seriesList = _toConsumableArray(_this4.brushSeries.list);
+
+        seriesList[chartIdx] = _this4.seriesList;
+        _this4.brushSeries.list = seriesList;
+        _this4.brushSeries.chartIdx = chartIdx;
+      }
+
       _this4.update({
         updateSeries: false,
         updateSelTip: {
@@ -41424,6 +41568,11 @@ var plugins_interaction_modules = {
 
 
     this.onClick = function (e) {
+      if (_this.isMouseMove) {
+        _this.isMouseMove = false;
+        return;
+      }
+
       var args = {
         e: e
       };
@@ -41577,6 +41726,7 @@ var plugins_interaction_modules = {
       var xep;
       var yep;
       dragInfo.isMove = true;
+      _this2.isMouseMove = true;
 
       if (aOffsetX < aRange.x1) {
         xep = aRange.x1;
@@ -41635,6 +41785,8 @@ var plugins_interaction_modules = {
       var dragInfo = _this2.dragInfo;
 
       if (dragInfo !== null && dragInfo !== void 0 && dragInfo.isMove && (dragInfo === null || dragInfo === void 0 ? void 0 : dragInfo.width) > 1 && (dragInfo === null || dragInfo === void 0 ? void 0 : dragInfo.height) > 1) {
+        var _this2$options, _this2$options$zoom;
+
         var args = {
           e: e,
           data: _this2.findSelectedItems(dragInfo),
@@ -41642,13 +41794,28 @@ var plugins_interaction_modules = {
         };
         _this2.dragInfoBackup = lodash_es_defaultsDeep({}, dragInfo);
 
-        if (typeof _this2.listeners['drag-select'] === 'function') {
+        if (typeof _this2.listeners['drag-select'] === 'function' && !((_this2$options = _this2.options) !== null && _this2$options !== void 0 && (_this2$options$zoom = _this2$options.zoom) !== null && _this2$options$zoom !== void 0 && _this2$options$zoom.use)) {
           _this2.listeners['drag-select'](args);
+        } else {
+          var xsp = dragInfo.xsp,
+              chartRange = dragInfo.range,
+              dragWidth = dragInfo.width;
+          var dragXsp = xsp - chartRange.x1;
+          args.range.dragSelectionInfo = {
+            dragXsp: dragXsp,
+            dragXep: dragXsp + dragWidth,
+            exceptAxesYChartWidth: chartRange.x2 - chartRange.x1,
+            exceptAxesXChartHeight: chartRange.y2 - chartRange.y1,
+            chartRange: chartRange,
+            chartTitle: _this2.options.title.text
+          };
+
+          _this2.options.zoom.getRangeInfo(args);
         }
-      }
 
-      if (!_this2.options.dragSelection.keepDisplay) {
-        _this2.removeSelectionArea();
+        if (!_this2.options.dragSelection.keepDisplay) {
+          _this2.removeSelectionArea();
+        }
       }
 
       _this2.dragInfo = null;
@@ -43171,6 +43338,8 @@ var element_tip_modules = {
    * @returns {undefined}
    */
   drawTips: function drawTips(tipLocationInfo) {
+    var _this = this;
+
     var opt = this.options;
     var isHorizontal = !!opt.horizontal;
     var maxTipOpt = opt.maxTip;
@@ -43179,75 +43348,83 @@ var element_tip_modules = {
     var maxArgs;
     var isExistSelectedLabel;
 
-    if (labelTipOpt.use && labelTipOpt.showTip) {
-      isExistSelectedLabel = this.drawLabelTip();
-    }
+    var executeDrawTip = function executeDrawTip(tipOpt) {
+      tipLocationInfo.forEach(function (tipInfo) {
+        if (tipInfo && !isExistSelectedLabel) {
+          var seriesInfo = _this.seriesList[tipInfo === null || tipInfo === void 0 ? void 0 : tipInfo.sId];
 
-    if (selTipOpt.use && tipLocationInfo && !isExistSelectedLabel) {
-      var seriesInfo = this.seriesList[tipLocationInfo === null || tipLocationInfo === void 0 ? void 0 : tipLocationInfo.sId];
+          if (!(seriesInfo !== null && seriesInfo !== void 0 && seriesInfo.show)) {
+            return;
+          }
 
-      if (!(seriesInfo !== null && seriesInfo !== void 0 && seriesInfo.show)) {
-        return;
-      }
+          var selArgs = _this.calculateTipInfo(seriesInfo, 'sel', tipInfo);
 
-      var selArgs = this.calculateTipInfo(seriesInfo, 'sel', tipLocationInfo);
+          if (selArgs) {
+            var _maxArgs;
 
-      if (selArgs) {
-        var _maxArgs;
+            var isSamePos = false;
 
-        var isSamePos = false;
+            if (maxTipOpt.use && ((_maxArgs = maxArgs) === null || _maxArgs === void 0 ? void 0 : _maxArgs.dp) === selArgs.dp) {
+              isSamePos = true;
+            }
 
-        if (maxTipOpt.use && ((_maxArgs = maxArgs) === null || _maxArgs === void 0 ? void 0 : _maxArgs.dp) === selArgs.dp) {
-          isSamePos = true;
-        }
+            if (tipOpt.showTextTip || tipOpt.showTip) {
+              if (tipOpt.tipText === 'label') {
+                var axisOpt = isHorizontal ? opt.axesY[0] : opt.axesX[0];
+                var label = selArgs.label;
+                selArgs.text = axisOpt.type === 'time' ? dayjs_min_default()(label).format(axisOpt.timeFormat) : label;
+              } else {
+                selArgs.text = numberWithComma(selArgs.value);
+              }
 
-        if (selTipOpt.showTextTip || selTipOpt.showTip) {
-          if (selTipOpt.tipText === 'label') {
-            var axisOpt = isHorizontal ? opt.axesY[0] : opt.axesX[0];
-            var label = selArgs.label;
-            selArgs.text = axisOpt.type === 'time' ? dayjs_min_default()(label).format(axisOpt.timeFormat) : label;
-          } else {
-            selArgs.text = numberWithComma(selArgs.value);
-          }
+              _this.drawTextTip(_objectSpread2({
+                opt: tipOpt,
+                tipType: 'sel',
+                seriesOpt: seriesInfo,
+                isSamePos: isSamePos
+              }, selArgs));
+            }
 
-          this.drawTextTip(_objectSpread2({
-            opt: selTipOpt,
-            tipType: 'sel',
-            seriesOpt: seriesInfo,
-            isSamePos: isSamePos
-          }, selArgs));
-        }
+            if (tipOpt.showIndicator) {
+              _this.drawFixedIndicator(_objectSpread2({
+                opt: tipOpt,
+                seriesOpt: seriesInfo
+              }, selArgs));
+            }
+          }
 
-        if (selTipOpt.showIndicator) {
-          this.drawFixedIndicator(_objectSpread2({
-            opt: selTipOpt,
-            seriesOpt: seriesInfo
-          }, selArgs));
+          if (tipInfo && tipInfo !== null && tipInfo !== void 0 && tipInfo.label && (tipInfo === null || tipInfo === void 0 ? void 0 : tipInfo.label) === 0) {
+            _this.lastHitInfo = tipInfo;
+          }
         }
-      }
+      });
+    };
 
-      if (tipLocationInfo && tipLocationInfo !== null && tipLocationInfo !== void 0 && tipLocationInfo.label && (tipLocationInfo === null || tipLocationInfo === void 0 ? void 0 : tipLocationInfo.label) === 0) {
-        this.lastHitInfo = tipLocationInfo;
+    if (tipLocationInfo) {
+      if (selTipOpt.use) {
+        executeDrawTip(selTipOpt);
+      } else if (labelTipOpt.use) {
+        executeDrawTip(labelTipOpt);
       }
     }
 
     if (maxTipOpt.use && !isExistSelectedLabel) {
       var maxSID = this.minMax[isHorizontal ? 'x' : 'y'][0].maxSID;
-      var _seriesInfo = this.seriesList[maxSID];
-      maxArgs = this.calculateTipInfo(_seriesInfo, 'max', null);
+      var seriesInfo = this.seriesList[maxSID];
+      maxArgs = this.calculateTipInfo(seriesInfo, 'max', null);
 
       if (maxTipOpt.use && maxArgs) {
         maxArgs.text = numberWithComma(maxArgs.value);
         this.drawTextTip(_objectSpread2({
           opt: maxTipOpt,
           tipType: 'max',
-          seriesOpt: _seriesInfo
+          seriesOpt: seriesInfo
         }, maxArgs));
 
         if (maxTipOpt.showIndicator) {
           this.drawFixedIndicator(_objectSpread2({
             opt: maxTipOpt,
-            seriesOpt: _seriesInfo
+            seriesOpt: seriesInfo
           }, maxArgs));
         }
       }
@@ -43431,7 +43608,7 @@ var element_tip_modules = {
    * @returns {boolean} Whether drew at least one tip
    */
   drawLabelTip: function drawLabelTip() {
-    var _this = this;
+    var _this2 = this;
 
     var opt = this.options;
     var isHorizontal = !!opt.horizontal;
@@ -43467,10 +43644,10 @@ var element_tip_modules = {
       offset *= isHorizontal ? 1 : -1;
       var seriesList = Object.keys((_this$seriesList = this.seriesList) !== null && _this$seriesList !== void 0 ? _this$seriesList : {});
       var visibleSeries = seriesList.filter(function (sId) {
-        return _this.seriesList[sId].show;
+        return _this2.seriesList[sId].show;
       });
       var isExistGrp = seriesList.some(function (sId) {
-        return _this.seriesList[sId].isExistGrp;
+        return _this2.seriesList[sId].isExistGrp;
       });
       var groups = (_this$data$groups$ = (_this$data$groups = this.data.groups) === null || _this$data$groups === void 0 ? void 0 : _this$data$groups[0]) !== null && _this$data$groups$ !== void 0 ? _this$data$groups$ : [];
       var gp;
@@ -43490,9 +43667,9 @@ var element_tip_modules = {
       } else {
         graphX = this.axesSteps.x[0];
         lineSeries = seriesList.find(function (sId) {
-          var _this$seriesList$sId;
+          var _this2$seriesList$sId;
 
-          return ((_this$seriesList$sId = _this.seriesList[sId]) === null || _this$seriesList$sId === void 0 ? void 0 : _this$seriesList$sId.type) === 'line';
+          return ((_this2$seriesList$sId = _this2.seriesList[sId]) === null || _this2$seriesList$sId === void 0 ? void 0 : _this2$seriesList$sId.type) === 'line';
         });
         sizeObj = this.seriesList[lineSeries].size;
       }
@@ -43535,8 +43712,8 @@ var element_tip_modules = {
         gp = valuePositionCalcFunction(value, valueAxesRange.min, valueAxesRange.max, valueSpace, valueStartPoint);
         gp += offset;
 
-        _this.showTip({
-          context: _this.bufferCtx,
+        _this2.showTip({
+          context: _this2.bufferCtx,
           x: isHorizontal ? gp : dp,
           y: isHorizontal ? dp : gp,
           opt: labelTipOpt,
@@ -43788,7 +43965,7 @@ var element_tip_modules = {
 
 
 var chart_core_EvChart = /*#__PURE__*/function () {
-  function EvChart(target, data, options, listeners, defaultSelectItemInfo, defaultSelectInfo) {
+  function EvChart(target, data, options, listeners, defaultSelectItemInfo, defaultSelectInfo, brushSeries) {
     var _this = this;
 
     _classCallCheck(this, EvChart);
@@ -43796,25 +43973,29 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     Object.keys(model).forEach(function (key) {
       return Object.assign(_this, model[key]);
     });
-    Object.assign(this, plugins_title);
-    Object.assign(this, plugins_legend);
-    Object.assign(this, plugins_interaction);
-    Object.assign(this, plugins_tooltip);
-    Object.assign(this, plugins_pie);
-    Object.assign(this, element_tip);
+
+    if (!options.brush) {
+      Object.assign(this, plugins_tooltip);
+      Object.assign(this, plugins_interaction);
+      Object.assign(this, element_tip);
+      Object.assign(this, plugins_legend);
+      Object.assign(this, plugins_pie);
+      Object.assign(this, plugins_title);
+    }
 
     if (options.type === 'heatMap' && options.legend.type === 'gradient') {
       Object.assign(this, plugins_legend_gradient);
     }
 
+    this.brushSeries = brushSeries;
     this.target = target;
     this.data = data;
     this.options = options;
     this.listeners = listeners;
     this.wrapperDOM = document.createElement('div');
-    this.wrapperDOM.className = 'ev-chart-wrapper';
+    this.wrapperDOM.className = options.brush ? 'ev-chart-brush-wrapper' : 'ev-chart-wrapper';
     this.chartDOM = document.createElement('div');
-    this.chartDOM.className = 'ev-chart-container';
+    this.chartDOM.className = options.brush ? 'ev-chart-brush-container' : 'ev-chart-container';
     this.wrapperDOM.appendChild(this.chartDOM);
     this.target.appendChild(this.wrapperDOM);
     this.displayCanvas = document.createElement('canvas');
@@ -43823,16 +44004,21 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     this.bufferCanvas = document.createElement('canvas');
     this.bufferCanvas.setAttribute('style', 'display: block;');
     this.bufferCtx = this.bufferCanvas.getContext('2d');
-    this.overlayCanvas = document.createElement('canvas');
-    this.overlayCanvas.setAttribute('style', 'display: block;');
-    this.overlayCtx = this.overlayCanvas.getContext('2d');
     this.pixelRatio = window.devicePixelRatio || 1;
     this.oldPixelRatio = this.pixelRatio;
     this.chartDOM.appendChild(this.displayCanvas);
-    this.chartDOM.appendChild(this.overlayCanvas);
-    this.overlayCanvas.style.position = 'absolute';
-    this.overlayCanvas.style.top = '0px';
-    this.overlayCanvas.style.left = '0px';
+
+    if (!options.brush) {
+      this.overlayCanvas = document.createElement('canvas');
+      this.overlayCanvas.setAttribute('style', 'display: block; z-index: 2;');
+      this.overlayCanvas.setAttribute('class', 'overlay-canvas');
+      this.overlayCtx = this.overlayCanvas.getContext('2d');
+      this.chartDOM.appendChild(this.overlayCanvas);
+      this.overlayCanvas.style.position = 'absolute';
+      this.overlayCanvas.style.top = '0px';
+      this.overlayCanvas.style.left = '0px';
+    }
+
     this.isInitLegend = false;
     this.isInitTitle = false;
     this.isInit = false;
@@ -43864,6 +44050,8 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   _createClass(EvChart, [{
     key: "init",
     value: function init() {
+      var _this$initSelectedInf, _this$createEventFunc;
+
       var _this$data = this.data,
           series = _this$data.series,
           data = _this$data.data,
@@ -43888,7 +44076,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       this.axesY = this.createAxes('y', axesY);
       this.axesRange = this.getAxesRange();
       this.labelOffset = this.getLabelOffset();
-      this.initSelectedInfo();
+      (_this$initSelectedInf = this.initSelectedInfo) === null || _this$initSelectedInf === void 0 ? void 0 : _this$initSelectedInf.call(this);
       this.drawChart();
 
       if (tooltip.use) {
@@ -43899,7 +44087,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         }
       }
 
-      this.createEventFunctions();
+      (_this$createEventFunc = this.createEventFunctions) === null || _this$createEventFunc === void 0 ? void 0 : _this$createEventFunc.call(this);
       this.isInit = true;
     }
     /**
@@ -43968,7 +44156,9 @@ var chart_core_EvChart = /*#__PURE__*/function () {
           maxTip = _this$options2.maxTip,
           selectLabel = _this$options2.selectLabel,
           selectItem = _this$options2.selectItem,
-          selectSeries = _this$options2.selectSeries;
+          selectSeries = _this$options2.selectSeries,
+          brush = _this$options2.brush,
+          displayOverflow = _this$options2.displayOverflow;
       var opt = {
         ctx: this.bufferCtx,
         chartRect: this.chartRect,
@@ -43986,7 +44176,9 @@ var chart_core_EvChart = /*#__PURE__*/function () {
           option: selectSeries,
           selected: this.defaultSelectInfo
         },
-        overlayCtx: this.overlayCtx
+        overlayCtx: this.overlayCtx,
+        isBrush: !!brush,
+        displayOverflow: displayOverflow
       };
       var showIndex = 0;
       var showSeriesCount = 0;
@@ -44112,17 +44304,21 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   }, {
     key: "drawTip",
     value: function drawTip() {
+      var _this$drawTips;
+
       var tipLocationInfo;
 
       if (this.lastHitInfo) {
         tipLocationInfo = this.lastHitInfo;
       } else if (this.defaultSelectItemInfo) {
         tipLocationInfo = this.getItem(this.defaultSelectItemInfo, false);
+      } else if (this.defaultSelectInfo && this.options.selectLabel.use) {
+        tipLocationInfo = this.getItem(this.defaultSelectInfo, false);
       } else {
         tipLocationInfo = null;
       }
 
-      this.drawTips(tipLocationInfo);
+      (_this$drawTips = this.drawTips) === null || _this$drawTips === void 0 ? void 0 : _this$drawTips.call(this, tipLocationInfo);
     }
     /**
      * Create axes
@@ -44281,7 +44477,10 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       }
 
       this.bufferCtx.scale(this.pixelRatio, this.pixelRatio);
-      this.overlayCtx.scale(this.pixelRatio, this.pixelRatio);
+
+      if (this.overlayCtx) {
+        this.overlayCtx.scale(this.pixelRatio, this.pixelRatio);
+      }
     }
     /**
      * Get chart DOM size and set canvas size
@@ -44375,8 +44574,11 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       this.displayCanvas.style.width = "".concat(width, "px");
       this.bufferCanvas.width = width * this.pixelRatio;
       this.bufferCanvas.style.width = "".concat(width, "px");
-      this.overlayCanvas.width = width * this.pixelRatio;
-      this.overlayCanvas.style.width = "".concat(width, "px");
+
+      if (this.overlayCanvas) {
+        this.overlayCanvas.width = width * this.pixelRatio;
+        this.overlayCanvas.style.width = "".concat(width, "px");
+      }
     }
     /**
      * Set canvas height
@@ -44396,8 +44598,11 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       this.displayCanvas.style.height = "".concat(height, "px");
       this.bufferCanvas.height = height * this.pixelRatio;
       this.bufferCanvas.style.height = "".concat(height, "px");
-      this.overlayCanvas.height = height * this.pixelRatio;
-      this.overlayCanvas.style.height = "".concat(height, "px");
+
+      if (this.overlayCanvas) {
+        this.overlayCanvas.height = height * this.pixelRatio;
+        this.overlayCanvas.style.height = "".concat(height, "px");
+      }
     }
     /**
      * Calculate labels offset from chart rect (Axis 영역을 벗어나는 label 크기 계산)
@@ -44485,6 +44690,8 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   }, {
     key: "update",
     value: function update(updateInfo) {
+      var _this$initSelectedInf2;
+
       var options = this.options;
       var data = this.data.data;
       var labels = this.data.labels;
@@ -44580,7 +44787,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       this.axesY = this.createAxes('y', options.axesY);
       this.axesRange = this.getAxesRange();
       this.labelOffset = this.getLabelOffset();
-      this.initSelectedInfo();
+      (_this$initSelectedInf2 = this.initSelectedInfo) === null || _this$initSelectedInf2 === void 0 ? void 0 : _this$initSelectedInf2.call(this);
       this.render(updateInfo === null || updateInfo === void 0 ? void 0 : updateInfo.hitInfo);
       var isDragMove = this.dragInfo && this.drawSelectionArea;
 
@@ -44646,13 +44853,15 @@ var chart_core_EvChart = /*#__PURE__*/function () {
     }
     /**
      * Resize chart
+     * @param {Function} promiseRes After evChart resize completes,
+     *   callback completion status with promiseRes to draw a Brush over it.
      *
      * @returns {undefined}
      */
 
   }, {
     key: "resize",
-    value: function resize() {
+    value: function resize(promiseRes) {
       this.clear();
       this.bufferCtx.restore();
       this.bufferCtx.save();
@@ -44660,6 +44869,10 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       this.initScale();
       this.chartRect = this.getChartRect();
       this.drawChart();
+
+      if (promiseRes) {
+        promiseRes(true);
+      }
     }
     /**
      * Render chart
@@ -44756,12 +44969,541 @@ var chart_core_EvChart = /*#__PURE__*/function () {
 }();
 
 /* harmony default export */ var chart_core = (chart_core_EvChart);
+// 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/chart/ChartToolbar.vue?vue&type=template&id=691b9473&scoped=true
+
+
+
+var ChartToolbarvue_type_template_id_691b9473_scoped_true_withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-691b9473");
+
+Object(external_commonjs_vue_commonjs2_vue_root_Vue_["pushScopeId"])("data-v-691b9473");
+
+var ChartToolbarvue_type_template_id_691b9473_scoped_true_hoisted_1 = {
+  class: "ev-chart__toolbar__wrapper"
+};
+var ChartToolbarvue_type_template_id_691b9473_scoped_true_hoisted_2 = {
+  class: "ev-chart__toolbar__wrapper__icon"
+};
+
+Object(external_commonjs_vue_commonjs2_vue_root_Vue_["popScopeId"])();
+
+var ChartToolbarvue_type_template_id_691b9473_scoped_true_render = /*#__PURE__*/ChartToolbarvue_type_template_id_691b9473_scoped_true_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_ev_icon = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ev-icon");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", ChartToolbarvue_type_template_id_691b9473_scoped_true_hoisted_1, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", ChartToolbarvue_type_template_id_691b9473_scoped_true_hoisted_2, [(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(external_commonjs_vue_commonjs2_vue_root_Vue_["Fragment"], null, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderList"])(_ctx.$props.toolbar.items, function (option, iconType) {
+    return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])(_component_ev_icon, {
+      key: "".concat(iconType, "-").concat(option.icon),
+      class: iconType,
+      icon: option.icon,
+      size: option.size,
+      title: option.title,
+      onClick: function onClick($event) {
+        return _ctx.$emit('onClickToolbar', $event, iconType);
+      }
+    }, null, 8, ["class", "icon", "size", "title", "onClick"]);
+  }), 128))])]);
+});
+// CONCATENATED MODULE: ./src/components/chart/ChartToolbar.vue?vue&type=template&id=691b9473&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/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/chart/ChartToolbar.vue?vue&type=script&lang=js
+/* harmony default export */ var ChartToolbarvue_type_script_lang_js = ({
+  name: 'EvChartToolbar',
+  props: {
+    toolbar: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    }
+  },
+  emits: ['onClickToolbar']
+});
+// CONCATENATED MODULE: ./src/components/chart/ChartToolbar.vue?vue&type=script&lang=js
+ 
+// EXTERNAL MODULE: ./src/components/chart/ChartToolbar.vue?vue&type=style&index=0&id=691b9473&lang=scss&scoped=true
+var ChartToolbarvue_type_style_index_0_id_691b9473_lang_scss_scoped_true = __webpack_require__("6938");
+
+// CONCATENATED MODULE: ./src/components/chart/ChartToolbar.vue
+
+
+
+
+
+
+
+const ChartToolbar_exports_ = /*#__PURE__*/exportHelper_default()(ChartToolbarvue_type_script_lang_js, [['render',ChartToolbarvue_type_template_id_691b9473_scoped_true_render],['__scopeId',"data-v-691b9473"]])
+
+/* harmony default export */ var ChartToolbar = (ChartToolbar_exports_);
+// CONCATENATED MODULE: ./src/components/chart/chartZoom.core.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var chartZoom_core_EvChartZoom = /*#__PURE__*/function () {
+  function EvChartZoom(evChartInfo, evChartClone, evChartZoomOptions, evChartToolbarRef, isExecuteZoom, brushIdx, emitFunc) {
+    _classCallCheck(this, EvChartZoom);
+
+    this.isExecuteZoom = isExecuteZoom;
+    this.evChartProps = evChartInfo.props;
+    this.evChartCloneData = evChartClone.data;
+    this.brushIdx = brushIdx;
+    this.setEvChartZoomOptions(evChartZoomOptions);
+    this.setIcon(evChartToolbarRef);
+    var cloneLabelsLastIdx = evChartClone.data[0].labels.length - 1;
+    this.cloneLabelsLastIdx = cloneLabelsLastIdx;
+    this.isAnimationFinish = true;
+    this.zoomAreaMemory = {
+      previous: [],
+      current: [[0, cloneLabelsLastIdx]],
+      latest: []
+    };
+
+    if (emitFunc) {
+      this.emitFunc = emitFunc;
+      emitFunc.updateZoomStartIdx(0);
+      emitFunc.updateZoomEndIdx(cloneLabelsLastIdx);
+    }
+
+    this.wrapWheelMoveZoomArea = this.wheelMoveZoomArea.bind(this);
+    this.evChartDomContainers = this.drawAnimationCanvas(evChartInfo.dom);
+  }
+
+  _createClass(EvChartZoom, [{
+    key: "setEvChartZoomOptions",
+    value: function setEvChartZoomOptions(options) {
+      this.evChartZoomOptions = options;
+    }
+  }, {
+    key: "setIcon",
+    value: function setIcon(evChartToolbarRef) {
+      if (!evChartToolbarRef) {
+        return;
+      }
+
+      var dragZoomIcon = evChartToolbarRef.querySelector('.dragZoom');
+      this.resetIcon = evChartToolbarRef.querySelector('.reset');
+      this.previousIcon = evChartToolbarRef.querySelector('.previous');
+      this.latestIcon = evChartToolbarRef.querySelector('.latest');
+      this.dragZoomIcon = dragZoomIcon;
+      this.iconStyle(dragZoomIcon, 'enable');
+    }
+  }, {
+    key: "drawAnimationCanvas",
+    value: function drawAnimationCanvas(evChartDom) {
+      evChartDom.forEach(function (dom) {
+        var animationCanvas = document.createElement('canvas');
+        animationCanvas.setAttribute('style', 'display: block;');
+        animationCanvas.setAttribute('class', 'animation-canvas');
+        animationCanvas.style.position = 'absolute';
+        dom.appendChild(animationCanvas);
+      });
+      return evChartDom;
+    }
+  }, {
+    key: "setEventListener",
+    value: function setEventListener(isUseZoomMode) {
+      var _this = this;
+
+      var toggleEventListener = isUseZoomMode ? 'addEventListener' : 'removeEventListener';
+      this.isUseZoomMode = isUseZoomMode;
+      this.evChartDomContainers.forEach(function (dom) {
+        dom[toggleEventListener]('wheel', _this.wrapWheelMoveZoomArea);
+      });
+    }
+  }, {
+    key: "wheelMoveZoomArea",
+    value: function wheelMoveZoomArea(e) {
+      e.preventDefault();
+
+      var _this$zoomAreaMemory$ = _slicedToArray(this.zoomAreaMemory.current[0], 2),
+          zoomStartIdx = _this$zoomAreaMemory$[0],
+          zoomEndIdx = _this$zoomAreaMemory$[1];
+
+      if (zoomStartIdx === zoomEndIdx) {
+        return;
+      }
+
+      var zoomMoveStartIdx;
+      var zoomMoveEndIdx;
+
+      if (e.deltaY > 0) {
+        if (!zoomStartIdx) {
+          return;
+        }
+
+        zoomMoveStartIdx = zoomStartIdx - 1;
+        zoomMoveEndIdx = zoomEndIdx - 1;
+      } else {
+        if (zoomEndIdx === this.cloneLabelsLastIdx) {
+          return;
+        }
+
+        zoomMoveStartIdx = zoomStartIdx + 1;
+        zoomMoveEndIdx = zoomEndIdx + 1;
+      }
+
+      this.isUseToolbar = true;
+      this.executeZoom(zoomMoveStartIdx, zoomMoveEndIdx);
+      this.zoomAreaMemory.current[0] = [zoomMoveStartIdx, zoomMoveEndIdx];
+    }
+  }, {
+    key: "clickMoveZoomArea",
+    value: function clickMoveZoomArea(direction) {
+      if (!this.zoomAreaMemory[direction].length) {
+        return;
+      }
+
+      var _this$zoomAreaMemory$2 = this.zoomAreaMemory[direction].pop(),
+          _this$zoomAreaMemory$3 = _slicedToArray(_this$zoomAreaMemory$2, 2),
+          zoomStartIdx = _this$zoomAreaMemory$3[0],
+          zoomEndIdx = _this$zoomAreaMemory$3[1];
+
+      this.isUseToolbar = true;
+      this.executeZoom(zoomStartIdx, zoomEndIdx);
+      this.setZoomAreaMemory(zoomStartIdx, zoomEndIdx, direction === 'previous' ? 'latest' : 'previous');
+    }
+  }, {
+    key: "dragZoom",
+    value: function dragZoom(_ref) {
+      var zoomInfoData = _ref.data,
+          dragSelectionInfo = _ref.range.dragSelectionInfo;
+      var dragXsp = dragSelectionInfo.dragXsp,
+          dragXep = dragSelectionInfo.dragXep,
+          exceptAxesYChartWidth = dragSelectionInfo.exceptAxesYChartWidth,
+          chartTitle = dragSelectionInfo.chartTitle;
+      var _this$evChartProps = this.evChartProps,
+          evChartOptions = _this$evChartProps.options,
+          evChartData = _this$evChartProps.data;
+      var dragChartIdx = evChartOptions.length > 1 ? evChartOptions.findIndex(function (option) {
+        var _option$title$text, _option$title;
+
+        return ((_option$title$text = option === null || option === void 0 ? void 0 : (_option$title = option.title) === null || _option$title === void 0 ? void 0 : _option$title.text) !== null && _option$title$text !== void 0 ? _option$title$text : '') === chartTitle;
+      }) : 0;
+
+      if (evChartOptions[dragChartIdx].axesX[0].type === 'time') {
+        var zoomSeries = zoomInfoData[0].items;
+        var zoomStartDate = zoomSeries[0].x;
+        var zoomEndDate = zoomSeries[zoomSeries.length - 1].x;
+        var currentChartDataLabels = evChartData[dragChartIdx].labels;
+        var cloneChartDataLabels = this.evChartCloneData[dragChartIdx].labels;
+
+        var _this$zoomAreaMemory$4 = _slicedToArray(this.zoomAreaMemory.current[0], 2),
+            currentZoomStartIdx = _this$zoomAreaMemory$4[0],
+            currentZoomEndIdx = _this$zoomAreaMemory$4[1];
+
+        var newZoomStartIdx = cloneChartDataLabels.findIndex(function (label) {
+          return +label.$d === +zoomStartDate.$d;
+        });
+        var newZoomEndIdx = cloneChartDataLabels.findLastIndex(function (label) {
+          return +label.$d === +zoomEndDate.$d;
+        });
+
+        var calculateAxesXPosition = function calculateAxesXPosition(zoomIdx) {
+          var axesXInterval = exceptAxesYChartWidth / (currentChartDataLabels.length - 1);
+          return axesXInterval * (zoomIdx - currentZoomStartIdx);
+        };
+
+        var newDragStartAxesX = calculateAxesXPosition(newZoomStartIdx);
+
+        if (newZoomStartIdx === newZoomEndIdx) {
+          // drag 영역에 한 포인트만 있을 경우
+          if (newDragStartAxesX - dragXsp >= dragXep - newDragStartAxesX) {
+            newZoomStartIdx -= 1;
+          } else {
+            newZoomEndIdx += 1;
+          }
+        }
+
+        if (newZoomStartIdx === currentZoomStartIdx && newZoomEndIdx === currentZoomEndIdx) {
+          return;
+        }
+
+        if (newZoomStartIdx - newZoomEndIdx === -1) {
+          newDragStartAxesX = calculateAxesXPosition(newZoomStartIdx);
+        }
+
+        var newDragEndAxesX = calculateAxesXPosition(newZoomEndIdx);
+        this.dragZoomAnimation(dragSelectionInfo, newZoomStartIdx, newZoomEndIdx, newDragStartAxesX, newDragEndAxesX);
+      }
+    }
+  }, {
+    key: "dragZoomAnimation",
+    value: function dragZoomAnimation(dragSelectionInfo, newZoomStartIdx, newZoomEndIdx, newDragStartAxesX, newDragEndAxesX) {
+      var _this2 = this;
+
+      var chartRange = dragSelectionInfo.chartRange,
+          exceptAxesYChartWidth = dragSelectionInfo.exceptAxesYChartWidth,
+          exceptAxesXChartHeight = dragSelectionInfo.exceptAxesXChartHeight;
+      var pixelRatio = window.devicePixelRatio || 1;
+      var displayAnimaionCanvas = Array.from(this.evChartDomContainers).map(function (container) {
+        var animationCanvas = container.querySelector('.animation-canvas');
+        var displayCanvas = container.children[0];
+        return [displayCanvas, animationCanvas];
+      });
+
+      var _loop = function _loop(idx) {
+        var _displayAnimaionCanva = _slicedToArray(displayAnimaionCanvas[idx], 2),
+            displayCanvas = _displayAnimaionCanva[0],
+            animationCanvas = _displayAnimaionCanva[1];
+
+        var animationCtx = animationCanvas.getContext('2d');
+        animationCanvas.style.top = "".concat(chartRange.y1, "px");
+        animationCanvas.style.left = "".concat(chartRange.x1, "px");
+        animationCanvas.width = exceptAxesYChartWidth * pixelRatio;
+        animationCanvas.style.width = "".concat(exceptAxesYChartWidth, "px");
+        animationCanvas.height = exceptAxesXChartHeight * pixelRatio;
+        animationCanvas.style.height = "".concat(exceptAxesXChartHeight, "px");
+
+        if (animationCanvas.style.display === 'none') {
+          animationCanvas.style.display = 'block';
+        }
+
+        _this2.isAnimationFinish = false;
+        _this2.isUseToolbar = true;
+
+        _this2.executeDragZoomAnimation(displayCanvas, animationCtx, dragSelectionInfo, newDragStartAxesX, newDragEndAxesX).then(function (isAnimationFinish) {
+          animationCanvas.style.display = 'none';
+
+          if (isAnimationFinish && idx === displayAnimaionCanvas.length - 1) {
+            _this2.isAnimationFinish = isAnimationFinish;
+
+            _this2.executeZoom(newZoomStartIdx, newZoomEndIdx);
+
+            _this2.setZoomAreaMemory(newZoomStartIdx, newZoomEndIdx);
+          }
+        });
+      };
+
+      for (var idx = 0; idx < displayAnimaionCanvas.length; idx++) {
+        _loop(idx);
+      }
+    }
+  }, {
+    key: "executeZoom",
+    value: function executeZoom(zoomStartIdx, zoomEndIdx) {
+      if (this.isExecuteZoom) {
+        this.isExecuteZoom.value = true;
+      }
+
+      for (var idx = 0; idx < this.evChartCloneData.length; idx++) {
+        var _this$evChartCloneDat = this.evChartCloneData[idx],
+            cloneData = _this$evChartCloneDat.data,
+            cloneLabels = _this$evChartCloneDat.labels,
+            cloneSeries = _this$evChartCloneDat.series;
+        var evChartData = this.evChartProps.data[idx];
+        var cloneSeriesNames = Object.keys(cloneSeries);
+
+        for (var jdx = 0; jdx < cloneSeriesNames.length; jdx++) {
+          var cloneSeriesName = cloneSeriesNames[jdx];
+          evChartData.data[cloneSeriesName] = cloneData[cloneSeriesName].filter(function (d, dataIdx) {
+            return zoomStartIdx <= dataIdx && zoomEndIdx >= dataIdx;
+          });
+        }
+
+        evChartData.labels = cloneLabels.filter(function (l, labelIdx) {
+          return zoomStartIdx <= labelIdx && zoomEndIdx >= labelIdx;
+        });
+      }
+
+      if (!this.brushIdx.isUseButton && !this.brushIdx.isUseScroll) {
+        this.brushIdx.start = zoomStartIdx;
+        this.brushIdx.end = zoomEndIdx;
+      }
+
+      if (this.emitFunc) {
+        this.emitFunc.updateZoomStartIdx(zoomStartIdx);
+        this.emitFunc.updateZoomEndIdx(zoomEndIdx);
+      }
+    }
+  }, {
+    key: "updateEvChartCloneData",
+    value: function updateEvChartCloneData(evChartClone, isUseZoomMode) {
+      var cloneLabelsLastIdx = evChartClone.data[0].labels.length - 1;
+      this.cloneLabelsLastIdx = cloneLabelsLastIdx;
+      this.evChartCloneData = evChartClone.data;
+
+      if (this.dragZoomIcon) {
+        this.dragZoomIcon.classList.remove('active');
+      }
+
+      this.zoomAreaMemory = {
+        previous: [],
+        current: [[0, cloneLabelsLastIdx]],
+        latest: []
+      };
+
+      if (this.emitFunc) {
+        this.emitFunc.updateZoomStartIdx(0);
+        this.emitFunc.updateZoomEndIdx(cloneLabelsLastIdx);
+      }
+
+      this.setIconStyle(isUseZoomMode);
+    }
+  }, {
+    key: "setZoomAreaMemory",
+    value: function setZoomAreaMemory(zoomStartIdx, zoomEndIdx, direction) {
+      var _this$zoomAreaMemory = this.zoomAreaMemory,
+          previous = _this$zoomAreaMemory.previous,
+          current = _this$zoomAreaMemory.current,
+          latest = _this$zoomAreaMemory.latest;
+      var currentZoomArea = current.pop();
+      var bufferMemoryCnt = this.evChartZoomOptions.zoom.bufferMemoryCnt;
+
+      if (direction) {
+        if (previous.length >= bufferMemoryCnt) {
+          previous.splice(0, previous.length - bufferMemoryCnt + 1);
+        }
+
+        this.zoomAreaMemory[direction].push(currentZoomArea);
+      } else {
+        previous.push(currentZoomArea);
+        latest.length = 0;
+      }
+
+      current.push([zoomStartIdx, zoomEndIdx]);
+      this.setIconStyle(this.isUseZoomMode);
+    }
+  }, {
+    key: "executeDragZoomAnimation",
+    value: function executeDragZoomAnimation(displayCanvas, animationCtx, dragSelectionInfo, newDragStartAxesX, newDragEndAxesX) {
+      var chartRange = dragSelectionInfo.chartRange,
+          exceptAxesYChartWidth = dragSelectionInfo.exceptAxesYChartWidth,
+          exceptAxesXChartHeight = dragSelectionInfo.exceptAxesXChartHeight;
+      var leftDx = 0;
+      var centerDx = newDragStartAxesX;
+      var centerDWidth = newDragEndAxesX - newDragStartAxesX;
+      var rightDx = newDragEndAxesX;
+      var globalAlpha = 1;
+      var globalAlphaSensitivity = 0.0015;
+      var evChartOpacity = 0.5;
+      var evChartMinOpacity = 0.1;
+      var evChartOpacitySensitivity = 0.05;
+      var zoomSpeed = 50;
+      var leftSpeed = Math.ceil(zoomSpeed * (newDragStartAxesX / exceptAxesYChartWidth));
+      var rightSpeed = Math.ceil(zoomSpeed * ((exceptAxesYChartWidth - newDragEndAxesX) / exceptAxesYChartWidth));
+
+      var animate = function animate(responseFinishStatus) {
+        animationCtx.clearRect(0, 0, exceptAxesYChartWidth, exceptAxesXChartHeight);
+
+        if (centerDx <= 0 && centerDWidth >= exceptAxesYChartWidth) {
+          displayCanvas.style.opacity = 'initial';
+          return responseFinishStatus(true);
+        }
+
+        if (evChartOpacity >= evChartMinOpacity) {
+          displayCanvas.style.opacity = evChartOpacity;
+          evChartOpacity -= evChartOpacitySensitivity;
+        }
+
+        animationCtx.globalAlpha = globalAlpha; // 줌 영역 왼쪽
+
+        animationCtx.drawImage(displayCanvas, chartRange.x1, chartRange.y1, newDragStartAxesX, exceptAxesXChartHeight, leftDx, 0, newDragStartAxesX, exceptAxesXChartHeight); // 줌 영역
+
+        animationCtx.drawImage(displayCanvas, chartRange.x1 + newDragStartAxesX, chartRange.y1, newDragEndAxesX - newDragStartAxesX, exceptAxesXChartHeight, centerDx, 0, centerDWidth, exceptAxesXChartHeight); // 줌 영역 오른쪽
+
+        animationCtx.drawImage(displayCanvas, chartRange.x1 + newDragEndAxesX, chartRange.y1, exceptAxesYChartWidth, exceptAxesXChartHeight, rightDx, 0, exceptAxesYChartWidth, exceptAxesXChartHeight);
+        globalAlpha -= globalAlphaSensitivity;
+        leftDx -= leftSpeed;
+        centerDx -= leftSpeed;
+        centerDWidth += leftSpeed + rightSpeed;
+        rightDx += rightSpeed;
+        return requestAnimationFrame(function () {
+          return animate(responseFinishStatus);
+        });
+      };
+
+      return new Promise(function (response) {
+        return animate(response);
+      });
+    }
+  }, {
+    key: "setIconStyle",
+    value: function setIconStyle(isUseZoomMode) {
+      var _this3 = this;
+
+      var toggleIconStyle = function toggleIconStyle(icon, condition) {
+        if (condition) {
+          _this3.iconStyle(icon, 'enable');
+        } else {
+          _this3.iconStyle(icon, 'disable');
+        }
+      };
+
+      if (isUseZoomMode) {
+        var _this$zoomAreaMemory2 = this.zoomAreaMemory,
+            previous = _this$zoomAreaMemory2.previous,
+            latest = _this$zoomAreaMemory2.latest;
+        toggleIconStyle(this.previousIcon, previous.length);
+        toggleIconStyle(this.latestIcon, latest.length);
+        this.iconStyle(this.resetIcon, 'enable');
+      } else {
+        toggleIconStyle(this.resetIcon);
+        toggleIconStyle(this.previousIcon);
+        toggleIconStyle(this.latestIcon);
+      }
+    }
+  }, {
+    key: "iconStyle",
+    value: function iconStyle(icon, mode) {
+      if (!icon) {
+        return;
+      }
+
+      var _ref2 = mode === 'enable' ? [1, 'initial'] : [0.5, 'none'],
+          _ref3 = _slicedToArray(_ref2, 2),
+          opacity = _ref3[0],
+          pointerEvents = _ref3[1];
+
+      icon.style.opacity = opacity;
+      icon.style.pointerEvents = pointerEvents;
+    }
+  }, {
+    key: "initZoom",
+    value: function initZoom() {
+      if (!this.isAnimationFinish) {
+        return;
+      }
+
+      var _this$zoomAreaMemory$5 = _slicedToArray(this.zoomAreaMemory.current[0], 2),
+          currentZoomStartIdx = _this$zoomAreaMemory$5[0],
+          currentZoomEndIdx = _this$zoomAreaMemory$5[1];
+
+      var cloneLabelsLastIdx = this.cloneLabelsLastIdx;
+
+      if (currentZoomStartIdx !== 0 || currentZoomEndIdx !== cloneLabelsLastIdx) {
+        this.isUseToolbar = true;
+        this.executeZoom(0, cloneLabelsLastIdx);
+        this.setZoomAreaMemory(0, cloneLabelsLastIdx);
+      }
+    }
+  }]);
+
+  return EvChartZoom;
+}();
+
+
 // CONCATENATED MODULE: ./src/components/chart/uses.js
 
 
 
 
 
+
+
+
+
+
+
 var DEFAULT_OPTIONS = {
   padding: {
     top: 20,
@@ -44890,6 +45632,7 @@ var DEFAULT_OPTIONS = {
   selectLabel: {
     use: false,
     useClick: true,
+    tipText: 'value',
     limit: 1,
     useDeselectOverflow: false,
     showTip: false,
@@ -44897,7 +45640,18 @@ var DEFAULT_OPTIONS = {
     useLabelOpacity: true,
     fixedPosTop: false,
     useApproximateValue: false,
-    tipBackground: '#000000'
+    tipBackground: '#000000',
+    indicatorColor: '#000000',
+    tipStyle: {
+      height: 20,
+      background: '#000000',
+      textColor: '#FFFFFF',
+      fontSize: 14,
+      fontFamily: 'Roboto',
+      fontWeight: 400
+    },
+    showTextTip: false,
+    showIndicator: false
   },
   selectSeries: {
     use: false,
@@ -44911,6 +45665,34 @@ var DEFAULT_OPTIONS = {
     fillColor: '#38ACEC',
     opacity: 0.65
   },
+  zoom: {
+    bufferMemoryCnt: 100,
+    toolbar: {
+      show: false,
+      items: {
+        previous: {
+          icon: 'ev-icon-allow2-left',
+          size: 'medium',
+          title: 'Previous'
+        },
+        latest: {
+          icon: 'ev-icon-allow2-right',
+          size: 'medium',
+          title: 'Latest'
+        },
+        reset: {
+          icon: 'ev-icon-redo',
+          size: 'medium',
+          title: 'Reset'
+        },
+        dragZoom: {
+          icon: 'ev-icon-zoomin',
+          size: 'medium',
+          title: 'Drag Zoom'
+        }
+      }
+    }
+  },
   heatMapColor: {
     min: '#FFFFFF',
     max: '#0052FF',
@@ -44932,7 +45714,9 @@ var DEFAULT_DATA = {
   labels: [],
   data: {}
 };
-var chart_uses_useModel = function useModel() {
+var chart_uses_useModel = function useModel(selectedLabel) {
+  var _props$selectedLabel;
+
   var _getCurrentInstance = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
       props = _getCurrentInstance.props,
       emit = _getCurrentInstance.emit;
@@ -44961,7 +45745,7 @@ var chart_uses_useModel = function useModel() {
   };
 
   var selectItemInfo = lodash_es_cloneDeep(props.selectedItem);
-  var selectLabelInfo = lodash_es_cloneDeep(props.selectedLabel);
+  var selectLabelInfo = lodash_es_cloneDeep((_props$selectedLabel = props.selectedLabel) !== null && _props$selectedLabel !== void 0 ? _props$selectedLabel : selectedLabel === null || selectedLabel === void 0 ? void 0 : selectedLabel.value);
   var selectSeriesInfo = lodash_es_cloneDeep(props.selectedSeries);
   var eventListeners = {
     click: function () {
@@ -44984,9 +45768,13 @@ var chart_uses_useModel = function useModel() {
                 }
 
                 if ((_e$selected = e.selected) !== null && _e$selected !== void 0 && _e$selected.dataIndex) {
-                  emit('update:selectedLabel', {
-                    dataIndex: e.selected.dataIndex
-                  });
+                  if (selectedLabel !== null && selectedLabel !== void 0 && selectedLabel.value) {
+                    selectedLabel.value.dataIndex = e.selected.dataIndex;
+                  } else {
+                    emit('update:selectedLabel', {
+                      dataIndex: e.selected.dataIndex
+                    });
+                  }
                 }
 
                 if ((_e$selected2 = e.selected) !== null && _e$selected2 !== void 0 && _e$selected2.seriesId) {
@@ -45098,6 +45886,271 @@ var uses_useWrapper = function useWrapper(options) {
     wrapperStyle: wrapperStyle
   };
 };
+var uses_useZoomModel = function useZoomModel(evChartNormalizedOptions, _ref, selectedLabelOrItem) {
+  var evChartWrapper = _ref.wrapper,
+      evChartGroupRef = _ref.evChartGroupRef;
+
+  var _getCurrentInstance2 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      props = _getCurrentInstance2.props,
+      slots = _getCurrentInstance2.slots,
+      emit = _getCurrentInstance2.emit;
+
+  var isExecuteZoom = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(false);
+  var isUseZoomMode = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(false);
+  var evChartToolbarRef = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])();
+  var evChartZoomOptions = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    zoom: evChartNormalizedOptions.zoom
+  });
+  var brushIdx = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    start: 0,
+    end: 0,
+    isUseButton: false,
+    isUseScroll: false
+  });
+  var evChartZoom = null;
+  var evChartInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    dom: [],
+    props: {
+      data: [],
+      options: []
+    }
+  });
+  var evChartClone = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    data: null,
+    options: null
+  });
+
+  var getRangeInfo = function getRangeInfo(zoomInfo) {
+    if (zoomInfo.data.length && zoomInfo.range && isUseZoomMode.value) {
+      evChartZoom.dragZoom(zoomInfo);
+    }
+  };
+
+  var setEvChartOptions = function setEvChartOptions() {
+    evChartInfo.props.options.forEach(function (option, idx) {
+      option.zoom = _objectSpread2(_objectSpread2({}, option.zoom), {}, {
+        use: isUseZoomMode.value,
+        getRangeInfo: getRangeInfo
+      });
+
+      if (isUseZoomMode.value) {
+        option.dragSelection = _objectSpread2(_objectSpread2({}, option.dragSelection), {}, {
+          use: true,
+          keepDisplay: false
+        });
+      } else {
+        var _evChartClone$options;
+
+        var _ref2 = (_evChartClone$options = evChartClone.options[idx].dragSelection) !== null && _evChartClone$options !== void 0 ? _evChartClone$options : {},
+            originUseOption = _ref2.use,
+            originKeepDisplayOption = _ref2.keepDisplay;
+
+        option.dragSelection = {
+          use: !!originUseOption,
+          keepDisplay: !!originKeepDisplayOption
+        };
+      }
+    });
+  };
+
+  var createEvChartZoom = function createEvChartZoom() {
+    if (evChartGroupRef) {
+      evChartInfo.dom = evChartGroupRef.value.querySelectorAll('.ev-chart-container');
+      var chartIdx = 0;
+
+      if (evChartInfo.dom.length) {
+        slots.default(evChartInfo.dom).forEach(function (_ref3) {
+          var type = _ref3.type,
+              evChartProps = _ref3.props;
+
+          if ((type === null || type === void 0 ? void 0 : type.name) === 'EvChart') {
+            var options = evChartProps.options,
+                data = evChartProps.data;
+            data.chartIdx = chartIdx;
+            chartIdx++;
+            evChartInfo.props.data.push(data);
+            evChartInfo.props.options.push(options);
+          }
+        });
+      }
+    } else {
+      evChartInfo.dom = [evChartWrapper.value.querySelector('.ev-chart-container')];
+      evChartInfo.props.data.push(props.data);
+      evChartInfo.props.options.push(props.options);
+    }
+
+    if (evChartInfo.props.data.length) {
+      evChartClone.data = lodash_es_cloneDeep(evChartInfo.props.data);
+      evChartClone.options = lodash_es_cloneDeep(evChartInfo.props.options);
+      var emitFunc = {
+        updateZoomStartIdx: function updateZoomStartIdx(startIdx) {
+          return emit('update:zoomStartIdx', startIdx);
+        },
+        updateZoomEndIdx: function updateZoomEndIdx(endIdx) {
+          return emit('update:zoomEndIdx', endIdx);
+        }
+      };
+      evChartZoom = new chartZoom_core_EvChartZoom(evChartInfo, evChartClone, evChartZoomOptions, evChartToolbarRef.value, isExecuteZoom, brushIdx, emitFunc);
+    }
+  };
+
+  var toggleUseZoom = function toggleUseZoom(target) {
+    if (evChartClone.data[0].labels.length <= 1) {
+      return;
+    }
+
+    isUseZoomMode.value = !isUseZoomMode.value;
+
+    if (target) {
+      target.classList.toggle('active');
+    } else {
+      var dragZoomIcon = evChartToolbarRef.value.querySelector('.dragZoom');
+      dragZoomIcon.classList.toggle('active');
+    }
+
+    setEvChartOptions();
+    evChartZoom.setIconStyle(isUseZoomMode.value);
+    evChartZoom.setEventListener(isUseZoomMode.value);
+  };
+
+  var onClickToolbar = function onClickToolbar(e, iconType) {
+    if (!evChartZoom.isAnimationFinish) {
+      return;
+    }
+
+    switch (iconType) {
+      case 'dragZoom':
+        toggleUseZoom(e.target);
+        break;
+
+      case 'reset':
+        evChartZoom.initZoom();
+        break;
+
+      case 'previous':
+      case 'latest':
+        evChartZoom.clickMoveZoomArea(iconType);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onUpdated"])(function () {
+    if (evChartToolbarRef.value) {
+      evChartZoom.setIcon(evChartToolbarRef.value);
+    }
+  });
+
+  var setOptionsForUseZoom = function setOptionsForUseZoom(newOpt) {
+    var isUpdateZoomOptions = !lodash_es_isEqual(newOpt.zoom, evChartZoomOptions.zoom);
+
+    if (isUpdateZoomOptions) {
+      evChartZoomOptions.zoom = newOpt.zoom;
+
+      if (evChartZoom) {
+        if (!evChartZoomOptions.zoom.toolbar.show && isUseZoomMode.value) {
+          toggleUseZoom();
+        }
+
+        evChartZoom.setEvChartZoomOptions(evChartZoomOptions);
+      } else if (evChartZoomOptions.zoom.toolbar.show && !evChartGroupRef) {
+        createEvChartZoom();
+      }
+    }
+  };
+
+  var setDataForUseZoom = function setDataForUseZoom(newData) {
+    if (!isExecuteZoom.value) {
+      evChartClone.data = evChartGroupRef ? lodash_es_cloneDeep(newData) : [lodash_es_cloneDeep(newData)];
+      isUseZoomMode.value = false;
+      setEvChartOptions();
+      brushIdx.start = 0;
+      brushIdx.end = evChartClone.data[0].labels.length - 1;
+
+      if (evChartZoom) {
+        evChartZoom.updateEvChartCloneData(evChartClone, isUseZoomMode.value);
+      }
+    }
+
+    isExecuteZoom.value = false;
+  };
+
+  var controlZoomIdx = function controlZoomIdx(zoomStartIdx, zoomEndIdx) {
+    if (evChartZoom.isUseToolbar) {
+      evChartZoom.isUseToolbar = false;
+      return;
+    }
+
+    if (isUseZoomMode.value) {
+      evChartZoom.executeZoom(zoomStartIdx, zoomEndIdx);
+      evChartZoom.setZoomAreaMemory(zoomStartIdx, zoomEndIdx);
+    }
+  };
+
+  Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+    return [brushIdx.start, brushIdx.end];
+  }, function (_ref4, _ref5) {
+    var _ref6 = _slicedToArray(_ref4, 2),
+        curBrushStartIdx = _ref6[0],
+        curBrushEndIdx = _ref6[1];
+
+    var _ref7 = _slicedToArray(_ref5, 1),
+        prevBrushStartIdx = _ref7[0];
+
+    if (selectedLabelOrItem !== null && selectedLabelOrItem !== void 0 && selectedLabelOrItem.value) {
+      if (typeof selectedLabelOrItem.value.dataIndex === 'number') {
+        if (curBrushStartIdx >= (prevBrushStartIdx !== null && prevBrushStartIdx !== void 0 ? prevBrushStartIdx : 0)) {
+          selectedLabelOrItem.value.dataIndex -= curBrushStartIdx - (prevBrushStartIdx !== null && prevBrushStartIdx !== void 0 ? prevBrushStartIdx : 0);
+        } else {
+          selectedLabelOrItem.value.dataIndex += prevBrushStartIdx - curBrushStartIdx;
+        }
+      } else {
+        for (var idx = 0; idx < selectedLabelOrItem.value.dataIndex.length; idx++) {
+          if (curBrushStartIdx >= (prevBrushStartIdx !== null && prevBrushStartIdx !== void 0 ? prevBrushStartIdx : 0)) {
+            selectedLabelOrItem.value.dataIndex[idx] -= curBrushStartIdx - (prevBrushStartIdx !== null && prevBrushStartIdx !== void 0 ? prevBrushStartIdx : 0);
+          } else {
+            selectedLabelOrItem.value.dataIndex[idx] += prevBrushStartIdx - curBrushStartIdx;
+          }
+        }
+      }
+    }
+
+    if (brushIdx.isUseButton || brushIdx.isUseScroll) {
+      evChartZoom.executeZoom(curBrushStartIdx, curBrushEndIdx);
+    }
+  });
+  Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+    return [brushIdx.isUseButton, brushIdx.isUseScroll];
+  }, function (_ref8, _ref9) {
+    var _ref10 = _slicedToArray(_ref8, 2),
+        curIsUseButton = _ref10[0],
+        curIsUseScroll = _ref10[1];
+
+    var _ref11 = _slicedToArray(_ref9, 2),
+        prevIsUseButton = _ref11[0],
+        prevIsUseScroll = _ref11[1];
+
+    if (prevIsUseButton && !curIsUseButton) {
+      evChartZoom.setZoomAreaMemory(brushIdx.start, brushIdx.end);
+    } else if (prevIsUseScroll && !curIsUseScroll) {
+      evChartZoom.zoomAreaMemory.current[0] = [brushIdx.start, brushIdx.end];
+    }
+  });
+  return {
+    evChartZoomOptions: evChartZoomOptions,
+    evChartInfo: evChartInfo,
+    evChartToolbarRef: evChartToolbarRef,
+    evChartClone: evChartClone,
+    brushIdx: brushIdx,
+    createEvChartZoom: createEvChartZoom,
+    setOptionsForUseZoom: setOptionsForUseZoom,
+    setDataForUseZoom: setDataForUseZoom,
+    controlZoomIdx: controlZoomIdx,
+    onClickToolbar: onClickToolbar
+  };
+};
 // 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/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/chart/Chart.vue?vue&type=script&lang=js
 
 
@@ -45106,8 +46159,13 @@ var uses_useWrapper = function useWrapper(options) {
 
 
 
+
+
 /* harmony default export */ var Chartvue_type_script_lang_js = ({
   name: 'EvChart',
+  components: {
+    EvChartToolbar: ChartToolbar
+  },
   props: {
     selectedItem: {
       type: Object,
@@ -45136,13 +46194,31 @@ var uses_useWrapper = function useWrapper(options) {
     resizeTimeout: {
       type: Number,
       default: 0
+    },
+    zoomStartIdx: {
+      type: Number,
+      default: 0
+    },
+    zoomEndIdx: {
+      type: Number,
+      default: 0
     }
   },
-  emits: ['click', 'dbl-click', 'drag-select', 'update:selectedItem', 'update:selectedLabel', 'update:selectedSeries'],
+  emits: ['click', 'dbl-click', 'drag-select', 'update:selectedItem', 'update:selectedLabel', 'update:selectedSeries', 'update:zoomStartIdx', 'update:zoomEndIdx'],
   setup: function setup(props) {
     var evChart = null;
+    var injectIsChartGroup = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["inject"])('isChartGroup', false);
+    var injectBrushSeries = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["inject"])('brushSeries', {
+      list: [],
+      chartIdx: null
+    });
+    var injectGroupSelectedLabel = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["inject"])('groupSelectedLabel', null);
+    var injectBrushIdx = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["inject"])('brushIdx', {
+      start: 0,
+      end: 0
+    });
 
-    var _useModel = chart_uses_useModel(),
+    var _useModel = chart_uses_useModel(injectGroupSelectedLabel),
         eventListeners = _useModel.eventListeners,
         selectItemInfo = _useModel.selectItemInfo,
         selectLabelInfo = _useModel.selectLabelInfo,
@@ -45152,11 +46228,29 @@ var uses_useWrapper = function useWrapper(options) {
 
     var normalizedData = getNormalizedData(props.data);
     var normalizedOptions = getNormalizedOptions(props.options);
+    var selectedLabel = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return props.selectedLabel;
+    });
+    var selectedItem = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return props.selectedItem;
+    });
 
     var _useWrapper = uses_useWrapper(normalizedOptions),
         wrapper = _useWrapper.wrapper,
         wrapperStyle = _useWrapper.wrapperStyle;
 
+    var _useZoomModel = uses_useZoomModel(normalizedOptions, {
+      wrapper: wrapper,
+      evChartGroupRef: null
+    }, props.selectedLabel ? selectedLabel : selectedItem),
+        evChartZoomOptions = _useZoomModel.evChartZoomOptions,
+        evChartToolbarRef = _useZoomModel.evChartToolbarRef,
+        createEvChartZoom = _useZoomModel.createEvChartZoom,
+        setOptionsForUseZoom = _useZoomModel.setOptionsForUseZoom,
+        setDataForUseZoom = _useZoomModel.setDataForUseZoom,
+        controlZoomIdx = _useZoomModel.controlZoomIdx,
+        onClickToolbar = _useZoomModel.onClickToolbar;
+
     var createChart = function createChart() {
       var selected;
 
@@ -45166,12 +46260,16 @@ var uses_useWrapper = function useWrapper(options) {
         selected = selectSeriesInfo;
       }
 
-      evChart = new chart_core(wrapper.value, normalizedData, normalizedOptions, eventListeners, selectItemInfo, selected);
+      evChart = new chart_core(wrapper.value, normalizedData, normalizedOptions, eventListeners, selectItemInfo, selected, injectBrushSeries);
     };
 
     var drawChart = function drawChart() {
       if (evChart) {
         evChart.init();
+
+        if (!injectIsChartGroup && normalizedOptions.zoom.toolbar.show) {
+          createEvChartZoom();
+        }
       }
     };
 
@@ -45189,6 +46287,10 @@ var uses_useWrapper = function useWrapper(options) {
         },
         updateLegend: isUpdateLegendType
       });
+
+      if (!injectIsChartGroup) {
+        setOptionsForUseZoom(newOpt);
+      }
     }, {
       deep: true,
       flush: 'post'
@@ -45208,12 +46310,39 @@ var uses_useWrapper = function useWrapper(options) {
         },
         updateData: isUpdateData
       });
+
+      if (!injectIsChartGroup && isUpdateData) {
+        setDataForUseZoom(newData);
+      }
     }, {
       deep: true,
       flush: 'post'
     });
+
+    if (injectIsChartGroup && !(injectGroupSelectedLabel !== null && injectGroupSelectedLabel !== void 0 && injectGroupSelectedLabel.value)) {
+      Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+        return injectBrushIdx.start;
+      }, function (curBrushStartIdx, prevBrushStartIdx) {
+        if (selectedLabel !== null && selectedLabel !== void 0 && selectedLabel.value) {
+          for (var idx = 0; idx < selectedLabel.value.dataIndex.length; idx++) {
+            if (curBrushStartIdx >= (prevBrushStartIdx !== null && prevBrushStartIdx !== void 0 ? prevBrushStartIdx : 0)) {
+              selectedLabel.value.dataIndex[idx] -= curBrushStartIdx - (prevBrushStartIdx !== null && prevBrushStartIdx !== void 0 ? prevBrushStartIdx : 0);
+            } else {
+              selectedLabel.value.dataIndex[idx] += prevBrushStartIdx - curBrushStartIdx;
+            }
+          }
+        } else if (selectedItem !== null && selectedItem !== void 0 && selectedItem.value) {
+          if (curBrushStartIdx >= (prevBrushStartIdx !== null && prevBrushStartIdx !== void 0 ? prevBrushStartIdx : 0)) {
+            selectedItem.value.dataIndex -= curBrushStartIdx - (prevBrushStartIdx !== null && prevBrushStartIdx !== void 0 ? prevBrushStartIdx : 0);
+          } else {
+            selectedItem.value.dataIndex += prevBrushStartIdx - curBrushStartIdx;
+          }
+        }
+      });
+    }
+
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
-      return props.selectedItem;
+      return selectedItem.value;
     }, function (newValue) {
       var chartType = props.options.type;
       evChart.selectItemByData(newValue, chartType);
@@ -45222,7 +46351,9 @@ var uses_useWrapper = function useWrapper(options) {
       flush: 'post'
     });
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
-      return props.selectedLabel;
+      var _injectGroupSelectedL;
+
+      return (_injectGroupSelectedL = injectGroupSelectedLabel === null || injectGroupSelectedLabel === void 0 ? void 0 : injectGroupSelectedLabel.value) !== null && _injectGroupSelectedL !== void 0 ? _injectGroupSelectedL : selectedLabel.value;
     }, function (newValue) {
       if (newValue.dataIndex) {
         evChart.renderWithSelected(newValue.dataIndex);
@@ -45241,6 +46372,19 @@ var uses_useWrapper = function useWrapper(options) {
       deep: true,
       flush: 'post'
     });
+
+    if (!injectIsChartGroup) {
+      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];
+
+        controlZoomIdx(zoomStartIdx, zoomEndIdx);
+      });
+    }
+
     Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onMounted"])( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -45292,14 +46436,19 @@ var uses_useWrapper = function useWrapper(options) {
       wrapper: wrapper,
       wrapperStyle: wrapperStyle,
       onResize: onResize,
-      redraw: redraw
+      redraw: redraw,
+      evChartToolbarRef: evChartToolbarRef,
+      injectIsChartGroup: injectIsChartGroup,
+      onClickToolbar: onClickToolbar,
+      normalizedOptions: normalizedOptions,
+      zoomOptions: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRef"])(evChartZoomOptions, 'zoom')
     };
   }
 });
 // CONCATENATED MODULE: ./src/components/chart/Chart.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./src/components/chart/Chart.vue?vue&type=style&index=0&id=ca3428ac&lang=scss
-var Chartvue_type_style_index_0_id_ca3428ac_lang_scss = __webpack_require__("e83f");
+// EXTERNAL MODULE: ./src/components/chart/Chart.vue?vue&type=style&index=0&id=018cc1f3&lang=scss
+var Chartvue_type_style_index_0_id_018cc1f3_lang_scss = __webpack_require__("0d1d");
 
 // CONCATENATED MODULE: ./src/components/chart/Chart.vue
 
@@ -45309,7 +46458,7 @@ var Chartvue_type_style_index_0_id_ca3428ac_lang_scss = __webpack_require__("e83
 
 
 
-const Chart_exports_ = /*#__PURE__*/exportHelper_default()(Chartvue_type_script_lang_js, [['render',Chartvue_type_template_id_ca3428ac_render]])
+const Chart_exports_ = /*#__PURE__*/exportHelper_default()(Chartvue_type_script_lang_js, [['render',Chartvue_type_template_id_018cc1f3_render]])
 
 /* harmony default export */ var Chart = (Chart_exports_);
 // CONCATENATED MODULE: ./src/components/chart/index.js
@@ -45323,6 +46472,1099 @@ 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
+
+
+var ChartGroupvue_type_template_id_bd8c6660_scoped_true_withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-bd8c6660");
+
+Object(external_commonjs_vue_commonjs2_vue_root_Vue_["pushScopeId"])("data-v-bd8c6660");
+
+var ChartGroupvue_type_template_id_bd8c6660_scoped_true_hoisted_1 = {
+  key: 0,
+  ref: "evChartToolbarRef"
+};
+var ChartGroupvue_type_template_id_bd8c6660_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 _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, {
+    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);
+});
+// CONCATENATED MODULE: ./src/components/chartGroup/ChartGroup.vue?vue&type=template&id=bd8c6660&scoped=true
+
+// CONCATENATED MODULE: ./src/components/chartGroup/uses.js
+
+
+var uses_DEFAULT_OPTIONS = {
+  zoom: {
+    bufferMemoryCnt: 100,
+    toolbar: {
+      show: false,
+      items: {
+        previous: {
+          icon: 'ev-icon-allow2-left',
+          size: 'medium',
+          title: 'Previous'
+        },
+        latest: {
+          icon: 'ev-icon-allow2-right',
+          size: 'medium',
+          title: 'Latest'
+        },
+        reset: {
+          icon: 'ev-icon-redo',
+          size: 'medium',
+          title: 'Reset'
+        },
+        dragZoom: {
+          icon: 'ev-icon-zoomin',
+          size: 'medium',
+          title: 'Drag Zoom'
+        }
+      }
+    }
+  }
+}; // eslint-disable-next-line import/prefer-default-export
+
+var uses_useGroupModel = function useGroupModel() {
+  var isExecuteZoom = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])(false);
+  var evChartGroupRef = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["ref"])();
+  var brushSeries = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+    list: [],
+    chartIdx: null
+  });
+
+  var getNormalizedOptions = function getNormalizedOptions(options) {
+    return lodash_es_defaultsDeep({}, options, uses_DEFAULT_OPTIONS);
+  };
+
+  return {
+    getNormalizedOptions: getNormalizedOptions,
+    isExecuteZoom: isExecuteZoom,
+    brushSeries: brushSeries,
+    evChartGroupRef: evChartGroupRef
+  };
+};
+// 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/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/chartGroup/ChartGroup.vue?vue&type=script&lang=js
+
+
+
+
+
+
+/* harmony default export */ var ChartGroupvue_type_script_lang_js = ({
+  name: 'EvChartGroup',
+  components: {
+    evChartToolbar: ChartToolbar
+  },
+  props: {
+    options: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    zoomStartIdx: {
+      type: Number,
+      default: 0
+    },
+    zoomEndIdx: {
+      type: Number,
+      default: 0
+    },
+    groupSelectedLabel: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ['update:zoomStartIdx', 'update:zoomEndIdx'],
+  setup: function setup(props) {
+    var _useGroupModel = uses_useGroupModel(),
+        getNormalizedOptions = _useGroupModel.getNormalizedOptions,
+        isExecuteZoom = _useGroupModel.isExecuteZoom,
+        brushSeries = _useGroupModel.brushSeries,
+        evChartGroupRef = _useGroupModel.evChartGroupRef;
+
+    var normalizedOptions = getNormalizedOptions(props.options);
+    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;
+    });
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["provide"])('groupSelectedLabel', groupSelectedLabel);
+
+    var _useZoomModel = uses_useZoomModel(normalizedOptions, {
+      wrapper: null,
+      evChartGroupRef: evChartGroupRef
+    }, groupSelectedLabel),
+        evChartZoomOptions = _useZoomModel.evChartZoomOptions,
+        evChartInfo = _useZoomModel.evChartInfo,
+        evChartToolbarRef = _useZoomModel.evChartToolbarRef,
+        evChartClone = _useZoomModel.evChartClone,
+        brushIdx = _useZoomModel.brushIdx,
+        createEvChartZoom = _useZoomModel.createEvChartZoom,
+        setOptionsForUseZoom = _useZoomModel.setOptionsForUseZoom,
+        setDataForUseZoom = _useZoomModel.setDataForUseZoom,
+        controlZoomIdx = _useZoomModel.controlZoomIdx,
+        onClickToolbar = _useZoomModel.onClickToolbar;
+
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["provide"])('evChartClone', evChartClone);
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["provide"])('evChartInfo', evChartInfo);
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["provide"])('brushIdx', brushIdx);
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onMounted"])(function () {
+      createEvChartZoom();
+    });
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+      return evChartInfo.props.data;
+    }, function (evChartProps) {
+      setDataForUseZoom(evChartProps);
+    }, {
+      deep: true
+    });
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+      return props.options;
+    }, function (zoomOptions) {
+      var newOpt = getNormalizedOptions(zoomOptions);
+      setOptionsForUseZoom(newOpt);
+    }, {
+      deep: true
+    });
+    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];
+
+      if (brushIdx.isUseButton || brushIdx.isUseScroll) {
+        return;
+      }
+
+      controlZoomIdx(zoomStartIdx, zoomEndIdx);
+    });
+    return {
+      evChartGroupRef: evChartGroupRef,
+      evChartToolbarRef: evChartToolbarRef,
+      zoomOptions: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRef"])(evChartZoomOptions, 'zoom'),
+      onClickToolbar: onClickToolbar
+    };
+  }
+});
+// 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");
+
+// CONCATENATED MODULE: ./src/components/chartGroup/ChartGroup.vue
+
+
+
+
+
+
+
+const ChartGroup_exports_ = /*#__PURE__*/exportHelper_default()(ChartGroupvue_type_script_lang_js, [['render',ChartGroupvue_type_template_id_bd8c6660_scoped_true_render],['__scopeId',"data-v-bd8c6660"]])
+
+/* harmony default export */ var ChartGroup = (ChartGroup_exports_);
+// CONCATENATED MODULE: ./src/components/chartGroup/index.js
+
+
+
+
+ChartGroup.install = function (app) {
+  app.component(ChartGroup.name, ChartGroup);
+  app.use(dist_default.a);
+};
+
+/* harmony default export */ var chartGroup = (ChartGroup);
+// 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/chartBrush/ChartBrush.vue?vue&type=template&id=1b10467a
+
+function ChartBrushvue_type_template_id_1b10467a_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _directive_resize = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveDirective"])("resize");
+
+  return $setup.evChartBrushOptions.show ? Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])((Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("div", {
+    key: 0,
+    ref: "evChartBrushRef",
+    style: $setup.evChartBrushStyle,
+    class: "ev-chart-brush"
+  }, null, 4)), [[_directive_resize, $setup.onResize]]) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true);
+}
+// CONCATENATED MODULE: ./src/components/chartBrush/ChartBrush.vue?vue&type=template&id=1b10467a
+
+// CONCATENATED MODULE: ./src/components/chartBrush/chartBrush.core.js
+
+
+
+
+
+
+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.brushIdx = brushIdx;
+
+    if (evChartBrushOptions.value.useDebounce) {
+      this.debounceBrushIdx = {
+        start: brushIdx.start,
+        end: brushIdx.end
+      };
+    }
+  }
+
+  _createClass(EvChartBrush, [{
+    key: "init",
+    value: function init(isResize) {
+      if (this.brushIdx.start > this.brushIdx.end) {
+        return;
+      }
+
+      var existedBrushCanvas = this.evChartBrushRef.value.querySelector('.brush-canvas');
+
+      if (!existedBrushCanvas) {
+        var brushCanvas = document.createElement('canvas');
+        brushCanvas.setAttribute('class', 'brush-canvas');
+        brushCanvas.setAttribute('style', 'display: block; z-index: 1;');
+        var evChartBrushContainer = this.evChartBrushRef.value.querySelector('.ev-chart-brush-container');
+
+        if (evChartBrushContainer) {
+          this.brushCanvas = brushCanvas;
+          evChartBrushContainer.appendChild(brushCanvas);
+          this.evChartBrushContainer = evChartBrushContainer;
+          this.drawBrushRect({
+            brushCanvas: brushCanvas
+          });
+          this.addEvent(brushCanvas);
+        }
+      } else {
+        this.drawBrushRect({
+          brushCanvas: existedBrushCanvas,
+          isResize: isResize
+        });
+      }
+    }
+  }, {
+    key: "drawBrushRect",
+    value: function drawBrushRect(_ref) {
+      var _this$debounceBrushId;
+
+      var brushCanvas = _ref.brushCanvas,
+          isResize = _ref.isResize,
+          isDebounce = _ref.isDebounce;
+      var _this$evChart = this.evChart,
+          chartRect = _this$evChart.chartRect,
+          labelOffset = _this$evChart.labelOffset;
+
+      if (!chartRect && !labelOffset) {
+        return;
+      }
+
+      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 brushButtonWidth = 6;
+      var brushCanvasWidth = evChartRange.x2 - evChartRange.x1 + brushButtonWidth;
+      var brushCanvasHeight = evChartRange.y2 - evChartRange.y1;
+      var isEqualWidth = brushCanvas.width === Math.floor(brushCanvasWidth * pixelRatio);
+
+      if (isResize && isEqualWidth) {
+        return;
+      }
+
+      if (!isDebounce && this.debounceBrushIdx) {
+        this.debounceBrushIdx.start = this.brushIdx.start;
+        this.debounceBrushIdx.end = this.brushIdx.end;
+      }
+
+      var brushIdx = (_this$debounceBrushId = this.debounceBrushIdx) !== null && _this$debounceBrushId !== void 0 ? _this$debounceBrushId : this.brushIdx;
+      var labelEndIdx = this.evChartData.value.labels.length - 1;
+      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
+      };
+    }
+  }, {
+    key: "addEvent",
+    value: function addEvent() {
+      var _this = this;
+
+      var mousePosition;
+
+      this.onMouseDown = function (e) {
+        e.preventDefault();
+
+        if (mousePosition.isInsideButton) {
+          _this.clickBrushInsideX = -1;
+        } else if (mousePosition.isInsideBrush) {
+          _this.clickBrushInsideX = e.offsetX;
+        } else if (mousePosition.isOutsideBrush) {
+          _this.teleportBrush(e);
+        }
+      };
+
+      var onMouseMove = function onMouseMove(e) {
+        if (_this.clickBrushInsideX) {
+          _this.mouseDownAndMove(e);
+        } else {
+          mousePosition = _this.getMousePosition(e);
+
+          _this.changeCursor(mousePosition);
+        }
+      };
+
+      this.onMouseMove = lodash_es_throttle(onMouseMove, 5);
+
+      this.onWheel = function (e) {
+        e.preventDefault();
+
+        _this.updateBrushIdx(e.deltaY > 0 ? 'movedown' : 'moveup');
+      };
+
+      this.onMouseUp = function () {
+        _this.initEventState();
+      };
+
+      this.onMouseLeave = function () {
+        if (_this.clickBrushInsideX) {
+          _this.initEventState();
+        }
+      };
+
+      var onWheelDebounce = function onWheelDebounce() {
+        _this.initEventState();
+      };
+
+      this.onWheelDebounce = lodash_es_debounce(onWheelDebounce, 100);
+      this.setEventListener('addEventListener');
+    }
+  }, {
+    key: "getMousePosition",
+    value: function getMousePosition(e) {
+      var _this2 = this;
+
+      var calDisToCurMouseX = function calDisToCurMouseX(xPos) {
+        return Math.abs(_this2.evChartBrushPos[xPos] - e.offsetX);
+      };
+
+      var buttonType = calDisToCurMouseX('rightX') > calDisToCurMouseX('leftX') ? 'leftX' : 'rightX';
+      this.curBrushButtonType = buttonType;
+
+      var isMoveRight = function isMoveRight(xPos) {
+        return e.offsetX > _this2.evChartBrushPos[xPos];
+      };
+
+      var isMoveLeft = function isMoveLeft(xPos) {
+        return e.offsetX < _this2.evChartBrushPos[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];
+      return {
+        isInsideButton: isInsideButton,
+        isInsideBrush: isInsideBrush,
+        isOutsideBrush: isOutsideBrush
+      };
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this.brushCanvas) {
+        this.setEventListener('removeEventListener');
+        this.brushCanvas = null;
+      }
+
+      var evChartBrushContainer = this.evChartBrushContainer;
+
+      while (evChartBrushContainer.hasChildNodes()) {
+        evChartBrushContainer.removeChild(evChartBrushContainer.firstChild);
+      }
+    }
+    /**
+     * @param {string} type eventListener setting type.
+     *
+     * @returns {undefined}
+     */
+
+  }, {
+    key: "setEventListener",
+    value: function setEventListener(type) {
+      this.brushCanvas[type]('mousemove', this.onMouseMove);
+      this.brushCanvas[type]('mousedown', this.onMouseDown);
+      this.brushCanvas[type]('mouseup', this.onMouseUp);
+      this.brushCanvas[type]('mouseleave', this.onMouseLeave);
+      this.brushCanvas[type]('wheel', this.onWheel);
+      this.brushCanvas[type]('wheel', this.onWheelDebounce);
+    }
+  }, {
+    key: "removeBrushWrapper",
+    value: function removeBrushWrapper() {
+      if (this.evChartBrushRef.value) {
+        var evChartBrushWrapper = this.evChartBrushRef.value.querySelector('.ev-chart-brush-wrapper');
+
+        if (evChartBrushWrapper) {
+          this.evChartBrushRef.value.removeChild(evChartBrushWrapper);
+        }
+      }
+    }
+  }, {
+    key: "removeBrushCanvas",
+    value: function removeBrushCanvas() {
+      if (this.evChartBrushContainer) {
+        var brushCanvas = this.evChartBrushContainer.querySelector('.brush-canvas');
+
+        if (brushCanvas) {
+          this.evChartBrushContainer.removeChild(brushCanvas);
+        }
+      }
+    }
+  }, {
+    key: "teleportBrush",
+    value: function teleportBrush(e) {
+      var _this$debounceBrushId2;
+
+      var brushIdx = (_this$debounceBrushId2 = this.debounceBrushIdx) !== null && _this$debounceBrushId2 !== void 0 ? _this$debounceBrushId2 : this.brushIdx;
+      var middle = (brushIdx.end - brushIdx.start) / 2;
+      var left;
+      var right;
+      var clickIdx;
+
+      if (middle > 0.5) {
+        if ((brushIdx.end - brushIdx.start) % 2 === 0) {
+          clickIdx = Math.round(e.offsetX / this.evChartBrushPos.axesXInterval);
+          left = Math.ceil(middle);
+          right = Math.floor(middle);
+        } else {
+          clickIdx = Math.ceil(e.offsetX / this.evChartBrushPos.axesXInterval);
+          left = Math.ceil(middle);
+          right = Math.floor(middle);
+        }
+      } else {
+        clickIdx = Math.floor(e.offsetX / this.evChartBrushPos.axesXInterval);
+
+        if (e.offsetX - clickIdx * this.evChartBrushPos.axesXInterval > this.evChartBrushPos.axesXInterval / 2) {
+          left = Math.floor(middle);
+          right = Math.ceil(middle);
+        } else {
+          left = Math.ceil(middle);
+          right = Math.floor(middle);
+
+          if (middle < 1) {
+            clickIdx += 1;
+          }
+        }
+      }
+
+      if (clickIdx - left <= 0) {
+        brushIdx.start = 0;
+        brushIdx.end = right + left;
+      } else if (clickIdx + right >= this.labelEndIdx) {
+        brushIdx.start = this.labelEndIdx - right - left;
+        brushIdx.end = this.labelEndIdx;
+      } else {
+        brushIdx.start = clickIdx - left;
+        brushIdx.end = clickIdx + right;
+      }
+
+      this.brushIdx.isUseScroll = true;
+    }
+  }, {
+    key: "changeCursor",
+    value: function changeCursor(mousePosition) {
+      if (mousePosition.isOutsideBrush) {
+        this.brushCanvas.style.cursor = 'pointer';
+      } else if (mousePosition.isInsideBrush) {
+        if (mousePosition.isInsideButton) {
+          this.brushCanvas.style.cursor = 'ew-resize';
+        } else {
+          this.brushCanvas.style.cursor = 'grab';
+        }
+      }
+    }
+  }, {
+    key: "mouseDownAndMove",
+    value: function mouseDownAndMove(e) {
+      var moveSensitive = this.evChartBrushPos.axesXInterval / 3;
+      var mode;
+
+      if (e.offsetX > this.beforeMouseXPos) {
+        // 오른쪽 이동
+        if (this.clickBrushInsideX > 0) {
+          if (this.clickBrushInsideX < e.offsetX - moveSensitive) {
+            mode = 'moveup';
+            this.clickBrushInsideX = e.offsetX + moveSensitive;
+          }
+        } else {
+          var isMoveRight = e.offsetX - this.evChartBrushPos[this.curBrushButtonType] > moveSensitive;
+
+          if (isMoveRight) {
+            mode = this.curBrushButtonType === 'leftX' ? 'decrease' : 'increase';
+          }
+        }
+      } else if (e.offsetX < this.beforeMouseXPos) {
+        // 왼쪽 이동
+        if (this.clickBrushInsideX > 0) {
+          if (this.clickBrushInsideX > e.offsetX + moveSensitive) {
+            mode = 'movedown';
+            this.clickBrushInsideX = e.offsetX - moveSensitive;
+          }
+        } else {
+          var isMoveLeft = this.evChartBrushPos[this.curBrushButtonType] - e.offsetX > moveSensitive;
+
+          if (isMoveLeft) {
+            mode = this.curBrushButtonType === 'leftX' ? 'increase' : 'decrease';
+          }
+        }
+      }
+
+      if (mode) {
+        this.updateBrushIdx(mode);
+      }
+
+      this.beforeMouseXPos = e.offsetX;
+    }
+    /**
+     * @param {string} mode determines how to update the brush index value.
+     *
+     * @returns {undefined}
+     */
+
+  }, {
+    key: "updateBrushIdx",
+    value: function updateBrushIdx(mode) {
+      var _this$debounceBrushId3;
+
+      var brushIdx = (_this$debounceBrushId3 = this.debounceBrushIdx) !== null && _this$debounceBrushId3 !== void 0 ? _this$debounceBrushId3 : this.brushIdx;
+
+      switch (mode) {
+        case 'moveup':
+          if (brushIdx.end === this.labelEndIdx) {
+            return;
+          }
+
+          brushIdx.start += 1;
+          brushIdx.end += 1;
+          this.brushIdx.isUseScroll = true;
+          break;
+
+        case 'movedown':
+          if (!brushIdx.start) {
+            return;
+          }
+
+          brushIdx.start -= 1;
+          brushIdx.end -= 1;
+          this.brushIdx.isUseScroll = true;
+          break;
+
+        case 'increase':
+          if (this.curBrushButtonType === 'leftX') {
+            if (!brushIdx.start) {
+              return;
+            }
+
+            brushIdx.start -= 1;
+          } else {
+            if (brushIdx.end === this.labelEndIdx) {
+              return;
+            }
+
+            brushIdx.end += 1;
+          }
+
+          this.brushIdx.isUseButton = true;
+          break;
+
+        case 'decrease':
+          if (brushIdx.start === brushIdx.end - 1) {
+            return;
+          }
+
+          if (this.curBrushButtonType === 'leftX') {
+            brushIdx.start += 1;
+          } else {
+            brushIdx.end -= 1;
+          }
+
+          this.brushIdx.isUseButton = true;
+          break;
+
+        default:
+          break;
+      }
+
+      if (mode && this.debounceBrushIdx) {
+        this.drawBrushRect({
+          brushCanvas: this.brushCanvas,
+          isResize: false,
+          isDebounce: true
+        });
+      }
+    }
+    /**
+     * @param {boolean} isUpdateBrushIdx to initialize state after update brush index value
+     *
+     * @returns {undefined}
+     */
+
+  }, {
+    key: "initEventState",
+    value: function initEventState() {
+      var _this3 = 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;
+        }
+
+        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;
+        }
+      });
+    }
+  }]);
+
+  return EvChartBrush;
+}();
+
+
+// CONCATENATED MODULE: ./src/components/chartBrush/uses.js
+
+var chartBrush_uses_DEFAULT_OPTIONS = {
+  show: true,
+  useDebounce: true,
+  chartIdx: 0,
+  height: 100,
+  showLabel: false,
+  selection: {
+    fillColor: '#38ACEC',
+    opacity: 0.65
+  }
+}; // eslint-disable-next-line import/prefer-default-export
+
+var uses_useBrushModel = function useBrushModel() {
+  var getNormalizedBrushOptions = function getNormalizedBrushOptions(options) {
+    return lodash_es_defaultsDeep({}, options, chartBrush_uses_DEFAULT_OPTIONS);
+  };
+
+  return {
+    getNormalizedBrushOptions: getNormalizedBrushOptions
+  };
+};
+// 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/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/chartBrush/ChartBrush.vue?vue&type=script&lang=js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* harmony default export */ var ChartBrushvue_type_script_lang_js = ({
+  name: 'EvChartBrush',
+  props: {
+    options: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    }
+  },
+  setup: function setup(props) {
+    var evChart = null;
+    var evChartBrush = null;
+    var injectEvChartClone = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["inject"])('evChartClone', {
+      data: []
+    });
+    var injectEvChartInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["inject"])('evChartInfo', {
+      props: {
+        options: []
+      }
+    });
+    var injectBrushIdx = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["inject"])('brushIdx', {
+      start: 0,
+      end: 0,
+      isUseButton: false,
+      isUseScroll: false
+    });
+    var injectBrushSeries = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["inject"])('brushSeries', {
+      list: [],
+      chartIdx: null
+    });
+
+    var _useBrushModel = uses_useBrushModel(),
+        getNormalizedBrushOptions = _useBrushModel.getNormalizedBrushOptions;
+
+    var evChartBrushOptions = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return getNormalizedBrushOptions(props.options);
+    });
+
+    var _useModel = chart_uses_useModel(),
+        eventListeners = _useModel.eventListeners,
+        selectItemInfo = _useModel.selectItemInfo,
+        selectLabelInfo = _useModel.selectLabelInfo,
+        selectSeriesInfo = _useModel.selectSeriesInfo,
+        getNormalizedData = _useModel.getNormalizedData,
+        getNormalizedOptions = _useModel.getNormalizedOptions;
+
+    var evChartData = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      var _injectEvChartClone$d;
+
+      return getNormalizedData(((_injectEvChartClone$d = injectEvChartClone.data) !== null && _injectEvChartClone$d !== void 0 ? _injectEvChartClone$d : [])[evChartBrushOptions.value.chartIdx]);
+    });
+    var evChartOption = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      var _chartOption$axesX, _chartOption$axesY;
+
+      var chartOption = injectEvChartInfo.props.options[evChartBrushOptions.value.chartIdx];
+
+      var option = _objectSpread2(_objectSpread2({}, chartOption), {}, {
+        brush: _objectSpread2({
+          use: true
+        }, evChartBrushOptions.value),
+        height: evChartBrushOptions.value.height,
+        zoom: {
+          use: false
+        },
+        dragSelection: {
+          use: false
+        },
+        title: {
+          show: false
+        },
+        tooltip: {
+          use: false
+        },
+        legend: {
+          show: false
+        },
+        selectLabel: {
+          use: false
+        },
+        selectSeries: {
+          use: false
+        },
+        axesX: [_objectSpread2(_objectSpread2({}, chartOption === null || chartOption === void 0 ? void 0 : (_chartOption$axesX = chartOption.axesX) === null || _chartOption$axesX === void 0 ? void 0 : _chartOption$axesX[0]), {}, {
+          title: {
+            use: false
+          }
+        })],
+        axesY: [_objectSpread2(_objectSpread2({}, chartOption === null || chartOption === void 0 ? void 0 : (_chartOption$axesY = chartOption.axesY) === null || _chartOption$axesY === void 0 ? void 0 : _chartOption$axesY[0]), {}, {
+          title: {
+            use: false
+          }
+        })]
+      });
+
+      return getNormalizedOptions(option);
+    });
+
+    var _useWrapper = uses_useWrapper(evChartOption.value),
+        evChartBrushRef = _useWrapper.wrapper,
+        evChartBrushStyle = _useWrapper.wrapperStyle;
+
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+      return injectBrushSeries.list;
+    }, function () {
+      if (evChartBrushRef.value && injectBrushSeries.chartIdx === evChartBrushOptions.value.chartIdx) {
+        evChart.seriesList = injectBrushSeries.list[evChartBrushOptions.value.chartIdx];
+        evChart.update({
+          updateSeries: false,
+          updateSelTip: {
+            update: false,
+            keepDomain: false
+          }
+        });
+      }
+    });
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(evChartOption, function (newOpt, prevOpt) {
+      var _injectEvChartClone$d2;
+
+      if (newOpt.brush.chartIdx <= ((_injectEvChartClone$d2 = injectEvChartClone.data) === null || _injectEvChartClone$d2 === void 0 ? void 0 : _injectEvChartClone$d2.length) - 1) {
+        if (evChartBrush && !lodash_es_isEqual(prevOpt.brush, newOpt.brush)) {
+          evChartBrush.removeBrushWrapper();
+        } else if (evChart && !lodash_es_isEqual(newOpt, prevOpt)) {
+          evChart.options = lodash_es_cloneDeep(newOpt);
+          evChart.update({
+            updateSeries: false,
+            updateSelTip: {
+              update: false,
+              keepDomain: false
+            }
+          });
+        }
+      } else {
+        evChart.data = lodash_es_cloneDeep(evChartData.value);
+        evChart.update({
+          updateSeries: true,
+          updateSelTip: {
+            update: false,
+            keepDomain: false
+          },
+          updateData: false
+        });
+        evChartBrush.removeBrushCanvas();
+      }
+    });
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+      return injectEvChartClone.data;
+    }, function (newData) {
+      if (evChart) {
+        var data = newData[evChartBrushOptions.value.chartIdx];
+
+        if (data) {
+          var isUpdateSeries = !lodash_es_isEqual(data.series, evChart.data.series);
+          var seriesList = injectBrushSeries.list[evChartBrushOptions.value.chartIdx];
+
+          if (seriesList) {
+            Object.keys(data.series).forEach(function (series) {
+              data.series[series].show = seriesList[series].show;
+            });
+          }
+
+          evChart.data = lodash_es_cloneDeep(data);
+          evChart.update({
+            updateSeries: isUpdateSeries,
+            updateSelTip: {
+              update: false,
+              keepDomain: false
+            },
+            updateData: false
+          });
+        }
+      }
+    });
+
+    var createChart = function createChart() {
+      var selected;
+
+      if (evChartOption.value.selectLabel.use) {
+        selected = selectLabelInfo;
+      } else if (evChartOption.value.selectSeries.use) {
+        selected = selectSeriesInfo;
+      }
+
+      evChart = new chart_core(evChartBrushRef.value, evChartData.value, evChartOption.value, eventListeners, selectItemInfo, selected);
+    };
+
+    var createChartBrush = function createChartBrush() {
+      evChartBrush = new chartBrush_core_EvChartBrush(evChart, evChartData, evChartBrushOptions, injectBrushIdx, evChartBrushRef);
+    };
+
+    var drawChart = function drawChart() {
+      if (evChart) {
+        evChart.init();
+      }
+    };
+
+    var drawChartBrush = function drawChartBrush(isResize) {
+      if (evChartBrush) {
+        evChartBrush.init(isResize);
+      }
+    };
+
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+      return [injectBrushIdx.start, injectBrushIdx.end];
+    }, function () {
+      var _injectEvChartClone$d3;
+
+      if (evChartBrushRef.value && evChartBrushOptions.value.chartIdx <= ((_injectEvChartClone$d3 = injectEvChartClone.data) === null || _injectEvChartClone$d3 === void 0 ? void 0 : _injectEvChartClone$d3.length) - 1) {
+        drawChartBrush();
+      }
+    });
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onMounted"])( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!evChartBrushOptions.value.show) {
+                _context.next = 7;
+                break;
+              }
+
+              _context.next = 3;
+              return createChart();
+
+            case 3:
+              _context.next = 5;
+              return drawChart();
+
+            case 5:
+              createChartBrush();
+              drawChartBrush();
+
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onUpdated"])( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var _injectEvChartClone$d4, seriesList;
+
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!evChartBrushOptions.value.show) {
+                _context2.next = 10;
+                break;
+              }
+
+              if (!(evChartBrushOptions.value.chartIdx <= ((_injectEvChartClone$d4 = injectEvChartClone.data) === null || _injectEvChartClone$d4 === void 0 ? void 0 : _injectEvChartClone$d4.length) - 1)) {
+                _context2.next = 10;
+                break;
+              }
+
+              seriesList = injectBrushSeries.list[evChartBrushOptions.value.chartIdx];
+
+              if (seriesList) {
+                Object.keys(evChartData.value.series).forEach(function (series) {
+                  evChartData.value.series[series].show = seriesList[series].show;
+                });
+              }
+
+              _context2.next = 6;
+              return createChart();
+
+            case 6:
+              _context2.next = 8;
+              return drawChart();
+
+            case 8:
+              createChartBrush();
+              drawChartBrush();
+
+            case 10:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onBeforeUnmount"])(function () {
+      if (evChart && 'destroy' in evChart) {
+        evChart.destroy();
+      }
+
+      if (evChartBrush) {
+        evChartBrush.destroy();
+      }
+    });
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["onDeactivated"])(function () {
+      if (evChart && 'hideTooltip' in evChart) {
+        evChart.hideTooltip();
+      }
+    });
+    /**
+     * @param {boolean} isResizeDone resizing complete status
+     *
+     * @returns {undefined}
+     */
+
+    var onResize = lodash_es_debounce(function () {
+      if (evChart && 'resize' in evChart) {
+        var resize = new Promise(function (resolve) {
+          return evChart.resize(resolve);
+        });
+        resize.then(function (isResizeDone) {
+          if (isResizeDone) {
+            drawChartBrush(isResizeDone);
+          }
+        });
+      }
+    }, 0);
+    return {
+      evChartBrushOptions: evChartBrushOptions,
+      evChartBrushRef: evChartBrushRef,
+      evChartBrushStyle: evChartBrushStyle,
+      onResize: onResize
+    };
+  }
+});
+// CONCATENATED MODULE: ./src/components/chartBrush/ChartBrush.vue?vue&type=script&lang=js
+ 
+// CONCATENATED MODULE: ./src/components/chartBrush/ChartBrush.vue
+
+
+
+
+
+const ChartBrush_exports_ = /*#__PURE__*/exportHelper_default()(ChartBrushvue_type_script_lang_js, [['render',ChartBrushvue_type_template_id_1b10467a_render]])
+
+/* harmony default export */ var ChartBrush = (ChartBrush_exports_);
+// CONCATENATED MODULE: ./src/components/chartBrush/index.js
+
+
+
+
+ChartBrush.install = function (app) {
+  app.component(ChartBrush.name, ChartBrush);
+  app.use(dist_default.a);
+};
+
+/* harmony default export */ var chartBrush = (ChartBrush);
 // 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/treeGrid/TreeGrid.vue?vue&type=template&id=99e6d310&scoped=true
 
 
@@ -46597,7 +48839,7 @@ var treeGrid_uses_contextMenuEvent = function contextMenuEvent(params) {
 
   var onContextMenu = function onContextMenu(event) {
     var target = event.target;
-    var rowIndex = target.parentElement.dataset.index;
+    var rowIndex = target.closest('.row').dataset.index;
 
     if (rowIndex) {
       var index = stores.viewStore.findIndex(function (v) {
@@ -47743,22 +49985,27 @@ function Paginationvue_type_template_id_541b906a_render(_ctx, _cache, $props, $s
 }
 // CONCATENATED MODULE: ./src/components/pagination/Pagination.vue?vue&type=template&id=541b906a
 
-// 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/pagination/pageButton.vue?vue&type=template&id=dcd27724
+// 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/pagination/pageButton.vue?vue&type=template&id=530eda26
 
 
-function pageButtonvue_type_template_id_dcd27724_render(_ctx, _cache, $props, $setup, $data, $options) {
+function pageButtonvue_type_template_id_530eda26_render(_ctx, _cache, $props, $setup, $data, $options) {
   return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("span", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["mergeProps"])({
     class: _defineProperty({
       'is-current': $props.page.isCurrent,
       'is-disabled': $props.disabled || $props.page.disabled
     }, $props.page.class, true)
   }, _ctx.$attrs, {
-    "aria-current": $props.page.isCurrent
+    "aria-current": $props.page.isCurrent,
+    onClick: _cache[1] || (_cache[1] = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withModifiers"])(function () {
+      var _$props$page;
+
+      return $props.page.click && (_$props$page = $props.page).click.apply(_$props$page, arguments);
+    }, ["stop"]))
   }), [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["renderSlot"])(_ctx.$slots, "default", {}, function () {
     return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($props.page.number), 1)];
   })], 16, ["aria-current"]);
 }
-// CONCATENATED MODULE: ./src/components/pagination/pageButton.vue?vue&type=template&id=dcd27724
+// CONCATENATED MODULE: ./src/components/pagination/pageButton.vue?vue&type=template&id=530eda26
 
 // 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/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/pagination/pageButton.vue?vue&type=script&lang=js
 /* harmony default export */ var pageButtonvue_type_script_lang_js = ({
@@ -47782,7 +50029,7 @@ function pageButtonvue_type_template_id_dcd27724_render(_ctx, _cache, $props, $s
 
 
 
-const pageButton_exports_ = /*#__PURE__*/exportHelper_default()(pageButtonvue_type_script_lang_js, [['render',pageButtonvue_type_template_id_dcd27724_render]])
+const pageButton_exports_ = /*#__PURE__*/exportHelper_default()(pageButtonvue_type_script_lang_js, [['render',pageButtonvue_type_template_id_530eda26_render]])
 
 /* harmony default export */ var pageButton = (pageButton_exports_);
 // 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/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/pagination/Pagination.vue?vue&type=script&lang=js
@@ -48026,7 +50273,9 @@ var package_0 = __webpack_require__("9224");
 
 
 
-var components = [tabs, tabPanel, components_button, buttonGroup, components_checkbox, checkboxGroup, components_radio, radioGroup, components_select, toggle, textField, inputNumber, components_slider, components_icon, calendar, components_datePicker, scheduler, components_contextMenu, components_window, loading, progress, components_menu, tree, timePicker, grid, chart, components_message, components_notification, components_messageBox, treeGrid, pagination];
+
+
+var components = [tabs, tabPanel, components_button, buttonGroup, components_checkbox, checkboxGroup, components_radio, radioGroup, components_select, toggle, textField, inputNumber, components_slider, components_icon, calendar, components_datePicker, scheduler, components_contextMenu, components_window, loading, progress, components_menu, tree, timePicker, grid, chart, chartGroup, chartBrush, components_message, components_notification, components_messageBox, treeGrid, pagination];
 
 var install = function install(app) {
   if (!app) {