evui 3.3.7 → 3.3.8

package/dist/evui.umd.js

@@ -173,29 +173,6 @@ module.exports = function (fn, that, length) {
 /* unused harmony reexport * */
 
 
-/***/ }),
-
-/***/ "040e":
-/***/ (function(module, exports, __webpack_require__) {
-
-// Imports
-var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
-var ___CSS_LOADER_GET_URL_IMPORT___ = __webpack_require__("1de5");
-var ___CSS_LOADER_URL_IMPORT_0___ = __webpack_require__("f051");
-var ___CSS_LOADER_URL_IMPORT_1___ = __webpack_require__("0924");
-var ___CSS_LOADER_URL_IMPORT_2___ = __webpack_require__("eb91");
-var ___CSS_LOADER_URL_IMPORT_3___ = __webpack_require__("a884");
-exports = ___CSS_LOADER_API_IMPORT___(false);
-var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
-var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);
-var ___CSS_LOADER_URL_REPLACEMENT_2___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_2___);
-var ___CSS_LOADER_URL_REPLACEMENT_3___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_3___);
-// Module
-exports.push([module.i, ".table[data-v-324bfacf]{position:relative;width:100%;height:100%;padding-top:33px}.table.non-header[data-v-324bfacf]{padding-top:0}.table .table-header[data-v-324bfacf]{overflow:hidden;position:absolute;top:0;width:100%;height:33px;border-top:2px solid #7f7f7f;border-bottom:1px solid #cfcfcf}.dark .table .table-header[data-v-324bfacf]{border-top:2px solid;border-bottom:1px solid}.table .table-header.non-border[data-v-324bfacf]{border-bottom:2px solid #7f7f7f!important}.column-list[data-v-324bfacf]{width:100%;white-space:nowrap;list-style-type:none}.column[data-v-324bfacf],.column-list[data-v-324bfacf]{position:relative;height:100%}.column[data-v-324bfacf]{display:inline-flex;padding:0 10px;line-height:30px;justify-content:center;align-items:center;text-align:center;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-right:1px solid #cfcfcf}.dark .column[data-v-324bfacf]{border-right:1px solid}.column[data-v-324bfacf]:last-child{border-right:0;margin-right:20px}.column:last-child .column-resize[data-v-324bfacf]{cursor:default!important}.column .sort-icon[data-v-324bfacf]{display:inline-block;float:right;font-size:14px;line-height:30px}.column .ev-icon-filter[data-v-324bfacf]{font-size:13px;color:#005cc8}.column.db-icon[data-v-324bfacf],.column.user-icon[data-v-324bfacf]{width:42px!important;min-width:42px!important;border-right:0}.column-name[data-v-324bfacf]{display:inline-block;float:left;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:14px}.column-filter[data-v-324bfacf]{display:none;position:absolute;right:0;background-color:transparent}.column-filter i[data-v-324bfacf]{margin-right:2px;font-size:14px;vertical-align:middle}.column:hover .column-filter[data-v-324bfacf]{display:block;cursor:pointer}.column-filter-status[data-v-324bfacf]{position:absolute;left:0;background-color:transparent}.column-filter-status .ei[data-v-324bfacf]{font-size:10px;vertical-align:top}.column-resize[data-v-324bfacf]{position:absolute;bottom:0;right:-5px;width:10px;height:100%}.column-resize[data-v-324bfacf]:hover{cursor:col-resize}.table-body[data-v-324bfacf]{position:relative;width:100%;height:100%;overflow:auto;overflow-anchor:none}.table-body table[data-v-324bfacf]{clear:both;border-spacing:0;border-collapse:collapse;width:inherit}.table-body.stripe tr[data-v-324bfacf]:nth-child(2n){background:hsla(0,0%,89.8%,.6)}.table-body.bottom-border[data-v-324bfacf]{border-bottom:1px solid #cfcfcf}.dark .table-body.bottom-border[data-v-324bfacf]{border-bottom:1px solid}.table-body .row[data-v-324bfacf]{white-space:nowrap;border-bottom:1px solid #cfcfcf}.dark .table-body .row[data-v-324bfacf]{border-bottom:1px solid}.table-body .row.selected[data-v-324bfacf]{background:rgba(219,240,249,.6)!important;color:inherit!important;font-size:inherit!important}.dark .table-body .row.selected[data-v-324bfacf]{background:!important;color:inherit!important;font-size:inherit!important}.table-body .row.highlight[data-v-324bfacf]{background:#5ab7ff;color:#fff}.table-body .cell[data-v-324bfacf]{display:inline-block;padding:0 10px;text-align:center;max-width:100%;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid #cfcfcf}.dark .table-body .cell[data-v-324bfacf]{border-right:1px solid}.table-body .cell div[data-v-324bfacf]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-body .cell.row-checkbox[data-v-324bfacf]{display:inline-flex;justify-content:center;align-items:center}.table-body .cell.render[data-v-324bfacf]{overflow:initial}.table-body .cell.float[data-v-324bfacf],.table-body .cell.number[data-v-324bfacf]{text-align:right}.table-body .cell.string[data-v-324bfacf],.table-body .cell.stringNumber[data-v-324bfacf]{text-align:left}.table-body .cell.center[data-v-324bfacf]{text-align:center}.table-body .cell.left[data-v-324bfacf]{text-align:left}.table-body .cell.left .wrap[data-v-324bfacf]{justify-content:flex-start}.table-body .cell.right[data-v-324bfacf]{text-align:right}.table-body .cell.right .wrap[data-v-324bfacf]{justify-content:flex-end}.table-body .cell[data-v-324bfacf]:last-child{border-right:0}.table-body .cell.user-icon[data-v-324bfacf]{height:auto!important}.table-body .cell.db-icon[data-v-324bfacf],.table-body .cell.user-icon[data-v-324bfacf]{width:42px!important;min-width:42px!important;border-right:0}.table-resize-line[data-v-324bfacf]{position:absolute;top:0;bottom:0;width:1px;border-right:1px solid #cfcfcf}.dark .table-resize-line[data-v-324bfacf]{border-right:1px solid}.vscroll-spacer[data-v-324bfacf]{opacity:0;clear:both}[v-cloak][data-v-324bfacf]{display:none}.ev-checkbox[data-v-324bfacf]{margin:0}.non-border[data-v-324bfacf]{border:none!important}.is-empty[data-v-324bfacf]{height:30px;text-align:center}.postgresql[data-v-324bfacf]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ") no-repeat 50%}.oracle[data-v-324bfacf]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ") no-repeat 50%}.mongodb[data-v-324bfacf]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_2___ + ") no-repeat 50%}.mysql[data-v-324bfacf]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_3___ + ") no-repeat 50%}", ""]);
-// Exports
-module.exports = exports;
-
-
 /***/ }),
 
 /***/ "0538":
@@ -709,13 +686,25 @@ module.exports = (!STRICT_METHOD || !USES_TO_LENGTH) ? function forEach(callback
 
 /***/ }),
 
-/***/ "1951":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+/***/ "1801":
+/***/ (function(module, 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_b79677b2_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("5923");
-/* 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_b79677b2_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_b79677b2_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
+// Imports
+var ___CSS_LOADER_API_IMPORT___ = __webpack_require__("24fb");
+var ___CSS_LOADER_GET_URL_IMPORT___ = __webpack_require__("1de5");
+var ___CSS_LOADER_URL_IMPORT_0___ = __webpack_require__("f051");
+var ___CSS_LOADER_URL_IMPORT_1___ = __webpack_require__("0924");
+var ___CSS_LOADER_URL_IMPORT_2___ = __webpack_require__("eb91");
+var ___CSS_LOADER_URL_IMPORT_3___ = __webpack_require__("a884");
+exports = ___CSS_LOADER_API_IMPORT___(false);
+var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
+var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);
+var ___CSS_LOADER_URL_REPLACEMENT_2___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_2___);
+var ___CSS_LOADER_URL_REPLACEMENT_3___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_3___);
+// Module
+exports.push([module.i, ".table[data-v-c263f57e]{position:relative;width:100%;height:100%;padding-top:33px}.table.non-header[data-v-c263f57e]{padding-top:0}.table .table-header[data-v-c263f57e]{overflow:hidden;position:absolute;top:0;width:100%;height:33px;border-top:2px solid #7f7f7f;border-bottom:1px solid #cfcfcf}.dark .table .table-header[data-v-c263f57e]{border-top:2px solid;border-bottom:1px solid}.table .table-header.non-border[data-v-c263f57e]{border-bottom:2px solid #7f7f7f!important}.column-list[data-v-c263f57e]{width:100%;white-space:nowrap;list-style-type:none}.column[data-v-c263f57e],.column-list[data-v-c263f57e]{position:relative;height:100%}.column[data-v-c263f57e]{display:inline-flex;padding:0 10px;line-height:30px;justify-content:center;align-items:center;text-align:center;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-right:1px solid #cfcfcf}.dark .column[data-v-c263f57e]{border-right:1px solid}.column[data-v-c263f57e]:last-child{border-right:0;margin-right:20px}.column:last-child .column-resize[data-v-c263f57e]{cursor:default!important}.column .sort-icon[data-v-c263f57e]{display:inline-block;float:right;font-size:14px;line-height:30px}.column .ev-icon-filter[data-v-c263f57e]{font-size:13px;color:#005cc8}.column.db-icon[data-v-c263f57e],.column.user-icon[data-v-c263f57e]{width:42px!important;min-width:42px!important;border-right:0}.column-name[data-v-c263f57e]{display:inline-block;float:left;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:14px}.column-filter[data-v-c263f57e]{display:none;position:absolute;right:0;background-color:transparent}.column-filter i[data-v-c263f57e]{margin-right:2px;font-size:14px;vertical-align:middle}.column:hover .column-filter[data-v-c263f57e]{display:block;cursor:pointer}.column-filter-status[data-v-c263f57e]{position:absolute;left:0;background-color:transparent}.column-filter-status .ei[data-v-c263f57e]{font-size:10px;vertical-align:top}.column-resize[data-v-c263f57e]{position:absolute;bottom:0;right:-5px;width:10px;height:100%}.column-resize[data-v-c263f57e]:hover{cursor:col-resize}.table-body[data-v-c263f57e]{position:relative;width:100%;height:100%;overflow:auto;overflow-anchor:none}.table-body table[data-v-c263f57e]{clear:both;border-spacing:0;border-collapse:collapse;width:inherit}.table-body.stripe tr[data-v-c263f57e]:nth-child(2n){background:hsla(0,0%,89.8%,.6)}.table-body.bottom-border[data-v-c263f57e]{border-bottom:1px solid #cfcfcf}.dark .table-body.bottom-border[data-v-c263f57e]{border-bottom:1px solid}.table-body .row[data-v-c263f57e]{white-space:nowrap;border-bottom:1px solid #cfcfcf}.dark .table-body .row[data-v-c263f57e]{border-bottom:1px solid}.table-body .row.selected[data-v-c263f57e]{background:rgba(219,240,249,.6)!important;color:inherit!important;font-size:inherit!important}.dark .table-body .row.selected[data-v-c263f57e]{background:!important;color:inherit!important;font-size:inherit!important}.table-body .row.highlight[data-v-c263f57e]{background:#5ab7ff;color:#fff}.table-body .cell[data-v-c263f57e]{display:inline-block;padding:0 10px;text-align:center;max-width:100%;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid #cfcfcf}.dark .table-body .cell[data-v-c263f57e]{border-right:1px solid}.table-body .cell div[data-v-c263f57e]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table-body .cell.row-checkbox[data-v-c263f57e]{display:inline-flex;justify-content:center;align-items:center}.table-body .cell.render[data-v-c263f57e]{overflow:initial}.table-body .cell.float[data-v-c263f57e],.table-body .cell.number[data-v-c263f57e]{text-align:right}.table-body .cell.string[data-v-c263f57e],.table-body .cell.stringNumber[data-v-c263f57e]{text-align:left}.table-body .cell.center[data-v-c263f57e]{text-align:center}.table-body .cell.left[data-v-c263f57e]{text-align:left}.table-body .cell.left .wrap[data-v-c263f57e]{justify-content:flex-start}.table-body .cell.right[data-v-c263f57e]{text-align:right}.table-body .cell.right .wrap[data-v-c263f57e]{justify-content:flex-end}.table-body .cell[data-v-c263f57e]:last-child{border-right:0}.table-body .cell.user-icon[data-v-c263f57e]{height:auto!important}.table-body .cell.db-icon[data-v-c263f57e],.table-body .cell.user-icon[data-v-c263f57e]{width:42px!important;min-width:42px!important;border-right:0}.table-resize-line[data-v-c263f57e]{position:absolute;top:0;bottom:0;width:1px;border-right:1px solid #cfcfcf}.dark .table-resize-line[data-v-c263f57e]{border-right:1px solid}.vscroll-spacer[data-v-c263f57e]{opacity:0;clear:both}[v-cloak][data-v-c263f57e]{display:none}.ev-checkbox[data-v-c263f57e]{margin:0}.non-border[data-v-c263f57e]{border:none!important}.is-empty[data-v-c263f57e]{height:30px;text-align:center}.postgresql[data-v-c263f57e]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ") no-repeat 50%}.oracle[data-v-c263f57e]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ") no-repeat 50%}.mongodb[data-v-c263f57e]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_2___ + ") no-repeat 50%}.mysql[data-v-c263f57e]{background:url(" + ___CSS_LOADER_URL_REPLACEMENT_3___ + ") no-repeat 50%}", ""]);
+// Exports
+module.exports = exports;
 
 
 /***/ }),
