update lib

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 @@
+.capsule-chart {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  padding: 10px;
+  color: #fff;
+}
+.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;
+}
+.capsule-chart .label-column div {
+  height: 20px;
+  line-height: 20px;
+}
+.capsule-chart .capsule-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.capsule-chart .capsule-item {
+  box-shadow: 0 0 3px #999;
+  height: 10px;
+  margin: 5px 0px;
+  border-radius: 5px;
+}
+.capsule-chart .capsule-item div {
+  height: 8px;
+  margin-top: 1px;
+  border-radius: 5px;
+  transition: all 0.3s;
+}
+.capsule-chart .unit-label {
+  display: flex;
+  flex-direction: row;
+  line-height: 20px;
+  font-size: 12px;
+}
+.capsule-chart .unit-text {
+  width: 30px;
+  text-align: right;
+}
+.capsule-chart .unit-container {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}

lib/components/capsuleChart/src/main.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="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"
+          :style="`width: calc(100% - ${mergedConfig.unit ? 30 : 0}px)`"
+        >
+          <div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
+        </div>
+
+        <div class="unit-label">
+          <div class="unit-container">
+            <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
+          </div>
+          <div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
+        </div>
+      </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/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)