update dist and lib

update version to 2.9.2
update change log
2020-06-16 14:49:59 +08:00 · 2020-06-16 14:49:32 +08:00 · 2020-06-16 14:49:11 +08:00 · 2020-06-16 14:48:16 +08:00 · 2020-06-16 14:34:36 +08:00 · 2020-06-16 14:34:30 +08:00
40 changed files with 439 additions and 222 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,32 @@
+# 2.9.2-alpha (2020-06-16)
+
+### Bug Fixes
+
+- **scrollBoard:** reset animationIndex when config upate.
+
+# 2.9.1-alpha (2020-06-16)
+
+### Bug Fixes
+
+- **scrollRankingBoard:** Calculation optimization of negative values. [(#101)](https://github.com/DataV-Team/DataV/pull/101).
+
+### Perfect
+
+- **digitalFlop:** add number formatter.
+
+# 2.9.0-alpha (2020-06-10)
+
+### ScrollBoard
+
+- **hoverPause:** add `hoverPause` configuration [(#96)](https://github.com/DataV-Team/DataV/pull/96).
+- **mouseover:** add `mouseover` event [(#96)](https://github.com/DataV-Team/DataV/pull/96).
+
+# 2.8.4-alpha (2020-05-25)
+
+### Perfect
+
+- **uuid:** Use uuid to produce unique id.
+
 # 2.8.3-alpha (2020-05-06)

 ### Perfect
--- a/dist/datav.map.vue.js
+++ b/dist/datav.map.vue.js
@ -38,6 +38,13 @@
    const minusY = Math.abs(pointOne[1] - pointTwo[1]);
    return Math.sqrt(minusX * minusX + minusY * minusY);
  }
+  function uuid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      const r = Math.random() * 16 | 0;
+      const v = c == 'x' ? r : r & 0x3 | 0x8;
+      return v.toString(16);
+    });
+  }

  var autoResize = {
    data() {
@ -349,7 +356,7 @@
    

    
-    const __vue_component__ = normalizeComponent(
+    const __vue_component__ = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
      __vue_inject_styles__,
      __vue_script__,
@ -538,7 +545,7 @@
    

    
-    const __vue_component__$1 = normalizeComponent(
+    const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
      __vue_inject_styles__$1,
      __vue_script__$1,
@ -1585,7 +1592,7 @@
    

    
-    const __vue_component__$2 = normalizeComponent(
+    const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
      __vue_inject_styles__$2,
      __vue_script__$2,
@ -1775,7 +1782,7 @@
    

    
-    const __vue_component__$3 = normalizeComponent(
+    const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
      __vue_inject_styles__$3,
      __vue_script__$3,
@ -1970,7 +1977,7 @@
    

    
-    const __vue_component__$4 = normalizeComponent(
+    const __vue_component__$4 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
      __vue_inject_styles__$4,
      __vue_script__$4,
@ -2188,7 +2195,7 @@
    

    
-    const __vue_component__$5 = normalizeComponent(
+    const __vue_component__$5 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
      __vue_inject_styles__$5,
      __vue_script__$5,
@ -2409,7 +2416,7 @@
    

    
-    const __vue_component__$6 = normalizeComponent(
+    const __vue_component__$6 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
      __vue_inject_styles__$6,
      __vue_script__$6,
@ -2673,7 +2680,7 @@
    

    
-    const __vue_component__$7 = normalizeComponent(
+    const __vue_component__$7 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
      __vue_inject_styles__$7,
      __vue_script__$7,
@ -2906,7 +2913,7 @@
    

    
-    const __vue_component__$8 = normalizeComponent(
+    const __vue_component__$8 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
      __vue_inject_styles__$8,
      __vue_script__$8,
@ -2947,12 +2954,12 @@
    },

    data() {
-      const timestamp = Date.now();
+      const id = uuid();
      return {
        ref: 'border-box-8',
-        path: `border-box-8-path-${timestamp}`,
-        gradient: `border-box-8-gradient-${timestamp}`,
-        mask: `border-box-8-mask-${timestamp}`,
+        path: `border-box-8-path-${id}`,
+        gradient: `border-box-8-gradient-${id}`,
+        mask: `border-box-8-mask-${id}`,
        defaultColor: ['#235fa7', '#4fd2dd'],
        mergedColor: []
      };
@ -3138,7 +3145,7 @@
    /* style */
    const __vue_inject_styles__$9 = function (inject) {
      if (!inject) return
-      inject("data-v-5da1054e_0", { source: ".dv-border-box-8 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-8 svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-8 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-8 svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });
+      inject("data-v-5e705490_0", { source: ".dv-border-box-8 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-8 svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-8 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-8 svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-8 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -3153,7 +3160,7 @@
    

    
-    const __vue_component__$9 = normalizeComponent(
+    const __vue_component__$9 = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
      __vue_inject_styles__$9,
      __vue_script__$9,
@ -3186,11 +3193,11 @@
    },

    data() {
-      const timestamp = Date.now();
+      const id = uuid();
      return {
        ref: 'border-box-9',
-        gradientId: `border-box-9-gradient-${timestamp}`,
-        maskId: `border-box-9-mask-${timestamp}`,
+        gradientId: `border-box-9-gradient-${id}`,
+        maskId: `border-box-9-mask-${id}`,
        defaultColor: ['#11eefd', '#0078d2'],
        mergedColor: []
      };
@ -3581,7 +3588,7 @@
    /* style */
    const __vue_inject_styles__$a = function (inject) {
      if (!inject) return
-      inject("data-v-4b1d3fb1_0", { source: ".dv-border-box-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-9 svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-9 svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });
+      inject("data-v-50673f47_0", { source: ".dv-border-box-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-9 svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,QAAQ;AACV;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-9 svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0px;\n  top: 0px;\n}\n.dv-border-box-9 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -3596,7 +3603,7 @@
    

    
-    const __vue_component__$a = normalizeComponent(
+    const __vue_component__$a = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
      __vue_inject_styles__$a,
      __vue_script__$a,
@ -3760,7 +3767,7 @@
    

    
-    const __vue_component__$b = normalizeComponent(
+    const __vue_component__$b = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
      __vue_inject_styles__$b,
      __vue_script__$b,
@ -4126,10 +4133,10 @@
    },

    data() {
-      const timestamp = Date.now();
+      const id = uuid();
      return {
        ref: 'border-box-11',
-        filterId: `border-box-11-filterId-${timestamp}`,
+        filterId: `border-box-11-filterId-${id}`,
        defaultColor: ['#8aaafb', '#1f33a2'],
        mergedColor: []
      };
@ -4651,7 +4658,7 @@
    /* style */
    const __vue_inject_styles__$c = function (inject) {
      if (!inject) return
-      inject("data-v-712ebc91_0", { source: ".dv-border-box-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;EACV,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });
+      inject("data-v-640dce48_0", { source: ".dv-border-box-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,UAAU;EACV,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-11 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-11 .dv-border-svg-container polyline {\n  fill: none;\n  stroke-width: 1;\n}\n.dv-border-box-11 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -4666,7 +4673,7 @@
    

    
-    const __vue_component__$c = normalizeComponent(
+    const __vue_component__$c = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
      __vue_inject_styles__$c,
      __vue_script__$c,
@ -4699,10 +4706,10 @@
    },

    data() {
-      const timestamp = +new Date();
+      const id = uuid();
      return {
        ref: 'border-box-12',
-        filterId: `borderr-box-12-filterId-${timestamp}`,
+        filterId: `borderr-box-12-filterId-${id}`,
        defaultColor: ['#2e6099', '#7ce7fd'],
        mergedColor: []
      };
@ -4977,7 +4984,7 @@
    /* style */
    const __vue_inject_styles__$d = function (inject) {
      if (!inject) return
-      inject("data-v-691fa84a_0", { source: ".dv-border-box-12 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-12 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });
+      inject("data-v-40c58fd4_0", { source: ".dv-border-box-12 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-12 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-12 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-12 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -4992,7 +4999,7 @@
    

    
-    const __vue_component__$d = normalizeComponent(
+    const __vue_component__$d = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
      __vue_inject_styles__$d,
      __vue_script__$d,
@ -5148,7 +5155,7 @@
    /* style */
    const __vue_inject_styles__$e = function (inject) {
      if (!inject) return
-      inject("data-v-77fbe0b5_0", { source: ".dv-border-box-13 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-13 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });
+      inject("data-v-6c30a53b_0", { source: ".dv-border-box-13 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-border-box-13 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-border-box-13 .dv-border-svg-container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-border-box-13 .border-box-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -5163,7 +5170,7 @@
    

    
-    const __vue_component__$e = normalizeComponent(
+    const __vue_component__$e = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$e, staticRenderFns: __vue_staticRenderFns__$e },
      __vue_inject_styles__$e,
      __vue_script__$e,
@ -5467,7 +5474,7 @@
    

    
-    const __vue_component__$f = normalizeComponent(
+    const __vue_component__$f = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$f, staticRenderFns: __vue_staticRenderFns__$f },
      __vue_inject_styles__$f,
      __vue_script__$f,
@ -5672,7 +5679,7 @@
    

    
-    const __vue_component__$g = normalizeComponent(
+    const __vue_component__$g = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$g, staticRenderFns: __vue_staticRenderFns__$g },
      __vue_inject_styles__$g,
      __vue_script__$g,
@ -5864,7 +5871,7 @@
    

    
-    const __vue_component__$h = normalizeComponent(
+    const __vue_component__$h = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$h, staticRenderFns: __vue_staticRenderFns__$h },
      __vue_inject_styles__$h,
      __vue_script__$h,
@ -5993,7 +6000,7 @@
    /* style */
    const __vue_inject_styles__$i = function (inject) {
      if (!inject) return
-      inject("data-v-41fd2a74_0", { source: ".dv-decoration-4 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-4 .container {\n  display: flex;\n  overflow: hidden;\n  position: absolute;\n}\n.dv-decoration-4 .normal {\n  height: 0% !important;\n  animation: ani-height 3s ease-in-out infinite;\n  left: 50%;\n  margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n  width: 0% !important;\n  animation: ani-width 3s ease-in-out infinite;\n  top: 50%;\n  margin-top: -2px;\n}\n@keyframes ani-height {\n70% {\n    height: 100%;\n}\n100% {\n    height: 100%;\n}\n}\n@keyframes ani-width {\n70% {\n    width: 100%;\n}\n100% {\n    width: 100%;\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,aAAa;EACb,gBAAgB;EAChB,kBAAkB;AACpB;AACA;EACE,qBAAqB;EACrB,6CAA6C;EAC7C,SAAS;EACT,iBAAiB;AACnB;AACA;EACE,oBAAoB;EACpB,4CAA4C;EAC5C,QAAQ;EACR,gBAAgB;AAClB;AACA;AACE;IACE,YAAY;AACd;AACA;IACE,YAAY;AACd;AACF;AACA;AACE;IACE,WAAW;AACb;AACA;IACE,WAAW;AACb;AACF","file":"main.vue","sourcesContent":[".dv-decoration-4 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-4 .container {\n  display: flex;\n  overflow: hidden;\n  position: absolute;\n}\n.dv-decoration-4 .normal {\n  height: 0% !important;\n  animation: ani-height 3s ease-in-out infinite;\n  left: 50%;\n  margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n  width: 0% !important;\n  animation: ani-width 3s ease-in-out infinite;\n  top: 50%;\n  margin-top: -2px;\n}\n@keyframes ani-height {\n  70% {\n    height: 100%;\n  }\n  100% {\n    height: 100%;\n  }\n}\n@keyframes ani-width {\n  70% {\n    width: 100%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n"]}, media: undefined });
+      inject("data-v-6a8df262_0", { source: ".dv-decoration-4 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-4 .container {\n  display: flex;\n  overflow: hidden;\n  position: absolute;\n  flex: 1;\n}\n.dv-decoration-4 .normal {\n  animation: ani-height 3s ease-in-out infinite;\n  left: 50%;\n  margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n  animation: ani-width 3s ease-in-out infinite;\n  top: 50%;\n  margin-top: -2px;\n}\n@keyframes ani-height {\n0% {\n    height: 0%;\n}\n70% {\n    height: 100%;\n}\n100% {\n    height: 100%;\n}\n}\n@keyframes ani-width {\n0% {\n    width: 0%;\n}\n70% {\n    width: 100%;\n}\n100% {\n    width: 100%;\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,aAAa;EACb,gBAAgB;EAChB,kBAAkB;EAClB,OAAO;AACT;AACA;EACE,6CAA6C;EAC7C,SAAS;EACT,iBAAiB;AACnB;AACA;EACE,4CAA4C;EAC5C,QAAQ;EACR,gBAAgB;AAClB;AACA;AACE;IACE,UAAU;AACZ;AACA;IACE,YAAY;AACd;AACA;IACE,YAAY;AACd;AACF;AACA;AACE;IACE,SAAS;AACX;AACA;IACE,WAAW;AACb;AACA;IACE,WAAW;AACb;AACF","file":"main.vue","sourcesContent":[".dv-decoration-4 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-decoration-4 .container {\n  display: flex;\n  overflow: hidden;\n  position: absolute;\n  flex: 1;\n}\n.dv-decoration-4 .normal {\n  animation: ani-height 3s ease-in-out infinite;\n  left: 50%;\n  margin-left: -2px;\n}\n.dv-decoration-4 .reverse {\n  animation: ani-width 3s ease-in-out infinite;\n  top: 50%;\n  margin-top: -2px;\n}\n@keyframes ani-height {\n  0% {\n    height: 0%;\n  }\n  70% {\n    height: 100%;\n  }\n  100% {\n    height: 100%;\n  }\n}\n@keyframes ani-width {\n  0% {\n    width: 0%;\n  }\n  70% {\n    width: 100%;\n  }\n  100% {\n    width: 100%;\n  }\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -6008,7 +6015,7 @@
    

    
-    const __vue_component__$i = normalizeComponent(
+    const __vue_component__$i = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$i, staticRenderFns: __vue_staticRenderFns__$i },
      __vue_inject_styles__$i,
      __vue_script__$i,
@ -6197,7 +6204,7 @@
    

    
-    const __vue_component__$j = normalizeComponent(
+    const __vue_component__$j = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$j, staticRenderFns: __vue_staticRenderFns__$j },
      __vue_inject_styles__$j,
      __vue_script__$j,
@ -6420,7 +6427,7 @@
    

    
-    const __vue_component__$k = normalizeComponent(
+    const __vue_component__$k = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$k, staticRenderFns: __vue_staticRenderFns__$k },
      __vue_inject_styles__$k,
      __vue_script__$k,
@ -6561,7 +6568,7 @@
    

    
-    const __vue_component__$l = normalizeComponent(
+    const __vue_component__$l = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$l, staticRenderFns: __vue_staticRenderFns__$l },
      __vue_inject_styles__$l,
      __vue_script__$l,
@ -6715,7 +6722,7 @@
    

    
-    const __vue_component__$m = normalizeComponent(
+    const __vue_component__$m = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$m, staticRenderFns: __vue_staticRenderFns__$m },
      __vue_inject_styles__$m,
      __vue_script__$m,
@ -6748,10 +6755,10 @@
    },

    data() {
-      const timestamp = Date.now();
+      const id = uuid();
      return {
        ref: 'decoration-9',
-        polygonId: `decoration-9-polygon-${timestamp}`,
+        polygonId: `decoration-9-polygon-${id}`,
        svgWH: [100, 100],
        svgScale: [1, 1],
        defaultColor: ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'],
@ -6961,7 +6968,7 @@
    /* style */
    const __vue_inject_styles__$n = function (inject) {
      if (!inject) return
-      inject("data-v-06b2e4f5_0", { source: ".dv-decoration-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dv-decoration-9 svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  transform-origin: left top;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,0BAA0B;AAC5B","file":"main.vue","sourcesContent":[".dv-decoration-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dv-decoration-9 svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  transform-origin: left top;\n}\n"]}, media: undefined });
+      inject("data-v-b47f91a8_0", { source: ".dv-decoration-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dv-decoration-9 svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  transform-origin: left top;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,0BAA0B;AAC5B","file":"main.vue","sourcesContent":[".dv-decoration-9 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dv-decoration-9 svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  transform-origin: left top;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -6976,7 +6983,7 @@
    

    
-    const __vue_component__$n = normalizeComponent(
+    const __vue_component__$n = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$n, staticRenderFns: __vue_staticRenderFns__$n },
      __vue_inject_styles__$n,
      __vue_script__$n,
@ -7005,16 +7012,16 @@
    },

    data() {
-      const timestamp = Date.now();
+      const id = uuid();
      return {
        ref: 'decoration-10',
-        animationId1: `d10ani1${timestamp}`,
-        animationId2: `d10ani2${timestamp}`,
-        animationId3: `d10ani3${timestamp}`,
-        animationId4: `d10ani4${timestamp}`,
-        animationId5: `d10ani5${timestamp}`,
-        animationId6: `d10ani6${timestamp}`,
-        animationId7: `d10ani7${timestamp}`,
+        animationId1: `d10ani1${id}`,
+        animationId2: `d10ani2${id}`,
+        animationId3: `d10ani3${id}`,
+        animationId4: `d10ani4${id}`,
+        animationId5: `d10ani5${id}`,
+        animationId6: `d10ani6${id}`,
+        animationId7: `d10ani7${id}`,
        defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
        mergedColor: []
      };
@ -7327,7 +7334,7 @@
    /* style */
    const __vue_inject_styles__$o = function (inject) {
      if (!inject) return
-      inject("data-v-39f9e4a4_0", { source: ".dv-decoration-10 {\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;AACf","file":"main.vue","sourcesContent":[".dv-decoration-10 {\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n"]}, media: undefined });
+      inject("data-v-23172a05_0", { source: ".dv-decoration-10 {\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;AACf","file":"main.vue","sourcesContent":[".dv-decoration-10 {\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -7342,7 +7349,7 @@
    

    
-    const __vue_component__$o = normalizeComponent(
+    const __vue_component__$o = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$o, staticRenderFns: __vue_staticRenderFns__$o },
      __vue_inject_styles__$o,
      __vue_script__$o,
@ -7542,7 +7549,7 @@
    /* style */
    const __vue_inject_styles__$p = function (inject) {
      if (!inject) return
-      inject("data-v-70e8e39a_0", { source: ".dv-decoration-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.dv-decoration-11 .decoration-content {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;AACf;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB","file":"main.vue","sourcesContent":[".dv-decoration-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.dv-decoration-11 .decoration-content {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"]}, media: undefined });
+      inject("data-v-53895fd4_0", { source: ".dv-decoration-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.dv-decoration-11 .decoration-content {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,aAAa;AACf;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,WAAW;EACX,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB","file":"main.vue","sourcesContent":[".dv-decoration-11 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.dv-decoration-11 .decoration-content {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -7557,7 +7564,7 @@
    

    
-    const __vue_component__$p = normalizeComponent(
+    const __vue_component__$p = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$p, staticRenderFns: __vue_staticRenderFns__$p },
      __vue_inject_styles__$p,
      __vue_script__$p,
@ -11866,7 +11873,9 @@
      number: [],
      content: '',
      position: [0, 0],
-      toFixed: 0
+      toFixed: 0,
+      rowGap: 0,
+      formatter: null
    },
    validator: function validator(_ref7) {
      var shape = _ref7.shape;
@ -11887,14 +11896,18 @@
      var number = shape.number,
          content = shape.content,
          toFixed = shape.toFixed,
-          rowGap = shape.rowGap;
+          rowGap = shape.rowGap,
+          formatter = shape.formatter;
      var textSegments = content.split('{nt}');
-      var lastSegmentIndex = textSegments.length - 1;
      var textString = '';
      textSegments.forEach(function (t, i) {
-        var currentNumber = number[i];
-        if (i === lastSegmentIndex) currentNumber = '';
-        if (typeof currentNumber === 'number') currentNumber = currentNumber.toFixed(toFixed);
+        var currentNumber = number[i] || '';
+
+        if (typeof currentNumber === 'number') {
+          currentNumber = currentNumber.toFixed(toFixed);
+          if (typeof formatter === 'function') currentNumber = formatter(currentNumber);
+        }
+
        textString += t + (currentNumber || '');
      });

@ -11903,7 +11916,7 @@
      }, {
        shape: _objectSpread({}, shape, {
          content: textString,
-          rowGap: rowGap || 0
+          rowGap: rowGap
        })
      });
    }
@ -16907,13 +16920,15 @@
      var sum = getDataSum(data);
      data.forEach(function (item) {
        var value = item.value;
-        item.percent = toFixedNoCeil(value / sum * 100, percentToFixed);
+        item.percent = value / sum * 100;
+        item.percentForLabel = toFixedNoCeil(value / sum * 100, percentToFixed);
      });
      var percentSumNoLast = (0, util$1.mulAdd)(data.slice(0, -1).map(function (_ref5) {
        var percent = _ref5.percent;
        return percent;
      }));
-      data.slice(-1)[0].percent = toFixedNoCeil(100 - percentSumNoLast, percentToFixed);
+      data.slice(-1)[0].percent = 100 - percentSumNoLast;
+      data.slice(-1)[0].percentForLabel = toFixedNoCeil(100 - percentSumNoLast, percentToFixed);
    });
    return pies;
  }
@ -17185,7 +17200,7 @@

    if (formatterType === 'string') {
      label = formatter.replace('{name}', dataItem.name);
-      label = label.replace('{percent}', dataItem.percent);
+      label = label.replace('{percent}', dataItem.percentForLabel);
      label = label.replace('{value}', dataItem.value);
    }

@ -17284,14 +17299,14 @@
    var _data$i = data[i],
        labelLine = _data$i.labelLine,
        name = _data$i.name,
-        percent = _data$i.percent,
+        percentForLabel = _data$i.percentForLabel,
        value = _data$i.value;
    var formatterType = (0, _typeof2["default"])(formatter);
    var label = '';

    if (formatterType === 'string') {
      label = formatter.replace('{name}', name);
-      label = label.replace('{percent}', percent);
+      label = label.replace('{percent}', percentForLabel);
      label = label.replace('{value}', value);
    }

@ -19318,10 +19333,10 @@
    },

    data() {
-      const timestamp = Date.now();
+      const id = uuid();
      return {
-        ref: `charts-container-${timestamp}`,
-        chartRef: `chart-${timestamp}`,
+        ref: `charts-container-${id}`,
+        chartRef: `chart-${id}`,
        chart: null
      };
    },
@ -19386,7 +19401,7 @@
    /* style */
    const __vue_inject_styles__$q = function (inject) {
      if (!inject) return
-      inject("data-v-5e36f670_0", { source: ".dv-charts-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-charts-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });
+      inject("data-v-1f446fe6_0", { source: ".dv-charts-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;AACd;AACA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-charts-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n.dv-charts-container .charts-canvas-container {\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -19401,7 +19416,7 @@
    

    
-    const __vue_component__$q = normalizeComponent(
+    const __vue_component__$q = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$q, staticRenderFns: __vue_staticRenderFns__$q },
      __vue_inject_styles__$q,
      __vue_script__$q,
@ -19479,6 +19494,12 @@
            fill: '#3de7c9'
          },

+          /**
+           * @description Number formatter
+           * @type {Null|Function}
+           */
+          formatter: undefined,
+
          /**
           * @description CRender animationCurve
           * @type {String}
@ -19562,7 +19583,8 @@
          content,
          toFixed,
          textAlign,
-          rowGap
+          rowGap,
+          formatter
        } = this.mergedConfig;
        const [w, h] = this.renderer.area;
        const position = [w / 2, h / 2];
@ -19573,7 +19595,8 @@
          content,
          toFixed,
          position,
-          rowGap
+          rowGap,
+          formatter
        };
      },

@ -19648,7 +19671,7 @@
    /* style */
    const __vue_inject_styles__$r = function (inject) {
      if (!inject) return
-      inject("data-v-4570caa9_0", { source: ".dv-digital-flop canvas {\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-digital-flop canvas {\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });
+      inject("data-v-113591fb_0", { source: ".dv-digital-flop canvas {\n  width: 100%;\n  height: 100%;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;AACd","file":"main.vue","sourcesContent":[".dv-digital-flop canvas {\n  width: 100%;\n  height: 100%;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -19663,7 +19686,7 @@
    

    
-    const __vue_component__$r = normalizeComponent(
+    const __vue_component__$r = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$r, staticRenderFns: __vue_staticRenderFns__$r },
      __vue_inject_styles__$r,
      __vue_script__$r,
@ -20026,7 +20049,7 @@
    

    
-    const __vue_component__$s = normalizeComponent(
+    const __vue_component__$s = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$s, staticRenderFns: __vue_staticRenderFns__$s },
      __vue_inject_styles__$s,
      __vue_script__$s,
@ -20258,7 +20281,7 @@
    

    
-    const __vue_component__$t = normalizeComponent(
+    const __vue_component__$t = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$t, staticRenderFns: __vue_staticRenderFns__$t },
      __vue_inject_styles__$t,
      __vue_script__$t,
@ -20284,9 +20307,9 @@
    },

    data() {
-      const timestamp = Date.now();
+      const id = uuid();
      return {
-        gradientId: `water-level-pond-${timestamp}`,
+        gradientId: `water-level-pond-${id}`,
        defaultConfig: {
          /**
           * @description Data
@ -20662,7 +20685,7 @@
    /* style */
    const __vue_inject_styles__$u = function (inject) {
      if (!inject) return
-      inject("data-v-48b03636_0", { source: ".dv-water-pond-level {\n  position: relative;\n}\n.dv-water-pond-level svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-water-pond-level text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n  fill: none;\n  stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n  margin-top: 8px;\n  margin-left: 8px;\n  width: calc(100% - 16px);\n  height: calc(100% - 16px);\n  box-sizing: border-box;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B;AACA;;EAEE,UAAU;EACV,eAAe;AACjB;AACA;EACE,eAAe;EACf,gBAAgB;EAChB,wBAAwB;EACxB,yBAAyB;EACzB,sBAAsB;AACxB","file":"main.vue","sourcesContent":[".dv-water-pond-level {\n  position: relative;\n}\n.dv-water-pond-level svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-water-pond-level text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n  fill: none;\n  stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n  margin-top: 8px;\n  margin-left: 8px;\n  width: calc(100% - 16px);\n  height: calc(100% - 16px);\n  box-sizing: border-box;\n}\n"]}, media: undefined });
+      inject("data-v-be672a2c_0", { source: ".dv-water-pond-level {\n  position: relative;\n}\n.dv-water-pond-level svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-water-pond-level text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n  fill: none;\n  stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n  margin-top: 8px;\n  margin-left: 8px;\n  width: calc(100% - 16px);\n  height: calc(100% - 16px);\n  box-sizing: border-box;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,QAAQ;EACR,SAAS;AACX;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B;AACA;;EAEE,UAAU;EACV,eAAe;AACjB;AACA;EACE,eAAe;EACf,gBAAgB;EAChB,wBAAwB;EACxB,yBAAyB;EACzB,sBAAsB;AACxB","file":"main.vue","sourcesContent":[".dv-water-pond-level {\n  position: relative;\n}\n.dv-water-pond-level svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.dv-water-pond-level text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n.dv-water-pond-level ellipse,\n.dv-water-pond-level rect {\n  fill: none;\n  stroke-width: 3;\n}\n.dv-water-pond-level canvas {\n  margin-top: 8px;\n  margin-left: 8px;\n  width: calc(100% - 16px);\n  height: calc(100% - 16px);\n  box-sizing: border-box;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -20677,7 +20700,7 @@
    

    
-    const __vue_component__$u = normalizeComponent(
+    const __vue_component__$u = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$u, staticRenderFns: __vue_staticRenderFns__$u },
      __vue_inject_styles__$u,
      __vue_script__$u,
@ -20705,10 +20728,10 @@
    },

    data() {
-      const timestamp = Date.now();
+      const id = uuid();
      return {
-        gradientId1: `percent-pond-gradientId1-${timestamp}`,
-        gradientId2: `percent-pond-gradientId2-${timestamp}`,
+        gradientId1: `percent-pond-gradientId1-${id}`,
+        gradientId2: `percent-pond-gradientId2-${id}`,
        width: 0,
        height: 0,
        defaultConfig: {
@ -20914,9 +20937,12 @@
          $refs
        } = this;
        await $nextTick();
-        const dom = $refs['percent-pond'];
-        this.width = dom.clientWidth;
-        this.height = dom.clientHeight;
+        const {
+          clientWidth,
+          clientHeight
+        } = $refs['percent-pond'];
+        this.width = clientWidth;
+        this.height = clientHeight;
      },

      mergeConfig() {
@ -21040,7 +21066,7 @@
    /* style */
    const __vue_inject_styles__$v = function (inject) {
      if (!inject) return
-      inject("data-v-67d721de_0", { source: ".dv-percent-pond {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.dv-percent-pond svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-percent-pond polyline {\n  transition: all 0.3s;\n}\n.dv-percent-pond text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,sBAAsB;AACxB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,WAAW;EACX,YAAY;AACd;AACA;EACE,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-percent-pond {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.dv-percent-pond svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-percent-pond polyline {\n  transition: all 0.3s;\n}\n.dv-percent-pond text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n"]}, media: undefined });
+      inject("data-v-05a0166f_0", { source: ".dv-percent-pond {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.dv-percent-pond svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-percent-pond polyline {\n  transition: all 0.3s;\n}\n.dv-percent-pond text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,sBAAsB;AACxB;AACA;EACE,kBAAkB;EAClB,SAAS;EACT,QAAQ;EACR,WAAW;EACX,YAAY;AACd;AACA;EACE,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,iBAAiB;EACjB,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-percent-pond {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.dv-percent-pond svg {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n}\n.dv-percent-pond polyline {\n  transition: all 0.3s;\n}\n.dv-percent-pond text {\n  font-size: 25px;\n  font-weight: bold;\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -21055,7 +21081,7 @@
    

    
-    const __vue_component__$v = normalizeComponent(
+    const __vue_component__$v = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$v, staticRenderFns: __vue_staticRenderFns__$v },
      __vue_inject_styles__$v,
      __vue_script__$v,
@ -21088,14 +21114,14 @@
    },

    data() {
-      const timestamp = Date.now();
+      const id = uuid();
      return {
        ref: 'dv-flyline-chart',
        unique: Math.random(),
-        maskId: `flyline-mask-id-${timestamp}`,
-        maskCircleId: `mask-circle-id-${timestamp}`,
-        gradientId: `gradient-id-${timestamp}`,
-        gradient2Id: `gradient2-id-${timestamp}`,
+        maskId: `flyline-mask-id-${id}`,
+        maskCircleId: `mask-circle-id-${id}`,
+        gradientId: `gradient-id-${id}`,
+        gradient2Id: `gradient2-id-${id}`,
        defaultConfig: {
          /**
           * @description Flyline chart center point
@ -21761,7 +21787,7 @@
    /* style */
    const __vue_inject_styles__$w = function (inject) {
      if (!inject) return
-      inject("data-v-e406698c_0", { source: ".dv-flyline-chart {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n  transition: all 0.3s;\n}\n.dv-flyline-chart text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,oBAAoB;AACtB;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-flyline-chart {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n  transition: all 0.3s;\n}\n.dv-flyline-chart text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n"]}, media: undefined });
+      inject("data-v-1edfcf29_0", { source: ".dv-flyline-chart {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n  transition: all 0.3s;\n}\n.dv-flyline-chart text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,oBAAoB;AACtB;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-flyline-chart {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart polyline {\n  transition: all 0.3s;\n}\n.dv-flyline-chart text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -21776,7 +21802,7 @@
    

    
-    const __vue_component__$w = normalizeComponent(
+    const __vue_component__$w = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$w, staticRenderFns: __vue_staticRenderFns__$w },
      __vue_inject_styles__$w,
      __vue_script__$w,
@ -21809,12 +21835,12 @@
    },

    data() {
-      const timestamp = Date.now();
+      const id = uuid();
      return {
        ref: 'dv-flyline-chart-enhanced',
        unique: Math.random(),
-        flylineGradientId: `flyline-gradient-id-${timestamp}`,
-        haloGradientId: `halo-gradient-id-${timestamp}`,
+        flylineGradientId: `flyline-gradient-id-${id}`,
+        haloGradientId: `halo-gradient-id-${id}`,

        /**
         * @description Type Declaration
@ -22546,7 +22572,7 @@
    /* style */
    const __vue_inject_styles__$x = function (inject) {
      if (!inject) return
-      inject("data-v-5cc44b0b_0", { source: ".dv-flyline-chart-enhanced {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-flyline-chart-enhanced {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n"]}, media: undefined });
+      inject("data-v-a7b8c35c_0", { source: ".dv-flyline-chart-enhanced {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,aAAa;EACb,sBAAsB;EACtB,0BAA0B;AAC5B;AACA;EACE,mBAAmB;EACnB,yBAAyB;AAC3B","file":"main.vue","sourcesContent":[".dv-flyline-chart-enhanced {\n  display: flex;\n  flex-direction: column;\n  background-size: 100% 100%;\n}\n.dv-flyline-chart-enhanced text {\n  text-anchor: middle;\n  dominant-baseline: middle;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -22561,7 +22587,7 @@
    

    
-    const __vue_component__$x = normalizeComponent(
+    const __vue_component__$x = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$x, staticRenderFns: __vue_staticRenderFns__$x },
      __vue_inject_styles__$x,
      __vue_script__$x,
@ -22844,7 +22870,7 @@
    

    
-    const __vue_component__$y = normalizeComponent(
+    const __vue_component__$y = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$y, staticRenderFns: __vue_staticRenderFns__$y },
      __vue_inject_styles__$y,
      __vue_script__$y,
@ -22972,7 +22998,15 @@
           * @default carousel = 'single'
           * @example carousel = 'single' | 'page'
           */
-          carousel: 'single'
+          carousel: 'single',
+
+          /**
+           * @description Pause scroll when mouse hovered
+           * @type {Boolean}
+           * @default hoverPause = true
+           * @example hoverPause = true | false
+           */
+          hoverPause: true
        },
        mergedConfig: null,
        header: [],
@ -22995,11 +23029,29 @@
          calcData
        } = this;
        stopAnimation();
+        this.animationIndex = 0;
        calcData();
      }

    },
    methods: {
+      handleHover(enter, ri, ci, row, ceil) {
+        const {
+          mergedConfig,
+          emitEvent,
+          stopAnimation,
+          animation
+        } = this;
+        if (enter) emitEvent('mouseover', ri, ci, row, ceil);
+        if (!mergedConfig.hoverPause) return;
+
+        if (enter) {
+          stopAnimation();
+        } else {
+          animation(true);
+        }
+      },
+
      afterAutoResizeMixinInit() {
        const {
          calcData
@ -23202,12 +23254,12 @@
        clearTimeout(animationHandler);
      },

-      emitEvent(ri, ci, row, ceil) {
+      emitEvent(type, ri, ci, row, ceil) {
        const {
          ceils,
          rowIndex
        } = row;
-        this.$emit('click', {
+        this.$emit(type, {
          row: ceils,
          ceil,
          rowIndex,
@ -23299,7 +23351,13 @@
                    domProps: { innerHTML: _vm._s(ceil) },
                    on: {
                      click: function($event) {
-                        return _vm.emitEvent(ri, ci, row, ceil)
+                        return _vm.emitEvent("click", ri, ci, row, ceil)
+                      },
+                      mouseenter: function($event) {
+                        return _vm.handleHover(true, ri, ci, row, ceil)
+                      },
+                      mouseleave: function($event) {
+                        return _vm.handleHover(false)
                      }
                    }
                  })
@ -23318,7 +23376,7 @@
    /* style */
    const __vue_inject_styles__$z = function (inject) {
      if (!inject) return
-      inject("data-v-1aad958a_0", { source: ".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,WAAW;AACb;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;AACtB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,eAAe;EACf,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB","file":"main.vue","sourcesContent":[".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n"]}, media: undefined });
+      inject("data-v-5d3c4f07_0", { source: ".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,WAAW;AACb;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,aAAa;EACb,mBAAmB;EACnB,eAAe;AACjB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;AACtB;AACA;EACE,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,eAAe;EACf,oBAAoB;AACtB;AACA;EACE,eAAe;EACf,sBAAsB;EACtB,mBAAmB;EACnB,gBAAgB;EAChB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,gBAAgB;AAClB","file":"main.vue","sourcesContent":[".dv-scroll-board {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n}\n.dv-scroll-board .text {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .header {\n  display: flex;\n  flex-direction: row;\n  font-size: 15px;\n}\n.dv-scroll-board .header .header-item {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows {\n  overflow: hidden;\n}\n.dv-scroll-board .rows .row-item {\n  display: flex;\n  font-size: 14px;\n  transition: all 0.3s;\n}\n.dv-scroll-board .rows .ceil {\n  padding: 0 10px;\n  box-sizing: border-box;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.dv-scroll-board .rows .index {\n  border-radius: 3px;\n  padding: 0px 3px;\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -23333,7 +23391,7 @@
    

    
-    const __vue_component__$z = normalizeComponent(
+    const __vue_component__$z = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$z, staticRenderFns: __vue_staticRenderFns__$z },
      __vue_inject_styles__$z,
      __vue_script__$z,
@ -23490,10 +23548,14 @@
        const value = data.map(({
          value
        }) => value);
-        const max = Math.max(...value) || 0;
+        const min = Math.min(...value) || 0; // abs of min
+
+        const minAbs = Math.abs(min);
+        const max = Math.max(...value) || 0; // abs of max
+        const total = max + minAbs;
        data = data.map((row, i) => ({ ...row,
          ranking: i + 1,
-          percent: row.value / max * 100
+          percent: (row.value + minAbs) / total * 100
        }));
        const rowLength = data.length;

@ -23637,7 +23699,7 @@
    /* style */
    const __vue_inject_styles__$A = function (inject) {
      if (!inject) return
-      inject("data-v-4fe9e817_0", { source: ".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n80% {\n    left: 0%;\n    transform: translateX(-100%);\n}\n100% {\n    left: 100%;\n    transform: translateX(0%);\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,WAAW;EACX,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,WAAW;EACX,eAAe;AACjB;AACA;EACE,WAAW;EACX,cAAc;AAChB;AACA;EACE,OAAO;AACT;AACA;EACE,gDAAgD;EAChD,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,QAAQ;EACR,WAAW;EACX,WAAW;EACX,4BAA4B;EAC5B,wDAAwD;EACxD,kDAAkD;AACpD;AACA;AACE;IACE,QAAQ;IACR,4BAA4B;AAC9B;AACA;IACE,UAAU;IACV,yBAAyB;AAC3B;AACF","file":"main.vue","sourcesContent":[".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n  80% {\n    left: 0%;\n    transform: translateX(-100%);\n  }\n  100% {\n    left: 100%;\n    transform: translateX(0%);\n  }\n}\n"]}, media: undefined });
+      inject("data-v-226dd7bc_0", { source: ".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n80% {\n    left: 0%;\n    transform: translateX(-100%);\n}\n100% {\n    left: 100%;\n    transform: translateX(0%);\n}\n}\n", map: {"version":3,"sources":["main.vue"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,WAAW;EACX,gBAAgB;AAClB;AACA;EACE,oBAAoB;EACpB,aAAa;EACb,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;AAClB;AACA;EACE,aAAa;EACb,WAAW;EACX,eAAe;AACjB;AACA;EACE,WAAW;EACX,cAAc;AAChB;AACA;EACE,OAAO;AACT;AACA;EACE,gDAAgD;EAChD,eAAe;AACjB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;EAClB,gBAAgB;AAClB;AACA;EACE,kBAAkB;EAClB,QAAQ;EACR,QAAQ;EACR,WAAW;EACX,WAAW;EACX,4BAA4B;EAC5B,wDAAwD;EACxD,kDAAkD;AACpD;AACA;AACE;IACE,QAAQ;IACR,4BAA4B;AAC9B;AACA;IACE,UAAU;IACV,yBAAyB;AAC3B;AACF","file":"main.vue","sourcesContent":[".dv-scroll-ranking-board {\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .row-item {\n  transition: all 0.3s;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-info {\n  display: flex;\n  width: 100%;\n  font-size: 13px;\n}\n.dv-scroll-ranking-board .ranking-info .rank {\n  width: 40px;\n  color: #1370fb;\n}\n.dv-scroll-ranking-board .ranking-info .info-name {\n  flex: 1;\n}\n.dv-scroll-ranking-board .ranking-column {\n  border-bottom: 2px solid rgba(19, 112, 251, 0.5);\n  margin-top: 5px;\n}\n.dv-scroll-ranking-board .ranking-column .inside-column {\n  position: relative;\n  height: 6px;\n  background-color: #1370fb;\n  margin-bottom: 2px;\n  border-radius: 1px;\n  overflow: hidden;\n}\n.dv-scroll-ranking-board .ranking-column .shine {\n  position: absolute;\n  left: 0%;\n  top: 2px;\n  height: 2px;\n  width: 50px;\n  transform: translateX(-100%);\n  background: radial-gradient(#28f8ff 5%, transparent 80%);\n  animation: shine 3s ease-in-out infinite alternate;\n}\n@keyframes shine {\n  80% {\n    left: 0%;\n    transform: translateX(-100%);\n  }\n  100% {\n    left: 100%;\n    transform: translateX(0%);\n  }\n}\n"]}, media: undefined });

    };
    /* scoped */
@ -23652,7 +23714,7 @@
    

    
-    const __vue_component__$A = normalizeComponent(
+    const __vue_component__$A = /*#__PURE__*/normalizeComponent(
      { render: __vue_render__$A, staticRenderFns: __vue_staticRenderFns__$A },
      __vue_inject_styles__$A,
      __vue_script__$A,
--- a/dist/datav.min.vue.js
+++ b/dist/datav.min.vue.js
--- a/lib/components/borderBox11/src/main.vue
+++ b/lib/components/borderBox11/src/main.vue
@ -216,6 +216,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@ -245,10 +246,10 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'border-box-11',
-      filterId: `border-box-11-filterId-${timestamp}`,
+      filterId: `border-box-11-filterId-${id}`,

      defaultColor: ['#8aaafb', '#1f33a2'],

--- a/lib/components/borderBox12/src/main.vue
+++ b/lib/components/borderBox12/src/main.vue
@ -92,6 +92,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@ -113,10 +114,10 @@ export default {
    }
  },
  data () {
-    const timestamp = +new Date()
+    const id = uuid()
    return {
      ref: 'border-box-12',
-      filterId: `borderr-box-12-filterId-${timestamp}`,
+      filterId: `borderr-box-12-filterId-${id}`,

      defaultColor: ['#2e6099', '#7ce7fd'],

--- a/lib/components/borderBox13/src/main.vue
+++ b/lib/components/borderBox13/src/main.vue
@ -61,7 +61,6 @@ export default {
    }
  },
  data () {
-    const timestamp = +new Date()
    return {
      ref: 'border-box-13',

--- a/lib/components/borderBox8/src/main.vue
+++ b/lib/components/borderBox8/src/main.vue
@ -65,6 +65,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@ -92,12 +93,12 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'border-box-8',
-      path: `border-box-8-path-${timestamp}`,
-      gradient: `border-box-8-gradient-${timestamp}`,
-      mask: `border-box-8-mask-${timestamp}`,
+      path: `border-box-8-path-${id}`,
+      gradient: `border-box-8-gradient-${id}`,
+      mask: `border-box-8-mask-${id}`,

      defaultColor: ['#235fa7', '#4fd2dd'],

--- a/lib/components/borderBox9/src/main.vue
+++ b/lib/components/borderBox9/src/main.vue
@ -125,6 +125,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@ -144,12 +145,12 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'border-box-9',

-      gradientId: `border-box-9-gradient-${timestamp}`,
-      maskId: `border-box-9-mask-${timestamp}`,
+      gradientId: `border-box-9-gradient-${id}`,
+      maskId: `border-box-9-mask-${id}`,

      defaultColor: ['#11eefd', '#0078d2'],

--- a/lib/components/charts/src/main.vue
+++ b/lib/components/charts/src/main.vue
@ -5,6 +5,8 @@
 </template>

 <script>
+import { uuid } from '../../../util/index'
+
 import autoResize from '../../../mixin/autoResize'

 import Charts from '@jiaminghi/charts'
@ -19,10 +21,10 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
-      ref: `charts-container-${timestamp}`,
-      chartRef: `chart-${timestamp}`,
+      ref: `charts-container-${id}`,
+      chartRef: `chart-${id}`,

      chart: null
    }
--- a/lib/components/decoration10/src/main.vue
+++ b/lib/components/decoration10/src/main.vue
@ -147,6 +147,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@ -162,17 +163,17 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'decoration-10',

-      animationId1: `d10ani1${timestamp}`,
-      animationId2: `d10ani2${timestamp}`,
-      animationId3: `d10ani3${timestamp}`,
-      animationId4: `d10ani4${timestamp}`,
-      animationId5: `d10ani5${timestamp}`,
-      animationId6: `d10ani6${timestamp}`,
-      animationId7: `d10ani7${timestamp}`,
+      animationId1: `d10ani1${id}`,
+      animationId2: `d10ani2${id}`,
+      animationId3: `d10ani3${id}`,
+      animationId4: `d10ani4${id}`,
+      animationId5: `d10ani5${id}`,
+      animationId6: `d10ani6${id}`,
+      animationId7: `d10ani7${id}`,

      defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],

--- a/lib/components/decoration11/src/main.vue
+++ b/lib/components/decoration11/src/main.vue
@ -72,7 +72,6 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
    return {
      ref: 'decoration-11',

--- a/lib/components/decoration4/src/main.css
+++ b/lib/components/decoration4/src/main.css
@ -7,20 +7,22 @@
  display: flex;
  overflow: hidden;
  position: absolute;
+  flex: 1;
 }
 .dv-decoration-4 .normal {
-  height: 0% !important;
  animation: ani-height 3s ease-in-out infinite;
  left: 50%;
  margin-left: -2px;
 }
 .dv-decoration-4 .reverse {
-  width: 0% !important;
  animation: ani-width 3s ease-in-out infinite;
  top: 50%;
  margin-top: -2px;
 }
@keyframes ani-height {
+  0% {
+    height: 0%;
+  }
  70% {
    height: 100%;
  }
@ -29,6 +31,9 @@
  }
 }
@keyframes ani-width {
+  0% {
+    width: 0%;
+  }
  70% {
    width: 100%;
  }
--- a/lib/components/decoration9/src/main.vue
+++ b/lib/components/decoration9/src/main.vue
@ -85,6 +85,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@ -106,11 +107,11 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'decoration-9',

-      polygonId: `decoration-9-polygon-${timestamp}`,
+      polygonId: `decoration-9-polygon-${id}`,

      svgWH: [100, 100],

--- a/lib/components/digitalFlop/src/main.vue
+++ b/lib/components/digitalFlop/src/main.vue
@ -67,6 +67,11 @@ export default {
          fontSize: 30,
          fill: '#3de7c9'
        },
+        /**
+         * @description Number formatter
+         * @type {Null|Function}
+         */
+        formatter: undefined,
        /**
         * @description CRender animationCurve
         * @type {String}
@ -130,7 +135,7 @@ export default {
      })
    },
    getShape () {
-      const { number, content, toFixed, textAlign, rowGap } = this.mergedConfig
+      const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig

      const [w, h] = this.renderer.area

@ -144,7 +149,8 @@ export default {
        content,
        toFixed,
        position,
-        rowGap
+        rowGap,
+        formatter
      }
    },
    getStyle () {
--- a/lib/components/flylineChart/src/main.vue
+++ b/lib/components/flylineChart/src/main.vue
@ -153,7 +153,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'

 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

-import { randomExtend, getPointDistance } from '../../../util/index'
+import { randomExtend, getPointDistance, uuid } from '../../../util/index'

 import autoResize from '../../../mixin/autoResize'

@ -171,14 +171,14 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'dv-flyline-chart',
      unique: Math.random(),
-      maskId: `flyline-mask-id-${timestamp}`,
-      maskCircleId: `mask-circle-id-${timestamp}`,
-      gradientId: `gradient-id-${timestamp}`,
-      gradient2Id: `gradient2-id-${timestamp}`,
+      maskId: `flyline-mask-id-${id}`,
+      maskCircleId: `mask-circle-id-${id}`,
+      gradientId: `gradient-id-${id}`,
+      gradient2Id: `gradient2-id-${id}`,

      defaultConfig: {
        /**
--- a/lib/components/flylineChartEnhanced/src/main.vue
+++ b/lib/components/flylineChartEnhanced/src/main.vue
@ -155,7 +155,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'

 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

-import { randomExtend, getPointDistance } from '../../../util/index'
+import { randomExtend, getPointDistance, uuid } from '../../../util/index'

 import autoResize from '../../../mixin/autoResize'

@ -173,12 +173,12 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'dv-flyline-chart-enhanced',
      unique: Math.random(),
-      flylineGradientId: `flyline-gradient-id-${timestamp}`,
-      haloGradientId: `halo-gradient-id-${timestamp}`,
+      flylineGradientId: `flyline-gradient-id-${id}`,
+      haloGradientId: `halo-gradient-id-${id}`,
      /**
       * @description Type Declaration
       * 
--- a/lib/components/percentPond/src/main.vue
+++ b/lib/components/percentPond/src/main.vue
@ -44,6 +44,8 @@
 </template>

 <script>
+import { uuid } from '../../../util/index'
+
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
@ -57,10 +59,10 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
-      gradientId1: `percent-pond-gradientId1-${timestamp}`,
-      gradientId2: `percent-pond-gradientId2-${timestamp}`,
+      gradientId1: `percent-pond-gradientId1-${id}`,
+      gradientId2: `percent-pond-gradientId2-${id}`,

      width: 0,
      height: 0,
@ -234,10 +236,10 @@ export default {

      await $nextTick()

-      const dom = $refs['percent-pond']
+      const { clientWidth, clientHeight } = $refs['percent-pond']

-      this.width = dom.clientWidth
-      this.height = dom.clientHeight
+      this.width = clientWidth
+      this.height = clientHeight
    },
    mergeConfig () {
      const { config, defaultConfig } = this
--- a/lib/components/scrollBoard/src/main.vue
+++ b/lib/components/scrollBoard/src/main.vue
@ -37,7 +37,9 @@
          :style="`width: ${widths[ci]}px;`"
          :align="aligns[ci]"
          v-html="ceil"
-          @click="emitEvent(ri, ci, row, ceil)"
+          @click="emitEvent('click', ri, ci, row, ceil)"
+          @mouseenter="handleHover(true, ri, ci, row, ceil)"
+          @mouseleave="handleHover(false)"
        />

      </div>
@ -146,7 +148,14 @@ export default {
         * @default carousel = 'single'
         * @example carousel = 'single' | 'page'
         */
-        carousel: 'single'
+        carousel: 'single',
+        /**
+         * @description Pause scroll when mouse hovered
+         * @type {Boolean}
+         * @default hoverPause = true
+         * @example hoverPause = true | false
+         */
+        hoverPause: true
      },

      mergedConfig: null,
@ -178,10 +187,24 @@ export default {

      stopAnimation()

+      this.animationIndex = 0
+
      calcData()
    }
  },
  methods: {
+    handleHover(enter, ri, ci, row, ceil){
+      const { mergedConfig, emitEvent, stopAnimation, animation } = this
+
+      if (enter) emitEvent('mouseover', ri, ci, row, ceil)
+      if (!mergedConfig.hoverPause) return
+
+      if (enter) {
+        stopAnimation()
+      } else {
+        animation(true)
+      }
+    },
    afterAutoResizeMixinInit () {
      const { calcData } = this

@ -355,10 +378,10 @@ export default {

      clearTimeout(animationHandler)
    },
-    emitEvent (ri, ci, row, ceil) {
+    emitEvent (type, ri, ci, row, ceil) {
      const { ceils, rowIndex } = row

-      this.$emit('click', {
+      this.$emit(type, {
        row: ceils,
        ceil,
        rowIndex,
--- a/lib/components/scrollRankingBoard/src/main.vue
+++ b/lib/components/scrollRankingBoard/src/main.vue
@ -153,9 +153,19 @@ export default {

      const value = data.map(({ value }) => value)
      
+      const min = Math.min(...value) || 0
+
+      // abs of min
+      const minAbs = Math.abs(min)
+
      const max = Math.max(...value) || 0

-      data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: row.value / max * 100 }))
+      // abs of max
+      const maxAbs = Math.abs(max)
+
+      const total = max + minAbs
+
+      data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: (row.value + minAbs) / total * 100 }))

      const rowLength = data.length

--- a/lib/components/waterLevelPond/src/main.vue
+++ b/lib/components/waterLevelPond/src/main.vue
@ -40,6 +40,8 @@
 </template>

 <script>
+import { uuid } from '../../../util/index'
+
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
@ -53,9 +55,9 @@ export default {
    default: () => ({})
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
-      gradientId: `water-level-pond-${timestamp}`,
+      gradientId: `water-level-pond-${id}`,

      defaultConfig: {
        /**
--- a/lib/util/index.js
+++ b/lib/util/index.js
@ -37,3 +37,11 @@ export function getPointDistance (pointOne, pointTwo) {

  return Math.sqrt(minusX * minusX + minusY * minusY)
 }
+
+export function uuid () {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+		const r = Math.random() * 16 | 0
+		const v = c == 'x' ? r : (r & 0x3 | 0x8)
+		return v.toString(16)
+	})
+}
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@jiaminghi/data-view",
-  "version": "2.8.3",
+  "version": "2.9.2",
  "author": "JiaMing <743192023@qq.com>",
  "description": "Vue Large screen data display component library",
  "main": "lib/index.js",
--- a/src/components/borderBox11/src/main.vue
+++ b/src/components/borderBox11/src/main.vue
@ -216,6 +216,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@ -245,10 +246,10 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'border-box-11',
-      filterId: `border-box-11-filterId-${timestamp}`,
+      filterId: `border-box-11-filterId-${id}`,

      defaultColor: ['#8aaafb', '#1f33a2'],

--- a/src/components/borderBox12/src/main.vue
+++ b/src/components/borderBox12/src/main.vue
@ -92,6 +92,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@ -113,10 +114,10 @@ export default {
    }
  },
  data () {
-    const timestamp = +new Date()
+    const id = uuid()
    return {
      ref: 'border-box-12',
-      filterId: `borderr-box-12-filterId-${timestamp}`,
+      filterId: `borderr-box-12-filterId-${id}`,

      defaultColor: ['#2e6099', '#7ce7fd'],

--- a/src/components/borderBox13/src/main.vue
+++ b/src/components/borderBox13/src/main.vue
@ -61,7 +61,6 @@ export default {
    }
  },
  data () {
-    const timestamp = +new Date()
    return {
      ref: 'border-box-13',

--- a/src/components/borderBox8/src/main.vue
+++ b/src/components/borderBox8/src/main.vue
@ -65,6 +65,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@ -92,12 +93,12 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'border-box-8',
-      path: `border-box-8-path-${timestamp}`,
-      gradient: `border-box-8-gradient-${timestamp}`,
-      mask: `border-box-8-mask-${timestamp}`,
+      path: `border-box-8-path-${id}`,
+      gradient: `border-box-8-gradient-${id}`,
+      mask: `border-box-8-mask-${id}`,

      defaultColor: ['#235fa7', '#4fd2dd'],

--- a/src/components/borderBox9/src/main.vue
+++ b/src/components/borderBox9/src/main.vue
@ -125,6 +125,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@ -144,12 +145,12 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'border-box-9',

-      gradientId: `border-box-9-gradient-${timestamp}`,
-      maskId: `border-box-9-mask-${timestamp}`,
+      gradientId: `border-box-9-gradient-${id}`,
+      maskId: `border-box-9-mask-${id}`,

      defaultColor: ['#11eefd', '#0078d2'],

--- a/src/components/charts/src/main.vue
+++ b/src/components/charts/src/main.vue
@ -5,6 +5,8 @@
 </template>

 <script>
+import { uuid } from '../../../util/index'
+
 import autoResize from '../../../mixin/autoResize'

 import Charts from '@jiaminghi/charts'
@ -19,10 +21,10 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
-      ref: `charts-container-${timestamp}`,
-      chartRef: `chart-${timestamp}`,
+      ref: `charts-container-${id}`,
+      chartRef: `chart-${id}`,

      chart: null
    }
--- a/src/components/decoration10/src/main.vue
+++ b/src/components/decoration10/src/main.vue
@ -147,6 +147,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@ -162,17 +163,17 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'decoration-10',

-      animationId1: `d10ani1${timestamp}`,
-      animationId2: `d10ani2${timestamp}`,
-      animationId3: `d10ani3${timestamp}`,
-      animationId4: `d10ani4${timestamp}`,
-      animationId5: `d10ani5${timestamp}`,
-      animationId6: `d10ani6${timestamp}`,
-      animationId7: `d10ani7${timestamp}`,
+      animationId1: `d10ani1${id}`,
+      animationId2: `d10ani2${id}`,
+      animationId3: `d10ani3${id}`,
+      animationId4: `d10ani4${id}`,
+      animationId5: `d10ani5${id}`,
+      animationId6: `d10ani6${id}`,
+      animationId7: `d10ani7${id}`,

      defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],

--- a/src/components/decoration11/src/main.vue
+++ b/src/components/decoration11/src/main.vue
@ -72,7 +72,6 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
    return {
      ref: 'decoration-11',

--- a/src/components/decoration4/src/main.vue
+++ b/src/components/decoration4/src/main.vue
@ -83,23 +83,26 @@ export default {
    display: flex;
    overflow: hidden;
    position: absolute;
+    flex: 1;
  }

  .normal {
-    height: 0% !important;
    animation: ani-height 3s ease-in-out infinite;
    left: 50%;
    margin-left: -2px;
  }

  .reverse {
-    width: 0% !important;
    animation: ani-width 3s ease-in-out infinite;
    top: 50%;
    margin-top: -2px;
  }

  @keyframes ani-height {
+    0% {
+      height: 0%;
+    }
+
    70% {
      height: 100%;
    }
@ -110,6 +113,10 @@ export default {
  }

  @keyframes ani-width {
+    0% {
+      width: 0%;
+    }
+    
    70% {
      width: 100%;
    }
--- a/src/components/decoration9/src/main.vue
+++ b/src/components/decoration9/src/main.vue
@ -85,6 +85,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@ -106,11 +107,11 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'decoration-9',

-      polygonId: `decoration-9-polygon-${timestamp}`,
+      polygonId: `decoration-9-polygon-${id}`,

      svgWH: [100, 100],

--- a/src/components/digitalFlop/src/main.vue
+++ b/src/components/digitalFlop/src/main.vue
@ -67,6 +67,11 @@ export default {
          fontSize: 30,
          fill: '#3de7c9'
        },
+        /**
+         * @description Number formatter
+         * @type {Null|Function}
+         */
+        formatter: undefined,
        /**
         * @description CRender animationCurve
         * @type {String}
@ -130,7 +135,7 @@ export default {
      })
    },
    getShape () {
-      const { number, content, toFixed, textAlign, rowGap } = this.mergedConfig
+      const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig

      const [w, h] = this.renderer.area

@ -144,7 +149,8 @@ export default {
        content,
        toFixed,
        position,
-        rowGap
+        rowGap,
+        formatter
      }
    },
    getStyle () {
--- a/src/components/flylineChart/src/main.vue
+++ b/src/components/flylineChart/src/main.vue
@ -153,7 +153,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'

 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

-import { randomExtend, getPointDistance } from '../../../util/index'
+import { randomExtend, getPointDistance, uuid } from '../../../util/index'

 import autoResize from '../../../mixin/autoResize'

@ -171,14 +171,14 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'dv-flyline-chart',
      unique: Math.random(),
-      maskId: `flyline-mask-id-${timestamp}`,
-      maskCircleId: `mask-circle-id-${timestamp}`,
-      gradientId: `gradient-id-${timestamp}`,
-      gradient2Id: `gradient2-id-${timestamp}`,
+      maskId: `flyline-mask-id-${id}`,
+      maskCircleId: `mask-circle-id-${id}`,
+      gradientId: `gradient-id-${id}`,
+      gradient2Id: `gradient2-id-${id}`,

      defaultConfig: {
        /**
--- a/src/components/flylineChartEnhanced/src/main.vue
+++ b/src/components/flylineChartEnhanced/src/main.vue
@ -155,7 +155,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'

 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'

-import { randomExtend, getPointDistance } from '../../../util/index'
+import { randomExtend, getPointDistance, uuid } from '../../../util/index'

 import autoResize from '../../../mixin/autoResize'

@ -173,12 +173,12 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'dv-flyline-chart-enhanced',
      unique: Math.random(),
-      flylineGradientId: `flyline-gradient-id-${timestamp}`,
-      haloGradientId: `halo-gradient-id-${timestamp}`,
+      flylineGradientId: `flyline-gradient-id-${id}`,
+      haloGradientId: `halo-gradient-id-${id}`,
      /**
       * @description Type Declaration
       * 
--- a/src/components/percentPond/src/main.vue
+++ b/src/components/percentPond/src/main.vue
@ -44,6 +44,8 @@
 </template>

 <script>
+import { uuid } from '../../../util/index'
+
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
@ -57,10 +59,10 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
-      gradientId1: `percent-pond-gradientId1-${timestamp}`,
-      gradientId2: `percent-pond-gradientId2-${timestamp}`,
+      gradientId1: `percent-pond-gradientId1-${id}`,
+      gradientId2: `percent-pond-gradientId2-${id}`,

      width: 0,
      height: 0,
@ -234,10 +236,10 @@ export default {

      await $nextTick()

-      const dom = $refs['percent-pond']
+      const { clientWidth, clientHeight } = $refs['percent-pond']

-      this.width = dom.clientWidth
-      this.height = dom.clientHeight
+      this.width = clientWidth
+      this.height = clientHeight
    },
    mergeConfig () {
      const { config, defaultConfig } = this
--- a/src/components/scrollBoard/src/main.vue
+++ b/src/components/scrollBoard/src/main.vue
@ -37,7 +37,9 @@
          :style="`width: ${widths[ci]}px;`"
          :align="aligns[ci]"
          v-html="ceil"
-          @click="emitEvent(ri, ci, row, ceil)"
+          @click="emitEvent('click', ri, ci, row, ceil)"
+          @mouseenter="handleHover(true, ri, ci, row, ceil)"
+          @mouseleave="handleHover(false)"
        />

      </div>
@ -146,7 +148,14 @@ export default {
         * @default carousel = 'single'
         * @example carousel = 'single' | 'page'
         */
-        carousel: 'single'
+        carousel: 'single',
+        /**
+         * @description Pause scroll when mouse hovered
+         * @type {Boolean}
+         * @default hoverPause = true
+         * @example hoverPause = true | false
+         */
+        hoverPause: true
      },

      mergedConfig: null,
@ -178,10 +187,24 @@ export default {

      stopAnimation()

+      this.animationIndex = 0
+
      calcData()
    }
  },
  methods: {
+    handleHover(enter, ri, ci, row, ceil){
+      const { mergedConfig, emitEvent, stopAnimation, animation } = this
+
+      if (enter) emitEvent('mouseover', ri, ci, row, ceil)
+      if (!mergedConfig.hoverPause) return
+
+      if (enter) {
+        stopAnimation()
+      } else {
+        animation(true)
+      }
+    },
    afterAutoResizeMixinInit () {
      const { calcData } = this

@ -355,10 +378,10 @@ export default {

      clearTimeout(animationHandler)
    },
-    emitEvent (ri, ci, row, ceil) {
+    emitEvent (type, ri, ci, row, ceil) {
      const { ceils, rowIndex } = row

-      this.$emit('click', {
+      this.$emit(type, {
        row: ceils,
        ceil,
        rowIndex,
--- a/src/components/scrollRankingBoard/src/main.vue
+++ b/src/components/scrollRankingBoard/src/main.vue
@ -153,9 +153,19 @@ export default {

      const value = data.map(({ value }) => value)
      
+      const min = Math.min(...value) || 0
+
+      // abs of min
+      const minAbs = Math.abs(min)
+
      const max = Math.max(...value) || 0

-      data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: row.value / max * 100 }))
+      // abs of max
+      const maxAbs = Math.abs(max)
+
+      const total = max + minAbs
+
+      data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: (row.value + minAbs) / total * 100 }))

      const rowLength = data.length

--- a/src/components/waterLevelPond/src/main.vue
+++ b/src/components/waterLevelPond/src/main.vue
@ -40,6 +40,8 @@
 </template>

 <script>
+import { uuid } from '../../../util/index'
+
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
@ -53,9 +55,9 @@ export default {
    default: () => ({})
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
-      gradientId: `water-level-pond-${timestamp}`,
+      gradientId: `water-level-pond-${id}`,

      defaultConfig: {
        /**
--- a/src/util/index.js
+++ b/src/util/index.js
@ -37,3 +37,11 @@ export function getPointDistance (pointOne, pointTwo) {

  return Math.sqrt(minusX * minusX + minusY * minusY)
 }
+
+export function uuid () {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+		const r = Math.random() * 16 | 0
+		const v = c == 'x' ? r : (r & 0x3 | 0x8)
+		return v.toString(16)
+	})
+}
Author	SHA1	Message	Date
jiaming743	9b84417f01	update dist and lib	2020-06-16 14:49:59 +08:00
jiaming743	86da84af2e	update version to 2.9.2	2020-06-16 14:49:32 +08:00
jiaming743	1ea106fd83	update change log	2020-06-16 14:49:11 +08:00
jiaming743	7491b34711	bug fixes: reset animationIndex when config upate	2020-06-16 14:48:16 +08:00
jiaming743	a2875684ce	update dist and lib	2020-06-16 14:34:36 +08:00
jiaming743	f581aee5c3	update changelog	2020-06-16 14:34:30 +08:00
jiaming743	3f5148cea3	update version to 2.9.1	2020-06-16 14:27:11 +08:00
jiaming743	e270fadcd2	update change log	2020-06-16 14:26:55 +08:00
jiaming743	beaef5c59a	optmization	2020-06-16 14:24:02 +08:00
jiaming743	b17399416a	Merge branch 'pr/101'	2020-06-16 14:19:34 +08:00
jiaming743	5f3fdfc798	add number formatter	2020-06-16 14:06:12 +08:00
costa	e7c237cbac	ativeRingChart: optimize method calcRowsData	2020-06-12 15:08:00 +08:00
jiaming743	3d3de766e3	update dist and lib	2020-06-10 09:50:30 +08:00
jiaming743	330815d90a	update version to 2.9.0	2020-06-10 09:50:24 +08:00
jiaming743	4f6fc240d2	update change log	2020-06-10 09:50:10 +08:00
jiaming743	1d0f369509	optmization	2020-06-10 09:45:21 +08:00
gaoy	ea058a90c3	feature / 新增轮播表的鼠标悬停配置 hoverPause	2020-06-09 11:15:23 +08:00
jiaming743	934e3f314a	Merge branch 'master' of https://github.com/DataV-Team/Datav	2020-05-25 17:03:44 +08:00
jiaming743	eea32d7e39	merge branch pr/83	2020-05-25 17:02:57 +08:00
jiaming743	7dd7baebba	merge branch pr/83	2020-05-25 17:02:05 +08:00
jiaming743	4a7fdf0c1c	Merge branch 'pr/83'	2020-05-25 17:01:06 +08:00
jiaming743	53991795a0	update dist and lib	2020-05-25 16:42:14 +08:00
jiaming743	dde29fa61a	update version to 2.8.4	2020-05-25 15:59:20 +08:00
jiaming743	c82b979432	update change log	2020-05-25 15:59:10 +08:00
jiaming743	e938b66dc0	update dist and lib	2020-05-25 15:57:26 +08:00
jiaming743	71a9be2a13	Use uuid to produce unique id	2020-05-25 15:57:19 +08:00
jiahao	f0432e4c42	update uuid	2020-05-16 15:20:06 +08:00
jiahao	65f5b529bf	fix id errors	2020-05-15 13:22:05 +08:00
jiaming743	054854480a	update dist	2020-05-06 15:07:19 +08:00