update version to 2.3.4

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+/lib
 /dist
 /.svn
 /DataV
@@ -12,6 +13,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
 
 # Editor directories and files
 .idea

.npmignore

@@ -0,0 +1,7 @@
+src/
+publish/
+
+package-lock.json
+
+prepublish.js
+publish.js

CHANGELOG.md

@@ -1,3 +1,119 @@
+# 2.3.4-alpha (2019-00-15)
+
+### Bug Fixes
+
+- **package.json:** Import exception caused by incorrect entry path configuration.
+
+# 2.3.3-alpha (2019-07-22)
+
+### Bug Fixes
+
+- **waterPondLevel:** Potential namespace conflict.
+- **digitalFlop:** Potential namespace conflict.
+
+# 2.3.2-alpha (2019-07-05)
+
+### Perfect
+
+- **decoration:** Explicitly set the SVG width and height to enhance stability.
+- **Introduced on demand**
+
+  ```js
+  import { borderBox1 } from '@jiaminghi/data-view'
+
+  Vue.use(borderBox1)
+  ```
+
+# 2.3.1-alpha (2019-07-04)
+
+### Perfect
+
+- **charts:** Enhanced style compatibility.
+- **scrollBoard:** Enhanced style compatibility.
+- **fullScreenContainer:** Fix potential rendering exceptions.
+- **mixin:** Strengthen `autoResize` stability.
+
+# 2.3.0-alpha (2019-07-04)
+
+### Directory Structure Change
+
+* **before**
+
+  ```
+  .
+  ├── components
+  │   ├── borderBox1
+  │   │   └── index.vue
+  │   ├── borderBox2
+  │   │   └── index.vue
+  │   ├── etc.
+  │   └── index.js
+  ├── mixins
+  │   └── autoResize.js
+  ├── util
+  │   └── index.js
+  │
+  ├── index.js
+  │
+  ├── package.json // main: 'index.js'
+  └── etc.
+  ```
+
+* **after**
+
+  ```
+  .
+  ├── lib // After compilation
+  │   ├── components
+  │   │   ├── borderBox1
+  │   │   |   ├── src
+  │   │   |   |   ├── main.vue
+  │   │   |   |   └── main.css
+  │   │   |   └── index.js
+  │   │   ├── etc.
+  │   │   └── index.js
+  │   ├── mixin
+  │   │   └── autoResize.js
+  │   ├── util
+  │   │   └── index.js
+  │   └── index.js
+  │
+  ├── publish // For pre-publish process
+  │
+  ├── src // For development environments
+  │   ├── components
+  │   │   ├── borderBox1
+  │   │   |   ├── src
+  │   │   |   |   └── main.vue
+  │   │   |   └── index.js
+  │   │   ├── etc.
+  │   │   └── index.js
+  │   ├── mixin
+  │   │   └── autoResize.js
+  │   ├── util
+  │   │   └── index.js
+  │   └── index.js
+  │
+  ├── package.json // main: '/lib/index.js'
+  ├── publish.js
+  └── etc.
+  ```
+
+- **Introduced on demand**
+
+  ```js
+  import borderBox1 from '@jiaminghi/data-view/lib/components/borderBox1'
+  
+  Vue.use(borderBox1)
+  ```
+
+# 2.2.0-alpha (2019-06-29)
+
+### New
+
+- **borderBox**
+- **decoration**
+
 # 2.1.1-alpha (2019-06-28)
 
 ### Bug Fixes

README.md

@@ -1,20 +1,40 @@
+[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" />
     </a>
-    <a href="https://www.npmjs.com/package/@jiaminghi/datav">
+    <a href="https://www.npmjs.com/package/@jiaminghi/data-view">
       <img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
     </a>
 </p>
 
-<h2 align="center">Vue large screen data display component library</h2>
+## DataV是干什么的?
 
-### Install with npm
+* DataV是一个基于**Vue**的数据可视化组件库.
+* 提供用于提升页面视觉效果的**SVG**边框和装饰.
+* 提供常用的**图表**如折线图等.
+* 飞线图/轮播表等其他组件.
+
+### npm安装
 
 ```shell
 $ npm install @jiaminghi/data-view
 ```
 
-Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
+### 使用
+
+```js
+import Vue from 'vue'
+import DataV from '@jiaminghi/data-view'
+
+Vue.use(DataV)
+
+// 按需引入
+import { borderBox1 } from '@jiaminghi/data-view'
+Vue.use(borderBox1)
+```
+
+详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).

README_EN.md

@@ -0,0 +1,40 @@
+[中文](./README.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" />
+    </a>
+    <a href="https://www.npmjs.com/package/@jiaminghi/data-view">
+      <img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
+    </a>
+</p>
+
+## What is DataV?
+
+* DataV is a data **visualization** components library based on **Vue**.
+* Provide cool **SVG** borders and decorations.
+* Provide common **charts** such as line chart, etc..
+* flying line chart, carousel table and etc.
+
+### Install with npm
+
+```shell
+$ npm install @jiaminghi/data-view
+```
+
+### use
+
+```js
+import Vue from 'vue'
+import DataV from '@jiaminghi/data-view'
+
+Vue.use(DataV)
+
+// Introduced on demand
+import { borderBox1 } from '@jiaminghi/data-view'
+Vue.use(borderBox1)
+```
+
+Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).

components/fullScreenContainer/index.vue

