add new component (borderBox10, capsuleChart)

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,182 @@
+<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>
+
+<style lang="less">
+.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 {
+    display: flex;
+    flex-direction: row;
+    line-height: 20px;
+    font-size: 12px;
+  }
+
+  .unit-text {
+    width: 30px;
+    text-align: right;
+  }
+
+  .unit-container {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+</style>

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)