update lib

Bug Fixes: Enhance the animation compatibility of borderbox1 and fix spelling errors

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,28 @@
+---
+name: Bug report
+about: 提交Bug反馈
+---
+
+<!-- 请确定这是一个Bug反馈，而不是一个需求反馈或问题求助，否则ISSUE可能被关闭 -->
+<!-- 请提供可供复现Bug的必要条件，否则ISSUE可能被关闭 -->
+<!-- 创建Bug反馈前请确定你的DataV是最新版的 -->
+
+## Bug report
+
+#### 出现Bug的组件？
+
+#### 组件配置数据？
+<!-- (config等props，若无配置请忽略) -->
+
+#### 控制台错误输出？
+<!-- (若无错误输出请忽略) -->
+
+#### 期望情况？
+
+#### 实际情况？
+
+#### 其他相关信息
+
+- DataV版本
+- 浏览器版本
+- 其他

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,14 @@
+---
+name: Feature request
+about: 新特性建议
+---
+
+<!-- 创建新特性建议前请确定你的DataV是最新版的 -->
+
+## Feature request
+
+#### 这个特性解决了什么问题？
+
+#### 这个特性的实现形式？
+
+#### 是否愿意为此特性提交PR？

.github/ISSUE_TEMPLATE/new_component_request.md

@@ -0,0 +1,20 @@
+---
+name: Component request
+about: 新组件建议
+---
+
+<!-- 创建新组件建议前请确定你的DataV是最新版的 -->
+<!-- (将[ ]修改为[x]) -->
+
+## Component request
+
+#### 新组件的类型？
+
+* [ ] 边框
+* [ ] 装饰
+* [ ] 图表
+* [ ] 其他
+
+#### 这个组件的功能描述 (边框及装饰类，请提供样图)？
+
+#### 是否愿意为此组件提交PR？

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,33 @@
+<!-- (将[ ]修改为[x]) -->
+
+**该PR的类型是？** (至少选择一个)
+
+- [ ] Bug修复
+- [ ] 新特性
+- [ ] 新组件
+
+**该PR是否向下兼容?** (选择任一)
+
+- [ ] 是
+- [ ] 否
+
+如果为否，请描述冲突情况:
+
+**涉及到的ISSUE:**
+
+- [ ] 该PR如果涉及到某个ISSUE, 请在PR标题中描述出来 (例如. `fix #xxx[,#xxx]`, "xxx"为ISSUE序号)
+
+**是否在Chrome浏览器下进行过测试？**
+
+- [ ] 是
+- [ ] 否
+
+如果这是一个**新特性**或**新组件**相关的PR，请提供如下信息
+
+- [ ] 添加该特性或组件的原因
+- [ ] 文档应该修改哪些信息
+- [ ] 测试相关
+
+提交**新特性**或**新组件**前请先发起一个相关的ISSUE请求
+
+**其他信息:**

CHANGELOG.md