@@ -4192,6 +4181,20 @@ module.exports = function (it) {
 };
 
 
+/***/ }),
+
+/***/ "1c2e":
+/***/ (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-box{overflow-x:hidden;overflow-y:auto}.ev-chart-legend-container{position:relative;overflow:hidden}.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-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;font-family:Roboto,serif;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;
+
+
 /***/ }),
 
 /***/ "1c7e":
@@ -4329,21 +4332,6 @@ module.exports = function (url, options) {
 
 /***/ }),
 
-/***/ "1e5b":
-/***/ (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__("040e");
-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("57579a92", content, true, {"sourceMap":false,"shadowMode":false});
-
-/***/ }),
-
 /***/ "2266":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -4712,20 +4700,6 @@ var root = _freeGlobal_js__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"] || fre
 
 module.exports = __webpack_require__.p + "img/EVUI.7f3588fb.svg";
 
-/***/ }),
-
-/***/ "296e":
-/***/ (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-box{overflow-x:hidden;overflow-y:auto}.ev-chart-legend-container{position:relative;overflow:hidden}.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-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;font-family:Roboto,serif;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;
-
-
 /***/ }),
 
 /***/ "2a62":
@@ -4989,17 +4963,6 @@ module.exports = function (it) {
 };
 
 
-/***/ }),
-
-/***/ "36c3":
-/***/ (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_Grid_vue_vue_type_style_index_0_id_324bfacf_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("1e5b");
-/* 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_Grid_vue_vue_type_style_index_0_id_324bfacf_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_Grid_vue_vue_type_style_index_0_id_324bfacf_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "37e8":
@@ -6180,6 +6143,21 @@ exports.push([module.i, ".ev-date-picker{display:block;position:relative;width:1
 module.exports = exports;
 
 
+/***/ }),
+
+/***/ "584d":
+/***/ (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__("1801");
+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("b9dffece", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ "5873":
@@ -6290,21 +6268,6 @@ var isBuffer = nativeIsBuffer || _stubFalse_js__WEBPACK_IMPORTED_MODULE_1__[/* d
 
 /***/ }),
 
-/***/ "5923":
-/***/ (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__("296e");
-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("852ba966", content, true, {"sourceMap":false,"shadowMode":false});
-
-/***/ }),
-
 /***/ "5a0c":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -7161,6 +7124,17 @@ module.exports = function ($this, dummy, Wrapper) {
 };
 
 
+/***/ }),
+
+/***/ "71e7":
+/***/ (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_3a821ae4_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("84fa");
+/* 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_3a821ae4_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_3a821ae4_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "7308":
@@ -7172,6 +7146,20 @@ module.exports = function ($this, dummy, Wrapper) {
 /* unused harmony reexport * */
 
 
+/***/ }),
+
+/***/ "73a9":
+/***/ (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, ".pagination{display:flex}.pagination .pagination-next,.pagination .pagination-previous{margin:0;padding-left:10px;padding-right:10px;background:50% no-repeat;background-size:16px;background-color:#fff;cursor:pointer;color:#303133}.pagination .pagination-next:hover,.pagination .pagination-previous:hover{color:#1a6afe}.pagination-info{order:2;line-height:32px}.pagination .is-current{pointer-events:none;cursor:not-allowed;background-color:#1a6afe;color:#fff;border-radius:4px}.pagination .is-page:hover{color:#1a6afe}.pagination .is-disabled,.pagination .pagination-ellipsis{pointer-events:none;cursor:not-allowed}.pagination .is-disabled{opacity:.5;color:#c0c4cc;background-color:#fff}.pagination-list{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;font-size:0;padding:0;margin:0;align-items:center;flex-wrap:wrap}.pagination-list li{display:flex;height:32px;padding:0 4px;justify-content:center;align-items:center;background:#fff;font-size:14px;min-width:32px;line-height:32px;cursor:pointer;box-sizing:border-box;text-align:center}", ""]);
+// Exports
+module.exports = exports;
+
+
 /***/ }),
 
 /***/ "7418":
@@ -7619,6 +7607,21 @@ exports.push([module.i, ".ev-window-scroll-lock{overflow:hidden!important}.ev-wi
 module.exports = exports;
 
 
+/***/ }),
+
+/***/ "84fa":
+/***/ (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__("1c2e");
+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("a4ce6070", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ "861d":
@@ -7892,7 +7895,7 @@ $({ target: 'Number', stat: true }, {
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.3.7\"}");
+module.exports = JSON.parse("{\"a\":\"3.3.8\"}");
 
 /***/ }),
 
@@ -11142,6 +11145,21 @@ for (var COLLECTION_NAME in DOMIterables) {
 /* unused harmony reexport * */
 
 
+/***/ }),
+
+/***/ "df4c":
+/***/ (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__("73a9");
+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("0a1ba34a", content, true, {"sourceMap":false,"shadowMode":false});
+
 /***/ }),
 
 /***/ "df60":
@@ -11437,6 +11455,17 @@ module.exports = function (target, src, options) {
 /* unused harmony reexport * */
 
 
+/***/ }),
+
+/***/ "e419":
+/***/ (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_Grid_vue_vue_type_style_index_0_id_c263f57e_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("584d");
+/* 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_Grid_vue_vue_type_style_index_0_id_c263f57e_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_Grid_vue_vue_type_style_index_0_id_c263f57e_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "e439":
@@ -12164,6 +12193,17 @@ var update = add("35ac9d20", content, true, {"sourceMap":false,"shadowMode":fals
 
 module.exports = __webpack_require__.p + "img/icon_mongodb.4643494b.svg";
 
+/***/ }),
+
+/***/ "ecfb":
+/***/ (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_Pagination_vue_vue_type_style_index_0_id_fdc1bb26_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("df4c");
+/* 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_Pagination_vue_vue_type_style_index_0_id_fdc1bb26_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_Pagination_vue_vue_type_style_index_0_id_fdc1bb26_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "edeb":
@@ -12434,6 +12474,7 @@ __webpack_require__.d(__webpack_exports__, "EvMessage", function() { return /* r
 __webpack_require__.d(__webpack_exports__, "EvNotification", function() { return /* reexport */ components_notification; });
 __webpack_require__.d(__webpack_exports__, "EvMessageBox", function() { return /* reexport */ components_messageBox; });
 __webpack_require__.d(__webpack_exports__, "EvTreeGrid", function() { return /* reexport */ treeGrid; });
+__webpack_require__.d(__webpack_exports__, "EvPagination", function() { return /* reexport */ pagination; });
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
 // This file is imported into lib/wc client bundles.
@@ -26140,39 +26181,39 @@ var dist_default = /*#__PURE__*/__webpack_require__.n(dist);
 var vue3_observe_visibility_common = __webpack_require__("196e");
 var vue3_observe_visibility_common_default = /*#__PURE__*/__webpack_require__.n(vue3_observe_visibility_common);
 
-// 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/grid/Grid.vue?vue&type=template&id=324bfacf&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/Grid.vue?vue&type=template&id=c263f57e&scoped=true
 
 
 
 
 
-var _withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-324bfacf");
+var _withId = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withScopeId"])("data-v-c263f57e");
 
-Object(external_commonjs_vue_commonjs2_vue_root_Vue_["pushScopeId"])("data-v-324bfacf");
+Object(external_commonjs_vue_commonjs2_vue_root_Vue_["pushScopeId"])("data-v-c263f57e");
 
-var Gridvue_type_template_id_324bfacf_scoped_true_hoisted_1 = {
+var Gridvue_type_template_id_c263f57e_scoped_true_hoisted_1 = {
   class: "column-list"
 };
-var Gridvue_type_template_id_324bfacf_scoped_true_hoisted_2 = {
+var Gridvue_type_template_id_c263f57e_scoped_true_hoisted_2 = {
   key: 0,
   class: "column-filter-status"
 };
-var Gridvue_type_template_id_324bfacf_scoped_true_hoisted_3 = {
+var Gridvue_type_template_id_c263f57e_scoped_true_hoisted_3 = {
   key: 0
 };
 
-var Gridvue_type_template_id_324bfacf_scoped_true_hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("td", {
+var Gridvue_type_template_id_c263f57e_scoped_true_hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("td", {
   class: "is-empty"
 }, "No records", -1);
 
-var Gridvue_type_template_id_324bfacf_scoped_true_hoisted_5 = {
+var Gridvue_type_template_id_c263f57e_scoped_true_hoisted_5 = {
   ref: "resizeLine",
   class: "table-resize-line"
 };
 
 Object(external_commonjs_vue_commonjs2_vue_root_Vue_["popScopeId"])();
 
-var Gridvue_type_template_id_324bfacf_scoped_true_render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
+var Gridvue_type_template_id_c263f57e_scoped_true_render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
   var _component_toolbar = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("toolbar");
 
   var _component_ev_checkbox = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ev-checkbox");
@@ -26221,7 +26262,7 @@ var Gridvue_type_template_id_324bfacf_scoped_true_render = /*#__PURE__*/_withId(
       'table-header': true,
       'non-border': !!$setup.borderStyle
     }
-  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("ul", Gridvue_type_template_id_324bfacf_scoped_true_hoisted_1, [_ctx.useCheckbox.use ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("li", {
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("ul", Gridvue_type_template_id_c263f57e_scoped_true_hoisted_1, [_ctx.useCheckbox.use ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("li", {
     key: 0,
     class: {
       'column': true,
@@ -26251,7 +26292,7 @@ var Gridvue_type_template_id_324bfacf_scoped_true_render = /*#__PURE__*/_withId(
       style: "\n                width: ".concat(column.width, "px;\n                min-width: ").concat($setup.isRenderer(column) ? _ctx.rendererMinWidth : _ctx.minWidth, "px;")
     }, [_ctx.isFiltering && (_ctx$filterList$colum = _ctx.filterList[column.field]) !== null && _ctx$filterList$colum !== void 0 && _ctx$filterList$colum.find(function (item) {
       return item.use;
-    }) ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("span", Gridvue_type_template_id_324bfacf_scoped_true_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_icon, {
+    }) ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("span", Gridvue_type_template_id_c263f57e_scoped_true_hoisted_2, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_icon, {
       icon: "ev-icon-filter"
     })])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", {
       title: column.caption,
@@ -26305,7 +26346,7 @@ var Gridvue_type_template_id_324bfacf_scoped_true_render = /*#__PURE__*/_withId(
   }, null, 4), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("table", null, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("tbody", null, [(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.viewStore, function (row, rowIndex) {
     return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("tr", {
       key: rowIndex,
-      "data-index": rowIndex,
+      "data-index": row[0],
       class: {
         row: true,
         selected: row[2] === _ctx.selectedRow,
@@ -26359,13 +26400,13 @@ var Gridvue_type_template_id_324bfacf_scoped_true_render = /*#__PURE__*/_withId(
         title: $setup.getConvertValue(column.type, row[2][column.index])
       }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.getConvertValue(column.type, row[2][column.index])), 9, ["title"]))], 14, ["data-name", "data-index"])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)], 64);
     }), 128))], 42, ["data-index", "onClick", "onDblclick"]);
-  }), 128)), !_ctx.viewStore.length ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("tr", Gridvue_type_template_id_324bfacf_scoped_true_hoisted_3, [Gridvue_type_template_id_324bfacf_scoped_true_hoisted_4])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
+  }), 128)), !_ctx.viewStore.length ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("tr", Gridvue_type_template_id_c263f57e_scoped_true_hoisted_3, [Gridvue_type_template_id_c263f57e_scoped_true_hoisted_4])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true)])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", {
     style: "height: ".concat(_ctx.vScrollBottomHeight, "px;"),
     class: "vscroll-spacer"
   }, null, 4), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_context_menu, {
     ref: "menu",
     items: _ctx.contextMenuItems
-  }, null, 8, ["items"])], 34), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Gridvue_type_template_id_324bfacf_scoped_true_hoisted_5, null, 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.showResizeLine]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_filter_window, {
+  }, null, 8, ["items"])], 34), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("div", Gridvue_type_template_id_c263f57e_scoped_true_hoisted_5, null, 512), [[external_commonjs_vue_commonjs2_vue_root_Vue_["vShow"], _ctx.showResizeLine]]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withDirectives"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_filter_window, {
     "is-show": _ctx.showFilterWindow,
     "target-column": _ctx.currentFilter.column,
     "filter-items": _ctx.currentFilter.items,
