evui 3.3.3 → 3.3.4

package/dist/evui.common.js

@@ -672,6 +672,17 @@ module.exports = (!STRICT_METHOD || !USES_TO_LENGTH) ? function forEach(callback
 } : [].forEach;
 
 
+/***/ }),
+
+/***/ "1951":
+/***/ (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_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 * */
+
+
 /***/ }),
 
 /***/ "196e":
@@ -4640,6 +4651,20 @@ 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":
@@ -4837,20 +4862,6 @@ function stubFalse() {
 /* harmony default export */ __webpack_exports__["a"] = (stubFalse);
 
 
-/***/ }),
-
-/***/ "303a":
-/***/ (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;
-
-
 /***/ }),
 
 /***/ "339f":
@@ -6188,6 +6199,21 @@ 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__) {
 
@@ -7827,7 +7853,7 @@ $({ target: 'Number', stat: true }, {
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.3.3\"}");
+module.exports = JSON.parse("{\"a\":\"3.3.4\"}");
 
 /***/ }),
 
@@ -8843,17 +8869,6 @@ module.exports = exports;
 /* unused harmony reexport * */
 
 
-/***/ }),
-
-/***/ "9b0c":
-/***/ (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_7ab5ccc0_lang_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("dcda");
-/* 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_7ab5ccc0_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_7ab5ccc0_lang_scss__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "9bdd":
@@ -10963,21 +10978,6 @@ $({ target: 'Object', stat: true, sham: !DESCRIPTORS }, {
 });
 
 
-/***/ }),
-
-/***/ "dcda":
-/***/ (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__("303a");
-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("36567385", content, true, {"sourceMap":false,"shadowMode":false});
-
 /***/ }),
 
 /***/ "dd40":
@@ -29545,9 +29545,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=7ab5ccc0
+// 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
 