@@ -1,68 +0,0 @@
-<template>
-  <div id="dv-full-screen-container" ref="full-screen-container">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'FullScreenContainer',
-  data () {
-    return {
-      scale: 0,
-      datavRoot: ''
-    }
-  },
-  methods: {
-    init () {
-      const { initConfig, setAppScale, bindReSizeEventHandler } = this
-
-      initConfig()
-
-      setAppScale()
-
-      bindReSizeEventHandler()
-    },
-    initConfig () {
-      const { width, height } = screen
-
-      this.allWidth = width
-
-      const datavRoot = this.datavRoot = this.$refs['full-screen-container']
-
-      datavRoot.style.width = `${width}px`
-      datavRoot.style.height = `${height}px`
-    },
-    setAppScale () {
-      const { allWidth, datavRoot } = this
-
-      const currentWidth = document.body.clientWidth
-
-      datavRoot.style.transform = `scale(${currentWidth / allWidth})`
-    },
-    bindReSizeEventHandler () {
-      const { debounce, setAppScale } = this
-
-      if (!debounce) return
-
-      window.addEventListener('resize', debounce(100, setAppScale))
-    }
-  },
-  mounted () {
-    const { init } = this
-
-    init()
-  }
-}
-</script>
-
-<style lang="less">
-#dv-full-screen-container {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  overflow: hidden;
-  transform-origin: left top;
-  z-index: 999;
-}
-</style>

components/index.js

@@ -1,72 +0,0 @@
-import fullScreenContainer from './fullScreenContainer'
-import loading from './loading/index.vue'
-
-// border box
-import borderBox1 from './borderBox1/index'
-import borderBox2 from './borderBox2/index'
-import borderBox3 from './borderBox3/index'
-import borderBox4 from './borderBox4/index'
-import borderBox5 from './borderBox5/index'
-import borderBox6 from './borderBox6/index'
-import borderBox7 from './borderBox7/index'
-import borderBox8 from './borderBox8/index'
-
-// decoration
-import decoration1 from './decoration1/index'
-import decoration2 from './decoration2/index'
-import decoration3 from './decoration3/index'
-import decoration4 from './decoration4/index'
-import decoration5 from './decoration5/index'
-import decoration6 from './decoration6/index'
-import decoration7 from './decoration7/index'
-import decoration8 from './decoration8/index'
-
-// charts
-import charts from './charts/index.vue'
-
-import activeRingChart from './activeRingChart'
-import waterLevelPond from './waterLevelPond/index.vue'
-import percentPond from './percentPond/index.vue'
-import flylineChart from './flylineChart'
-import conicalColumnChart from './conicalColumnChart'
-import digitalFlop from './digitalFlop'
-import scrollBoard from './scrollBoard/index.vue'
-import scrollRankingBoard from './scrollRankingBoard/index.vue'
-
-export default function (Vue) {
-  Vue.component('dvFullScreenContainer', fullScreenContainer)
-
-  Vue.component('dvLoading', loading)
-
-  // border box
-  Vue.component('dvBorderBox1', borderBox1)
-  Vue.component('dvBorderBox2', borderBox2)
-  Vue.component('dvBorderBox3', borderBox3)
-  Vue.component('dvBorderBox4', borderBox4)
-  Vue.component('dvBorderBox5', borderBox5)
-  Vue.component('dvBorderBox6', borderBox6)
-  Vue.component('dvBorderBox7', borderBox7)
-  Vue.component('dvBorderBox8', borderBox8)
-
-  // decoration
-  Vue.component('dvDecoration1', decoration1)
-  Vue.component('dvDecoration2', decoration2)
-  Vue.component('dvDecoration3', decoration3)
-  Vue.component('dvDecoration4', decoration4)
-  Vue.component('dvDecoration5', decoration5)
-  Vue.component('dvDecoration6', decoration6)
-  Vue.component('dvDecoration7', decoration7)
-  Vue.component('dvDecoration8', decoration8)
-
-  // charts
-  Vue.component('dvCharts', charts)
-
-  Vue.component('dvActiveRingChart', activeRingChart)
-  Vue.component('dvWaterLevelPond', waterLevelPond)
-  Vue.component('dvPercentPond', percentPond)
-  Vue.component('dvFlylineChart', flylineChart)
-  Vue.component('dvConicalColumnChart', conicalColumnChart)
-  Vue.component('dvDigitalFlop', digitalFlop)
-  Vue.component('dvScrollBoard', scrollBoard)
-  Vue.component('dvScrollRankingBoard', scrollRankingBoard)
-}

index.js

@@ -1,5 +0,0 @@
-import components from './components/index'
-
-export default function (Vue) {
-  components(Vue)
-}

package-lock.json

@@ -0,0 +1,14 @@
+{
+  "name": "@jiaminghi/data-view",
+  "version": "2.3.2",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@jiaminghi/fs": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@jiaminghi/fs/-/fs-0.0.0.tgz",
+      "integrity": "sha512-hCVpiw5IBBAB2H73gKDxd0Xp5e7cnpqdpgLnrkXgVK29aIoowVUS1qklNP8kPohAxz6967aGp7yW+N4XQtrSWA==",
+      "dev": true
+    }
+  }
+}

package.json

@@ -1,14 +1,16 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.1.1",
+  "version": "2.3.4",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
-  "main": "index.js",
+  "main": "lib/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/jiaming743/DataV.git"
   },
   "scripts": {
+    "compile": "node publish.js",
+    "prepublish": "npm run compile",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "license": "MIT",
@@ -18,14 +20,14 @@
   "keywords": [
     "vue",
     "chart",
-    "dataview"
+    "dataview",
+    "datavisual"
   ],
-  "devDependencies": {
-    "less": "^3.9.0",
-    "less-loader": "^4.1.0"
-  },
   "dependencies": {
     "@jiaminghi/charts": "*"
   },
-  "homepage": "https://github.com/jiaming743/DataV#readme"
+  "homepage": "https://github.com/jiaming743/DataV#readme",
+  "devDependencies": {
+    "@jiaminghi/fs": "0.0.1"
+  }
 }

publish.js

@@ -0,0 +1,3 @@
+const start = require('./publish/index')
+
+start()

publish/index.js

