update changelog

CHANGELOG.md

@@ -1,3 +1,32 @@
+# 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
@@ -64,7 +93,7 @@
   └── etc.
   ```
 
-* **Introduced on demand**
+- **Introduced on demand**
 
   ```js
   import borderBox1 from '@jiaminghi/data-view/lib/components/borderBox1'

README.md

@@ -1,15 +1,22 @@
+[中文](./README_CN.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>
+## 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
 
@@ -17,4 +24,17 @@
 $ npm install @jiaminghi/data-view
 ```
 
-Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
+### 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).

README_CN.md

@@ -0,0 +1,40 @@
+[ENGLISH](./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>
+
+## DataV是干什么的?
+
+* DataV是一个基于**Vue**的数据可视化组件库.
+* 提供用于提升页面视觉效果的**SVG**边框和装饰.
+* 提供常用的**图表**如折线图等.
+* 飞线图/轮播表等其他组件.
+
+### npm安装
+
+```shell
+$ npm install @jiaminghi/data-view
+```
+
+### 使用
+
+```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).

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,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.3.0",
+  "version": "2.3.3",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "/lib/index.js",
@@ -25,5 +25,8 @@
   "dependencies": {
     "@jiaminghi/charts": "*"
   },
-  "homepage": "https://github.com/jiaming743/DataV#readme"
+  "homepage": "https://github.com/jiaming743/DataV#readme",
+  "devDependencies": {
+    "@jiaminghi/fs": "0.0.1"
+  }
 }

publish/index.js