-function Chartvue_type_template_id_7ab5ccc0_render(_ctx, _cache, $props, $setup, $data, $options) {
+function Chartvue_type_template_id_b79677b2_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", {
@@ -29556,7 +29556,7 @@ function Chartvue_type_template_id_7ab5ccc0_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=7ab5ccc0
+// CONCATENATED MODULE: ./src/components/chart/Chart.vue?vue&type=template&id=b79677b2
 
 // CONCATENATED MODULE: ./node_modules/lodash-es/_arrayEach.js
 /**
@@ -30873,7 +30873,6 @@ function reverse(array) {
 
 
 
-
 var modules = {
   /**
    * Take chart data and labels to create normalized data and min/max info
@@ -31368,42 +31367,16 @@ var modules = {
   },
 
   /**
-   * Get graph item by label index
-   * @param {number} pos  label index position
-   *
-   * @returns {object} graph item
-   */
-  getItemByLabelIndex: function getItemByLabelIndex(pos) {
-    if (pos < 0) {
-      return false;
-    }
-
-    return this.getItem(pos);
-  },
-
-  /**
-   * Get graph item by label
-   * @param {any} label  label value for searching graph item
+   * Get graph items for each series by label index
+   * @param {number} labelIndex  label index
    *
    * @returns {object} graph item
    */
-  getItemByLabel: function getItemByLabel(label) {
-    if (label === null || label === undefined) {
+  getItemByLabelIndex: function getItemByLabelIndex(labelIndex) {
+    if (labelIndex < 0) {
       return false;
     }
 
-    var labels = this.data.labels;
-    var labelIndex = labels && labels.indexOf ? labels.indexOf(label) : -1;
-    return this.getItem(labelIndex);
-  },
-
-  /**
-   * Get graph items for each series by label index
-   * @param {number} labelIndex  label index
-   *
-   * @returns {object} graph item
-   */
-  getItem: function getItem(labelIndex) {
     var sIds = Object.keys(this.seriesList);
     var isHorizontal = !!this.options.horizontal;
     var maxl = null;
@@ -31457,6 +31430,95 @@ var modules = {
 
     return findInfo;
   },
+  getItem: function getItem(_ref) {
+    var seriesID = _ref.seriesID,
+        dataIndex = _ref.dataIndex;
+    var useApproximate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var dataInfo = this.getDataByValues(seriesID, dataIndex);
+    return this.getItemByPosition([dataInfo.xp, dataInfo.yp], useApproximate);
+  },
+
+  /**
+   *
+   * @param seriesID
+   * @param dataIndex
+   * @returns {*}
+   */
+  getDataByValues: function getDataByValues(seriesID, dataIndex) {
+    var series = this.seriesList[seriesID];
+
+    if (!series || isNaN(dataIndex) || dataIndex < 0 || (series === null || series === void 0 ? void 0 : series.data.length) <= dataIndex) {
+      return false;
+    }
+
+    return series.data[dataIndex];
+  },
+
+  /**
+   * Find graph item by position x and y
+   * @param {array}   offset          position x and y
+   * @param {boolean} useApproximate  if it's true. it'll look for closed item on mouse position
+   *
+   * @returns {object} clicked item information
+   */
+  getItemByPosition: function getItemByPosition(offset) {
+    var useApproximate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var sIds = Object.keys(this.seriesList);
+    var isHorizontal = !!this.options.horizontal;
+    var maxl = null;
+    var maxp = null;
+    var maxg = null;
+    var maxSID = '';
+    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];
+      var findFn = useApproximate ? series.findApproximateData : series.findGraphData;
+
+      if (findFn) {
+        var item = findFn.call(series, offset, isHorizontal);
+        var data = item.data;
+        var index = item.index;
+
+        if (data) {
+          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 (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;
+            }
+          }
+        }
+      }
+    }
+
+    return {
+      label: maxl,
+      pos: maxp,
+      value: maxg === null ? 0 : maxg,
+      sId: maxSID,
+      acc: acc,
+      useStack: useStack,
+      maxIndex: maxIndex
+    };
+  },
 
   /**
    * Create min/max information for all of data
@@ -37356,7 +37418,7 @@ var plugins_interaction_modules = {
       if (selectItem.use) {
         var offset = _this.getMousePosition(e);
 
-        var hitInfo = _this.findClickedData(offset, selectItem.useApproximateValue);
+        var hitInfo = _this.getItemByPosition(offset, selectItem.useApproximateValue);
 
         if (hitInfo.label !== null) {
           _this.render(hitInfo);
@@ -37386,7 +37448,7 @@ var plugins_interaction_modules = {
       if (_this.options.selectItem.use) {
         var offset = _this.getMousePosition(e);
 
-        var hitInfo = _this.findClickedData(offset);
+        var hitInfo = _this.getItemByPosition(offset, false);
 
         if (hitInfo.label !== null) {
           _this.render(hitInfo);
@@ -37395,6 +37457,7 @@ var plugins_interaction_modules = {
         args.label = hitInfo.label;
         args.value = hitInfo.value;
         args.seriesId = hitInfo.sId;
+        args.dataIndex = hitInfo.maxIndex;
       }
 
       if (typeof _this.listeners.click === 'function') {
@@ -37685,129 +37748,21 @@ var plugins_interaction_modules = {
   },
 
   /**
-   * Find clicked graph item on mouse position
-   * @param {array}   offset          return value from getMousePosition()
-   * @param {boolean} useApproximate  if it's true. it'll look for closed item on mouse position
-   *
-   * @returns {object} clicked item information
-   */
-  findClickedData: function findClickedData(offset, useApproximate) {
-    var sIds = Object.keys(this.seriesList);
-    var isHorizontal = !!this.options.horizontal;
-    var maxl = null;
-    var maxp = null;
-    var maxg = null;
-    var maxSID = '';
-    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];
-      var findFn = useApproximate ? series.findApproximateData : series.findGraphData;
-
-      if (findFn) {
-        var item = findFn.call(series, offset, isHorizontal);
-        var data = item.data;
-        var index = item.index;
-
-        if (data) {
-          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 (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;
-            }
-          }
-        }
-      }
-    }
-
-    return {
-      label: maxl,
-      pos: maxp,
-      value: maxg === null ? 0 : maxg,
-      sId: maxSID,
-      acc: acc,
-      useStack: useStack,
-      maxIndex: maxIndex
-    };
-  },
-
-  /**
-   * Find graph item by label entered from user
-   * @param {any} label   label value
    *
-   * @returns {boolean} if it wasn't able to find it, return false. if not, return true and render.
+   * @param targetInfo
+   * @returns {boolean}
    */