@@ -0,0 +1,185 @@
+const { copyDir, fileForEach, readFile, writeFile, unlinkDirFileByExtname, dirForEach } = require('@jiaminghi/fs')
+const print = require('./plugin/print')
+const path = require('path')
+const doExec = require('./plugin/exec')
+
+const PACKAGE_SRC = './src'
+const COMPILE_SRC = './lib'
+const COMPONENTS_DIR = '/components'
+const ENTRANCE = '/index.js'
+
+async function start () {
+  const copyPackage = await copyDir(PACKAGE_SRC, COMPILE_SRC)
+
+  if (!copyPackage) {
+    print.error('Exception in file copy!')
+
+    return false
+  }
+
+  print.success('Complete file copy!')
+
+  const abstract = await abstractLessFromVue()
+
+  if (!abstract) {
+    print.error('Exception in less file extraction!')
+
+    return false
+  }
+
+  print.success('Complete less file extraction!')
+
+  await compileLessToCss()
+
+  print.success('Complete less compilation to css!')
+
+  const unlink = await unlinkDirFileByExtname(COMPILE_SRC, ['.less'])
+
+  if (!unlink) {
+    print.error('Exception in less file deletion!')
+
+    return false
+  }
+
+  print.success('Complete less file deletion!')
+
+  const addImport = await addCssImport()
+
+  if (!addImport) {
+    print.error('Exception in adding css import statement!')
+
+    return false
+  }
+
+  print.success('Finish adding css import statement!')
+
+  const componentsExport = await addComponentsExport()
+
+  if (!componentsExport) {
+    print.error('Exception in adding components export statement!')
+
+    return false
+  }
+
+  print.success('Finish adding components export statement!')
+
+  print.yellow('-------------------------------------')
+  print.success('     DataV Lib Compile Success!      ')
+  print.yellow('-------------------------------------')
+
+  return true
+}
+
+async function abstractLessFromVue () {
+  let abstractSuccess = true
+
+  await fileForEach(COMPILE_SRC, async src => {
+    if (path.extname(src) !== '.vue') return
+
+    let template = await readFile(src)
+
+    let style = template.match(/<style[ \S\n\r]*/g)
+    if (style) style = style[0]
+    if (!style) return
+
+    style = style.replace(/<style[ a-z="']*>(\n|\r)?|<\/style>/g, '')
+    style = style.replace(/[\n\r]*$/, '')
+
+    const styleSrc = src.replace('.vue', '.less')
+    let write = await writeFile(styleSrc, style)
+
+    if (!write) {
+      print.error(styleSrc + ' write error!')
+
+      abstractSuccess = false
+    }
+
+    template = template.replace(/<style[ \S\n\r]*/g, '')
+    template = template.replace(/[\n\r]*$/, '')
+    write = await writeFile(src, template)
+
+    if (!write) {
+      print.error(src + ' rewrite error!')
+
+      abstractSuccess = false
+    }
+  })
+
+  return abstractSuccess
+}
+
+async function compileLessToCss () {
+  let compileSuccess = true
+
+  await fileForEach(COMPILE_SRC, async src => {
+    if (path.extname(src) !== '.less') return
+
+    src = src.replace('./', '')
+
+    const execString = `lessc ${src} ${src.replace('less', 'css')}`
+
+    print.yellow(execString, {
+      maxBuffer: 1024 ** 5
+    })
+
+    const compile = await doExec(execString)
+
+    if (!compile) {
+      print.error(execString + ' Error!')
+
+      compileSuccess = false
+    }
+  })
+
+  return compileSuccess
+}
+
+async function addCssImport () {
+  let importSuccess = true
+
+  await fileForEach(COMPILE_SRC + COMPONENTS_DIR, async src => {
+    if (path.extname(src) !== '.js') return
+
+    let content = await readFile(src)
+
+    if (content.search(/import[ \S]* from '[\S]*\.vue'/) === -1) return
+
+    content = `import './src/main.css'\n` + content
+
+    let write = await writeFile(src, content)
+
+    if (!write) {
+      print.error(src + ' write import error!')
+
+      importSuccess = false
+    }
+  })
+
+  return importSuccess
+}
+
+async function addComponentsExport () {
+  const components = []
+
+  await dirForEach(COMPILE_SRC + COMPONENTS_DIR, src => {
+    components.push(src.split('/').slice(-1)[0])
+  })
+
+  const importString = components.reduce((all, current) => {
+    return all + '\n' + `export { default as ${current} } from '.${COMPONENTS_DIR}/${current}/index'`
+  }, '/**\n * EXPORT COMPONENTS\n */') + '\n'
+
+  const targetSrc = COMPILE_SRC + ENTRANCE
+
+  let content = await readFile(targetSrc)
+
+  content = importString + content
+
+  let write = await writeFile(targetSrc, content)
+
+  return write
+}
+
+module.exports = start
+
+

publish/plugin/exec.js

@@ -0,0 +1,19 @@
+const { exec } = require('child_process')
+
+function doExec (execString, maxBuffer = 1024 ** 5) {
+  return new Promise(resolve => {
+    exec(execString, {
+      maxBuffer
+    }, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+module.exports = doExec

publish/plugin/print.js

@@ -0,0 +1,22 @@
+const print = {
+  log (info) {
+    console.log(info)
+  },
+  warn (info) {
+    console.log('\033[31;33m' + info + '\033[0m')
+  },
+  error (info) {
+    console.log('\033[31;40m' + info + '\033[0m')
+  },
+  tip (info) {
+    console.log('\033[40;32m' + info + '\033[0m')
+  },
+  success (info) {
+    console.log('\033[42;30m' + info + '\033[0m')
+  },
+  yellow (info) {
+    console.log('\033[31;33m' + info + '\033[0m')
+  }
+}
+
+module.exports = print

src/components/activeRingChart/index.js

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

src/components/activeRingChart/src/main.vue

@@ -11,14 +11,14 @@
 <script>
 import Charts from '@jiaminghi/charts'
 
-import dvDigitalFlop from '../digitalFlop'
+import dvDigitalFlop from '../../digitalFlop/src/main'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
-  name: 'ActiveRingChart',
+  name: 'DvActiveRingChart',
   components: {
     dvDigitalFlop
   },

src/components/borderBox1/index.js

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

src/components/borderBox1/src/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dv-border-box-1" :ref="ref">
+  <div class="dv-border-box-1">
     <svg
       width="150px"
       height="150px"
@@ -53,11 +53,9 @@
 
 <script>
 export default {
-  name: 'BorderBox1',
+  name: 'DvBorderBox1',
   data () {
     return {
-      ref: 'border-box-1',
-
       border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
     }
   }

src/components/borderBox2/index.js

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

src/components/borderBox2/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-2" :ref="ref">
-    <svg class="dv-border-svg-container">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <polyline class="dv-bb2-line1"
         :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`" />
       <polyline class="dv-bb2-line2"
@@ -18,10 +18,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox2',
+  name: 'DvBorderBox2',
   mixins: [autoResize],
   data () {
     return {

src/components/borderBox3/index.js

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

src/components/borderBox3/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-3" :ref="ref">
-    <svg class="dv-border-svg-container">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <polyline class="dv-bb3-line1"
         :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`" />
       <polyline class="dv-bb3-line2"
@@ -18,10 +18,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox3',
+  name: 'DvBorderBox3',
   mixins: [autoResize],
   data () {
     return {

src/components/borderBox4/index.js

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

src/components/borderBox4/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-4" :ref="ref">
-    <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`">
+    <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
       <polyline class="dv-bb4-line-1" :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
         10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"/>
       <polyline class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
@@ -22,10 +22,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox4',
+  name: 'DvBorderBox4',
   mixins: [autoResize],
   data () {
     return {
@@ -41,7 +41,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .dv-border-box-4 {
   position: relative;
   width: 100%;

src/components/borderBox5/index.js

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

src/components/borderBox5/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-5" :ref="ref">
-    <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`">
+    <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
       <polyline class="dv-bb5-line-1" :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
         ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`" />
       <polyline class="dv-bb5-line-2" :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
@@ -18,10 +18,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox5',
+  name: 'DvBorderBox5',
   mixins: [autoResize],
   data () {
     return {

src/components/borderBox6/index.js

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

src/components/borderBox6/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-6" :ref="ref">
-    <svg class="dv-svg-container">
+    <svg class="dv-svg-container" :width="width" :height="height">
       <circle cx="5" cy="5" r="2"/>
       <circle :cx="width - 5" cy="5" r="2" />
       <circle :cx="width - 5" :cy="height - 5" r="2" />
@@ -26,10 +26,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize.js'
 
 export default {
-  name: 'BorderBox6',
+  name: 'DvBorderBox6',
   mixins: [autoResize],
   data () {
     return {

src/components/borderBox7/index.js

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

src/components/borderBox7/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-7" :ref="ref">
-    <svg class="dv-svg-container">
+    <svg class="dv-svg-container" :width="width" :height="height">
       <polyline class="dv-bb7-line-width-2" :points="`0, 25 0, 0 25, 0`" />
       <polyline class="dv-bb7-line-width-2" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
       <polyline class="dv-bb7-line-width-2" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
@@ -19,10 +19,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox7',
+  name: 'DvBorderBox7',
   mixins: [autoResize],
   data () {
     return {
@@ -33,9 +33,9 @@ export default {
 </script>
 
 <style lang="less">
-@color: fade(gray, 30);
-
 .dv-border-box-7 {
+  @color: fade(gray, 30);
+
   position: relative;
   width: 100%;
   height: 100%;

src/components/borderBox8/index.js

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

src/components/borderBox8/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-8" :ref="ref">
-    <svg class="dv-svg-container">
+    <svg class="dv-svg-container" :width="width" :height="height">
       <defs>
         <path
           :id="path"
@@ -62,10 +62,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox8',
+  name: 'DvBorderBox8',
   mixins: [autoResize],
   data () {
     return {

src/components/borderBox9/index.js

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

src/components/borderBox9/src/main.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="dv-border-box-9" :ref="ref">
+    <svg class="dv-svg-container" :width="width" :height="height">
+      <defs>
+        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stop-color="#11eefd" />
+          <stop offset="100%" stop-color="#0078d2" />
+        </linearGradient>
+
+        <mask :id="maskId">
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`"
+          />
+          <polyline
+            fill="#fff"
+            :points="
+              `8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3
+              ${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.52}, 3 ${width * 0.58}, 3
+              ${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9
+            `"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1}
+              ${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              8, ${height * 0.55} 8, ${height * 0.7}
+              2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.35}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.8}
+              ${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${width * 0.92 + 7}, ${height - 9}
+            `"
+          />
+        </mask>
+      </defs>
+
+      <rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvBorderBox9',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'border-box-9',
+
+      gradientId: `border-box-9-gradient-${(new Date()).getTime()}`,
+      maskId: `border-box-9-mask-${(new Date()).getTime()}`
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.dv-border-box-9 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  svg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+  }
+
+  .border-box-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/charts/index.js

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

src/components/charts/src/main.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="dv-charts-container" :ref="ref">
-    <div class="charts" :ref="chartRef" />
+    <div class="charts-canvas-container" :ref="chartRef" />
   </div>
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 import Charts from '@jiaminghi/charts'
 
 export default {
-  name: 'Charts',
+  name: 'DvCharts',
   mixins: [autoResize],
   props: {
     option: {
@@ -30,6 +30,8 @@ export default {
     option () {
       let { chart, option } = this
 
+      if (!chart) return
+
       if (!option) option = {}
 
       chart.setOption(option)
@@ -67,7 +69,7 @@ export default {
   width: 100%;
   height: 100%;
 
-  .charts {
+  .charts-canvas-container {
     width: 100%;
     height: 100%;
   }

src/components/conicalColumnChart/index.js

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

src/components/conicalColumnChart/src/main.vue

@@ -40,14 +40,14 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+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: 'ConicalColumnChart',
+  name: 'DvConicalColumnChart',
   mixins: [autoResize],
   props: {
     config: {

src/components/decoration1/index.js

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

src/components/decoration1/src/main.vue

@@ -85,10 +85,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration1',
+  name: 'DvDecoration1',
   mixins: [autoResize],
   data () {
     const pointSideLength = 2.5

src/components/decoration10/index.js

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

src/components/decoration10/src/main.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="dv-decoration-10" :ref="ref">
+    <svg :width="width" :height="height">
+      <polyline
+        stroke="rgba(0, 194, 255, 0.3)"
+        stroke-width="2"
+        :points="`0, ${height / 2} ${width}, ${height / 2}`"
+      />
+
+      <polyline
+        stroke="rgba(0, 194, 255, 1)"
+        stroke-width="2"
+        :points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
+        :stroke-dasharray="`0, ${width * 0.2}`"
+        fill="freeze"
+      >
+        <animate
+          :id="animationId2"
+          attributeName="stroke-dasharray"
+          :values="`0, ${width * 0.2};${width * 0.2}, 0;`"
+          dur="3s"
+          :begin="`${animationId1}.end`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${width * 0.2}, 0;0, ${width * 0.2}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <polyline
+        stroke="rgba(0, 194, 255, 1)"
+        stroke-width="2"
+        :points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
+        :stroke-dasharray="`0, ${width * 0.6}`"
+      >
+        <animate
+          :id="animationId4"
+          attributeName="stroke-dasharray"
+          :values="`0, ${width * 0.6};${width * 0.6}, 0`"
+          dur="3s"
+          :begin="`${animationId3}.end + 1s`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${width * 0.6}, 0;0, ${width * 0.6}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <polyline
+        stroke="rgba(0, 194, 255, 1)"
+        stroke-width="2"
+        :points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
+        :stroke-dasharray="`0, ${width * 0.2}`"
+      >
+        <animate
+          :id="animationId6"
+          attributeName="stroke-dasharray"
+          :values="`0, ${width * 0.2};${width * 0.2}, 0`"
+          dur="3s"
+          :begin="`${animationId5}.end + 1s`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${width * 0.2}, 0;0, ${width * 0.3}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <circle cx="2" :cy="height / 2" r="2" fill="#03709f">
+        <animate
+          :id="animationId1"
+          attributeName="fill"
+          values="#03709f;#00c2ff"
+          :begin="`0s;${animationId7}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="width * 0.2" :cy="height / 2" r="2" fill="#03709f">
+        <animate
+          :id="animationId3"
+          attributeName="fill"
+          values="#03709f;#00c2ff"
+          :begin="`${animationId2}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          values="#03709f;#03709f"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="width * 0.8" :cy="height / 2" r="2" fill="#03709f">
+        <animate
+          :id="animationId5"
+          attributeName="fill"
+          values="#03709f;#00c2ff"
+          :begin="`${animationId4}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          values="#03709f;#03709f"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="width - 2" :cy="height / 2" r="2" fill="#03709f">
+        <animate
+          :id="animationId7"
+          attributeName="fill"
+          values="#03709f;#00c2ff"
+          :begin="`${animationId6}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          values="#03709f;#03709f"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+    </svg>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvDecoration10',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'decoration-10',
+
+      animationId1: `d10ani1${(new Date()).getTime()}`,
+      animationId2: `d10ani2${(new Date()).getTime()}`,
+      animationId3: `d10ani3${(new Date()).getTime()}`,
+      animationId4: `d10ani4${(new Date()).getTime()}`,
+      animationId5: `d10ani5${(new Date()).getTime()}`,
+      animationId6: `d10ani6${(new Date()).getTime()}`,
+      animationId7: `d10ani7${(new Date()).getTime()}`
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.dv-decoration-10 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+</style>

src/components/decoration2/index.js

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

src/components/decoration2/src/main.vue

@@ -31,10 +31,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration2',
+  name: 'DvDecoration2',
   mixins: [autoResize],
   props: {
     reverse: {

src/components/decoration3/index.js

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

src/components/decoration3/src/main.vue

@@ -28,10 +28,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration3',
+  name: 'DvDecoration3',
   mixins: [autoResize],
   data () {
     const pointSideLength = 7

src/components/decoration4/index.js

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

src/components/decoration4/src/main.vue

@@ -23,10 +23,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration4',
+  name: 'DvDecoration4',
   mixins: [autoResize],
   props: ['reverse'],
   data () {

src/components/decoration5/index.js

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

src/components/decoration5/src/main.vue

@@ -44,12 +44,12 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 import { getPolylineLength } from '@jiaminghi/charts/lib/util'
 
 export default {
-  name: 'Decoration5',
+  name: 'DvDecoration5',
   mixins: [autoResize],
   data () {
     return {

src/components/decoration6/index.js

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

src/components/decoration6/src/main.vue

@@ -39,12 +39,12 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
-import { randomExtend } from '../../util'
+import { randomExtend } from '../../../util'
 
 export default {
-  name: 'Decoration6',
+  name: 'DvDecoration6',
   mixins: [autoResize],
   data () {
     const rectWidth = 7

src/components/decoration7/index.js

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

src/components/decoration7/src/main.vue

@@ -34,7 +34,7 @@
 
 <script>
 export default {
-  name: 'Decoration7'
+  name: 'DvDecoration7'
 }
 </script>
 

src/components/decoration8/index.js

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

src/components/decoration8/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-decoration-8" :ref="ref">
-    <svg>
+    <svg :width="width" :height="height">
       <polyline
         stroke="#3f96a5"
         stroke-width="2"
@@ -26,10 +26,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration8',
+  name: 'DvDecoration8',
   mixins: [autoResize],
   props: {
     reverse: {

src/components/decoration9/index.js

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

src/components/decoration9/src/main.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="dv-decoration-9" :ref="ref">
+    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
+      <defs>
+        <polygon :id="polygonId" points="15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5" />
+      </defs>
+
+      <circle
+        cx="50"
+        cy="50"
+        r="45"
+        fill="transparent"
+        stroke="rgba(3, 166, 224, 0.5)"
+        stroke-width="10"
+        stroke-dasharray="80, 100, 30, 100"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          values="0 50 50;360 50 50"
+          dur="3s"
+          repeatCount="indefinite"
+        />
+      </circle>
+
+      <circle
+        cx="50"
+        cy="50"
+        r="45"
+        fill="transparent"
+        stroke="rgba(3, 166, 224, 0.8)"
+        stroke-width="6"
+        stroke-dasharray="50, 66, 100, 66"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          values="0 50 50;-360 50 50"
+          dur="3s"
+          repeatCount="indefinite"
+        />
+      </circle>
+
+      <circle
+        cx="50"
+        cy="50"
+        r="38"
+        fill="transparent"
+        stroke="rgba(3, 166, 224, 0.2)"
+        stroke-width="1"
+        stroke-dasharray="5, 1"
+      />
+
+      <use
+        v-for="(foo, i) in new Array(20).fill(0)"
+        :key="i"
+        :xlink:href="`#${polygonId}`"
+        stroke="rgba(3, 166, 224, 0.6)"
+        :fill="Math.random() > 0.4 ? 'transparent' : 'rgba(3, 166, 224, 0.8)'"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          values="0 50 50;360 50 50"
+          dur="3s"
+          :begin="`${i * 0.15}s`"
+          repeatCount="indefinite"
+        />
+      </use>
+
+      <circle
+        cx="50"
+        cy="50"
+        r="26"
+        fill="transparent"
+        stroke="rgba(3, 166, 224, 0.2)"
+        stroke-width="1"
+        stroke-dasharray="5, 1"
+      />
+    </svg>
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvDecoration9',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'decoration-9',
+
+      polygonId: `decoration-9-polygon-${(new Date()).getTime()}`,
+
+      svgWH: [100, 100],
+
+      svgScale: [1, 1]
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcScale } = this
+
+      calcScale()
+    },
+    calcScale () {
+      const { width, height, svgWH } = this
+
+      const [w, h] = svgWH
+
+      this.svgScale = [width / w, height / h]
+    },
+    onResize () {
+      const { calcScale } = this
+
+      calcScale()
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.dv-decoration-9 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    transform-origin: left top;
+  }
+}
+</style>

src/components/digitalFlop/index.js

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

src/components/digitalFlop/src/main.vue

@@ -14,7 +14,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
-  name: 'DigitalFlop',
+  name: 'DvDigitalFlop',
   props: {
     config: {
       type: Object,
@@ -23,7 +23,7 @@ export default {
   },
   data () {
     return {
-      render: null,
+      renderer: null,
 
       defaultConfig: {
         /**
@@ -100,7 +100,7 @@ export default {
     initRender () {
       const { $refs } = this
 
-      this.render = new CRender($refs['digital-flop'])
+      this.renderer = new CRender($refs['digital-flop'])
     },
     mergeConfig () {
       const { defaultConfig, config } = this
@@ -108,14 +108,14 @@ export default {
       this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
     },
     initGraph () {
-      const { getShape, getStyle, render, mergedConfig } = this
+      const { getShape, getStyle, renderer, mergedConfig } = this
 
       const { animationCurve, animationFrame } = mergedConfig
 
       const shape = getShape()
       const style = getStyle()
 
-      this.graph = render.add({
+      this.graph = renderer.add({
         name: 'numberText',
         animationCurve,
         animationFrame,
@@ -126,7 +126,7 @@ export default {
     getShape () {
       const { number, content, toFixed, textAlign } = this.mergedConfig
 
-      const [w, h] = this.render.area
+      const [w, h] = this.renderer.area
 
       const position = [w / 2, h / 2]
 

src/components/flylineChart/index.js

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

src/components/flylineChart/src/main.vue

@@ -153,12 +153,12 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
-import { randomExtend, getPointDistance } from '../../util/index'
+import { randomExtend, getPointDistance } from '../../../util/index'
 
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'PercentPond',
+  name: 'DvFlylineChart',
   mixins: [autoResize],
   props: {
     config: {

src/components/fullScreenContainer/index.js

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

src/components/fullScreenContainer/src/main.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="dv-full-screen-container" :ref="ref">
+    <template v-if="ready">
+      <slot></slot>
+    </template>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize.js'
+
+export default {
+  name: 'DvFullScreenContainer',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'full-screen-container',
+      allWidth: 0,
+      scale: 0,
+      datavRoot: '',
+      ready: false
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { initConfig, setAppScale } = this
+
+      initConfig()
+
+      setAppScale()
+
+      this.ready = true
+    },
+    initConfig () {
+      const { dom } = this
+      const { width, height } = screen
+
+      this.allWidth = width
+
+      dom.style.width = `${width}px`
+      dom.style.height = `${height}px`
+    },
+    setAppScale () {
+      const { allWidth, dom } = this
+
+      const currentWidth = document.body.clientWidth
+
+      dom.style.transform = `scale(${currentWidth / allWidth})`
+    },
+    onResize () {
+      const { setAppScale } = this
+
+      setAppScale()
+    }
+  }
+}
+</script>
+
+<style lang="less">
+#dv-full-screen-container {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  overflow: hidden;
+  transform-origin: left top;
+  z-index: 999;
+}
+</style>

src/components/loading/index.js

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

src/components/loading/src/main.vue

@@ -59,7 +59,7 @@
 
 <script>
 export default {
-  name: 'Loading'
+  name: 'DvLoading'
 }
 </script>
 
@@ -74,7 +74,6 @@ export default {
 
   .loading-tip {
     font-size: 15px;
-    color: #fff;
   }
 }
 </style>

src/components/percentPond/index.js

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

src/components/percentPond/src/main.vue

@@ -49,7 +49,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
-  name: 'PercentPond',
+  name: 'DvPercentPond',
   props: {
     config: {
       type: Object,

src/components/scrollBoard/index.js

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

src/components/scrollBoard/src/main.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="dv-scroll-board" :ref="ref">
-    <div class="header" v-if="header.length && mergedConfig">
+    <div class="header" v-if="header.length && mergedConfig" :style="`background-color: ${mergedConfig.headerBGC};`">
       <div
         class="header-item"
         v-for="(headerItem, i) in header"
         :key="headerItem + i"
         :style="`
-          background-color: ${mergedConfig.headerBGC};
           height: ${mergedConfig.headerHeight}px;
           line-height: ${mergedConfig.headerHeight}px;
           width: ${widths[i]}px;
@@ -19,7 +18,7 @@
     <div
       v-if="mergedConfig"
       class="rows"
-      :style="`height: calc(100% - ${header.length ? mergedConfig.headerHeight : 0}px);`"
+      :style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)}px;`"
     >
       <div
         class="row-item"
@@ -47,14 +46,14 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+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: 'ScrollBoard',
+  name: 'DvScrollBoard',
   mixins: [autoResize],
   props: {
     config: {
@@ -357,20 +356,20 @@ export default {
 </script>
 
 <style lang="less">
-.text {
-  padding: 0 10px;
-  box-sizing: border-box;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .dv-scroll-board {
   position: relative;
   width: 100%;
   height: 100%;
   color: #fff;
 
+  .text {
+    padding: 0 10px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .header {
     display: flex;
     flex-direction: row;

src/components/scrollRankingBoard/index.js

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

src/components/scrollRankingBoard/src/main.vue

@@ -25,14 +25,14 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+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: 'ScrollRankingBoard',
+  name: 'DvScrollRankingBoard',
   mixins: [autoResize],
   props: {
     config: {
@@ -264,13 +264,13 @@ export default {
       width: 50px;
       transform: translateX(-100%);
       background: radial-gradient(rgb(40, 248, 255) 5%, transparent 80%);
-      animation: shine 3s ease-in-out infinite;
+      animation: shine 3s ease-in-out infinite alternate;
     }
   }
 }
 
 @keyframes shine {
-  85% {
+  80% {
     left: 0%;
     transform: translateX(-100%);
   }

src/components/waterLevelPond/index.js

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

src/components/waterLevelPond/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-water-pond-level">
-    <svg v-if="render">
+    <svg v-if="renderer">
       <defs>
         <linearGradient :id="gradientId" x1="0%" y1="0%" x2="0%" y2="100%">
           <stop v-for="lc in svgBorderGradient" :key="lc[0]"
@@ -10,28 +10,28 @@
       </defs>
 
       <text
-        v-if="render"
+        v-if="renderer"
         :stroke="`url(#${gradientId})`"
         :fill="`url(#${gradientId})`"
-        :x="render.area[0] / 2 + 8"
-        :y="render.area[1] / 2 + 8"
+        :x="renderer.area[0] / 2 + 8"
+        :y="renderer.area[1] / 2 + 8"
       >
         {{ details }}
       </text>
 
       <ellipse v-if="!shape || shape === 'round'"
-        :cx="render.area[0] / 2 + 8"
-        :cy="render.area[1] / 2 + 8"
-        :rx="render.area[0] / 2 + 5"
-        :ry="render.area[1] / 2 + 5"
+        :cx="renderer.area[0] / 2 + 8"
+        :cy="renderer.area[1] / 2 + 8"
+        :rx="renderer.area[0] / 2 + 5"
+        :ry="renderer.area[1] / 2 + 5"
         :stroke="`url(#${gradientId})`" />
 
       <rect v-else
         x="2" y="2"
         :rx="shape === 'roundRect' ? 10 : 0"
         :ry="shape === 'roundRect' ? 10 : 0"
-        :width="render.area[0] + 12"
-        :height="render.area[1] + 12"
+        :width="renderer.area[0] + 12"
+        :height="renderer.area[1] + 12"
         :stroke="`url(#${gradientId})`" />
     </svg>
 
@@ -47,7 +47,7 @@ import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 import CRender from '@jiaminghi/c-render'
 
 export default {
-  name: 'waterLevelPond',
+  name: 'DvWaterLevelPond',
   props: {
     config: Object,
     default: () => ({})
@@ -105,7 +105,7 @@ export default {
 
       mergedConfig: {},
 
-      render: null,
+      renderer: null,
 
       svgBorderGradient: [],
 
@@ -138,9 +138,9 @@ export default {
   },
   watch: {
     config () {
-      const { calcData, render } = this
+      const { calcData, renderer } = this
 
-      render.delAllGraph()
+      renderer.delAllGraph()
 
       this.waves = []
 
@@ -160,7 +160,7 @@ export default {
     initRender () {
       const { $refs } = this
 
-      this.render = new CRender($refs['water-pond-level'])
+      this.renderer = new CRender($refs['water-pond-level'])
     },
     calcData () {
       const { mergeConfig, calcSvgBorderGradient, calcDetails } = this
@@ -205,12 +205,12 @@ export default {
       this.details = formatter.replace('{value}', maxValue)
     },
     addWave () {
-      const { render, getWaveShapes, getWaveStyle, drawed } = this
+      const { renderer, getWaveShapes, getWaveStyle, drawed } = this
 
       const shapes = getWaveShapes()
       const style = getWaveStyle()
 
-      this.waves = shapes.map(shape => render.add({
+      this.waves = shapes.map(shape => renderer.add({
         name: 'smoothline',
         animationFrame: 300,
         shape,
@@ -219,11 +219,11 @@ export default {
       }))
     },
     getWaveShapes () {
-      const { mergedConfig, render, mergeOffset } = this
+      const { mergedConfig, renderer, mergeOffset } = this
 
       const { waveNum, waveHeight, data } = mergedConfig
 
-      const [w, h] = render.area
+      const [w, h] = renderer.area
 
       const pointsNum = waveNum * 4 + 4
 
@@ -249,9 +249,9 @@ export default {
       return [x + ox, y + oy]
     },
     getWaveStyle () {
-      const { render, mergedConfig } = this
+      const { renderer, mergedConfig } = this
 
-      const h = render.area[1]
+      const h = renderer.area[1]
 
       return {
         gradientColor: mergedConfig.colors,
@@ -276,13 +276,13 @@ export default {
       ctx.fill()
     },
     async animationWave (repeat = 1) {
-      const { waves, render, animation } = this
+      const { waves, renderer, animation } = this
 
       if (animation) return
 
       this.animation = true
 
-      const w = render.area[0]
+      const w = renderer.area[0]
 
       waves.forEach(graph => {
         graph.attr('style', { translate: [0, 0] })
@@ -292,11 +292,11 @@ export default {
         }, true)
       })
 
-      await render.launchAnimation()
+      await renderer.launchAnimation()
 
       this.animation = false
 
-      if (!render.graphs.length) return
+      if (!renderer.graphs.length) return
 
       this.animationWave(repeat + 1)
     }
@@ -307,9 +307,9 @@ export default {
     init()
   },
   beforeDestroy () {
-    const { render } = this
+    const { renderer } = this
 
-    render.delAllGraph()
+    renderer.delAllGraph()
 
     this.waves = []
   }

src/index.js

@@ -0,0 +1,83 @@
+/**
+ * IMPORT COMPONENTS
+ */
+import fullScreenContainer from './components/fullScreenContainer/index'
+import loading from './components/loading/index'
+
+// border box
+import borderBox1 from './components/borderBox1/index'
+import borderBox2 from './components/borderBox2/index'
+import borderBox3 from './components/borderBox3/index'
+import borderBox4 from './components/borderBox4/index'
+import borderBox5 from './components/borderBox5/index'
+import borderBox6 from './components/borderBox6/index'
+import borderBox7 from './components/borderBox7/index'
+import borderBox8 from './components/borderBox8/index'
+import borderBox9 from './components/borderBox9/index'
+
+// decoration
+import decoration1 from './components/decoration1/index'
+import decoration2 from './components/decoration2/index'
+import decoration3 from './components/decoration3/index'
+import decoration4 from './components/decoration4/index'
+import decoration5 from './components/decoration5/index'
+import decoration6 from './components/decoration6/index'
+import decoration7 from './components/decoration7/index'
+import decoration8 from './components/decoration8/index'
+import decoration9 from './components/decoration9/index'
+import decoration10 from './components/decoration10/index'
+
+// charts
+import charts from './components/charts/index'
+
+import activeRingChart from './components/activeRingChart'
+import waterLevelPond from './components/waterLevelPond/index'
+import percentPond from './components/percentPond/index'
+import flylineChart from './components/flylineChart'
+import conicalColumnChart from './components/conicalColumnChart'
+import digitalFlop from './components/digitalFlop'
+import scrollBoard from './components/scrollBoard/index'
+import scrollRankingBoard from './components/scrollRankingBoard/index'
+
+/**
+ * USE COMPONENTS
+ */
+export default function (Vue) {
+  Vue.use(fullScreenContainer)
+  Vue.use(loading)
+
+  // border box
+  Vue.use(borderBox1)
+  Vue.use(borderBox2)
+  Vue.use(borderBox3)
+  Vue.use(borderBox4)
+  Vue.use(borderBox5)
+  Vue.use(borderBox6)
+  Vue.use(borderBox7)
+  Vue.use(borderBox8)
+  Vue.use(borderBox9)
+
+  // decoration
+  Vue.use(decoration1)
+  Vue.use(decoration2)
+  Vue.use(decoration3)
+  Vue.use(decoration4)
+  Vue.use(decoration5)
+  Vue.use(decoration6)
+  Vue.use(decoration7)
+  Vue.use(decoration8)
+  Vue.use(decoration9)
+  Vue.use(decoration10)
+
+  // charts
+  Vue.use(charts)
+
+  Vue.use(activeRingChart)
+  Vue.use(waterLevelPond)
+  Vue.use(percentPond)
+  Vue.use(flylineChart)
+  Vue.use(conicalColumnChart)
+  Vue.use(digitalFlop)
+  Vue.use(scrollBoard)
+  Vue.use(scrollRankingBoard)
+}

src/mixin/autoResize.js

@@ -17,7 +17,7 @@ export default {
     async autoResizeMixinInit () {
       const { initWH, getDebounceInitWHFun, bindDomResizeCallback, afterAutoResizeMixinInit } = this
 
-      await initWH()
+      await initWH(false)
 
       getDebounceInitWHFun()
 
@@ -25,7 +25,7 @@ export default {
 
       if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit()
     },
-    initWH () {
+    initWH (resize = true) {
       const { $nextTick, $refs, ref, onResize } = this
 
       return new Promise(resolve => {
@@ -35,7 +35,7 @@ export default {
           this.width = dom.clientWidth
           this.height = dom.clientHeight
 
-          if (typeof onResize === 'function') onResize()
+          if (typeof onResize === 'function' && resize) onResize()
 
           resolve()
         })