@@ -1,10 +1,12 @@
-const { copyDir, fileForEach, readFile, writeFile, unlinkDirFileByExtname } = require('./plugin/fs')
+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)
@@ -51,8 +53,18 @@ async function start () {
 
   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.success('     DataV Lib Compile Success!      ')
   print.yellow('-------------------------------------')
 
   return true
@@ -125,7 +137,7 @@ async function compileLessToCss () {
 async function addCssImport () {
   let importSuccess = true
 
-  await fileForEach(COMPILE_SRC + '/components', async src => {
+  await fileForEach(COMPILE_SRC + COMPONENTS_DIR, async src => {
     if (path.extname(src) !== '.js') return
 
     let content = await readFile(src)
@@ -146,6 +158,28 @@ async function addCssImport () {
   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/fs.js

@@ -1,323 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-
-function readDir (src) {
-  return new Promise(resolve => {
-    fs.readdir(src, (err, paths) => {
-      if (err) {
-        console.error(err)
-
-        resolve(false)
-      }
-
-      resolve(paths)
-    })
-  })
-}
-
-function stat (src) {
-  return new Promise(resolve => {
-    fs.stat(src, (err, stats) => {
-      if (err) {
-        console.error(err)
-
-        resolve(false)
-      }
-
-      resolve(stats)
-    })
-  })
-}
-
-function mkdir (src) {
-  return new Promise(resolve => {
-    fs.mkdir(src, err => {
-      if (err) {
-        console.error(err)
-
-        resolve(false)
-      }
-
-      resolve(true)
-    })
-  })
-}
-
-function access (src, mode = fs.constants.F_OK) {
-  return new Promise(resolve => {
-    fs.access(src, mode, err => {
-      if (err) {
-        resolve(false)
-
-        return
-      }
-
-      resolve(true)
-    })
-  })
-}
-
-function unlink (src) {
-  return new Promise(resolve => {
-    fs.unlink(src, err => {
-      if (err) {
-        console.error(err)
-
-        resolve(false)
-      }
-
-      resolve(true)
-    })
-  })
-}
-
-function rmDir (src) {
-  return new Promise(resolve => {
-    fs.rmdir(src, err => {
-      if (err) {
-        resolve(false)
-      } else {
-        resolve(true)
-      }
-    })
-  })
-}
-
-async function clearDir (src) {
-  const isExists = await access(src)
-
-  if (!isExists) {
-    await mkdir(src)
-
-    return true
-  }
-
-  return await emptyDir(src)
-}
-
-async function emptyDir (src) {
-  const paths = await readDir(src)
-  if (!paths) {
-    console.error('Exception in emptyDir: paths!')
-
-    return false
-  }
-
-  for (let i = 0; i < paths.length; i++) {
-    const fullSrc = src + '/' + paths[i]
-    const stats = await stat(fullSrc)
-
-    if (!stats) {
-      console.error('Exception in emptyDir: stats!')
-
-      return false
-    }
-
-    if (stats.isFile()) {
-      const isUnlink = await unlink(fullSrc)
-
-      if (!isUnlink) {
-        console.error('Exception in emptyDir: isUnlink!')
-
-        return false
-      }
-    } else if (stats.isDirectory()) {
-      const isEmpty = await emptyDir(fullSrc)
-
-      if (!isEmpty) {
-        console.error('Exception in emptyDir: isEmpty!')
-
-        return false
-      }
-
-      if (!await rmDir(fullSrc)) {
-        console.error('Exception in emptyDir: rmDir!')
-
-        return false
-      }
-    }
-  }
-
-  return true
-}
-
-async function unlinkDirFileByExtname (src, extnames = []) {
-  const paths = await readDir(src)
-
-  if (!paths) {
-    console.error('Exception in unlinkDirFileByExtname: paths!')
-
-    return false
-  }
-
-  for (let i = 0; i < paths.length; i++) {
-    const fullSrc = src + '/' + paths[i]
-    const stats = await stat(fullSrc)
-
-    if (!stats) {
-      console.error('Exception in unlinkDirFileByExtname: stats!')
-
-      return false
-    }
-
-    if (stats.isFile()) {
-      const cxtname = path.extname(fullSrc)
-      if (extnames.findIndex(name => name === cxtname) === -1) continue
-
-      const isUnlink = await unlink(fullSrc)
-      if (!isUnlink) {
-        console.error('Exception in unlinkDirFileByExtname: isUnlink!')
-
-        return false
-      }
-    } else if (stats.isDirectory()) {
-      const recursive = await unlinkDirFileByExtname(fullSrc, extnames)
-
-      if (!recursive) {
-        console.error('Exception in unlinkDirFileByExtname: recursive!')
-
-        return false
-      }
-    }
-  }
-
-  return true
-}
-
-async function copyDir (src, target) {
-  if (!src || !target) {
-    console.error('copyDir missing parameters!')
-
-    return false
-  }
-
-  const isClear = await clearDir(target)
-
-  if (!isClear) {
-    console.error('Exception in copyDir: isClear!')
-
-    return false
-  }
-
-  const paths = await readDir(src)
-  if (!paths) {
-    console.error('Exception in copyDir: paths!')
-
-    return false
-  }
-
-  for (let i = 0; i < paths.length; i++) {
-    const fullSrc = src + '/' + paths[i]
-    const fullTarget = target + '/' + paths[i]
-    const stats = await stat(fullSrc)
-
-    if (!stats) {
-      console.error('Exception in copyDir: stats!')
-
-      return false
-    }
-
-    if (stats.isFile()) {
-      fs.createReadStream(fullSrc).pipe(fs.createWriteStream(fullTarget))
-    } else if (stats.isDirectory()) {
-      const isMkdir = await mkdir(fullTarget)
-
-      if (!isMkdir) {
-        console.error('Exception in copyDir: isMkdir!')
-
-        return false
-      }
-
-      const isCopy = await copyDir(fullSrc, fullTarget)
-
-      if (!isCopy) {
-        console.error('Exception in copyDir: isCopy!')
-
-        return false
-      }
-    }
-  }
-
-  return true
-}
-
-async function fileForEach (src, callback) {
-  if (!src || !callback) {
-    console.error('fileForEach missing parameters!')
-
-    return false
-  }
-
-  const paths = await readDir(src)
-  if (!paths) {
-    console.error('Exception in fileForEach: paths!')
-
-    return false
-  }
-
-  for (let i = 0; i < paths.length; i++) {
-    const fullSrc = src + '/' + paths[i]
-    const stats = await stat(fullSrc)
-
-    if (!stats) {
-      console.error('Exception in fileForEach: stats!')
-
-      return false
-    }
-
-    if (stats.isFile()) {
-      await callback(fullSrc)
-    } else if (stats.isDirectory()) {
-      const recursive = await fileForEach(fullSrc, callback)
-
-      if (!recursive) {
-        console.error('Exception in fileForEach: recursive!')
-
-        return false
-      }
-    }
-  }
-
-  return true
-}
-
-async function readFile (src, encoding = 'utf8') {
-  return new Promise(resolve => {
-    fs.readFile(src, encoding, (err, data) => {
-      if (err) {
-        console.error(err)
-
-        resolve(false)
-      } else {
-        resolve(data)
-      }
-    })
-  })
-}
-
-async function writeFile (src, string, encoding = 'utf8') {
-  return new Promise(resolve => {
-    fs.writeFile(src, string, encoding, err => {
-      if (err) {
-        console.error(err)
-
-        resolve(false)
-      } else {
-        resolve(true)
-      }
-    })
-  })
-}
-
-module.exports = {
-  readDir,
-  stat,
-  mkdir,
-  clearDir,
-  emptyDir,
-  unlinkDirFileByExtname,
-  copyDir,
-  fileForEach,
-  readFile,
-  writeFile
-}

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"

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"

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}

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}

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" />

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}`" />
@@ -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/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"

src/components/borderBox9/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-9" :ref="ref">
-    <svg class="dv-svg-container">
+    <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" />

src/components/charts/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-charts-container" :ref="ref">
-    <div class="charts" :ref="chartRef" />
+    <div class="charts-canvas-container" :ref="chartRef" />
   </div>
 </template>
 
@@ -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/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"

src/components/digitalFlop/src/main.vue

@@ -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/fullScreenContainer/src/main.vue

@@ -1,57 +1,57 @@
 <template>
-  <div id="dv-full-screen-container" ref="full-screen-container">
-    <slot></slot>
+  <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: ''
+      datavRoot: '',
+      ready: false
     }
   },
   methods: {
-    init () {
-      const { initConfig, setAppScale, bindReSizeEventHandler } = this
+    afterAutoResizeMixinInit () {
+      const { initConfig, setAppScale } = this
 
       initConfig()
 
       setAppScale()
 
-      bindReSizeEventHandler()
+      this.ready = true
     },
     initConfig () {
+      const { dom } = this
       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`
+      dom.style.width = `${width}px`
+      dom.style.height = `${height}px`
     },
     setAppScale () {
-      const { allWidth, datavRoot } = this
+      const { allWidth, dom } = this
 
       const currentWidth = document.body.clientWidth
 
-      datavRoot.style.transform = `scale(${currentWidth / allWidth})`
+      dom.style.transform = `scale(${currentWidth / allWidth})`
     },
-    bindReSizeEventHandler () {
-      const { debounce, setAppScale } = this
+    onResize () {
+      const { setAppScale } = this
 
-      if (!debounce) return
-
-      window.addEventListener('resize', debounce(100, setAppScale))
+      setAppScale()
     }
-  },
-  mounted () {
-    const { init } = this
-
-    init()
   }
 }
 </script>

src/components/index.js

@@ -1,77 +0,0 @@
-import fullScreenContainer from './fullScreenContainer/index'
-import loading from './loading/index'
-
-// 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'
-import borderBox9 from './borderBox9/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'
-import decoration9 from './decoration9/index'
-import decoration10 from './decoration10/index'
-
-// charts
-import charts from './charts/index'
-
-import activeRingChart from './activeRingChart'
-import waterLevelPond from './waterLevelPond/index'
-import percentPond from './percentPond/index'
-import flylineChart from './flylineChart'
-import conicalColumnChart from './conicalColumnChart'
-import digitalFlop from './digitalFlop'
-import scrollBoard from './scrollBoard/index'
-import scrollRankingBoard from './scrollRankingBoard/index'
-
-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/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"
@@ -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/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>
 
@@ -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

@@ -1,5 +1,83 @@
-import components from './components/index'
+/**
+ * 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) {
-  components(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()
         })