update dist and lib

2.optimize unit-label child style;

CHANGELOG.md

@@ -1,3 +1,51 @@
+# 2.9.3-alpha (2020-07-02)
+
+### Perfect
+
+- **uuid:** Optimization of `-` in uuid will cause abnormal svg animation [(#108)](https://github.com/DataV-Team/DataV/issues/108).
+
+# 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
+
+- **activeRingChart:** add `showOriginValue` configuration.
+- **capsuleChart:** add `showValue` configuration.
+
+# 2.8.2-alpha (2020-05-06)
+
+### Perfect
+
+- **borderBox8:** add `reverse` configuration.
+
 # 2.8.1-alpha (2020-05-03)
 
 ### Perfect
@@ -70,7 +118,7 @@
 
 # 2.4.7-alpha (2019-10-24)
 
-### perfect
+### Perfect
 
 - **charts:** Optimize memory leaks.
 - **digitalFlop:** Optimize memory leaks.

lib/components/activeRingChart/src/main.vue

@@ -94,7 +94,13 @@ export default {
          * @type {String}
          * @default animationFrame = 50
          */
-        animationFrame: 50
+        animationFrame: 50,
+        /**
+         * @description showOriginValue
+         * @type {Boolean}
+         * @default showOriginValue = false
+         */
+        showOriginValue: false
       },
 
       mergedConfig: null,
@@ -112,17 +118,30 @@ export default {
 
       if (!mergedConfig) return {}
 
-      const { digitalFlopStyle, digitalFlopToFixed, data } = mergedConfig
+      const {
+        digitalFlopStyle,
+        digitalFlopToFixed,
+        data,
+        showOriginValue
+      } = mergedConfig
 
       const value = data.map(({ value }) => value)
 
+      let displayValue
+
+      if (showOriginValue) {
+        displayValue = value[activeIndex]
+      } else {
         const sum = value.reduce((all, v) => all + v, 0)
 
-      const percent = parseFloat(value[activeIndex] / sum * 100) || 0
+        const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
+
+        displayValue = percent
+      }
 
       return {
-        content: '{nt}%',
+        content: showOriginValue ? '{nt}' : '{nt}%',
-        number: [percent],
+        number: [displayValue],
         style: digitalFlopStyle,
         toFixed: digitalFlopToFixed
       }
@@ -173,7 +192,10 @@ export default {
     mergeConfig() {
       const { defaultConfig, config } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
     setRingOption() {
       const { getRingOption, chart, ringAnimation } = this
@@ -217,7 +239,8 @@ export default {
 
       let realRadius = active ? activeRadius : radius
 
-      if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
+      if (typeof realRadius !== 'number')
+        realRadius = (parseInt(realRadius) / 100) * maxRadius
 
       const insideRadius = realRadius - halfLineWidth
       const outSideRadius = realRadius + halfLineWidth

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'],
 

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'],
 

lib/components/borderBox13/src/main.vue

@@ -61,7 +61,6 @@ export default {
     }
   },
   data () {
-    const timestamp = +new Date()
     return {
       ref: 'border-box-13',
 

lib/components/borderBox8/src/main.vue

@@ -4,7 +4,7 @@
       <defs>
         <path
           :id="path"
-          :d="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
+          :d="pathD"
           fill="transparent"
         />
         <radialGradient
@@ -25,7 +25,7 @@
           <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
             <animateMotion
               :dur="`${dur}s`"
-              :path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
+              :path="pathD"
               rotate="auto"
               repeatCount="indefinite"
             />
@@ -65,6 +65,7 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -85,15 +86,19 @@ export default {
     backgroundColor: {
       type: String,
       default: 'transparent'
+    },
+    reverse: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${timestamp}`,
+      path: `border-box-8-path-${id}`,
-      gradient: `border-box-8-gradient-${timestamp}`,
+      gradient: `border-box-8-gradient-${id}`,
-      mask: `border-box-8-mask-${timestamp}`,
+      mask: `border-box-8-mask-${id}`,
 
       defaultColor: ['#235fa7', '#4fd2dd'],
 
@@ -105,6 +110,13 @@ export default {
       const { width, height } = this
 
       return (width + height - 5) * 2
+    },
+    pathD () {
+      const { reverse, width, height } = this
+
+      if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
+
+      return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
     }
   },
   watch: {

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}`,
+      gradientId: `border-box-9-gradient-${id}`,
-      maskId: `border-box-9-mask-${timestamp}`,
+      maskId: `border-box-9-mask-${id}`,
 
       defaultColor: ['#11eefd', '#0078d2'],
 

lib/components/capsuleChart/src/main.css

@@ -31,19 +31,27 @@
   margin: 5px 0px;
   border-radius: 5px;
 }
-.dv-capsule-chart .capsule-item div {
+.dv-capsule-chart .capsule-item .capsule-item-column {
+  position: relative;
   height: 8px;
   margin-top: 1px;
   border-radius: 5px;
   transition: all 0.3s;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {
+  font-size: 12px;
+  transform: translateX(100%);
 }
 .dv-capsule-chart .unit-label {
   height: 20px;
   font-size: 12px;
+  position: relative;
   display: flex;
-  flex-direction: row;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
 }
 .dv-capsule-chart .unit-text {
   text-align: right;

lib/components/capsuleChart/src/main.vue

@@ -7,16 +7,23 @@
       </div>
 
       <div class="capsule-container">
+        <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
           <div
-          class="capsule-item"
+            class="capsule-item-column"
-          v-for="(capsule, index) in capsuleLength"
+            :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
-          :key="index"
           >
-          <div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
+            <div
+              v-if="mergedConfig.showValue"
+              class="capsule-item-value"
+            >{{ capsuleValue[index] }}</div>
+          </div>
         </div>
 
         <div class="unit-label">
-          <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
+          <div
+            v-for="(label, index) in labelData"
+            :key="label + index"
+          >{{ label }}</div>
         </div>
       </div>
 
@@ -54,19 +61,35 @@ export default {
          * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
          * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
          */
-        colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
+        colors: [
+          '#37a2da',
+          '#32c5e9',
+          '#67e0e3',
+          '#9fe6b8',
+          '#ffdb5c',
+          '#ff9f7f',
+          '#fb7293'
+        ],
         /**
          * @description Chart unit
          * @type {String}
          * @default unit = ''
          */
-        unit: ''
+        unit: '',
+        /**
+         * @description Show item value
+         * @type {Boolean}
+         * @default showValue = false
+         */
+        showValue: false
       },
 
       mergedConfig: null,
 
       capsuleLength: [],
-      labelData: []
+      capsuleValue: [],
+      labelData: [],
+      labelDataLength: []
     }
   },
   watch: {
@@ -87,7 +110,10 @@ export default {
     mergeConfig() {
       let { config, defaultConfig } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
     calcCapsuleLengthAndLabelData() {
       const { data } = this.mergedConfig
@@ -98,11 +124,21 @@ export default {
 
       const maxValue = Math.max(...capsuleValue)
 
-      this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
+      this.capsuleValue = capsuleValue
+
+      this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
 
       const oneFifth = maxValue / 5
 
-      this.labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
+      const labelData = Array.from(
+        new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
+      )
+
+      this.labelData = labelData
+
+      this.labelDataLength = Array.from(labelData).map(v =>
+        maxValue ? v / maxValue : 0
+      )
     }
   },
   mounted() {

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}`,
+      ref: `charts-container-${id}`,
-      chartRef: `chart-${timestamp}`,
+      chartRef: `chart-${id}`,
 
       chart: null
     }

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}`,
+      animationId1: `d10ani1${id}`,
-      animationId2: `d10ani2${timestamp}`,
+      animationId2: `d10ani2${id}`,
-      animationId3: `d10ani3${timestamp}`,
+      animationId3: `d10ani3${id}`,
-      animationId4: `d10ani4${timestamp}`,
+      animationId4: `d10ani4${id}`,
-      animationId5: `d10ani5${timestamp}`,
+      animationId5: `d10ani5${id}`,
-      animationId6: `d10ani6${timestamp}`,
+      animationId6: `d10ani6${id}`,
-      animationId7: `d10ani7${timestamp}`,
+      animationId7: `d10ani7${id}`,
 
       defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
 

lib/components/decoration11/src/main.vue

@@ -72,7 +72,6 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
     return {
       ref: 'decoration-11',
 

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%;
   }

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],
 

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 () {

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}`,
+      maskId: `flyline-mask-id-${id}`,
-      maskCircleId: `mask-circle-id-${timestamp}`,
+      maskCircleId: `mask-circle-id-${id}`,
-      gradientId: `gradient-id-${timestamp}`,
+      gradientId: `gradient-id-${id}`,
-      gradient2Id: `gradient2-id-${timestamp}`,
+      gradient2Id: `gradient2-id-${id}`,
 
       defaultConfig: {
         /**

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}`,
+      flylineGradientId: `flyline-gradient-id-${id}`,
-      haloGradientId: `halo-gradient-id-${timestamp}`,
+      haloGradientId: `halo-gradient-id-${id}`,
       /**
        * @description Type Declaration
        * 

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}`,
+      gradientId1: `percent-pond-gradientId1-${id}`,
-      gradientId2: `percent-pond-gradientId2-${timestamp}`,
+      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.width = clientWidth
-      this.height = dom.clientHeight
+      this.height = clientHeight
     },
     mergeConfig () {
       const { config, defaultConfig } = this

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,

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
 

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: {
         /**

lib/util/index.js

@@ -37,3 +37,11 @@ export function getPointDistance (pointOne, pointTwo) {
 
   return Math.sqrt(minusX * minusX + minusY * minusY)
 }
+
+export function uuid (hasHyphen) {
+  return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
+		const r = Math.random() * 16 | 0
+		const v = c == 'x' ? r : (r & 0x3 | 0x8)
+		return v.toString(16)
+  })
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.8.1",
+  "version": "2.9.3",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "lib/index.js",

src/components/activeRingChart/src/main.vue

@@ -94,7 +94,13 @@ export default {
          * @type {String}
          * @default animationFrame = 50
          */
-        animationFrame: 50
+        animationFrame: 50,
+        /**
+         * @description showOriginValue
+         * @type {Boolean}
+         * @default showOriginValue = false
+         */
+        showOriginValue: false
       },
 
       mergedConfig: null,
@@ -112,17 +118,30 @@ export default {
 
       if (!mergedConfig) return {}
 
-      const { digitalFlopStyle, digitalFlopToFixed, data } = mergedConfig
+      const {
+        digitalFlopStyle,
+        digitalFlopToFixed,
+        data,
+        showOriginValue
+      } = mergedConfig
 
       const value = data.map(({ value }) => value)
 
+      let displayValue
+
+      if (showOriginValue) {
+        displayValue = value[activeIndex]
+      } else {
         const sum = value.reduce((all, v) => all + v, 0)
 
-      const percent = parseFloat(value[activeIndex] / sum * 100) || 0
+        const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
+
+        displayValue = percent
+      }
 
       return {
-        content: '{nt}%',
+        content: showOriginValue ? '{nt}' : '{nt}%',
-        number: [percent],
+        number: [displayValue],
         style: digitalFlopStyle,
         toFixed: digitalFlopToFixed
       }
@@ -173,7 +192,10 @@ export default {
     mergeConfig() {
       const { defaultConfig, config } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
     setRingOption() {
       const { getRingOption, chart, ringAnimation } = this
@@ -217,7 +239,8 @@ export default {
 
       let realRadius = active ? activeRadius : radius
 
-      if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
+      if (typeof realRadius !== 'number')
+        realRadius = (parseInt(realRadius) / 100) * maxRadius
 
       const insideRadius = realRadius - halfLineWidth
       const outSideRadius = realRadius + halfLineWidth

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'],
 

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'],
 

src/components/borderBox13/src/main.vue

@@ -61,7 +61,6 @@ export default {
     }
   },
   data () {
-    const timestamp = +new Date()
     return {
       ref: 'border-box-13',
 

src/components/borderBox8/src/main.vue

@@ -4,7 +4,7 @@
       <defs>
         <path
           :id="path"
-          :d="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
+          :d="pathD"
           fill="transparent"
         />
         <radialGradient
@@ -25,7 +25,7 @@
           <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
             <animateMotion
               :dur="`${dur}s`"
-              :path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
+              :path="pathD"
               rotate="auto"
               repeatCount="indefinite"
             />
@@ -65,6 +65,7 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -85,15 +86,19 @@ export default {
     backgroundColor: {
       type: String,
       default: 'transparent'
+    },
+    reverse: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${timestamp}`,
+      path: `border-box-8-path-${id}`,
-      gradient: `border-box-8-gradient-${timestamp}`,
+      gradient: `border-box-8-gradient-${id}`,
-      mask: `border-box-8-mask-${timestamp}`,
+      mask: `border-box-8-mask-${id}`,
 
       defaultColor: ['#235fa7', '#4fd2dd'],
 
@@ -105,6 +110,13 @@ export default {
       const { width, height } = this
 
       return (width + height - 5) * 2
+    },
+    pathD () {
+      const { reverse, width, height } = this
+
+      if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
+
+      return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
     }
   },
   watch: {

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}`,
+      gradientId: `border-box-9-gradient-${id}`,
-      maskId: `border-box-9-mask-${timestamp}`,
+      maskId: `border-box-9-mask-${id}`,
 
       defaultColor: ['#11eefd', '#0078d2'],
 

src/components/capsuleChart/src/main.vue

@@ -7,16 +7,23 @@
       </div>
 
       <div class="capsule-container">
+        <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
           <div
-          class="capsule-item"
+            class="capsule-item-column"
-          v-for="(capsule, index) in capsuleLength"
+            :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
-          :key="index"
           >
-          <div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
+            <div
+              v-if="mergedConfig.showValue"
+              class="capsule-item-value"
+            >{{ capsuleValue[index] }}</div>
+          </div>
         </div>
 
         <div class="unit-label">
-          <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
+          <div
+            v-for="(label, index) in labelData"
+            :key="label + index"
+          >{{ label }}</div>
         </div>
       </div>
 
@@ -54,19 +61,35 @@ export default {
          * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
          * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
          */
-        colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
+        colors: [
+          '#37a2da',
+          '#32c5e9',
+          '#67e0e3',
+          '#9fe6b8',
+          '#ffdb5c',
+          '#ff9f7f',
+          '#fb7293'
+        ],
         /**
          * @description Chart unit
          * @type {String}
          * @default unit = ''
          */
-        unit: ''
+        unit: '',
+        /**
+         * @description Show item value
+         * @type {Boolean}
+         * @default showValue = false
+         */
+        showValue: false
       },
 
       mergedConfig: null,
 
       capsuleLength: [],
-      labelData: []
+      capsuleValue: [],
+      labelData: [],
+      labelDataLength: []
     }
   },
   watch: {
@@ -87,7 +110,10 @@ export default {
     mergeConfig() {
       let { config, defaultConfig } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
     calcCapsuleLengthAndLabelData() {
       const { data } = this.mergedConfig
@@ -98,11 +124,21 @@ export default {
 
       const maxValue = Math.max(...capsuleValue)
 
-      this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
+      this.capsuleValue = capsuleValue
+
+      this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
 
       const oneFifth = maxValue / 5
 
-      this.labelData = Array.from(new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))))
+      const labelData = Array.from(
+        new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
+      )
+
+      this.labelData = labelData
+
+      this.labelDataLength = Array.from(labelData).map(v =>
+        maxValue ? v / maxValue : 0
+      )
     }
   },
   mounted() {
@@ -150,21 +186,30 @@ export default {
     margin: 5px 0px;
     border-radius: 5px;
 
-    div {
+    .capsule-item-column {
+      position: relative;
       height: 8px;
       margin-top: 1px;
       border-radius: 5px;
       transition: all 0.3s;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      .capsule-item-value {
+        font-size: 12px;
+        transform: translateX(100%);
+      }
     }
   }
 
   .unit-label {
     height: 20px;
     font-size: 12px;
+    position: relative;
     display: flex;
-    flex-direction: row;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
   }
 
   .unit-text {

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}`,
+      ref: `charts-container-${id}`,
-      chartRef: `chart-${timestamp}`,
+      chartRef: `chart-${id}`,
 
       chart: null
     }

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}`,
+      animationId1: `d10ani1${id}`,
-      animationId2: `d10ani2${timestamp}`,
+      animationId2: `d10ani2${id}`,
-      animationId3: `d10ani3${timestamp}`,
+      animationId3: `d10ani3${id}`,
-      animationId4: `d10ani4${timestamp}`,
+      animationId4: `d10ani4${id}`,
-      animationId5: `d10ani5${timestamp}`,
+      animationId5: `d10ani5${id}`,
-      animationId6: `d10ani6${timestamp}`,
+      animationId6: `d10ani6${id}`,
-      animationId7: `d10ani7${timestamp}`,
+      animationId7: `d10ani7${id}`,
 
       defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
 

src/components/decoration11/src/main.vue

@@ -72,7 +72,6 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
     return {
       ref: 'decoration-11',
 

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%;
     }

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],
 

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 () {

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}`,
+      maskId: `flyline-mask-id-${id}`,
-      maskCircleId: `mask-circle-id-${timestamp}`,
+      maskCircleId: `mask-circle-id-${id}`,
-      gradientId: `gradient-id-${timestamp}`,
+      gradientId: `gradient-id-${id}`,
-      gradient2Id: `gradient2-id-${timestamp}`,
+      gradient2Id: `gradient2-id-${id}`,
 
       defaultConfig: {
         /**

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}`,
+      flylineGradientId: `flyline-gradient-id-${id}`,
-      haloGradientId: `halo-gradient-id-${timestamp}`,
+      haloGradientId: `halo-gradient-id-${id}`,
       /**
        * @description Type Declaration
        * 

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}`,
+      gradientId1: `percent-pond-gradientId1-${id}`,
-      gradientId2: `percent-pond-gradientId2-${timestamp}`,
+      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.width = clientWidth
-      this.height = dom.clientHeight
+      this.height = clientHeight
     },
     mergeConfig () {
       const { config, defaultConfig } = this

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,

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
 

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: {
         /**

src/util/index.js

@@ -37,3 +37,11 @@ export function getPointDistance (pointOne, pointTwo) {
 
   return Math.sqrt(minusX * minusX + minusY * minusY)
 }
+
+export function uuid (hasHyphen) {
+  return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
+		const r = Math.random() * 16 | 0
+		const v = c == 'x' ? r : (r & 0x3 | 0x8)
+		return v.toString(16)
+  })
+}