-  selectItemByLabel: function selectItemByLabel(label) {
-    var findInfo = this.getItemByLabel(label);
+  selectItemByData: function selectItemByData(targetInfo) {
+    var foundInfo = this.getItem(targetInfo, false);
 
-    if (findInfo) {
-      this.render(findInfo);
+    if (foundInfo) {
+      this.render(foundInfo);
     } else {
       return false;
     }
 
     return true;
   },
-  findHitItem2: function findHitItem2(offset) {
-    var mouseX = offset[0];
-    var mouseY = offset[1];
-    var width = this.chartRect.chartWidth;
-    var height = this.chartRect.chartHeight;
-    var centerX = width / 2 + this.chartRect.padding.left;
-    var centerY = height / 2 + this.chartRect.padding.top;
-    var dx = mouseX - centerX;
-    var dy = mouseY - centerY;
-    var angle;
-    angle = Math.atan2(-dy, -dx) * 180 / Math.PI - 90;
-    angle = angle < 0 ? 360 + angle : angle;
-    var rad = angle * Math.PI / 180 + 1.5 * Math.PI;
-    var distance = Math.round(Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)));
-    var graphData = this.graphData;
-    var gdata;
-    var dsIndex = null;
-    var sId = null;
-
-    for (var ix = 0, ixLen = graphData.length; ix < ixLen; ix++) {
-      gdata = graphData[ix];
-
-      if (distance > gdata.ir && distance < gdata.or) {
-        dsIndex = ix;
-      }
-    }
-
-    if (graphData[dsIndex]) {
-      for (var _ix = 0, _ixLen = graphData[dsIndex].data.length; _ix < _ixLen; _ix++) {
-        gdata = graphData[dsIndex].data[_ix];
-
-        if (rad > gdata.sa && rad < gdata.ea) {
-          sId = gdata.id;
-        }
-      }
-    }
-
-    return {
-      dsIndex: dsIndex,
-      sId: sId
-    };
-  },
 
   /**
    * Find items by series within a range
@@ -38568,24 +38523,21 @@ var plugins_pie_modules = {
 
 var element_tip_modules = {
   /**
-   * Draw TextTip with hitInfo
-   * @param {object} [hitInfo=undefined]    mouse hit information
+   * Draw TextTip with tip's locationInfo
+   * @param {object} [tipLocationInfo=undefined]   tip location information
    *
    * @returns {undefined}
    */