@@ -1,8 +1,55 @@
+# 2.4.2-alpha (2019-08-30)
+
+### Perfect
+
+- **capsuleChart:** Class name compatibility optimization.
+
+# 2.4.1-alpha (2019-08-29)
+
+### Perfect
+
+- **capsuleChart:** Adaptive display unit.
+
+# 2.4.0-alpha (2019-08-29)
+
+### New
+
+- **borderBox10**
+- **capsuleChart**
+
+# 2.3.9-alpha (2019-08-27)
+
+### Perfect
+
+- **percentPond:** Compatibility enhancement. 
+
+# 2.3.8-alpha (2019-08-27)
+
+### Bug Fixes
+
+- **percentPond:** Style compatibility and gradient exceptions. 
+
+# 2.3.7-alpha (2019-08-26)
+
+### Bug Fixes
+
+- **borderBox1:** Parent container setting `text-align: center` to cause display exception [(#6)](https://github.com/jiaming743/DataV/issues/6). 
+
+# 2.3.6-alpha (2019-08-24)
+
+### Bug Fixes
+
+- **borderBox1:** Animation exception caused by incompatible syntax and spelling mistake [(#4)](https://github.com/jiaming743/DataV/issues/4)[(#5)](https://github.com/jiaming743/DataV/pull/5). 
+
+### Perfect
+
+- **svg:** Svg animation compatibility enhancement.
+
 # 2.3.5-alpha (2019-08-22)
 
 ### Bug Fixes
 
-- **activeRingChart:** Color configuration does not take effect.
+- **activeRingChart:** Color configuration does not take effect [(#3)](https://github.com/jiaming743/DataV/pull/3). 
 
 # 2.3.4-alpha (2019-08-15)
 

README.md

@@ -1,7 +1,6 @@
 [ENGLISH](./README_EN.md)
 
 <h1 align="center">DataV</h1>
-
 <p align="center">
     <a href="https://github.com/jiaming743/datav/blob/master/LICENSE">
       <img src="https://img.shields.io/github/license/jiaming743/datav.svg" alt="LICENSE" />
@@ -37,4 +36,20 @@ import { borderBox1 } from '@jiaminghi/data-view'
 Vue.use(borderBox1)
 ```
 
-详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).
+详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).
+
+### Demo
+
+Demo页面使用了全屏组件，请F11全屏后查看。
+
+* [施工养护综合数据](http://datav.jiaminghi.com/demo/construction-data/index.html)
+
+![construction-data](./demoImg/construction-data.jpg)
+
+* [机电运维管理台](http://datav.jiaminghi.com/demo/manage-desk/index.html)
+
+![manage-desk](./demoImg/manage-desk.jpg)
+
+* [机电设备电子档案](http://datav.jiaminghi.com/demo/electronic-file/index.html)
+
+![electronic-file](./demoImg/electronic-file.jpg)

README_EN.md

@@ -37,4 +37,20 @@ import { borderBox1 } from '@jiaminghi/data-view'
 Vue.use(borderBox1)
 ```
 
-Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
+Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
+
+### Demo
+
+The Demo page uses the full-screen component, please view it after F11 full screen.
+
+* [Construction Data](http://datav.jiaminghi.com/demo/construction-data/index.html)
+
+![construction-data](./demoImg/construction-data.jpg)
+
+* [Manage-Desk](http://datav.jiaminghi.com/demo/manage-desk/index.html)
+
+![manage-desk](./demoImg/manage-desk.jpg)
+
+* [Electronic-File](http://datav.jiaminghi.com/demo/electronic-file/index.html)
+
+![electronic-file](./demoImg/electronic-file.jpg)

lib/components/borderBox1/src/main.css

@@ -5,6 +5,7 @@
 }
 .dv-border-box-1 .border {
   position: absolute;
+  display: block;
 }
 .dv-border-box-1 .right-top {
   right: 0px;

lib/components/borderBox1/src/main.vue

@@ -14,7 +14,7 @@
         <animate
           attributeName="fill"
           values="#4fd2dd;#235fa7;#4fd2dd"
-          dur=".5s"
+          dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
@@ -26,7 +26,7 @@
         <animate
           attributeName="fill"
           values="#235fa7;#4fd2dd;#235fa7"
-          dur=".5s"
+          dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
@@ -37,7 +37,7 @@
       >
         <animate
           attributeName="fill"
-          values="#4fd2dd;#235fa7;#transparent"
+          values="#4fd2dd;#235fa7;transparent"
           dur="1s"
           begin="0s"
           repeatCount="indefinite"

lib/components/borderBox10/index.js

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

lib/components/borderBox10/src/main.css

@@ -0,0 +1,29 @@
+.dv-border-box-10 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 25px 3px #1d48c4;
+  border-radius: 6px;
+}
+.dv-border-box-10 .border {
+  position: absolute;
+  display: block;
+}
+.dv-border-box-10 .right-top {
+  right: 0px;
+  transform: rotateY(180deg);
+}
+.dv-border-box-10 .left-bottom {
+  bottom: 0px;
+  transform: rotateX(180deg);
+}
+.dv-border-box-10 .right-bottom {
+  right: 0px;
+  bottom: 0px;
+  transform: rotateX(180deg) rotateY(180deg);
+}
+.dv-border-box-10 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

lib/components/borderBox10/src/main.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="dv-border-box-10">
+    <svg
+      width="150px"
+      height="150px"
+      :key="item"
+      v-for="item in border"
+      :class="`${item} border`"
+    >
+      <polygon
+        fill="#d3e1f8"
+        points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DvBorderBox10',
+  data () {
+    return {
+      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+    }
+  }
+}
+</script>

lib/components/capsuleChart/index.js

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

lib/components/capsuleChart/src/main.css

@@ -0,0 +1,55 @@
+.dv-capsule-chart {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  padding: 10px;
+  color: #fff;
+}
+.dv-capsule-chart .label-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding-right: 10px;
+  text-align: right;
+  font-size: 12px;
+}
+.dv-capsule-chart .label-column div {
+  height: 20px;
+  line-height: 20px;
+}
+.dv-capsule-chart .capsule-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.dv-capsule-chart .capsule-item {
+  box-shadow: 0 0 3px #999;
+  height: 10px;
+  margin: 5px 0px;
+  border-radius: 5px;
+}
+.dv-capsule-chart .capsule-item div {
+  height: 8px;
+  margin-top: 1px;
+  border-radius: 5px;
+  transition: all 0.3s;
+}
+.dv-capsule-chart .unit-label {
+  height: 20px;
+  font-size: 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.dv-capsule-chart .unit-text {
+  text-align: right;
+  display: flex;
+  align-items: flex-end;
+  font-size: 12px;
+  line-height: 20px;
+  margin-left: 10px;
+}

lib/components/capsuleChart/src/main.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="dv-capsule-chart">
+    <template v-if="mergedConfig">
+      <div class="label-column">
+        <div v-for="item in mergedConfig.data" :key="item.name">{{ item.name }}</div>
+        <div>&nbsp;</div>
+      </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>
+
+        <div class="unit-label">
+          <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
+        </div>
+      </div>
+
+      <div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvCapsuleChart',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      defaultConfig: {
+        /**
+         * @description Capsule chart data
+         * @type {Array<Object>}
+         * @default data = []
+         * @example data = [{ name: 'foo1', value: 100 }, { name: 'foo2', value: 100 }]
+         */
+        data: [],
+        /**
+         * @description Colors (hex|rgb|rgba|color keywords)
+         * @type {Array<String>}
+         * @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'],
+        /**
+         * @description Chart unit
+         * @type {String}
+         * @default unit = ''
+         */
+        unit: ''
+      },
+
+      mergedConfig: null,
+
+      capsuleLength: [],
+      labelData: []
+    }
+  },
+  watch: {
+    config () {
+      const { calcData } = this
+
+      calcData()
+    }
+  },
+  methods: {
+    calcData () {
+      const { mergeConfig, calcCapsuleLengthAndLabelData } = this
+
+      mergeConfig()
+
+      calcCapsuleLengthAndLabelData()
+    },
+    mergeConfig () {
+      let { config, defaultConfig } = this
+
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+    },
+    calcCapsuleLengthAndLabelData () {
+      const { data } = this.mergedConfig
+
+      if (!data.length) return
+
+      const capsuleValue = data.map(({ value }) => value)
+
+      const maxValue = Math.max(...capsuleValue)
+
+      this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
+
+      const oneFifth = maxValue / 5
+
+      this.labelData = new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))
+    }
+  },
+  mounted () {
+    const { calcData } = this
+
+    calcData()
+  }
+}
+</script>

lib/components/decoration2/src/main.vue

@@ -22,7 +22,7 @@
           dur="6s"
           calcMode="spline"
           keyTimes="0;1"
-          keySplines=".42,0,.58,1"
+          keySplines="0.42,0,0.58,1"
           repeatCount="indefinite"
         />
       </rect>

lib/components/decoration5/src/main.vue

@@ -16,7 +16,7 @@
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
-          keySplines=".4,1,.49,.98"
+          keySplines="0.4,1,0.49,0.98"
           repeatCount="indefinite"
         />
       </polyline>

lib/components/decoration6/src/main.vue

@@ -16,9 +16,9 @@
             attributeName="y"
             :values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
             :dur="`${randoms[i]}s`"
-            keyTimes="0;.5;1"
+            keyTimes="0;0.5;1"
             calcMode="spline"
-            keySplines=".42,0,.58,1;.42,0,.58,1"
+            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
             begin="0s"
             repeatCount="indefinite"
           />
@@ -26,9 +26,9 @@
             attributeName="height"
             :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
             :dur="`${randoms[i]}s`"
-            keyTimes="0;.5;1"
+            keyTimes="0;0.5;1"
             calcMode="spline"
-            keySplines=".42,0,.58,1;.42,0,.58,1"
+            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
             begin="0s"
             repeatCount="indefinite"
           />

lib/components/percentPond/src/main.css

@@ -1,7 +1,15 @@
 .dv-percent-pond {
+  position: relative;
   display: flex;
   flex-direction: column;
 }
+.dv-percent-pond svg {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
 .dv-percent-pond polyline {
   transition: all 0.3s;
 }

lib/components/percentPond/src/main.vue

@@ -4,13 +4,13 @@
       <defs>
         <linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
 
         <linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
       </defs>
@@ -22,8 +22,8 @@
         fill="transparent"
         :stroke-width="mergedConfig ? mergedConfig.borderWidth : '0'"
         :stroke="`url(#${gradientId1})`"
-        :width="rectWidth"
+        :width="rectWidth > 0 ? rectWidth : 0"
-        :height="rectHeight"
+        :height="rectHeight > 0 ? rectHeight : 0"
       />
       <polyline
         :stroke-width="polylineWidth"

lib/index.js

@@ -3,6 +3,7 @@
  */
 export { default as activeRingChart } from './components/activeRingChart/index'
 export { default as borderBox1 } from './components/borderBox1/index'
+export { default as borderBox10 } from './components/borderBox10/index'
 export { default as borderBox2 } from './components/borderBox2/index'
 export { default as borderBox3 } from './components/borderBox3/index'
 export { default as borderBox4 } from './components/borderBox4/index'
@@ -11,6 +12,7 @@ export { default as borderBox6 } from './components/borderBox6/index'
 export { default as borderBox7 } from './components/borderBox7/index'
 export { default as borderBox8 } from './components/borderBox8/index'
 export { default as borderBox9 } from './components/borderBox9/index'
+export { default as capsuleChart } from './components/capsuleChart/index'
 export { default as charts } from './components/charts/index'
 export { default as conicalColumnChart } from './components/conicalColumnChart/index'
 export { default as decoration1 } from './components/decoration1/index'
@@ -47,6 +49,7 @@ import borderBox6 from './components/borderBox6/index'
 import borderBox7 from './components/borderBox7/index'
 import borderBox8 from './components/borderBox8/index'
 import borderBox9 from './components/borderBox9/index'
+import borderBox10 from './components/borderBox10/index'
 
 // decoration
 import decoration1 from './components/decoration1/index'
@@ -64,6 +67,7 @@ import decoration10 from './components/decoration10/index'
 import charts from './components/charts/index'
 
 import activeRingChart from './components/activeRingChart'
+import capsuleChart from './components/capsuleChart'
 import waterLevelPond from './components/waterLevelPond/index'
 import percentPond from './components/percentPond/index'
 import flylineChart from './components/flylineChart'
@@ -89,6 +93,7 @@ export default function (Vue) {
   Vue.use(borderBox7)
   Vue.use(borderBox8)
   Vue.use(borderBox9)
+  Vue.use(borderBox10)
 
   // decoration
   Vue.use(decoration1)
@@ -106,6 +111,7 @@ export default function (Vue) {
   Vue.use(charts)
 
   Vue.use(activeRingChart)
+  Vue.use(capsuleChart)
   Vue.use(waterLevelPond)
   Vue.use(percentPond)
   Vue.use(flylineChart)

package.json

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

src/components/borderBox1/src/main.vue

@@ -14,7 +14,7 @@
         <animate
           attributeName="fill"
           values="#4fd2dd;#235fa7;#4fd2dd"
-          dur=".5s"
+          dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
@@ -26,7 +26,7 @@
         <animate
           attributeName="fill"
           values="#235fa7;#4fd2dd;#235fa7"
-          dur=".5s"
+          dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
@@ -37,7 +37,7 @@
       >
         <animate
           attributeName="fill"
-          values="#4fd2dd;#235fa7;#transparent"
+          values="#4fd2dd;#235fa7;transparent"
           dur="1s"
           begin="0s"
           repeatCount="indefinite"
@@ -70,6 +70,7 @@ export default {
 
   .border {
     position: absolute;
+    display: block;
   }
 
   .right-top {

src/components/borderBox10/index.js

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

src/components/borderBox10/src/main.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="dv-border-box-10">
+    <svg
+      width="150px"
+      height="150px"
+      :key="item"
+      v-for="item in border"
+      :class="`${item} border`"
+    >
+      <polygon
+        fill="#d3e1f8"
+        points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DvBorderBox10',
+  data () {
+    return {
+      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.dv-border-box-10 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 25px 3px #1d48c4;
+  border-radius: 6px;
+
+  .border {
+    position: absolute;
+    display: block;
+  }
+
+  .right-top {
+    right: 0px;
+    transform: rotateY(180deg);
+  }
+
+  .left-bottom {
+    bottom: 0px;
+    transform: rotateX(180deg);
+  }
+
+  .right-bottom {
+    right: 0px;
+    bottom: 0px;
+    transform: rotateX(180deg) rotateY(180deg);
+  }
+
+  .border-box-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/capsuleChart/index.js

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

src/components/capsuleChart/src/main.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="dv-capsule-chart">
+    <template v-if="mergedConfig">
+      <div class="label-column">
+        <div v-for="item in mergedConfig.data" :key="item.name">{{ item.name }}</div>
+        <div>&nbsp;</div>
+      </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>
+
+        <div class="unit-label">
+          <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
+        </div>
+      </div>
+
+      <div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvCapsuleChart',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      defaultConfig: {
+        /**
+         * @description Capsule chart data
+         * @type {Array<Object>}
+         * @default data = []
+         * @example data = [{ name: 'foo1', value: 100 }, { name: 'foo2', value: 100 }]
+         */
+        data: [],
+        /**
+         * @description Colors (hex|rgb|rgba|color keywords)
+         * @type {Array<String>}
+         * @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'],
+        /**
+         * @description Chart unit
+         * @type {String}
+         * @default unit = ''
+         */
+        unit: ''
+      },
+
+      mergedConfig: null,
+
+      capsuleLength: [],
+      labelData: []
+    }
+  },
+  watch: {
+    config () {
+      const { calcData } = this
+
+      calcData()
+    }
+  },
+  methods: {
+    calcData () {
+      const { mergeConfig, calcCapsuleLengthAndLabelData } = this
+
+      mergeConfig()
+
+      calcCapsuleLengthAndLabelData()
+    },
+    mergeConfig () {
+      let { config, defaultConfig } = this
+
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+    },
+    calcCapsuleLengthAndLabelData () {
+      const { data } = this.mergedConfig
+
+      if (!data.length) return
+
+      const capsuleValue = data.map(({ value }) => value)
+
+      const maxValue = Math.max(...capsuleValue)
+
+      this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
+
+      const oneFifth = maxValue / 5
+
+      this.labelData = new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))
+    }
+  },
+  mounted () {
+    const { calcData } = this
+
+    calcData()
+  }
+}
+</script>
+
+<style lang="less">
+.dv-capsule-chart {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  padding: 10px;
+  color: #fff;
+
+  .label-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding-right: 10px;
+    text-align: right;
+    font-size: 12px;
+
+    div {
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+
+  .capsule-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .capsule-item {
+    box-shadow: 0 0 3px #999;
+    height: 10px;
+    margin: 5px 0px;
+    border-radius: 5px;
+
+    div {
+      height: 8px;
+      margin-top: 1px;
+      border-radius: 5px;
+      transition: all 0.3s;
+    }
+  }
+
+  .unit-label {
+    height: 20px;
+    font-size: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .unit-text {
+    text-align: right;
+    display: flex;
+    align-items: flex-end;
+    font-size: 12px;
+    line-height: 20px;
+    margin-left: 10px;
+  }
+}
+</style>

src/components/decoration2/src/main.vue

@@ -22,7 +22,7 @@
           dur="6s"
           calcMode="spline"
           keyTimes="0;1"
-          keySplines=".42,0,.58,1"
+          keySplines="0.42,0,0.58,1"
           repeatCount="indefinite"
         />
       </rect>

src/components/decoration5/src/main.vue

@@ -16,7 +16,7 @@
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
-          keySplines=".4,1,.49,.98"
+          keySplines="0.4,1,0.49,0.98"
           repeatCount="indefinite"
         />
       </polyline>

src/components/decoration6/src/main.vue

@@ -16,9 +16,9 @@
             attributeName="y"
             :values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
             :dur="`${randoms[i]}s`"
-            keyTimes="0;.5;1"
+            keyTimes="0;0.5;1"
             calcMode="spline"
-            keySplines=".42,0,.58,1;.42,0,.58,1"
+            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
             begin="0s"
             repeatCount="indefinite"
           />
@@ -26,9 +26,9 @@
             attributeName="height"
             :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
             :dur="`${randoms[i]}s`"
-            keyTimes="0;.5;1"
+            keyTimes="0;0.5;1"
             calcMode="spline"
-            keySplines=".42,0,.58,1;.42,0,.58,1"
+            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
             begin="0s"
             repeatCount="indefinite"
           />

src/components/percentPond/src/main.vue

@@ -4,13 +4,13 @@
       <defs>
         <linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
 
         <linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
       </defs>
@@ -22,8 +22,8 @@
         fill="transparent"
         :stroke-width="mergedConfig ? mergedConfig.borderWidth : '0'"
         :stroke="`url(#${gradientId1})`"
-        :width="rectWidth"
+        :width="rectWidth > 0 ? rectWidth : 0"
-        :height="rectHeight"
+        :height="rectHeight > 0 ? rectHeight : 0"
       />
       <polyline
         :stroke-width="polylineWidth"
@@ -254,9 +254,18 @@ export default {
 
 <style lang="less">
 .dv-percent-pond {
+  position: relative;
   display: flex;
   flex-direction: column;
 
+  svg {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+  }
+
   polyline {
     transition: all 0.3s;
   }

src/index.js

@@ -14,6 +14,7 @@ import borderBox6 from './components/borderBox6/index'
 import borderBox7 from './components/borderBox7/index'
 import borderBox8 from './components/borderBox8/index'
 import borderBox9 from './components/borderBox9/index'
+import borderBox10 from './components/borderBox10/index'
 
 // decoration
 import decoration1 from './components/decoration1/index'
@@ -31,6 +32,7 @@ import decoration10 from './components/decoration10/index'
 import charts from './components/charts/index'
 
 import activeRingChart from './components/activeRingChart'
+import capsuleChart from './components/capsuleChart'
 import waterLevelPond from './components/waterLevelPond/index'
 import percentPond from './components/percentPond/index'
 import flylineChart from './components/flylineChart'
@@ -56,6 +58,7 @@ export default function (Vue) {
   Vue.use(borderBox7)
   Vue.use(borderBox8)
   Vue.use(borderBox9)
+  Vue.use(borderBox10)
 
   // decoration
   Vue.use(decoration1)
@@ -73,6 +76,7 @@ export default function (Vue) {
   Vue.use(charts)
 
   Vue.use(activeRingChart)
+  Vue.use(capsuleChart)
   Vue.use(waterLevelPond)
   Vue.use(percentPond)
   Vue.use(flylineChart)