@@ -26376,7 +26417,7 @@ var Gridvue_type_template_id_324bfacf_scoped_true_render = /*#__PURE__*/_withId(
     once: true
   }]])], 64);
 });
-// CONCATENATED MODULE: ./src/components/grid/Grid.vue?vue&type=template&id=324bfacf&scoped=true
+// CONCATENATED MODULE: ./src/components/grid/Grid.vue?vue&type=template&id=c263f57e&scoped=true
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/grid/grid.filter.window.vue?vue&type=template&id=d781ace8&scoped=true
 
@@ -28100,11 +28141,15 @@ var uses_commonFunctions = function commonFunctions() {
     setPixelUnit: setPixelUnit
   };
 };
-var scrollEvent = function scrollEvent(params) {
+var uses_scrollEvent = function scrollEvent(params) {
+  var _getCurrentInstance2 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      emit = _getCurrentInstance2.emit;
+
   var scrollInfo = params.scrollInfo,
       stores = params.stores,
       elementInfo = params.elementInfo,
-      resizeInfo = params.resizeInfo;
+      resizeInfo = params.resizeInfo,
+      pageInfo = params.pageInfo;
   /**
    * 수직 스크롤의 위치 계산 후 적용한다.
    */
@@ -28129,6 +28174,17 @@ var scrollEvent = function scrollEvent(params) {
       scrollInfo.hasVerticalScrollBar = rowCount < stores.store.length;
       scrollInfo.vScrollTopHeight = firstIndex * rowHeight;
       scrollInfo.vScrollBottomHeight = totalScrollHeight - stores.viewStore.length * rowHeight - scrollInfo.vScrollTopHeight;
+
+      if (scrollInfo.vScrollBottomHeight === 0) {
+        pageInfo.prevPage = pageInfo.currentPage;
+        pageInfo.currentPage = Math.ceil(lastIndex / pageInfo.dataCount) + 1;
+        emit('scroll-end', {
+          startIndex: lastIndex,
+          dataCount: pageInfo.dataCount,
+          prevPage: pageInfo.prevPage,
+          currentPage: pageInfo.currentPage
+        });
+      }
     }
   };
   /**
@@ -28174,8 +28230,8 @@ var scrollEvent = function scrollEvent(params) {
   };
 };
 var uses_resizeEvent = function resizeEvent(params) {
-  var _getCurrentInstance2 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      props = _getCurrentInstance2.props;
+  var _getCurrentInstance3 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      props = _getCurrentInstance3.props;
 
   var resizeInfo = params.resizeInfo,
       elementInfo = params.elementInfo,
@@ -28391,8 +28447,8 @@ var uses_resizeEvent = function resizeEvent(params) {
   };
 };
 var uses_clickEvent = function clickEvent(params) {
-  var _getCurrentInstance3 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      emit = _getCurrentInstance3.emit;
+  var _getCurrentInstance4 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      emit = _getCurrentInstance4.emit;
 
   var selectInfo = params;
 
@@ -28460,8 +28516,8 @@ var uses_checkEvent = function checkEvent(params) {
   var checkInfo = params.checkInfo,
       stores = params.stores;
 
-  var _getCurrentInstance4 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      emit = _getCurrentInstance4.emit;
+  var _getCurrentInstance5 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      emit = _getCurrentInstance5.emit;
   /**
    * row에 대한 체크 상태를 해제한다.
    *
@@ -28565,8 +28621,8 @@ var uses_sortEvent = function sortEvent(params) {
       stores = params.stores,
       getColumnIndex = params.getColumnIndex;
 
-  var _getCurrentInstance5 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      props = _getCurrentInstance5.props;
+  var _getCurrentInstance6 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      props = _getCurrentInstance6.props;
 
   function OrderQueue() {
     var _this2 = this;
@@ -28675,8 +28731,8 @@ var uses_sortEvent = function sortEvent(params) {
   };
 };
 var uses_filterEvent = function filterEvent(params) {
-  var _getCurrentInstance6 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      props = _getCurrentInstance6.props;
+  var _getCurrentInstance7 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      props = _getCurrentInstance7.props;
 
   var filterInfo = params.filterInfo,
       stores = params.stores,
@@ -28950,8 +29006,8 @@ var uses_filterEvent = function filterEvent(params) {
   };
 };
 var uses_contextMenuEvent = function contextMenuEvent(params) {
-  var _getCurrentInstance7 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      emit = _getCurrentInstance7.emit;
+  var _getCurrentInstance8 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      emit = _getCurrentInstance8.emit;
 
   var contextInfo = params.contextInfo,
       stores = params.stores,
@@ -29032,8 +29088,8 @@ var uses_contextMenuEvent = function contextMenuEvent(params) {
   };
 };
 var uses_storeEvent = function storeEvent(params) {
-  var _getCurrentInstance8 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
-      props = _getCurrentInstance8.props;
+  var _getCurrentInstance9 = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      props = _getCurrentInstance9.props;
 
   var selectInfo = params.selectInfo,
       checkInfo = params.checkInfo,
@@ -29190,7 +29246,8 @@ var uses_storeEvent = function storeEvent(params) {
     'dblclick-row': null,
     'update:checked': null,
     'check-row': null,
-    'check-all': null
+    'check-all': null,
+    'scroll-end': null
   },
   setup: function setup(props) {
     var _commonFunctions = uses_commonFunctions(),
@@ -29307,12 +29364,33 @@ var uses_storeEvent = function storeEvent(params) {
         return props.height ? setPixelUnit(props.height) : '100%';
       })
     });
+    var pageInfo = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({
+      currentPage: 1,
+      prevPage: 0,
+      startIndex: 0,
+      use: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+        var _props$option$page;
+
+        return ((_props$option$page = props.option.page) === null || _props$option$page === void 0 ? void 0 : _props$option$page.use) || false;
+      }),
+      dataCount: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+        var _props$option$page2;
+
+        return ((_props$option$page2 = props.option.page) === null || _props$option$page2 === void 0 ? void 0 : _props$option$page2.dataCount) || 50;
+      }),
+      isInfinite: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+        var _props$option$page3;
+
+        return ((_props$option$page3 = props.option.page) === null || _props$option$page3 === void 0 ? void 0 : _props$option$page3.isInfinite) || false;
+      })
+    });
 
-    var _scrollEvent = scrollEvent({
+    var _scrollEvent = uses_scrollEvent({
       scrollInfo: scrollInfo,
       stores: stores,
       elementInfo: elementInfo,
-      resizeInfo: resizeInfo
+      resizeInfo: resizeInfo,
+      pageInfo: pageInfo
     }),
         updateVScroll = _scrollEvent.updateVScroll,
         updateHScroll = _scrollEvent.updateHScroll,
@@ -29521,12 +29599,12 @@ var uses_storeEvent = function storeEvent(params) {
       return filterInfo.isFiltering && field !== 'db-icon' && field !== 'user-icon';
     };
 
-    return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+    return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
       showHeader: showHeader,
       stripeStyle: stripeStyle,
       borderStyle: borderStyle,
       highlightIdx: highlightIdx
-    }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(elementInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(stores)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(filterInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(scrollInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(resizeInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(selectInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(checkInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(sortInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(contextInfo)), {}, {
+    }, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(elementInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(stores)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(filterInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(scrollInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(pageInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(resizeInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(selectInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(checkInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(sortInfo)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toRefs"])(contextInfo)), {}, {
       isRenderer: isRenderer,
       getComponentName: getComponentName,
       getConvertValue: getConvertValue,
@@ -29560,8 +29638,8 @@ var uses_storeEvent = function storeEvent(params) {
 });
 // CONCATENATED MODULE: ./src/components/grid/Grid.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./src/components/grid/Grid.vue?vue&type=style&index=0&id=324bfacf&lang=scss&scoped=true
-var Gridvue_type_style_index_0_id_324bfacf_lang_scss_scoped_true = __webpack_require__("36c3");
+// EXTERNAL MODULE: ./src/components/grid/Grid.vue?vue&type=style&index=0&id=c263f57e&lang=scss&scoped=true
+var Gridvue_type_style_index_0_id_c263f57e_lang_scss_scoped_true = __webpack_require__("e419");
 
 // CONCATENATED MODULE: ./src/components/grid/Grid.vue
 
@@ -29569,8 +29647,8 @@ var Gridvue_type_style_index_0_id_324bfacf_lang_scss_scoped_true = __webpack_req
 
 
 
-Gridvue_type_script_lang_js.render = Gridvue_type_template_id_324bfacf_scoped_true_render
-Gridvue_type_script_lang_js.__scopeId = "data-v-324bfacf"
+Gridvue_type_script_lang_js.render = Gridvue_type_template_id_c263f57e_scoped_true_render
+Gridvue_type_script_lang_js.__scopeId = "data-v-c263f57e"
 
 /* harmony default export */ var Grid = (Gridvue_type_script_lang_js);
 // CONCATENATED MODULE: ./src/components/grid/index.js
@@ -29586,9 +29664,9 @@ 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=b79677b2
+// 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=3a821ae4
 
-function Chartvue_type_template_id_b79677b2_render(_ctx, _cache, $props, $setup, $data, $options) {
+function Chartvue_type_template_id_3a821ae4_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", {
@@ -29597,7 +29675,7 @@ function Chartvue_type_template_id_b79677b2_render(_ctx, _cache, $props, $setup,
     class: "ev-chart"
   }, null, 4)), [[_directive_resize, $setup.onResize]]);
 }
-// CONCATENATED MODULE: ./src/components/chart/Chart.vue?vue&type=template&id=b79677b2
+// CONCATENATED MODULE: ./src/components/chart/Chart.vue?vue&type=template&id=3a821ae4
 
 // CONCATENATED MODULE: ./node_modules/lodash-es/_arrayEach.js
 /**
@@ -30905,7 +30983,7 @@ function reverse(array) {
 
 /* harmony default export */ var lodash_es_reverse = (reverse);
 
-// CONCATENATED MODULE: ./src/components/chart/model/model.store.js
+// CONCATENATED MODULE: ./src/components/chart/helpers/helpers.util.js
 
 
 
