move components use statments

CHANGELOG.md

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

README.md

@@ -1,3 +1,5 @@
+[中文](./README_CN.md)
+
 <h1 align="center">DataV</h1>
 
 <p align="center">
@@ -9,7 +11,12 @@
     </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/datav">
+      <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.json

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

publish/index.js

@@ -1,10 +1,12 @@
-const { copyDir, fileForEach, readFile, writeFile, unlinkDirFileByExtname } = require('./plugin/fs')
+const { copyDir, fileForEach, readFile, writeFile, unlinkDirFileByExtname, dirForEach } = require('./plugin/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

@@ -309,6 +309,36 @@ async function writeFile (src, string, encoding = 'utf8') {
   })
 }
 
+async function dirForEach (src, callback) {
+  if (!src || !callback) {
+    console.error('dirForEach missing parameters!')
+
+    return false
+  }
+
+  const paths = await readDir(src)
+  if (!paths) {
+    console.error('Exception in dirForEach: 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 dirForEach: stats!')
+
+      return false
+    }
+
+    if (stats.isDirectory()) await callback(fullSrc)
+  }
+
+  return true
+}
+
 module.exports = {
   readDir,
   stat,
@@ -319,5 +349,6 @@ module.exports = {
   copyDir,
   fileForEach,
   readFile,
-  writeFile
+  writeFile,
+  dirForEach
 }

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/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/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()
         })