update dist and lib

2.optimize unit-label child style;

CHANGELOG.md

@@ -1,3 +1,23 @@
+# 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
+
+- **digitalFlop:** Use `\n` to start a newline.
+- **digitalFlop:** `rowGap` configuration.
+
 # 2.7.4-alpha (2020-04-15)
 
 ### Bug Fixes

lib/components/activeRingChart/src/main.vue

@@ -28,7 +28,7 @@ export default {
       default: () => ({})
     }
   },
-  data () {
+  data() {
     return {
       defaultConfig: {
         /**
@@ -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,
@@ -107,34 +113,47 @@ export default {
     }
   },
   computed: {
-    digitalFlop () {
+    digitalFlop() {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return {}
 
-      const { digitalFlopStyle, digitalFlopToFixed, data } = mergedConfig
+      const {
+        digitalFlopStyle,
+        digitalFlopToFixed,
+        data,
+        showOriginValue
+      } = mergedConfig
 
       const value = data.map(({ value }) => value)
 
-      const sum = value.reduce((all, v) => all + v, 0)
+      let displayValue
 
-      const percent = parseFloat(value[activeIndex] / sum * 100) || 0
+      if (showOriginValue) {
+        displayValue = value[activeIndex]
+      } else {
+        const sum = value.reduce((all, v) => all + v, 0)
+
+        const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
+
+        displayValue = percent
+      }
 
       return {
-        content: '{nt}%',
-        number: [percent],
+        content: showOriginValue ? '{nt}' : '{nt}%',
+        number: [displayValue],
         style: digitalFlopStyle,
         toFixed: digitalFlopToFixed
       }
     },
-    ringName () {
+    ringName() {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return ''
 
       return mergedConfig.data[activeIndex].name
     },
-    fontSize () {
+    fontSize() {
       const { mergedConfig } = this
 
       if (!mergedConfig) return ''
@@ -143,7 +162,7 @@ export default {
     }
   },
   watch: {
-    config () {
+    config() {
       const { animationHandler, mergeConfig, setRingOption } = this
 
       clearTimeout(animationHandler)
@@ -156,7 +175,7 @@ export default {
     }
   },
   methods: {
-    init () {
+    init() {
       const { initChart, mergeConfig, setRingOption } = this
 
       initChart()
@@ -165,17 +184,20 @@ export default {
 
       setRingOption()
     },
-    initChart () {
+    initChart() {
       const { $refs } = this
 
       this.chart = new Charts($refs['active-ring-chart'])
     },
-    mergeConfig () {
+    mergeConfig() {
       const { defaultConfig, config } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
-    setRingOption () {
+    setRingOption() {
       const { getRingOption, chart, ringAnimation } = this
 
       const option = getRingOption()
@@ -184,7 +206,7 @@ export default {
 
       ringAnimation()
     },
-    getRingOption () {
+    getRingOption() {
       const { mergedConfig, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -206,7 +228,7 @@ export default {
         color: mergedConfig.color
       }
     },
-    getRealRadius (active = false) {
+    getRealRadius(active = false) {
       const { mergedConfig, chart } = this
 
       const { radius, activeRadius, lineWidth } = mergedConfig
@@ -217,14 +239,15 @@ 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
 
       return [insideRadius, outSideRadius]
     },
-    ringAnimation () {
+    ringAnimation() {
       let { activeIndex, getRingOption, chart, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -257,12 +280,12 @@ export default {
       }, activeTimeGap)
     }
   },
-  mounted () {
+  mounted() {
     const { init } = this
 
     init()
   },
-  beforeDestroy () {
+  beforeDestroy() {
     const { animationHandler } = this
 
     clearTimeout(animationHandler)

lib/components/borderBox1/src/main.vue

@@ -1,5 +1,16 @@
 <template>
-  <div class="dv-border-box-1">
+  <div class="dv-border-box-1" :ref="ref">
+    <svg class="border" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
+      38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
+      85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
+      ${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
+      ${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
+      ${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
+      ${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
+      ${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
+    </svg>
+
     <svg
       width="150px"
       height="150px"
@@ -52,20 +63,29 @@
 </template>
 
 <script>
+import autoResize from '../../../mixin/autoResize'
+
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
   name: 'DvBorderBox1',
+  mixins: [autoResize],
   props: {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {
     return {
+      ref: 'border-box-1',
+
       border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
 
       defaultColor: ['#4fd2dd', '#235fa7'],

lib/components/borderBox10/src/main.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="dv-border-box-10" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
+  <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
+    <svg class="border" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
+        4, ${height} 0, ${height - 4} 0, 4
+      `" />
+    </svg>
+
     <svg
       width="150px"
       height="150px"
@@ -20,20 +27,29 @@
 </template>
 
 <script>
+import autoResize from '../../../mixin/autoResize'
+
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
   name: 'DvBorderBox10',
+  mixins: [autoResize],
   props: {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {
     return {
+      ref: 'border-box-10',
+
       border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
 
       defaultColor: ['#1d48c4', '#d3e1f8'],

lib/components/borderBox11/src/main.vue

@@ -14,6 +14,13 @@
         </filter>
       </defs>
 
+      <polygon :fill="backgroundColor" :points="`
+        20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
+        ${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
+        ${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
+        20, ${height - 8} 8, ${height - 25} 8, 50
+      `" />
+
       <polyline
         :stroke="mergedColor[0]"
         :filter="`url(#${filterId})`"
@@ -231,6 +238,10 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox12/src/main.vue

@@ -28,7 +28,7 @@
 
       <path
         v-if="width && height"
-        fill="transparent"
+        :fill="backgroundColor"
         stroke-width="2"
         :stroke="mergedColor[0]"
         :d="`
@@ -106,6 +106,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox13/src/main.vue

@@ -2,7 +2,7 @@
   <div class="dv-border-box-13" :ref="ref">
     <svg class="dv-border-svg-container" :width="width" :height="height">
       <path
-        fill="transparent"
+        :fill="backgroundColor"
         :stroke="mergedColor[0]"
         :d="`
           M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
@@ -54,6 +54,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox2/src/main.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="dv-border-box-2" :ref="ref">
     <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
+      `" />
+
       <polyline
         :stroke="mergedColor[0]"
         :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
@@ -35,6 +39,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox3/src/main.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="dv-border-box-3" :ref="ref">
     <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
+      `" />
+
       <polyline class="dv-bb3-line1"
         :stroke="mergedColor[0]"
         :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
@@ -39,6 +43,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox4/src/main.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="dv-border-box-4" :ref="ref">
     <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        ${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
+        16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
+      `" />
+
       <polyline class="dv-bb4-line-1"
         :stroke="mergedColor[0]"
         :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
@@ -46,6 +51,10 @@ export default {
     reverse: {
       type: Boolean,
       default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox5/src/main.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="dv-border-box-5" :ref="ref">
     <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
+      `" />
+
       <polyline
         class="dv-bb5-line-1"
         :stroke="mergedColor[0]"
@@ -43,6 +47,10 @@ export default {
     reverse: {
       type: Boolean,
       default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox6/src/main.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="dv-border-box-6" :ref="ref">
     <svg class="dv-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
+      `" />
+
       <circle :fill="mergedColor[1]" cx="5" cy="5" r="2"/>
       <circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
       <circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
@@ -39,6 +43,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox7/src/main.vue

@@ -2,7 +2,7 @@
 <template>
   <div
     class="dv-border-box-7"
-    :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}`"
+    :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
     :ref="ref"
   >
     <svg class="dv-svg-container" :width="width" :height="height">
@@ -37,6 +37,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

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"
             />
@@ -33,6 +33,8 @@
         </mask>
       </defs>
 
+      <polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
+
       <use
         :stroke="mergedColor[0]"
         stroke-width="1"
@@ -79,6 +81,14 @@ export default {
     dur: {
       type: Number,
       default: 3
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    reverse: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -99,6 +109,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

@@ -105,6 +105,15 @@
         </mask>
       </defs>
 
+      <polygon :fill="backgroundColor" :points="`
+        15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
+        ${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
+        ${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
+        ${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
+        ${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10}  ${width * 0.92 + 2}, ${height - 6}
+        11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
+      `" />
+
       <rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
     </svg>
 
@@ -128,6 +137,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

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 :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
+        <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
+          <div
+            class="capsule-item-column"
+            :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
+          >
+            <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>
 
@@ -38,7 +45,7 @@ export default {
       default: () => ({})
     }
   },
-  data () {
+  data() {
     return {
       defaultConfig: {
         /**
@@ -54,42 +61,61 @@ 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: {
-    config () {
+    config() {
       const { calcData } = this
 
       calcData()
     }
   },
   methods: {
-    calcData () {
+    calcData() {
       const { mergeConfig, calcCapsuleLengthAndLabelData } = this
 
       mergeConfig()
 
       calcCapsuleLengthAndLabelData()
     },
-    mergeConfig () {
+    mergeConfig() {
       let { config, defaultConfig } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
-    calcCapsuleLengthAndLabelData () {
+    calcCapsuleLengthAndLabelData() {
       const { data } = this.mergedConfig
 
       if (!data.length) return
@@ -98,14 +124,24 @@ 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 = 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 () {
+  mounted() {
     const { calcData } = this
 
     calcData()

lib/components/digitalFlop/src/main.vue

@@ -53,6 +53,12 @@ export default {
          * @example textAlign = 'center' | 'left' | 'right'
          */
         textAlign: 'center',
+        /**
+         * @description rowGap
+         * @type {Number}
+         @default rowGap = 0
+         */
+        rowGap: 0,
         /**
          * @description Text style configuration
          * @type {Object} {CRender Class Style}
@@ -124,7 +130,7 @@ export default {
       })
     },
     getShape () {
-      const { number, content, toFixed, textAlign } = this.mergedConfig
+      const { number, content, toFixed, textAlign, rowGap } = this.mergedConfig
 
       const [w, h] = this.renderer.area
 
@@ -137,7 +143,8 @@ export default {
         number,
         content,
         toFixed,
-        position
+        position,
+        rowGap
       }
     },
     getStyle () {

package.json

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

src/components/activeRingChart/src/main.vue

@@ -28,7 +28,7 @@ export default {
       default: () => ({})
     }
   },
-  data () {
+  data() {
     return {
       defaultConfig: {
         /**
@@ -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,
@@ -107,34 +113,47 @@ export default {
     }
   },
   computed: {
-    digitalFlop () {
+    digitalFlop() {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return {}
 
-      const { digitalFlopStyle, digitalFlopToFixed, data } = mergedConfig
+      const {
+        digitalFlopStyle,
+        digitalFlopToFixed,
+        data,
+        showOriginValue
+      } = mergedConfig
 
       const value = data.map(({ value }) => value)
 
-      const sum = value.reduce((all, v) => all + v, 0)
+      let displayValue
 
-      const percent = parseFloat(value[activeIndex] / sum * 100) || 0
+      if (showOriginValue) {
+        displayValue = value[activeIndex]
+      } else {
+        const sum = value.reduce((all, v) => all + v, 0)
+
+        const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
+
+        displayValue = percent
+      }
 
       return {
-        content: '{nt}%',
-        number: [percent],
+        content: showOriginValue ? '{nt}' : '{nt}%',
+        number: [displayValue],
         style: digitalFlopStyle,
         toFixed: digitalFlopToFixed
       }
     },
-    ringName () {
+    ringName() {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return ''
 
       return mergedConfig.data[activeIndex].name
     },
-    fontSize () {
+    fontSize() {
       const { mergedConfig } = this
 
       if (!mergedConfig) return ''
@@ -143,7 +162,7 @@ export default {
     }
   },
   watch: {
-    config () {
+    config() {
       const { animationHandler, mergeConfig, setRingOption } = this
 
       clearTimeout(animationHandler)
@@ -156,7 +175,7 @@ export default {
     }
   },
   methods: {
-    init () {
+    init() {
       const { initChart, mergeConfig, setRingOption } = this
 
       initChart()
@@ -165,17 +184,20 @@ export default {
 
       setRingOption()
     },
-    initChart () {
+    initChart() {
       const { $refs } = this
 
       this.chart = new Charts($refs['active-ring-chart'])
     },
-    mergeConfig () {
+    mergeConfig() {
       const { defaultConfig, config } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
-    setRingOption () {
+    setRingOption() {
       const { getRingOption, chart, ringAnimation } = this
 
       const option = getRingOption()
@@ -184,7 +206,7 @@ export default {
 
       ringAnimation()
     },
-    getRingOption () {
+    getRingOption() {
       const { mergedConfig, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -206,7 +228,7 @@ export default {
         color: mergedConfig.color
       }
     },
-    getRealRadius (active = false) {
+    getRealRadius(active = false) {
       const { mergedConfig, chart } = this
 
       const { radius, activeRadius, lineWidth } = mergedConfig
@@ -217,14 +239,15 @@ 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
 
       return [insideRadius, outSideRadius]
     },
-    ringAnimation () {
+    ringAnimation() {
       let { activeIndex, getRingOption, chart, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -257,12 +280,12 @@ export default {
       }, activeTimeGap)
     }
   },
-  mounted () {
+  mounted() {
     const { init } = this
 
     init()
   },
-  beforeDestroy () {
+  beforeDestroy() {
     const { animationHandler } = this
 
     clearTimeout(animationHandler)

src/components/borderBox1/src/main.vue

@@ -1,5 +1,16 @@
 <template>
-  <div class="dv-border-box-1">
+  <div class="dv-border-box-1" :ref="ref">
+    <svg class="border" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
+      38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
+      85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
+      ${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
+      ${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
+      ${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
+      ${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
+      ${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
+    </svg>
+
     <svg
       width="150px"
       height="150px"
@@ -52,20 +63,29 @@
 </template>
 
 <script>
+import autoResize from '../../../mixin/autoResize'
+
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
   name: 'DvBorderBox1',
+  mixins: [autoResize],
   props: {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {
     return {
+      ref: 'border-box-1',
+
       border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
 
       defaultColor: ['#4fd2dd', '#235fa7'],

src/components/borderBox10/src/main.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="dv-border-box-10" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
+  <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
+    <svg class="border" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
+        4, ${height} 0, ${height - 4} 0, 4
+      `" />
+    </svg>
+
     <svg
       width="150px"
       height="150px"
@@ -20,20 +27,29 @@
 </template>
 
 <script>
+import autoResize from '../../../mixin/autoResize'
+
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
   name: 'DvBorderBox10',
+  mixins: [autoResize],
   props: {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {
     return {
+      ref: 'border-box-10',
+
       border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
 
       defaultColor: ['#1d48c4', '#d3e1f8'],

src/components/borderBox11/src/main.vue

@@ -14,6 +14,13 @@
         </filter>
       </defs>
 
+      <polygon :fill="backgroundColor" :points="`
+        20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
+        ${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
+        ${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
+        20, ${height - 8} 8, ${height - 25} 8, 50
+      `" />
+
       <polyline
         :stroke="mergedColor[0]"
         :filter="`url(#${filterId})`"
@@ -231,6 +238,10 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

src/components/borderBox12/src/main.vue

@@ -28,7 +28,7 @@
 
       <path
         v-if="width && height"
-        fill="transparent"
+        :fill="backgroundColor"
         stroke-width="2"
         :stroke="mergedColor[0]"
         :d="`
@@ -106,6 +106,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

src/components/borderBox13/src/main.vue

@@ -2,7 +2,7 @@
   <div class="dv-border-box-13" :ref="ref">
     <svg class="dv-border-svg-container" :width="width" :height="height">
       <path
-        fill="transparent"
+        :fill="backgroundColor"
         :stroke="mergedColor[0]"
         :d="`
           M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
@@ -54,6 +54,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

src/components/borderBox2/src/main.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="dv-border-box-2" :ref="ref">
     <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
+      `" />
+
       <polyline
         :stroke="mergedColor[0]"
         :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
@@ -35,6 +39,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

src/components/borderBox3/src/main.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="dv-border-box-3" :ref="ref">
     <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
+      `" />
+
       <polyline class="dv-bb3-line1"
         :stroke="mergedColor[0]"
         :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
@@ -39,6 +43,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

src/components/borderBox4/src/main.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="dv-border-box-4" :ref="ref">
     <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        ${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
+        16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
+      `" />
+
       <polyline class="dv-bb4-line-1"
         :stroke="mergedColor[0]"
         :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
@@ -46,6 +51,10 @@ export default {
     reverse: {
       type: Boolean,
       default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

src/components/borderBox5/src/main.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="dv-border-box-5" :ref="ref">
     <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
+      `" />
+
       <polyline
         class="dv-bb5-line-1"
         :stroke="mergedColor[0]"
@@ -43,6 +47,10 @@ export default {
     reverse: {
       type: Boolean,
       default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

src/components/borderBox6/src/main.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="dv-border-box-6" :ref="ref">
     <svg class="dv-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
+      `" />
+
       <circle :fill="mergedColor[1]" cx="5" cy="5" r="2"/>
       <circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
       <circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
@@ -39,6 +43,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

src/components/borderBox7/src/main.vue

@@ -2,7 +2,7 @@
 <template>
   <div
     class="dv-border-box-7"
-    :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}`"
+    :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
     :ref="ref"
   >
     <svg class="dv-svg-container" :width="width" :height="height">
@@ -37,6 +37,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

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"
             />
@@ -33,6 +33,8 @@
         </mask>
       </defs>
 
+      <polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
+
       <use
         :stroke="mergedColor[0]"
         stroke-width="1"
@@ -79,6 +81,14 @@ export default {
     dur: {
       type: Number,
       default: 3
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    reverse: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -99,6 +109,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

@@ -105,6 +105,15 @@
         </mask>
       </defs>
 
+      <polygon :fill="backgroundColor" :points="`
+        15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
+        ${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
+        ${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
+        ${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
+        ${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10}  ${width * 0.92 + 2}, ${height - 6}
+        11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
+      `" />
+
       <rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
     </svg>
 
@@ -128,6 +137,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
   },
   data () {

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 :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
+        <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
+          <div
+            class="capsule-item-column"
+            :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
+          >
+            <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>
 
@@ -38,7 +45,7 @@ export default {
       default: () => ({})
     }
   },
-  data () {
+  data() {
     return {
       defaultConfig: {
         /**
@@ -54,42 +61,61 @@ 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: {
-    config () {
+    config() {
       const { calcData } = this
 
       calcData()
     }
   },
   methods: {
-    calcData () {
+    calcData() {
       const { mergeConfig, calcCapsuleLengthAndLabelData } = this
 
       mergeConfig()
 
       calcCapsuleLengthAndLabelData()
     },
-    mergeConfig () {
+    mergeConfig() {
       let { config, defaultConfig } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
-    calcCapsuleLengthAndLabelData () {
+    calcCapsuleLengthAndLabelData() {
       const { data } = this.mergedConfig
 
       if (!data.length) return
@@ -98,14 +124,24 @@ 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 = 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 () {
+  mounted() {
     const { calcData } = this
 
     calcData()
@@ -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/digitalFlop/src/main.vue

@@ -53,6 +53,12 @@ export default {
          * @example textAlign = 'center' | 'left' | 'right'
          */
         textAlign: 'center',
+        /**
+         * @description rowGap
+         * @type {Number}
+         @default rowGap = 0
+         */
+        rowGap: 0,
         /**
          * @description Text style configuration
          * @type {Object} {CRender Class Style}
@@ -124,7 +130,7 @@ export default {
       })
     },
     getShape () {
-      const { number, content, toFixed, textAlign } = this.mergedConfig
+      const { number, content, toFixed, textAlign, rowGap } = this.mergedConfig
 
       const [w, h] = this.renderer.area
 
@@ -137,7 +143,8 @@ export default {
         number,
         content,
         toFixed,
-        position
+        position,
+        rowGap
       }
     },
     getStyle () {