@@ -30914,237 +30992,563 @@ function reverse(array) {
 
 
 
-var modules = {
+/* harmony default export */ var helpers_util = ({
   /**
-   * Take chart data and labels to create normalized data and min/max info
-   * @param {object}  data    chart series info
-   * @param {object}  label   chart label
+   * Transforming hex to rgb code
+   * @param {string} hex    hex color code
    *
-   * @returns {undefined}
+   * @returns {string} rgb code
    */
-  createDataSet: function createDataSet(data, label) {
-    var _this = this;
-
-    Object.keys(this.seriesInfo.charts).forEach(function (typeKey) {
-      var seriesIDs = _this.seriesInfo.charts[typeKey];
-
-      if (seriesIDs.length) {
-        if (typeKey === 'pie') {
-          if (_this.options.sunburst) {
-            _this.createSunburstDataSet(data);
-          } else {
-            _this.createPieDataSet(data, seriesIDs);
-          }
-        } else if (typeKey === 'scatter') {
-          seriesIDs.forEach(function (seriesID) {
-            var series = _this.seriesList[seriesID];
-            var sData = data[seriesID];
-
-            if (series && sData) {
-              series.data = _this.addSeriesDSforScatter(sData);
-              series.minMax = _this.getSeriesMinMax(series.data);
-            }
-          });
-        } else {
-          seriesIDs.forEach(function (seriesID) {
-            var series = _this.seriesList[seriesID];
-            var sData = data[seriesID];
-
-            if (series && sData) {
-              if (series.isExistGrp && series.stackIndex) {
-                series.data = _this.addSeriesStackDS(sData, label, series.bsIds, series.stackIndex);
-              } else {
-                series.data = _this.addSeriesDS(sData, label);
-              }
+  hexToRgb: function hexToRgb(hex) {
+    if (!hex) {
+      return false;
+    }
 
-              series.minMax = _this.getSeriesMinMax(series.data);
-            }
-          });
-        }
-      }
-    });
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    var r = parseInt(result[1], 16);
+    var g = parseInt(result[2], 16);
+    var b = parseInt(result[3], 16);
+    return "".concat(r, ",").concat(g, ",").concat(b);
   },
 
   /**
-   * Take chart data and to create normalized pie data
-   * @param {object}  data    chart series info
-   *
-   * @returns {undefined}
+   * Check color string and return what type it is. ('HEX', 'RGB', 'RGBA' or 'NONE')
+   * @param colorStr
+   * @returns {string} color type
    */
-  createSunburstDataSet: function createSunburstDataSet(data) {
-    this.pieDataSet = [];
-    var ds = this.pieDataSet;
-    var sunburstQueue = [];
+  getColorStringType: function getColorStringType(colorStr) {
+    var noneWhiteSpaceColorStr = colorStr.replace(/ /g, '');
+    var isHEX = /^#(?:[A-Fa-f0-9]{3}){1,2}$/.exec(noneWhiteSpaceColorStr);
+    var isRGB = /^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$/.exec(noneWhiteSpaceColorStr);
+    var isRGBA = /^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1?)\s*[)]$/.exec(noneWhiteSpaceColorStr);
+    var result = '';
 
-    for (var ix = 0; ix < data.length; ix++) {
-      var slice = data[ix];
-      var series = this.seriesList[slice.id];
-      var showChildren = false;
+    if (isHEX) {
+      result = 'HEX';
+    } else if (isRGB) {
+      result = 'RGB';
+    } else if (isRGBA) {
+      result = 'RGBA';
+    } else {
+      result = 'NONE';
+    }
 
-      if (!ds[0]) {
-        ds[0] = {
-          ir: 0,
-          or: 0,
-          total: 0,
-          data: []
-        };
-      }
+    return result;
+  },
 
-      if (series.show) {
-        ds[0].total += slice.value || 0;
-        ds[0].data.push({
-          parent: '$ev-root',
-          id: slice.id,
-          value: slice.value,
-          sa: 0,
-          ea: 0
-        });
+  /**
+   * Transforming color string to rgba code
+   * Return BLACK ('rgba(0, 0, 0, ${opacity})') if fail transforming
+   * @param colorStr        hex color code, rgb, rgba .. etc
+   * @param opacity            color opacity. (default 1)translate
+   * @returns {string} transformed rgba
+   */
+  colorStringToRgba: function colorStringToRgba(colorStr) {
+    var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    var noneWhiteSpaceColorStr = colorStr.replace(/ /g, '');
+    var colorType = this.getColorStringType(noneWhiteSpaceColorStr);
+    var resultRGBA = '';
 
-        if (slice.children) {
-          for (var jx = 0; jx < slice.children.length; jx++) {
-            var childSeries = this.seriesList[slice.children[jx].id];
+    switch (colorType) {
+      case 'HEX':
+        resultRGBA = "rgba(".concat(this.hexToRgb(noneWhiteSpaceColorStr), ",").concat(opacity, ")");
+        break;
 
-            if (childSeries.show) {
-              showChildren = true;
-            }
+      case 'RGB':
+        resultRGBA = noneWhiteSpaceColorStr.replace(')', ", ".concat(opacity, ")")).replace('rgb', 'rgba');
+        break;
 
-            sunburstQueue.push({
-              parent: slice.id,
-              data: slice.children[jx],
-              depth: 1
-            });
-          }
-        } else {
-          var dummy = {
-            id: 'dummy',
-            value: slice.value
-          };
-          sunburstQueue.push({
-            parent: slice.id,
-            data: dummy,
-            depth: 1
-          });
-        }
+      case 'RGBA':
+        resultRGBA = noneWhiteSpaceColorStr.replace("".concat(this.getOpacity(colorStr), ")"), "".concat(opacity, ")"));
+        break;
 
-        if (!showChildren) {
-          var _dummy = {
-            id: 'dummy',
-            value: slice.value
-          };
-          sunburstQueue.push({
-            parent: slice.id,
-            data: _dummy,
-            depth: 1
-          });
-        }
-      }
+      default:
+        resultRGBA = "rgba(0, 0, 0, ".concat(opacity, ")");
+        break;
     }
 
-    ds[0].data.sort(function (a, b) {
-      return b.value - a.value;
-    });
-
-    while (sunburstQueue.length) {
-      var item = sunburstQueue.shift();
-      var parent = item.parent;
-      var _slice = item.data;
-      var depth = item.depth;
-      var _showChildren = false;
-
-      if (!ds[depth]) {
-        ds[depth] = {
-          ir: 0,
-          or: 0,
-          total: {},
-          data: []
-        };
-      }
-
-      if (!ds[depth].total[parent]) {
-        ds[depth].total[parent] = 0;
-      }
-
-      var _series = this.seriesList[_slice.id];
+    return resultRGBA;
+  },
 
-      if (_slice.id === 'dummy') {
-        ds[depth].data.push({
-          parent: parent,
-          id: 'dummy',
-          value: _slice.value,
-          sa: 0,
-          ea: 0
-        });
-        ds[depth].total[parent] += _slice.value;
-      } else if (_series && _series.show) {
-        ds[depth].data.push({
-          parent: parent,
-          id: _slice.id,
-          value: _slice.value,
-          sa: 0,
-          ea: 0
-        });
-        ds[depth].total[parent] += _slice.value;
+  /**
+   * get opacity value on rgba color string
+   * ex) input  : rgba(255, 255, 255, 0.1)
+   *     return : 0.1
+   * @param rgbaColorString
+   * @returns {string} opacity
+   */
+  getOpacity: function getOpacity(rgbaColorString) {
+    var noneWhiteSpaceColorStr = rgbaColorString.replace(/ /g, '');
+    var colorType = this.getColorStringType(noneWhiteSpaceColorStr);
 
-        if (_slice.children) {
-          for (var _ix = 0; _ix < _slice.children.length; _ix++) {
-            if (this.seriesList[_slice.children[_ix].id].show) {
-              _showChildren = true;
-            }
+    if (colorType === 'RGBA') {
+      return noneWhiteSpaceColorStr.replace(/^.*,(.+)\)/, '$1');
+    }
 
-            sunburstQueue.push({
-              parent: _slice.id,
-              data: _slice.children[_ix],
-              depth: depth + 1
-            });
-          }
-        } else {
-          var _dummy2 = {
-            id: 'dummy',
-            value: _slice.value
-          };
-          sunburstQueue.push({
-            parent: _slice.id,
-            data: _dummy2,
-            depth: depth + 1
-          });
-        }
+    return '1';
+  },
 
-        if (!_showChildren) {
-          var _dummy3 = {
-            id: 'dummy',
-            value: _slice.value
-          };
-          sunburstQueue.push({
-            parent: _slice.id,
-            data: _dummy3,
-            depth: depth + 1
-          });
-        }
-      }
+  /**
+   * To logarithmic scale, compute log value
+   * @param {number} value    graph value
+   *
+   * @returns {number} computed value
+   */
+  calculateMagnitude: function calculateMagnitude(value) {
+    return Math.floor(Math.log(value) / Math.LN10);
+  },
 
-      ds[depth].data.sort(function (a, b) {
-        return b.value - a.value;
-      });
-    }
+  /**
+   * Set alias pixel to deal with anti-aliasing
+   * @param {number} width    line width
+   *
+   * @returns {number} computed value
+   */
+  aliasPixel: function aliasPixel(width) {
+    return width % 2 === 0 ? 0 : 0.5;
   },
 
   /**
-   * Take chart data and to create normalized pie data
-   * @param {object}  data    chart data
-   * @param {String[]}  seriesIDs     chart series info
+   * Create string for canvas font style
+   * @param {object} style    style object by user
    *
-   * @returns {undefined}
+   * @returns {string} computed value
    */
-  createPieDataSet: function createPieDataSet(data, seriesIDs) {
-    var _this2 = this;
+  getLabelStyle: function getLabelStyle(style) {
+    return "normal normal ".concat(style.fontWeight, " ").concat(style.fontSize, "px ").concat(style.fontFamily);
+  },
 
-    this.pieDataSet = [];
-    var ds = this.pieDataSet;
-    ds[0] = {
-      data: [],
-      ir: 0,
-      or: 0,
-      total: 0
+  /**
+   * Create sign format with number
+   * @param {number} value           graph value
+   * @param {number} decimalPoint    decimal point
+   *
+   * @returns {string} signed value
+   */
+  labelSignFormat: function labelSignFormat(value) {
+    var decimalPoint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var quad = quadrillion(1);
+    var trill = trillion(1);
+    var billi = billions(1);
+    var milli = millions(1);
+    var killo = 1000;
+    var label;
+
+    if (!truthy(value)) {
+      return value;
+    }
+
+    var assignLabelWith = function assignLabelWith(v, target, lb) {
+      if (v % target === 0) {
+        return "".concat((v / target).toFixed(decimalPoint)).concat(lb);
+      }
+
+      return "".concat((v / target).toFixed(1)).concat(lb);
+    };
+
+    if (value >= quad) {
+      label = assignLabelWith(value, quad, 'P');
+    } else if (value >= trill) {
+      label = assignLabelWith(value, trill, 'T');
+    } else if (value >= billi) {
+      label = assignLabelWith(value, billi, 'G');
+    } else if (value >= milli) {
+      label = assignLabelWith(value, milli, 'M');
+    } else if (value >= killo) {
+      label = assignLabelWith(value, 1000, 'K');
+    } else if (value < 1 && value > 0) {
+      label = value.toFixed(1);
+    } else {
+      label = value.toFixed(decimalPoint);
+    }
+
+    return label;
+  },
+
+  /**
+   * Calculate text size with html
+   * @param {string} text         text is needed to check size
+   * @param {string} fontStyle    text font style
+   *
+   * @returns {object} text size information
+   */
+  calcTextSize: function calcTextSize(text, fontStyle) {
+    var calc = document.createElement('span');
+    var style = "visibility:hidden; position:absolute; top:-10000px; font: ".concat(fontStyle, ";");
+    calc.setAttribute('style', style);
+    calc.style.font = fontStyle;
+    calc.textContent = text;
+    document.body.appendChild(calc);
+    var rect = calc.getBoundingClientRect();
+    var width = rect.width || 2;
+    var height = rect.height || 2;
+    calc.remove();
+    return {
+      width: width,
+      height: height
+    };
+  },
+
+  /**
+   * Comparing strings
+   * @param {array} array    compared array
+   *
+   * @returns {object} min/max information
+   */
+  getStringMinMax: function getStringMinMax(array) {
+    var minMax = {
+      min: array[0],
+      max: array[0]
+    };
+    array.forEach(function (item) {
+      var _minMax$max, _minMax$min;
+
+      if ((minMax === null || minMax === void 0 ? void 0 : (_minMax$max = minMax.max) === null || _minMax$max === void 0 ? void 0 : _minMax$max.length) < (item === null || item === void 0 ? void 0 : item.length)) {
+        minMax.max = item;
+      }
+
+      if ((minMax === null || minMax === void 0 ? void 0 : (_minMax$min = minMax.min) === null || _minMax$min === void 0 ? void 0 : _minMax$min.length) > (item === null || item === void 0 ? void 0 : item.length)) {
+        minMax.min = item;
+      }
+    });
+    return minMax;
+  },
+
+  /**
+   * Truncate the long string to short string with ellipsis until fitting maxWidth
+   * @param {string} str         target string
+   * @param {number} maxWidth    maximum string width on canvas
+   * @param {Object} ctx         canvas context
+   * @param {string} direction   left or right  (default: right)
+   */
+  truncateLabelWithEllipsis: function truncateLabelWithEllipsis(str, maxWidth, ctx) {
+    var direction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'right';
+
+    if (!str) {
+      return '';
+    }
+
+    if (!maxWidth) {
+      return str;
+    }
+
+    var ellipsis = '…';
+    var ellipsisWidth = ctx.measureText(ellipsis).width;
+    var temp = str;
+    var tempWidth = ctx.measureText(temp).width;
+
+    if (tempWidth <= maxWidth || tempWidth <= ellipsisWidth) {
+      return str;
+    }
+
+    var len = temp.length;
+
+    while (tempWidth >= maxWidth - ellipsisWidth && len-- > 0) {
+      temp = direction === 'right' ? temp.substring(0, len) : temp.substring(1, temp.length);
+      tempWidth = ctx.measureText(temp).width;
+    }
+
+    return direction === 'right' ? temp + ellipsis : ellipsis + temp;
+  },
+
+  /**
+   * Draw text tip
+   * @param {object} param     object for drawing text tip
+   *
+   * @returns {undefined}
+   */
+  showLabelTip: function showLabelTip(param) {
+    var ctx = param.ctx,
+        width = param.width,
+        height = param.height,
+        x = param.x,
+        y = param.y,
+        arrowSize = param.arrowSize,
+        borderRadius = param.borderRadius,
+        text = param.text,
+        backgroundColor = param.backgroundColor,
+        textColor = param.textColor;
+    var sx = x - width / 2;
+    var ex = x + width / 2;
+    var sy = y - height;
+    var ey = y;
+    ctx.beginPath();
+    ctx.save();
+    ctx.fillStyle = backgroundColor || '#E96E2C';
+    ctx.strokeStyle = backgroundColor || '#E96E2C';
+    ctx.shadowBlur = 0;
+    ctx.moveTo(sx + borderRadius, sy);
+    ctx.quadraticCurveTo(sx, sy, sx, sy + borderRadius);
+    ctx.lineTo(sx, ey - borderRadius);
+    ctx.quadraticCurveTo(sx, ey, sx + borderRadius, ey);
+    ctx.lineTo(ex - borderRadius, ey);
+    ctx.quadraticCurveTo(ex, ey, ex, ey - borderRadius);
+    ctx.lineTo(ex, sy + borderRadius);
+    ctx.quadraticCurveTo(ex, sy, ex - borderRadius, sy);
+    ctx.lineTo(x - arrowSize, sy);
+    ctx.lineTo(x, sy - arrowSize);
+    ctx.lineTo(x + arrowSize, sy);
+    ctx.lineTo(sx + borderRadius, sy);
+    ctx.closePath();
+    ctx.fill();
+    ctx.restore();
+    ctx.save();
+    ctx.font = 'normal normal bold 12px Roboto';
+    ctx.fillStyle = textColor || '#FFF';
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'center';
+    ctx.fillText("".concat(text), x, sy + height / 2);
+    ctx.restore();
+    ctx.beginPath();
+  },
+  isPieType: function isPieType(type) {
+    return type === 'pie' || type === 'doughnut' || type === 'sunburst';
+  },
+  isDoughnutHole: function isDoughnutHole(type) {
+    return type === 'doughnut' || type === 'sunburst';
+  }
+});
+// CONCATENATED MODULE: ./src/components/chart/model/model.store.js
+
+
+
+
+
+
+
+
+
+var modules = {
+  /**
+   * Take chart data and labels to create normalized data and min/max info
+   * @param {object}  data    chart series info
+   * @param {object}  label   chart label
+   *
+   * @returns {undefined}
+   */
+  createDataSet: function createDataSet(data, label) {
+    var _this = this;
+
+    Object.keys(this.seriesInfo.charts).forEach(function (typeKey) {
+      var seriesIDs = _this.seriesInfo.charts[typeKey];
+
+      if (seriesIDs.length) {
+        if (typeKey === 'pie') {
+          if (_this.options.sunburst) {
+            _this.createSunburstDataSet(data);
+          } else {
+            _this.createPieDataSet(data, seriesIDs);
+          }
+        } else if (typeKey === 'scatter') {
+          seriesIDs.forEach(function (seriesID) {
+            var series = _this.seriesList[seriesID];
+            var sData = data[seriesID];
+
+            if (series && sData) {
+              series.data = _this.addSeriesDSforScatter(sData);
+              series.minMax = _this.getSeriesMinMax(series.data);
+            }
+          });
+        } else {
+          seriesIDs.forEach(function (seriesID) {
+            var series = _this.seriesList[seriesID];
+            var sData = data[seriesID];
+
+            if (series && sData) {
+              if (series.isExistGrp && series.stackIndex) {
+                series.data = _this.addSeriesStackDS(sData, label, series.bsIds, series.stackIndex);
+              } else {
+                series.data = _this.addSeriesDS(sData, label);
+              }
+
+              series.minMax = _this.getSeriesMinMax(series.data);
+            }
+          });
+        }
+      }
+    });
+  },
+
+  /**
+   * Take chart data and to create normalized pie data
+   * @param {object}  data    chart series info
+   *
+   * @returns {undefined}
+   */
+  createSunburstDataSet: function createSunburstDataSet(data) {
+    this.pieDataSet = [];
+    var ds = this.pieDataSet;
+    var sunburstQueue = [];
+
+    for (var ix = 0; ix < data.length; ix++) {
+      var slice = data[ix];
+      var series = this.seriesList[slice.id];
+      var showChildren = false;
+
+      if (!ds[0]) {
+        ds[0] = {
+          ir: 0,
+          or: 0,
+          total: 0,
+          data: []
+        };
+      }
+
+      if (series.show) {
+        ds[0].total += slice.value || 0;
+        ds[0].data.push({
+          parent: '$ev-root',
+          id: slice.id,
+          value: slice.value,
+          sa: 0,
+          ea: 0
+        });
+
+        if (slice.children) {
+          for (var jx = 0; jx < slice.children.length; jx++) {
+            var childSeries = this.seriesList[slice.children[jx].id];
+
+            if (childSeries.show) {
+              showChildren = true;
+            }
+
+            sunburstQueue.push({
+              parent: slice.id,
+              data: slice.children[jx],
+              depth: 1
+            });
+          }
+        } else {
+          var dummy = {
+            id: 'dummy',
+            value: slice.value
+          };
+          sunburstQueue.push({
+            parent: slice.id,
+            data: dummy,
+            depth: 1
+          });
+        }
+
+        if (!showChildren) {
+          var _dummy = {
+            id: 'dummy',
+            value: slice.value
+          };
+          sunburstQueue.push({
+            parent: slice.id,
+            data: _dummy,
+            depth: 1
+          });
+        }
+      }
+    }
+
+    ds[0].data.sort(function (a, b) {
+      return b.value - a.value;
+    });
+
+    while (sunburstQueue.length) {
+      var item = sunburstQueue.shift();
+      var parent = item.parent;
+      var _slice = item.data;
+      var depth = item.depth;
+      var _showChildren = false;
+
+      if (!ds[depth]) {
+        ds[depth] = {
+          ir: 0,
+          or: 0,
+          total: {},
+          data: []
+        };
+      }
+
+      if (!ds[depth].total[parent]) {
+        ds[depth].total[parent] = 0;
+      }
+
+      var _series = this.seriesList[_slice.id];
+
+      if (_slice.id === 'dummy') {
+        ds[depth].data.push({
+          parent: parent,
+          id: 'dummy',
+          value: _slice.value,
+          sa: 0,
+          ea: 0
+        });
+        ds[depth].total[parent] += _slice.value;
+      } else if (_series && _series.show) {
+        ds[depth].data.push({
+          parent: parent,
+          id: _slice.id,
+          value: _slice.value,
+          sa: 0,
+          ea: 0
+        });
+        ds[depth].total[parent] += _slice.value;
+
+        if (_slice.children) {
+          for (var _ix = 0; _ix < _slice.children.length; _ix++) {
+            if (this.seriesList[_slice.children[_ix].id].show) {
+              _showChildren = true;
+            }
+
+            sunburstQueue.push({
+              parent: _slice.id,
+              data: _slice.children[_ix],
+              depth: depth + 1
+            });
+          }
+        } else {
+          var _dummy2 = {
+            id: 'dummy',
+            value: _slice.value
+          };
+          sunburstQueue.push({
+            parent: _slice.id,
+            data: _dummy2,
+            depth: depth + 1
+          });
+        }
+
+        if (!_showChildren) {
+          var _dummy3 = {
+            id: 'dummy',
+            value: _slice.value
+          };
+          sunburstQueue.push({
+            parent: _slice.id,
+            data: _dummy3,
+            depth: depth + 1
+          });
+        }
+      }
+
+      ds[depth].data.sort(function (a, b) {
+        return b.value - a.value;
+      });
+    }
+  },
+
+  /**
+   * Take chart data and to create normalized pie data
+   * @param {object}  data    chart data
+   * @param {String[]}  seriesIDs     chart series info
+   *
+   * @returns {undefined}
+   */
+  createPieDataSet: function createPieDataSet(data, seriesIDs) {
+    var _this2 = this;
+
+    this.pieDataSet = [];
+    var ds = this.pieDataSet;
+    ds[0] = {
+      data: [],
+      ir: 0,
+      or: 0,
+      total: 0
     };
     seriesIDs.forEach(function (sId) {
       if (_this2.seriesList[sId].show) {
@@ -31502,20 +31906,23 @@ var modules = {
    * @returns {object} clicked item information
    */
   getItemByPosition: function getItemByPosition(offset) {
+    var _maxValue;
+
     var useApproximate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    var sIds = Object.keys(this.seriesList);
+    var seriesIDs = Object.keys(this.seriesList);
     var isHorizontal = !!this.options.horizontal;
-    var maxl = null;
-    var maxp = null;
-    var maxg = null;
-    var maxSID = '';
+    var maxType = null;
+    var maxLabel = null;
+    var maxValuePos = null;
+    var maxValue = null;
+    var maxSeriesID = '';
     var acc = 0;
     var useStack = false;
     var maxIndex = null;
 
-    for (var ix = 0; ix < sIds.length; ix++) {
-      var sId = sIds[ix];
-      var series = this.seriesList[sId];
+    for (var ix = 0; ix < seriesIDs.length; ix++) {
+      var seriesID = seriesIDs[ix];
+      var series = this.seriesList[seriesID];
       var findFn = useApproximate ? series.findApproximateData : series.findGraphData;
 
       if (findFn) {
@@ -31524,25 +31931,35 @@ var modules = {
         var index = item.index;
 
         if (data) {
-          var ldata = isHorizontal ? data.y : data.x;
-          var lp = isHorizontal ? data.yp : data.xp;
+          if (helpers_util.isPieType(item.type)) {
+            maxLabel = seriesID;
+            maxSeriesID = seriesID;
+            maxValuePos = (data.ea - data.sa) / 2;
+            maxValue = data.o;
+            maxIndex = data.index;
+            maxType = item.type;
+          } else {
+            var ldata = isHorizontal ? data.y : data.x;
+            var lp = isHorizontal ? data.yp : data.xp;
 
-          if (ldata !== null && ldata !== undefined) {
-            var g = isHorizontal ? data.o || data.x : data.o || data.y;
+            if (ldata !== null && ldata !== undefined) {
+              var g = isHorizontal ? data.o || data.x : data.o || data.y;
 
-            if (series.stackIndex) {
-              acc += !isNaN(data.o) ? data.o : 0;
-              useStack = true;
-            } else {
-              acc += data.y;
-            }
+              if (series.stackIndex) {
+                acc += !isNaN(data.o) ? data.o : 0;
+                useStack = true;
+              } else {
+                acc += data.y;
+              }
 
-            if (maxg === null || maxg <= g) {
-              maxg = g;
-              maxSID = sId;
-              maxl = ldata;
-              maxp = lp;
-              maxIndex = index;
+              if (maxValue === null || maxValue <= g) {
+                maxValue = g;
+                maxSeriesID = seriesID;
+                maxLabel = ldata;
+                maxValuePos = lp;
+                maxIndex = index;
+                maxType = series.type;
+              }
             }
           }
         }
@@ -31550,10 +31967,11 @@ var modules = {
     }
 
     return {
-      label: maxl,
-      pos: maxp,
-      value: maxg === null ? 0 : maxg,
-      sId: maxSID,
+      type: maxType,
+      label: maxLabel,
+      pos: maxValuePos,
+      value: (_maxValue = maxValue) !== null && _maxValue !== void 0 ? _maxValue : 0,
+      sId: maxSeriesID,
       acc: acc,
       useStack: useStack,
       maxIndex: maxIndex
@@ -32626,325 +33044,6 @@ var TIME_INTERVALS = {
     size: 3.154e10
   }
 };
-// CONCATENATED MODULE: ./src/components/chart/helpers/helpers.util.js
-
-
-
-
-
-
-
-
-/* harmony default export */ var helpers_util = ({
-  /**
-   * Transforming hex to rgb code
-   * @param {string} hex    hex color code
-   *
-   * @returns {string} rgb code
-   */
-  hexToRgb: function hexToRgb(hex) {
-    if (!hex) {
-      return false;
-    }
-
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    var r = parseInt(result[1], 16);
-    var g = parseInt(result[2], 16);
-    var b = parseInt(result[3], 16);
-    return "".concat(r, ",").concat(g, ",").concat(b);
-  },
-
-  /**
-   * Check color string and return what type it is. ('HEX', 'RGB', 'RGBA' or 'NONE')
-   * @param colorStr
-   * @returns {string} color type
-   */
-  getColorStringType: function getColorStringType(colorStr) {
-    var noneWhiteSpaceColorStr = colorStr.replace(/ /g, '');
-    var isHEX = /^#(?:[A-Fa-f0-9]{3}){1,2}$/.exec(noneWhiteSpaceColorStr);
-    var isRGB = /^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$/.exec(noneWhiteSpaceColorStr);
-    var isRGBA = /^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1?)\s*[)]$/.exec(noneWhiteSpaceColorStr);
-    var result = '';
-
-    if (isHEX) {
-      result = 'HEX';
-    } else if (isRGB) {
-      result = 'RGB';
-    } else if (isRGBA) {
-      result = 'RGBA';
-    } else {
-      result = 'NONE';
-    }
-
-    return result;
-  },
-
-  /**
-   * Transforming color string to rgba code
-   * Return BLACK ('rgba(0, 0, 0, ${opacity})') if fail transforming
-   * @param colorStr        hex color code, rgb, rgba .. etc
-   * @param opacity            color opacity. (default 1)translate
-   * @returns {string} transformed rgba
-   */
-  colorStringToRgba: function colorStringToRgba(colorStr) {
-    var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-    var noneWhiteSpaceColorStr = colorStr.replace(/ /g, '');
-    var colorType = this.getColorStringType(noneWhiteSpaceColorStr);
-    var resultRGBA = '';
-
-    switch (colorType) {
-      case 'HEX':
-        resultRGBA = "rgba(".concat(this.hexToRgb(noneWhiteSpaceColorStr), ",").concat(opacity, ")");
-        break;
-
-      case 'RGB':
-        resultRGBA = noneWhiteSpaceColorStr.replace(')', ", ".concat(opacity, ")")).replace('rgb', 'rgba');
-        break;
-
-      case 'RGBA':
-        resultRGBA = noneWhiteSpaceColorStr.replace("".concat(this.getOpacity(colorStr), ")"), "".concat(opacity, ")"));
-        break;
-
-      default:
-        resultRGBA = "rgba(0, 0, 0, ".concat(opacity, ")");
-        break;
-    }
-
-    return resultRGBA;
-  },
-
-  /**
-   * get opacity value on rgba color string
-   * ex) input  : rgba(255, 255, 255, 0.1)
-   *     return : 0.1
-   * @param rgbaColorString
-   * @returns {string} opacity
-   */
-  getOpacity: function getOpacity(rgbaColorString) {
-    var noneWhiteSpaceColorStr = rgbaColorString.replace(/ /g, '');
-    var colorType = this.getColorStringType(noneWhiteSpaceColorStr);
-
-    if (colorType === 'RGBA') {
-      return noneWhiteSpaceColorStr.replace(/^.*,(.+)\)/, '$1');
-    }
-
-    return '1';
-  },
-
-  /**
-   * To logarithmic scale, compute log value
-   * @param {number} value    graph value
-   *
-   * @returns {number} computed value
-   */
-  calculateMagnitude: function calculateMagnitude(value) {
-    return Math.floor(Math.log(value) / Math.LN10);
-  },
-
-  /**
-   * Set alias pixel to deal with anti-aliasing
-   * @param {number} width    line width
-   *
-   * @returns {number} computed value
-   */
-  aliasPixel: function aliasPixel(width) {
-    return width % 2 === 0 ? 0 : 0.5;
-  },
-
-  /**
-   * Create string for canvas font style
-   * @param {object} style    style object by user
-   *
-   * @returns {string} computed value
-   */
-  getLabelStyle: function getLabelStyle(style) {
-    return "normal normal ".concat(style.fontWeight, " ").concat(style.fontSize, "px ").concat(style.fontFamily);
-  },
-
-  /**
-   * Create sign format with number
-   * @param {number} value           graph value
-   * @param {number} decimalPoint    decimal point
-   *
-   * @returns {string} signed value
-   */
-  labelSignFormat: function labelSignFormat(value) {
-    var decimalPoint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    var quad = quadrillion(1);
-    var trill = trillion(1);
-    var billi = billions(1);
-    var milli = millions(1);
-    var killo = 1000;
-    var label;
-
-    if (!truthy(value)) {
-      return value;
-    }
-
-    var assignLabelWith = function assignLabelWith(v, target, lb) {
-      if (v % target === 0) {
-        return "".concat((v / target).toFixed(decimalPoint)).concat(lb);
-      }
-
-      return "".concat((v / target).toFixed(1)).concat(lb);
-    };
-
-    if (value >= quad) {
-      label = assignLabelWith(value, quad, 'P');
-    } else if (value >= trill) {
-      label = assignLabelWith(value, trill, 'T');
-    } else if (value >= billi) {
-      label = assignLabelWith(value, billi, 'G');
-    } else if (value >= milli) {
-      label = assignLabelWith(value, milli, 'M');
-    } else if (value >= killo) {
-      label = assignLabelWith(value, 1000, 'K');
-    } else if (value < 1 && value > 0) {
-      label = value.toFixed(1);
-    } else {
-      label = value.toFixed(decimalPoint);
-    }
-
-    return label;
-  },
-
-  /**
-   * Calculate text size with html
-   * @param {string} text         text is needed to check size
-   * @param {string} fontStyle    text font style
-   *
-   * @returns {object} text size information
-   */
-  calcTextSize: function calcTextSize(text, fontStyle) {
-    var calc = document.createElement('span');
-    var style = "visibility:hidden; position:absolute; top:-10000px; font: ".concat(fontStyle, ";");
-    calc.setAttribute('style', style);
-    calc.style.font = fontStyle;
-    calc.textContent = text;
-    document.body.appendChild(calc);
-    var rect = calc.getBoundingClientRect();
-    var width = rect.width || 2;
-    var height = rect.height || 2;
-    calc.remove();
-    return {
-      width: width,
-      height: height
-    };
-  },
-
-  /**
-   * Comparing strings
-   * @param {array} array    compared array
-   *
-   * @returns {object} min/max information
-   */
-  getStringMinMax: function getStringMinMax(array) {
-    var minMax = {
-      min: array[0],
-      max: array[0]
-    };
-    array.forEach(function (item) {
-      var _minMax$max, _minMax$min;
-
-      if ((minMax === null || minMax === void 0 ? void 0 : (_minMax$max = minMax.max) === null || _minMax$max === void 0 ? void 0 : _minMax$max.length) < (item === null || item === void 0 ? void 0 : item.length)) {
-        minMax.max = item;
-      }
-
-      if ((minMax === null || minMax === void 0 ? void 0 : (_minMax$min = minMax.min) === null || _minMax$min === void 0 ? void 0 : _minMax$min.length) > (item === null || item === void 0 ? void 0 : item.length)) {
-        minMax.min = item;
-      }
-    });
-    return minMax;
-  },
-
-  /**
-   * Truncate the long string to short string with ellipsis until fitting maxWidth
-   * @param {string} str         target string
-   * @param {number} maxWidth    maximum string width on canvas
-   * @param {Object} ctx         canvas context
-   * @param {string} direction   left or right  (default: right)
-   */
-  truncateLabelWithEllipsis: function truncateLabelWithEllipsis(str, maxWidth, ctx) {
-    var direction = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'right';
-
-    if (!str) {
-      return '';
-    }
-
-    if (!maxWidth) {
-      return str;
-    }
-
-    var ellipsis = '…';
-    var ellipsisWidth = ctx.measureText(ellipsis).width;
-    var temp = str;
-    var tempWidth = ctx.measureText(temp).width;
-
-    if (tempWidth <= maxWidth || tempWidth <= ellipsisWidth) {
-      return str;
-    }
-
-    var len = temp.length;
-
-    while (tempWidth >= maxWidth - ellipsisWidth && len-- > 0) {
-      temp = direction === 'right' ? temp.substring(0, len) : temp.substring(1, temp.length);
-      tempWidth = ctx.measureText(temp).width;
-    }
-
-    return direction === 'right' ? temp + ellipsis : ellipsis + temp;
-  },
-
-  /**
-   * Draw text tip
-   * @param {object} param     object for drawing text tip
-   *
-   * @returns {undefined}
-   */
-  showLabelTip: function showLabelTip(param) {
-    var ctx = param.ctx,
-        width = param.width,
-        height = param.height,
-        x = param.x,
-        y = param.y,
-        arrowSize = param.arrowSize,
-        borderRadius = param.borderRadius,
-        text = param.text,
-        backgroundColor = param.backgroundColor,
-        textColor = param.textColor;
-    var sx = x - width / 2;
-    var ex = x + width / 2;
-    var sy = y - height;
-    var ey = y;
-    ctx.beginPath();
-    ctx.save();
-    ctx.fillStyle = backgroundColor || '#E96E2C';
-    ctx.strokeStyle = backgroundColor || '#E96E2C';
-    ctx.shadowBlur = 0;
-    ctx.moveTo(sx + borderRadius, sy);
-    ctx.quadraticCurveTo(sx, sy, sx, sy + borderRadius);
-    ctx.lineTo(sx, ey - borderRadius);
-    ctx.quadraticCurveTo(sx, ey, sx + borderRadius, ey);
-    ctx.lineTo(ex - borderRadius, ey);
-    ctx.quadraticCurveTo(ex, ey, ex, ey - borderRadius);
-    ctx.lineTo(ex, sy + borderRadius);
-    ctx.quadraticCurveTo(ex, sy, ex - borderRadius, sy);
-    ctx.lineTo(x - arrowSize, sy);
-    ctx.lineTo(x, sy - arrowSize);
-    ctx.lineTo(x + arrowSize, sy);
-    ctx.lineTo(sx + borderRadius, sy);
-    ctx.closePath();
-    ctx.fill();
-    ctx.restore();
-    ctx.save();
-    ctx.font = 'normal normal bold 12px Roboto';
-    ctx.fillStyle = textColor || '#FFF';
-    ctx.textBaseline = 'middle';
-    ctx.textAlign = 'center';
-    ctx.fillText("".concat(text), x, sy + height / 2);
-    ctx.restore();
-    ctx.beginPath();
-  }
-});
 // CONCATENATED MODULE: ./src/components/chart/helpers/helpers.canvas.js
 
 
@@ -34693,6 +34792,7 @@ var element_pie_Pie = /*#__PURE__*/function () {
     }
 
     this.sId = sId;
+    this.show = true;
     this.data = [];
     this.type = 'pie';
     this.centerX = 0;
@@ -34703,10 +34803,13 @@ var element_pie_Pie = /*#__PURE__*/function () {
     this.slice = null;
     this.state = null;
     this.ctx = null;
+    this.isSelect = false;
   }
   /**
    * Draw series data
    * @param context
+   * @param strokeOptions
+   *
    *
    * @returns {undefined}
    */
@@ -34714,18 +34817,30 @@ var element_pie_Pie = /*#__PURE__*/function () {
 
   _createClass(Pie, [{
     key: "draw",
-    value: function draw(context) {
-      this.ctx = context;
+    value: function draw(context, strokeOptions) {
+      var ctx = context !== null && context !== void 0 ? context : this.ctx;
+      var slice = new Path2D();
+      var radius = this.isSelect ? this.radius + 5 : this.radius;
       var color = this.color;
       var noneDownplayOpacity = color.includes('rgba') ? helpers_util.getOpacity(color) : 1;
       var opacity = this.state === 'downplay' ? 0.1 : noneDownplayOpacity;
-      this.ctx.beginPath();
-      this.slice = new Path2D();
-      this.slice.moveTo(this.centerX, this.centerY);
-      this.slice.arc(this.centerX, this.centerY, this.radius, this.startAngle, this.endAngle);
-      this.ctx.fillStyle = helpers_util.colorStringToRgba(color, opacity);
-      this.ctx.fill(this.slice);
-      this.ctx.closePath();
+      ctx.beginPath();
+      slice.moveTo(this.centerX, this.centerY);
+      slice.arc(this.centerX, this.centerY, radius, this.startAngle, this.endAngle);
+      slice.lineTo(this.centerX, this.centerY);
+      ctx.fillStyle = helpers_util.colorStringToRgba(color, opacity);
+      ctx.fill(slice);
+
+      if (strokeOptions.use) {
+        ctx.lineCap = 'round';
+        ctx.lineWidth = strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.lineWidth;
+        ctx.strokeStyle = strokeOptions === null || strokeOptions === void 0 ? void 0 : strokeOptions.color;
+        ctx.stroke(slice);
+      }
+
+      ctx.closePath();
+      this.slice = slice;
+      this.ctx = ctx;
     }
     /**
      * Find graph item
@@ -34750,7 +34865,8 @@ var element_pie_Pie = /*#__PURE__*/function () {
         index: -1
       };
 
-      if ((_this$ctx = this.ctx) !== null && _this$ctx !== void 0 && _this$ctx.isPointInPath(this.slice, offsetX, offsetY)) {
+      if (this.show && (_this$ctx = this.ctx) !== null && _this$ctx !== void 0 && _this$ctx.isPointInPath(this.slice, offsetX, offsetY)) {
+        item.type = this.type;
         item.data = this.data;
         item.hit = true;
         item.color = this.color;
@@ -34772,6 +34888,7 @@ var element_pie_Pie = /*#__PURE__*/function () {
     key: "itemHighlight",
     value: function itemHighlight(item, context) {
       var ctx = context;
+      var radius = this.isSelect ? this.radius + 5 : this.radius;
       ctx.save();
       ctx.shadowOffsetX = 0;
       ctx.shadowOffsetY = 0;
@@ -34781,7 +34898,8 @@ var element_pie_Pie = /*#__PURE__*/function () {
       ctx.shadowColor = color;
       ctx.beginPath();
       ctx.moveTo(this.centerX, this.centerY);
-      ctx.arc(this.centerX, this.centerY, this.radius, this.startAngle, this.endAngle);
+      ctx.arc(this.centerX, this.centerY, radius, this.startAngle, this.endAngle);
+      ctx.lineTo(this.centerX, this.centerY);
       ctx.fill();
       ctx.closePath();
       ctx.restore();
@@ -37813,12 +37931,27 @@ var plugins_interaction_modules = {
 
   /**
    *
-   * @param targetInfo
+   * @param targetInfo {object}  '{ dataIndex: number, seriesID: string }'
+   * @param chartType {string}  'bar', 'line', 'pie', 'scatter'
+   *
    * @returns {boolean}
    */
-  selectItemByData: function selectItemByData(targetInfo) {
+  selectItemByData: function selectItemByData(targetInfo, chartType) {
     this.defaultSelectInfo = targetInfo;
-    var foundInfo = this.getItem(targetInfo, false);
+    var foundInfo;
+
+    if (chartType === 'pie') {
+      foundInfo = {
+        type: 'pie',
+        sId: targetInfo.seriesID
+      };
+    } else {
+      if (isNaN(targetInfo === null || targetInfo === void 0 ? void 0 : targetInfo.dataIndex)) {
+        return false;
+      }
+
+      foundInfo = this.getItem(targetInfo, false);
+    }
 
     if (foundInfo) {
       this.render(foundInfo);
@@ -38282,7 +38415,7 @@ var plugins_tooltip_modules = {
       var series = _this2.seriesList[sId];
       series.itemHighlight(hitInfo.items[sId], ctx);
 
-      if (series.type === 'sunburst' || series.type === 'doughnut') {
+      if (helpers_util.isDoughnutHole(series.type)) {
         _this2.drawDoughnutHole(ctx);
       }
     });
@@ -38380,19 +38513,23 @@ var plugins_tooltip_modules = {
 /* harmony default export */ var plugins_tooltip = (plugins_tooltip_modules);
 // CONCATENATED MODULE: ./src/components/chart/plugins/plugins.pie.js
 
+
 var plugins_pie_modules = {
   pieDataSet: [],
 
   /**
    * Draw series data
    *
+   * @params hitInfo
+   *
    * @returns {undefined}
    */
-  drawPie: function drawPie() {
+  drawPie: function drawPie(hitInfo) {
     var ctx = this.bufferCtx;
     var chartRect = this.chartRect;
     var pieDataSet = this.pieDataSet;
     var pieOption = this.options;
+    var padding = this.options.padding;
     var isDoughnut = !!pieOption.doughnutHoleSize;
     var slice;
     var value;
@@ -38402,11 +38539,13 @@ var plugins_pie_modules = {
     var series;
     var centerX = chartRect.width / 2;
     var centerY = chartRect.height / 2;
-    var innerRadius = Math.min(centerX, centerY) * pieOption.doughnutHoleSize;
-    var outerRadius = Math.min(centerX, centerY);
+    var chartWidth = centerX - (padding.left + padding.right);
+    var chartHeight = centerY - (padding.bottom + padding.top);
+    var innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
+    var outerRadius = Math.min(chartWidth, chartHeight);
 
     for (var ix = 0; ix < pieDataSet.length; ix++) {
-      var _pieOption$pieStroke, _pieOption$pieStroke2;
+      var _pieOption$pieStroke;
 
       var pie = pieDataSet[ix];
 
@@ -38439,6 +38578,17 @@ var plugins_pie_modules = {
           series = this.seriesList[slice.id];
 
           if (value) {
+            var strokeOptions = _objectSpread2({}, pieOption.pieStroke);
+
+            if (pie.data.length === 1 && pieOption.pieStroke.use) {
+              strokeOptions.use = false;
+              ctx.lineWidth = pieOption.pieStroke.lineWidth;
+              ctx.strokeStyle = pieOption.pieStroke.color;
+              ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+              ctx.stroke();
+            }
+
+            series.isSelect = (hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.sId) === slice.id;
             series.type = isDoughnut ? 'doughnut' : 'pie';
             series.centerX = centerX;
             series.centerY = centerY;
@@ -38448,47 +38598,41 @@ var plugins_pie_modules = {
             series.data = {
               o: value
             };
-            series.draw(ctx);
+            series.draw(ctx, strokeOptions);
             startAngle += sliceAngle;
           }
         }
       }
-
-      ctx.beginPath();
-
-      if (pieOption !== null && pieOption !== void 0 && (_pieOption$pieStroke2 = pieOption.pieStroke) !== null && _pieOption$pieStroke2 !== void 0 && _pieOption$pieStroke2.use) {
-        ctx.lineWidth = pieOption.pieStroke.lineWidth;
-        ctx.strokeStyle = pieOption.pieStroke.color;
-        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-        ctx.stroke();
-      } else {
-        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-      }
-
-      ctx.closePath();
     }
   },
 
   /**
    * Draw series data
    *
+   * @params hitInfo
+   *
    * @returns {undefined}
    */
-  drawSunburst: function drawSunburst() {
+  drawSunburst: function drawSunburst(hitInfo) {
     var ctx = this.bufferCtx;
-    var chartRect = this.chartRect;
+    var _this$chartRect = this.chartRect,
+        width = _this$chartRect.width,
+        height = _this$chartRect.height;
     var pieDataSet = this.pieDataSet;
     var pieOption = this.options;
+    var padding = this.options.padding;
     this.calculateAngle();
     var slice;
     var series;
-    var centerX = chartRect.width / 2;
-    var centerY = chartRect.height / 2;
-    var innerRadius = Math.min(centerX, centerY) * pieOption.doughnutHoleSize;
-    var outerRadius = Math.min(centerX, centerY);
+    var centerX = width / 2;
+    var centerY = height / 2;
+    var chartWidth = centerX - (padding.left + padding.right);
+    var chartHeight = centerY - (padding.bottom + padding.top);
+    var innerRadius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
+    var outerRadius = Math.min(chartWidth, chartHeight);
 
     for (var ix = 0; ix < pieDataSet.length; ix++) {
-      var _pieOption$pieStroke3, _pieOption$pieStroke4;
+      var _pieOption$pieStroke2;
 
       var pie = pieDataSet[ix];
 
@@ -38498,7 +38642,7 @@ var plugins_pie_modules = {
 
       var radius = outerRadius - (outerRadius - innerRadius) / pieDataSet.length * ix;
 
-      if (pieOption !== null && pieOption !== void 0 && (_pieOption$pieStroke3 = pieOption.pieStroke) !== null && _pieOption$pieStroke3 !== void 0 && _pieOption$pieStroke3.use) {
+      if (pieOption !== null && pieOption !== void 0 && (_pieOption$pieStroke2 = pieOption.pieStroke) !== null && _pieOption$pieStroke2 !== void 0 && _pieOption$pieStroke2.use) {
         radius -= pieOption.pieStroke.lineWidth;
       }
 
@@ -38530,6 +38674,17 @@ var plugins_pie_modules = {
           series = this.seriesList[slice.id];
 
           if (slice.value) {
+            var strokeOptions = _objectSpread2({}, pieOption.pieStroke);
+
+            if (pie.data.length === 1 && pieOption.pieStroke.use) {
+              strokeOptions.use = false;
+              ctx.lineWidth = pieOption.pieStroke.lineWidth;
+              ctx.strokeStyle = pieOption.pieStroke.color;
+              ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+              ctx.stroke();
+            }
+
+            series.isSelect = (hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.sId) === slice.id;
             series.type = 'sunburst';
             series.centerX = centerX;
             series.centerY = centerY;
@@ -38539,23 +38694,10 @@ var plugins_pie_modules = {
             series.data = {
               o: slice.value
             };
-            series.draw(ctx);
+            series.draw(ctx, strokeOptions);
           }
         }
       }
-
-      ctx.beginPath();
-
-      if (pieOption !== null && pieOption !== void 0 && (_pieOption$pieStroke4 = pieOption.pieStroke) !== null && _pieOption$pieStroke4 !== void 0 && _pieOption$pieStroke4.use) {
-        ctx.lineWidth = pieOption.pieStroke.lineWidth;
-        ctx.strokeStyle = pieOption.pieStroke.color;
-        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-        ctx.stroke();
-      } else {
-        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
-      }
-
-      ctx.closePath();
     }
   },
 
@@ -38564,13 +38706,19 @@ var plugins_pie_modules = {
    * @param ctx
    */
   drawDoughnutHole: function drawDoughnutHole() {
-    var _pieOption$pieStroke5;
+    var _pieOption$pieStroke3;
 
     var ctx = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.bufferCtx;
     var pieOption = this.options;
-    var centerX = this.chartRect.width / 2;
-    var centerY = this.chartRect.height / 2;
-    var radius = Math.min(centerX, centerY) * pieOption.doughnutHoleSize;
+    var _this$chartRect2 = this.chartRect,
+        width = _this$chartRect2.width,
+        height = _this$chartRect2.height;
+    var padding = this.options.padding;
+    var centerX = width / 2;
+    var centerY = height / 2;
+    var chartWidth = centerX - (padding.left + padding.right);
+    var chartHeight = centerY - (padding.bottom + padding.top);
+    var radius = Math.min(chartWidth, chartHeight) * pieOption.doughnutHoleSize;
     ctx.save();
     ctx.globalCompositeOperation = 'destination-out';
     ctx.beginPath();
@@ -38583,18 +38731,15 @@ var plugins_pie_modules = {
     ctx.closePath();
     ctx.restore(); // inner stroke
 
-    ctx.beginPath();
-
-    if (pieOption !== null && pieOption !== void 0 && (_pieOption$pieStroke5 = pieOption.pieStroke) !== null && _pieOption$pieStroke5 !== void 0 && _pieOption$pieStroke5.use) {
+    if (pieOption !== null && pieOption !== void 0 && (_pieOption$pieStroke3 = pieOption.pieStroke) !== null && _pieOption$pieStroke3 !== void 0 && _pieOption$pieStroke3.use) {
+      ctx.beginPath();
       ctx.strokeStyle = pieOption.pieStroke.color;
       ctx.lineWidth = pieOption.pieStroke.lineWidth;
       ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
       ctx.stroke();
-    } else {
-      ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+      ctx.closePath();
     }
 
-    ctx.closePath();
     this.pieDataSet[this.pieDataSet.length - 1].ir = radius;
   }
 };
@@ -39059,6 +39204,7 @@ var element_tip_modules = {
 
 
 
+
 
 
 var chart_core_EvChart = /*#__PURE__*/function () {
@@ -39205,7 +39351,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       this.labelRange = this.getAxesLabelRange();
       this.axesSteps = this.calculateSteps();
       this.drawAxis(hitInfo);
-      this.drawSeries();
+      this.drawSeries(hitInfo);
       this.drawTip(hitInfo);
 
       if (this.bufferCanvas) {
@@ -39220,7 +39366,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
 
   }, {
     key: "drawSeries",
-    value: function drawSeries() {
+    value: function drawSeries(hitInfo) {
       var _this2 = this;
 
       var maxTip = this.options.maxTip;
@@ -39267,10 +39413,16 @@ var chart_core_EvChart = /*#__PURE__*/function () {
               showIndex++;
             }
           } else {
+            var _ref, _this$defaultSelectIn;
+
+            var selectInfo = (_ref = hitInfo !== null && hitInfo !== void 0 ? hitInfo : this.lastHitInfo) !== null && _ref !== void 0 ? _ref : {
+              sId: (_this$defaultSelectIn = this.defaultSelectInfo) === null || _this$defaultSelectIn === void 0 ? void 0 : _this$defaultSelectIn.seriesID
+            };
+
             if (this.options.sunburst) {
-              this.drawSunburst();
+              this.drawSunburst(selectInfo);
             } else {
-              this.drawPie();
+              this.drawPie(selectInfo);
             }
 
             if (this.options.doughnutHoleSize > 0) {
@@ -39290,6 +39442,10 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   }, {
     key: "drawTip",
     value: function drawTip(hitInfo) {
+      if (helpers_util.isPieType(hitInfo === null || hitInfo === void 0 ? void 0 : hitInfo.type)) {
+        return;
+      }
+
       var tipLocationInfo;
 
       if (hitInfo) {
@@ -40012,6 +40168,15 @@ var chart_uses_useModel = function useModel() {
       normalizedOptions.tooltip.use = false;
     }
 
+    if (options.type === 'pie' && !(options !== null && options !== void 0 && options.padding)) {
+      normalizedOptions.padding = {
+        top: 2,
+        right: 2,
+        left: 2,
+        bottom: 4
+      };
+    }
+
     return normalizedOptions;
   };
 
@@ -40254,9 +40419,14 @@ var uses_useWrapper = function useWrapper(options) {
               return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
                 return props.selectedItem;
               }, function (newValue) {
-                if (newValue !== null && newValue !== void 0 && newValue.seriesID && !isNaN(newValue === null || newValue === void 0 ? void 0 : newValue.dataIndex)) {
-                  evChart.selectItemByData(newValue);
+                var _props$options;
+
+                if (!(newValue !== null && newValue !== void 0 && newValue.seriesID)) {
+                  return;
                 }
+
+                var chartType = (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.type;
+                evChart.selectItemByData(newValue, chartType);
               }, {
                 deep: true
               });
@@ -40304,8 +40474,8 @@ var uses_useWrapper = function useWrapper(options) {
 });
 // 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=b79677b2&lang=scss
-var Chartvue_type_style_index_0_id_b79677b2_lang_scss = __webpack_require__("1951");
+// EXTERNAL MODULE: ./src/components/chart/Chart.vue?vue&type=style&index=0&id=3a821ae4&lang=scss
+var Chartvue_type_style_index_0_id_3a821ae4_lang_scss = __webpack_require__("71e7");
 
 // CONCATENATED MODULE: ./src/components/chart/Chart.vue
 
@@ -40313,7 +40483,7 @@ var Chartvue_type_style_index_0_id_b79677b2_lang_scss = __webpack_require__("195
 
 
 
-Chartvue_type_script_lang_js.render = Chartvue_type_template_id_b79677b2_render
+Chartvue_type_script_lang_js.render = Chartvue_type_template_id_3a821ae4_render
 
 /* harmony default export */ var Chart = (Chartvue_type_script_lang_js);
 // CONCATENATED MODULE: ./src/components/chart/index.js
@@ -40941,7 +41111,7 @@ var treeGrid_uses_commonFunctions = function commonFunctions(params) {
     checkHeader: checkHeader
   };
 };
-var uses_scrollEvent = function scrollEvent(params) {
+var treeGrid_uses_scrollEvent = function scrollEvent(params) {
   var scrollInfo = params.scrollInfo,
       stores = params.stores,
       elementInfo = params.elementInfo,
@@ -41961,7 +42131,7 @@ var treeGrid_uses_filterEvent = function filterEvent(params) {
       })
     });
 
-    var _scrollEvent = uses_scrollEvent({
+    var _scrollEvent = treeGrid_uses_scrollEvent({
       scrollInfo: scrollInfo,
       stores: stores,
       elementInfo: elementInfo,
@@ -42215,6 +42385,321 @@ TreeGrid.install = function (app) {
 };
 
 /* harmony default export */ var treeGrid = (TreeGrid);
+// 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/Pagination.vue?vue&type=template&id=fdc1bb26
+
+var Paginationvue_type_template_id_fdc1bb26_hoisted_1 = {
+  class: "pagination"
+};
+var Paginationvue_type_template_id_fdc1bb26_hoisted_2 = {
+  key: 0,
+  class: "pagination-info"
+};
+var Paginationvue_type_template_id_fdc1bb26_hoisted_3 = {
+  key: 0,
+  class: "pagination-ellipsis"
+};
+
+var Paginationvue_type_template_id_fdc1bb26_hoisted_4 = /*#__PURE__*/Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("span", null, "…", -1);
+
+function Paginationvue_type_template_id_fdc1bb26_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_ev_icon = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("ev-icon");
+
+  var _component_page_button = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["resolveComponent"])("page-button");
+
+  return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("nav", Paginationvue_type_template_id_fdc1bb26_hoisted_1, [$props.pageInfo ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("small", Paginationvue_type_template_id_fdc1bb26_hoisted_2, [$props.perPage === 1 ? (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"], {
+    key: 0
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.numberWithComma($setup.firstData)) + " / " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.numberWithComma($props.total)), 1)], 64)) : (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"], {
+    key: 1
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createTextVNode"])(Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.numberWithComma($setup.firstData)) + " - " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.numberWithComma(Math.min($setup.current * $props.perPage, $props.total))) + " / " + Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])($setup.numberWithComma($props.total)), 1)], 64))])) : Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createCommentVNode"])("", true), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("ul", {
+    class: "pagination-list",
+    style: $setup.listClasses
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("li", {
+    class: {
+      'is-disabled': !$setup.hasPrev
+    }
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_page_button, {
+    class: "pagination-previous",
+    disabled: !$setup.hasPrev,
+    page: $setup.getPage($setup.current - 1)
+  }, {
+    default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () {
+      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_icon, {
+        icon: "ev-icon-s-arrow-left"
+      })];
+    }),
+    _: 1
+  }, 8, ["disabled", "page"])], 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"])($setup.pagesInRange, function (page, i) {
+    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"], {
+      key: i
+    }, [page.number === -1 ? (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("li", Paginationvue_type_template_id_fdc1bb26_hoisted_3, [Paginationvue_type_template_id_fdc1bb26_hoisted_4])) : (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createBlock"])("li", {
+      key: 1,
+      class: {
+        'is-current': page.isCurrent,
+        'is-page': true
+      },
+      onClick: page.click
+    }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_page_button, {
+      page: page
+    }, null, 8, ["page"])], 10, ["onClick"]))], 64);
+  }), 128)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])("li", {
+    class: {
+      'is-disabled': !$setup.hasNext
+    }
+  }, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_page_button, {
+    class: "pagination-next",
+    disabled: !$setup.hasNext,
+    page: $setup.getPage($setup.current + 1)
+  }, {
+    default: Object(external_commonjs_vue_commonjs2_vue_root_Vue_["withCtx"])(function () {
+      return [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ev_icon, {
+        icon: "ev-icon-s-arrow-right"
+      })];
+    }),
+    _: 1
+  }, 8, ["disabled", "page"])], 2)], 4)]);
+}
+// CONCATENATED MODULE: ./src/components/pagination/Pagination.vue?vue&type=template&id=fdc1bb26
+
+// 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=9837f734
+
+
+function pageButtonvue_type_template_id_9837f734_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,
+    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);
+    }, ["prevent"]))
+  }), [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=9837f734
+
+// 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 = ({
+  name: 'PageButton',
+  props: {
+    page: {
+      type: Object,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  }
+});
+// CONCATENATED MODULE: ./src/components/pagination/pageButton.vue?vue&type=script&lang=js
+ 
+// CONCATENATED MODULE: ./src/components/pagination/pageButton.vue
+
+
+
+pageButtonvue_type_script_lang_js.render = pageButtonvue_type_template_id_9837f734_render
+
+/* harmony default export */ var pageButton = (pageButtonvue_type_script_lang_js);
+// 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
+
+
+
+
+
+
+
+
+/* harmony default export */ var Paginationvue_type_script_lang_js = ({
+  name: 'EvPagination',
+  components: {
+    EvIcon: Icon,
+    pageButton: pageButton
+  },
+  props: {
+    total: [Number, String],
+    visiblePage: [Number, String],
+    perPage: {
+      type: [Number, String],
+      default: 20
+    },
+    modelValue: {
+      type: [Number, String],
+      default: 1
+    },
+    size: String,
+    pageInfo: Boolean,
+    order: {
+      type: String,
+      default: 'left',
+      validator: function validator(val) {
+        return ['left', 'right', 'center'].includes(val);
+      }
+    }
+  },
+  emits: {
+    'update:modelValue': null,
+    change: null
+  },
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var visiblePage = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return props.visiblePage || 8;
+    });
+    var current = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return props.modelValue;
+    });
+    var pageCount = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return Math.ceil(props.total / props.perPage);
+    });
+    var hasPrev = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return current.value > 1;
+    });
+    var hasNext = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return current.value < pageCount.value;
+    });
+    var firstData = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      var item = current.value * props.perPage - props.perPage + 1;
+      return item >= 0 ? item : 0;
+    });
+
+    var changePage = function changePage(num, event) {
+      if (current.value === num || num < 1 || num > pageCount.value) return;
+      emit('update:modelValue', num);
+      emit('change', num);
+
+      if (event && event.target) {
+        Object(external_commonjs_vue_commonjs2_vue_root_Vue_["nextTick"])(function () {
+          return event.target.focus();
+        });
+      }
+    };
+
+    var getPage = function getPage(num) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return {
+        number: num,
+        isCurrent: current.value === num,
+        click: function click(event) {
+          return changePage(num, event);
+        },
+        input: function input(event, inputNum) {
+          return changePage(+inputNum, event);
+        },
+        disabled: options.disabled || false,
+        class: options.class || ''
+      };
+    };
+
+    var onRange = function onRange(from, to) {
+      var range = [];
+      var f = from > 0 ? from : 1;
+
+      for (var i = f; i <= to; i++) {
+        range.push(getPage(i));
+      }
+
+      return range;
+    };
+
+    var pagesInRange = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      var totalVisible = parseInt(visiblePage.value, 10);
+
+      if (totalVisible === 0) {
+        return [];
+      }
+
+      var maxLength = Math.min(Math.max(0, totalVisible) || pageCount.value, pageCount.value);
+
+      if (pageCount.value <= maxLength) {
+        return onRange(1, pageCount.value);
+      }
+
+      var even = maxLength % 2 === 0 ? 1 : 0;
+      var left = Math.floor(maxLength / 2);
+      var right = pageCount.value - left + 1 + even;
+
+      if (current.value > left && current.value < right) {
+        var firstItem = 1;
+        var lastItem = pageCount.value;
+        var start = current.value - left + 2;
+        var end = current.value + left - 2 - even;
+        var secondItem = start - 1 === firstItem + 1 ? 2 : -1;
+        var beforeLastItem = end + 1 === lastItem - 1 ? end + 1 : -1;
+        return [getPage(1), getPage(secondItem)].concat(_toConsumableArray(onRange(start, end)), [getPage(beforeLastItem), getPage(pageCount.value)]);
+      } else if (current.value === left) {
+        var _end = current.value + left - 1 - even;
+
+        return [].concat(_toConsumableArray(onRange(1, _end)), [getPage(-1), getPage(pageCount.value)]);
+      } else if (current.value === right) {
+        var _start = current.value - left + 1;
+
+        return [getPage(1), getPage(-1)].concat(_toConsumableArray(onRange(_start, pageCount.value)));
+      }
+
+      return [].concat(_toConsumableArray(onRange(1, left)), [getPage(-1)], _toConsumableArray(onRange(right, pageCount.value)));
+    });
+    var listClasses = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () {
+      return {
+        'justify-content': props.order,
+        flex: '3 1 0%'
+      };
+    });
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+      return pageCount.value;
+    }, function (value) {
+      if (current.value > value) {
+        changePage(1);
+      }
+    });
+    Object(external_commonjs_vue_commonjs2_vue_root_Vue_["watch"])(function () {
+      return current.value;
+    }, function (after, before) {
+      if (pageCount.value < after) {
+        changePage(before);
+      }
+    });
+    return {
+      pageCount: pageCount,
+      pagesInRange: pagesInRange,
+      hasPrev: hasPrev,
+      hasNext: hasNext,
+      listClasses: listClasses,
+      firstData: firstData,
+      current: current,
+      changePage: changePage,
+      getPage: getPage,
+      numberWithComma: numberWithComma
+    };
+  }
+});
+// CONCATENATED MODULE: ./src/components/pagination/Pagination.vue?vue&type=script&lang=js
+ 
+// EXTERNAL MODULE: ./src/components/pagination/Pagination.vue?vue&type=style&index=0&id=fdc1bb26&lang=scss
+var Paginationvue_type_style_index_0_id_fdc1bb26_lang_scss = __webpack_require__("ecfb");
+
+// CONCATENATED MODULE: ./src/components/pagination/Pagination.vue
+
+
+
+
+
+Paginationvue_type_script_lang_js.render = Paginationvue_type_template_id_fdc1bb26_render
+
+/* harmony default export */ var Pagination = (Paginationvue_type_script_lang_js);
+// CONCATENATED MODULE: ./src/components/pagination/index.js
+
+
+
+Pagination.install = function (app) {
+  app.component(Pagination.name, Pagination);
+};
+
+/* harmony default export */ var pagination = (Pagination);
 // EXTERNAL MODULE: ./package.json
 var package_0 = __webpack_require__("9224");
 
@@ -42252,7 +42737,8 @@ 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];
+
+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 install = function install(app) {
   if (!app) {