-  drawTip: function drawTip(hitInfo) {
+  drawTips: function drawTips(tipLocationInfo) {
     var opt = this.options;
     var isHorizontal = !!opt.horizontal;
     var maxTipOpt = opt.maxTip;
     var selectItemOpt = opt.selectItem;
+    var maxArgs;
 
-    if (maxTipOpt.use || selectItemOpt.use) {
-      var _ref, _this$lastHitInfo;
-
+    if (maxTipOpt.use) {
       var maxSID = this.minMax[isHorizontal ? 'x' : 'y'][0].maxSID;
-      var selSID = (_ref = hitInfo && hitInfo.sId ? hitInfo.sId : (_this$lastHitInfo = this.lastHitInfo) === null || _this$lastHitInfo === void 0 ? void 0 : _this$lastHitInfo.sId) !== null && _ref !== void 0 ? _ref : maxSID;
-      var maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
-      var selArgs = this.calculateTipInfo(this.seriesList[selSID], 'sel', hitInfo);
+      maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
 
       if (maxTipOpt.use && maxArgs) {
         this.drawTextTip(_objectSpread2({
@@ -38599,11 +38551,23 @@ var element_tip_modules = {
           }, maxArgs));
         }
       }
+    }
+
+    if (selectItemOpt.use && tipLocationInfo) {
+      var seriesInfo = this.seriesList[tipLocationInfo === null || tipLocationInfo === void 0 ? void 0 : tipLocationInfo.sId];
+
+      if (!(seriesInfo !== null && seriesInfo !== void 0 && seriesInfo.show)) {
+        return;
+      }
+
+      var selArgs = this.calculateTipInfo(seriesInfo, 'sel', tipLocationInfo);
 
       if (selectItemOpt.use && selArgs) {
+        var _maxArgs;
+
         var isSamePos = false;
 
-        if (maxTipOpt.use && maxArgs && maxArgs.dp === selArgs.dp) {
+        if (maxTipOpt.use && ((_maxArgs = maxArgs) === null || _maxArgs === void 0 ? void 0 : _maxArgs.dp) === selArgs.dp) {
           isSamePos = true;
         }
 
@@ -38622,8 +38586,8 @@ var element_tip_modules = {
         }
       }
 
-      if (hitInfo && hitInfo.label !== null) {
-        this.lastHitInfo = hitInfo;
+      if (tipLocationInfo && tipLocationInfo.label !== null) {
+        this.lastHitInfo = tipLocationInfo;
       }
     }
   },
@@ -38999,7 +38963,7 @@ var element_tip_modules = {
 
 
 var chart_core_EvChart = /*#__PURE__*/function () {
-  function EvChart(target, data, options, listeners) {
+  function EvChart(target, data, options, listeners, defaultSelectInfo) {
     var _this = this;
 
     _classCallCheck(this, EvChart);
@@ -39056,6 +39020,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
       },
       count: 0
     };
+    this.defaultSelectInfo = defaultSelectInfo;
   }
   /**
    * Initialize chart object
@@ -39218,6 +39183,28 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         }
       }
     }
+    /**
+     * Draw Tip with hitInfo and defaultSelectInfo
+     * @param hitInfo
+     */
+
+  }, {
+    key: "drawTip",
+    value: function drawTip(hitInfo) {
+      var tipLocationInfo;
+
+      if (hitInfo) {
+        tipLocationInfo = hitInfo;
+      } else if (this.lastHitInfo) {
+        tipLocationInfo = this.lastHitInfo;
+      } else if (this.defaultSelectInfo) {
+        tipLocationInfo = this.getItem(this.defaultSelectInfo, false);
+      } else {
+        tipLocationInfo = null;
+      }
+
+      this.drawTips(tipLocationInfo);
+    }
     /**
      * Create axes
      * @param {string} dir    axis direction
@@ -39604,6 +39591,7 @@ var chart_core_EvChart = /*#__PURE__*/function () {
         if (!updateSelTip.keepDomain) {
           this.lastTip.pos = null;
           this.lastHitInfo = null;
+          this.defaultSelectInfo = null;
         }
       }
 
@@ -39913,6 +39901,7 @@ var DEFAULT_DATA = {
 };
 var chart_uses_useModel = function useModel() {
   var _getCurrentInstance = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
+      props = _getCurrentInstance.props,
       emit = _getCurrentInstance.emit;
 
   var getNormalizedOptions = function getNormalizedOptions(options) {
@@ -39929,6 +39918,7 @@ var chart_uses_useModel = function useModel() {
     return lodash_es_defaultsDeep(data, DEFAULT_DATA);
   };
 
+  var selectInfo = lodash_es_cloneDeep(props.selectedItem);
   var eventListeners = {
     click: function () {
       var _click = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(e) {
@@ -39940,9 +39930,16 @@ var chart_uses_useModel = function useModel() {
                 return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["nextTick"])();
 
               case 2:
+                if (e.label) {
+                  emit('update:selectedItem', {
+                    seriesID: e.seriesId,
+                    dataIndex: e.dataIndex
+                  });
+                }
+
                 emit('click', e);
 
-              case 3:
+              case 4:
               case "end":
                 return _context.stop();
             }
@@ -40011,6 +40008,7 @@ var chart_uses_useModel = function useModel() {
   };
   return {
     eventListeners: eventListeners,
+    selectInfo: selectInfo,
     getNormalizedData: getNormalizedData,
     getNormalizedOptions: getNormalizedOptions
   };
@@ -40051,6 +40049,10 @@ var uses_useWrapper = function useWrapper(options) {
 /* harmony default export */ var Chartvue_type_script_lang_js = ({
   name: 'EvChart',
   props: {
+    selectedItem: {
+      type: Object,
+      default: null
+    },
     options: {
       type: Object,
       default: function _default() {
@@ -40068,13 +40070,14 @@ var uses_useWrapper = function useWrapper(options) {
       default: 0
     }
   },
-  emits: ['click', 'dbl-click', 'drag-select'],
+  emits: ['click', 'dbl-click', 'drag-select', 'update:selectedItem'],
   setup: function setup(props) {
     var evChart = {};
     var isInit = false;
 
     var _useModel = chart_uses_useModel(),
         eventListeners = _useModel.eventListeners,
+        selectInfo = _useModel.selectInfo,
         getNormalizedData = _useModel.getNormalizedData,
         getNormalizedOptions = _useModel.getNormalizedOptions;
 
@@ -40086,7 +40089,7 @@ var uses_useWrapper = function useWrapper(options) {
         wrapperStyle = _useWrapper.wrapperStyle;
 
     var createChart = function createChart() {
-      evChart = new chart_core(wrapper.value, normalizedData, normalizedOptions, eventListeners);
+      evChart = new chart_core(wrapper.value, normalizedData, normalizedOptions, eventListeners, selectInfo);
     };
 
     var drawChart = function drawChart() {
@@ -40146,6 +40149,18 @@ var uses_useWrapper = function useWrapper(options) {
               });
 
             case 8:
+              _context.next = 10;
+              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);
+                }
+              }, {
+                deep: true
+              });
+
+            case 10:
             case "end":
               return _context.stop();
           }
@@ -40178,24 +40193,18 @@ var uses_useWrapper = function useWrapper(options) {
         evChart.resize();
       }
     }, props.resizeTimeout);
-
-    var selectItemByLabel = function selectItemByLabel(label) {
-      evChart.selectItemByLabel(label);
-    };
-
     return {
       wrapper: wrapper,
       wrapperStyle: wrapperStyle,
       onResize: onResize,
-      redraw: redraw,
-      selectItemByLabel: selectItemByLabel
+      redraw: redraw
     };
   }
 });
 // 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=7ab5ccc0&lang=scss
-var Chartvue_type_style_index_0_id_7ab5ccc0_lang_scss = __webpack_require__("9b0c");
+// 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");
 
 // CONCATENATED MODULE: ./src/components/chart/Chart.vue
 
@@ -40203,7 +40212,7 @@ var Chartvue_type_style_index_0_id_7ab5ccc0_lang_scss = __webpack_require__("9b0
 
 
 
-Chartvue_type_script_lang_js.render = Chartvue_type_template_id_7ab5ccc0_render
+Chartvue_type_script_lang_js.render = Chartvue_type_template_id_b79677b2_render
 
 /* harmony default export */ var Chart = (Chartvue_type_script_lang_js);
 // CONCATENATED MODULE: ./src/components/chart/index.js
@@ -40713,6 +40722,7 @@ var treeGrid_uses_this = undefined;
 
 
 
+
 var treeGrid_uses_commonFunctions = function commonFunctions() {
   var _getCurrentInstance = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["getCurrentInstance"])(),
       props = _getCurrentInstance.props;
@@ -41486,6 +41496,7 @@ var uses_treeEvent = function treeEvent(params) {
 
         if (node.children) {
           node.hasChild = true;
+          node.children = lodash_es_cloneDeep(node.children);
           node.children.forEach(function (child) {
             return setNodeData({
               node: child,