update dist and lib

lib/components/activeRingChart/src/main.vue

@@ -83,6 +83,11 @@ export default {
          * @type {Number}
          */
         digitalFlopToFixed: 0,
+        /**
+         * @description Digital flop unit
+         * @type {String}
+         */
+        digitalFlopUnit: '',
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -122,7 +127,8 @@ export default {
         digitalFlopStyle,
         digitalFlopToFixed,
         data,
-        showOriginValue
+        showOriginValue,
+        digitalFlopUnit
       } = mergedConfig
 
       const value = data.map(({ value }) => value)
@@ -140,7 +146,7 @@ export default {
       }
 
       return {
-        content: showOriginValue ? '{nt}' : '{nt}%',
+        content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
         number: [displayValue],
         style: digitalFlopStyle,
         toFixed: digitalFlopToFixed

lib/components/decoration12/index.js

@@ -0,0 +1,6 @@
+import './src/main.css'
+import Decoration12 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration12.name, Decoration12)
+}

lib/components/decoration12/src/main.css

@@ -0,0 +1,16 @@
+.dv-decoration-12 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.dv-decoration-12 .decoration-content {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

lib/components/decoration12/src/main.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="dv-decoration-12" :ref="ref">
+    <svg :width="width" :height="height">
+      <defs>
+        <g :id="gId">
+          <path
+            :stroke="pathColor[i]"
+            :stroke-width="width / 2"
+            fill="transparent"
+            v-for="(d, i) in pathD"
+            :key="d"
+            :d="d"
+          />
+        </g>
+
+        <radialGradient
+          :id="gradientId"
+          cx="50%" cy="50%" r="50%"
+        >
+          <stop offset="0%" stop-color="transparent" stop-opacity="1" />
+          <stop offset="100%" :stop-color="fade(mergedColor[1] || defaultColor[1], 30)" stop-opacity="1" />
+        </radialGradient>
+      </defs>
+
+      <circle
+        v-for="r in circleR"
+        :key="r"
+        :r="r"
+        :cx="x"
+        :cy="y"
+        :stroke="mergedColor[1]"
+        :stroke-width="0.5"
+        fill="transparent"
+      />
+
+      <circle
+        r="1"
+        :cx="x"
+        :cy="y"
+        stroke="transparent"
+        :fill="`url(#${gradientId})`"
+      >
+        <animate
+          attributeName="r"
+          :values="`1;${width / 2}`"
+          :dur="`${haloDur}s`"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          :dur="`${haloDur}s`"
+          repeatCount="indefinite"
+        />
+      </circle>
+
+      <circle
+        r="2"
+        :cx="x"
+        :cy="y"
+        :fill="mergedColor[1]"
+      />
+
+      <g v-if="showSplitLine">
+        <polyline
+          v-for="p in splitLinePoints"
+          :key="p"
+          :points="p"
+          :stroke="mergedColor[1]"
+          :stroke-width="0.5"
+          opacity="0.5"
+        />
+      </g>
+
+      <path
+        v-for="d in arcD"
+        :key="d"
+        :d="d"
+        :stroke="mergedColor[1]"
+        stroke-width="2"
+        fill="transparent"
+      />
+
+      <use :xlink:href="`#${gId}`">
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          :values="`0, ${x} ${y};360, ${x} ${y}`"
+          :dur="`${scanDur}s`"
+          repeatCount="indefinite"
+        />
+      </use>
+    </svg>
+
+    <div class="decoration-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone, getCircleRadianPoint } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
+
+export default {
+  name: 'DvDecoration12',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    /**
+     * @description Scan animation dur
+     */
+    scanDur: {
+      type: Number,
+      default: 3
+    },
+    /**
+     * @description Halo animation dur
+     */
+    haloDur: {
+      type: Number,
+      default: 2
+    }
+  },
+  data () {
+    const id = uuid()
+    return {
+      ref: 'decoration-12',
+      gId: `decoration-12-g-${id}`,
+      gradientId: `decoration-12-gradient-${id}`,
+
+      defaultColor: ['#2783ce', '#2cf7fe'],
+
+      mergedColor: [],
+
+      pathD: [],
+
+      pathColor: [],
+
+      circleR: [],
+
+      splitLinePoints: [],
+
+      arcD: [],
+
+      segment: 30,
+
+      sectorAngle: Math.PI / 3,
+
+      ringNum: 3,
+
+      ringWidth: 1,
+
+      showSplitLine: true
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  computed: {
+    x () {
+      const { width } = this
+
+      return width / 2
+    },
+    y () {
+      const { height } = this
+
+      return height / 2
+    }
+  },
+  methods: {
+    init () {
+      const { mergeColor, calcPathD, calcPathColor, calcCircleR, calcSplitLinePoints, calcArcD } = this
+
+      mergeColor()
+
+      calcPathD()
+
+      calcPathColor()
+
+      calcCircleR()
+
+      calcSplitLinePoints()
+
+      calcArcD()
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    calcPathD () {
+      const { x, y, width, segment, sectorAngle } = this
+
+      const startAngle = -Math.PI / 2
+      const angleGap = sectorAngle / segment
+      const r = width / 4
+      let lastEndPoints = getCircleRadianPoint(x, y, r, startAngle)
+
+      this.pathD = new Array(segment)
+        .fill('')
+        .map((_, i) => {
+          const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5))
+          const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`
+          lastEndPoints = endPoints
+
+          return d
+        })
+    },
+    calcPathColor () {
+      const { mergedColor: [color], segment } = this
+
+      const colorGap = 100 / (segment - 1)
+
+      this.pathColor = new Array(segment)
+        .fill(color)
+        .map((_, i) => fade(color, 100 - i * colorGap))
+    },
+    calcCircleR () {
+      const { segment, ringNum, width, ringWidth } = this
+
+      const radiusGap = (width / 2 - ringWidth / 2) / ringNum
+
+      this.circleR = new Array(ringNum)
+        .fill(0)
+        .map((_, i) => radiusGap * (i + 1))
+    },
+    calcSplitLinePoints () {
+      const { x, y, width } = this
+
+      const angleGap = Math.PI / 6
+      const r = width / 2
+
+      this.splitLinePoints = new Array(6)
+        .fill('')
+        .map((_, i) => {
+          const startAngle = angleGap * (i + 1)
+          const endAngle = startAngle + Math.PI
+          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
+          const endPoint = getCircleRadianPoint(x, y, r, endAngle)
+
+          return `${startPoint.join(',')} ${endPoint.join(',')}`
+        })
+    },
+    calcArcD () {
+      const { x, y, width } = this
+
+      const angleGap = Math.PI / 6
+      const r = width / 2 - 1
+
+      this.arcD = new Array(4)
+        .fill('')
+        .map((_, i) => {
+          const startAngle = angleGap * (3 * i + 1)
+          const endAngle = startAngle + angleGap
+          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
+          const endPoint = getCircleRadianPoint(x, y, r, endAngle)
+
+          return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`
+        })
+    },
+    afterAutoResizeMixinInit () {
+      const { init } = this
+
+      init()
+    },
+    fade
+  }
+}
+</script>

lib/components/decoration2/src/main.vue

@@ -6,7 +6,7 @@
           :attributeName="reverse ? 'height' : 'width'"
           from="0"
           :to="reverse ? height : width"
-          dur="6s"
+          :dur="`${dur}s`"
           calcMode="spline"
           keyTimes="0;1"
           keySplines=".42,0,.58,1"
@@ -19,7 +19,7 @@
           :attributeName="reverse ? 'y' : 'x'"
           from="0"
           :to="reverse ? height : width"
-          dur="6s"
+          :dur="`${dur}s`"
           calcMode="spline"
           keyTimes="0;1"
           keySplines="0.42,0,0.58,1"
@@ -48,6 +48,10 @@ export default {
     reverse: {
       type: Boolean,
       default: false
+    },
+    dur: {
+      type: Number,
+      default: 6
     }
   },
   data () {

lib/components/decoration4/src/main.css

@@ -10,12 +10,12 @@
   flex: 1;
 }
 .dv-decoration-4 .normal {
-  animation: ani-height 3s ease-in-out infinite;
+  animation: ani-height ease-in-out infinite;
   left: 50%;
   margin-left: -2px;
 }
 .dv-decoration-4 .reverse {
-  animation: ani-width 3s ease-in-out infinite;
+  animation: ani-width ease-in-out infinite;
   top: 50%;
   margin-top: -2px;
 }

lib/components/decoration4/src/main.vue

@@ -2,7 +2,7 @@
   <div class="dv-decoration-4" :ref="ref">
     <div
       :class="`container ${reverse ? 'reverse' : 'normal'}`"
-      :style="reverse ? `width:${width}px;height:5px` : `width:5px;height:${height}px;`"
+      :style="reverse ? `width:${width}px;height:5px;animation-duration:${dur}s` : `width:5px;height:${height}px;animation-duration:${dur}s`"
     >
       <svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
         <polyline
@@ -40,6 +40,10 @@ export default {
     reverse: {
       type: Boolean,
       default: false
+    },
+    dur: {
+      type: Number,
+      default: 3
     }
   },
   data () {

lib/components/decoration5/src/main.vue

@@ -12,7 +12,7 @@
           attributeType="XML"
           :from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
           :to="`0, 0, ${line1Length}, 0`"
-          dur="1.2s"
+          :dur="`${dur}s`"
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
@@ -31,7 +31,7 @@
           attributeType="XML"
           :from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
           :to="`0, 0, ${line2Length}, 0`"
-          dur="1.2s"
+          :dur="`${dur}s`"
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
@@ -59,6 +59,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    dur: {
+      type: Number,
+      default: 1.2
     }
   },
   data () {

lib/index.js

@@ -21,6 +21,7 @@ export { default as conicalColumnChart } from './components/conicalColumnChart/i
 export { default as decoration1 } from './components/decoration1/index'
 export { default as decoration10 } from './components/decoration10/index'
 export { default as decoration11 } from './components/decoration11/index'
+export { default as decoration12 } from './components/decoration12/index'
 export { default as decoration2 } from './components/decoration2/index'
 export { default as decoration3 } from './components/decoration3/index'
 export { default as decoration4 } from './components/decoration4/index'
@@ -71,6 +72,7 @@ import decoration8 from './components/decoration8/index'
 import decoration9 from './components/decoration9/index'
 import decoration10 from './components/decoration10/index'
 import decoration11 from './components/decoration11/index'
+import decoration12 from './components/decoration12/index'
 
 // charts
 import charts from './components/charts/index'
@@ -120,6 +122,7 @@ export default function (Vue) {
   Vue.use(decoration9)
   Vue.use(decoration10)
   Vue.use(decoration11)
+  Vue.use(decoration12)
 
   // charts
   Vue.use(charts)

lib/mixin/autoResize.js

@@ -29,7 +29,7 @@ export default {
       const { $nextTick, $refs, ref, onResize } = this
 
       return new Promise(resolve => {
-        $nextTick(e => {
+        $nextTick(_ => {
           const dom = this.dom = $refs[ref]
 
           this.width = dom ? dom.clientWidth : 0