update dist and lib

🐛 修改组件 ID 时间戳的生成方式

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 package-lock.json
+/deploy/config.js
 
 # local env files
 .env.local

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 2.4.5-alpha (2019-++-++)
+
+### Bug Fixes
+
+- **activeRingChart:** Calculation exception due to data value being 0 [(#17)](https://github.com/jiaming743/DataV/issues/17).
+
 # 2.4.4-alpha (2019-09-05)
 
 ### Bug Fixes

README.md

@@ -12,10 +12,10 @@
 
 ## DataV是干什么的?
 
-* DataV是一个基于**Vue**的数据可视化组件库.
-* 提供用于提升页面视觉效果的**SVG**边框和装饰.
-* 提供常用的**图表**如折线图等.
-* 飞线图/轮播表等其他组件.
+* DataV是一个基于**Vue**的数据可视化组件库
+* 提供用于提升页面视觉效果的**SVG**边框和装饰
+* 提供常用的**图表**如折线图等
+* 飞线图/轮播表等其他组件
 
 ### npm安装
 
@@ -38,6 +38,22 @@ Vue.use(borderBox1)
 
 详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).
 
+### UMD版
+
+`UMD`版可直接使用`script`标签引入，`UMD`版文件位于项目`dist`目录下，引入后将自动把所有组件注册为**Vue全局组件**，引入`DataV`前请确保已引入`Vue`。
+
+[UMD版使用示例](./umdExample.html)
+
+### React版本
+
+React版本已在开发中，敬请期待
+
+### 调研
+
+关于React版本组件库及反馈请移步[问卷调查](https://www.wjx.cn/jq/45326197.aspx)
+
+![问卷调查](./questionnaire.jpg)
+
 ### TODO
 
 * **飞线图**添加多中心点及反向飞线功能

README_EN.md

@@ -39,6 +39,22 @@ Vue.use(borderBox1)
 
 Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
 
+### UMD version
+
+The `UMD` version can be directly imported using the `script` tag. The `UMD` version file is located in the project `dist` directory. After import, all components will be automatically registered as **Vue global components**. Be sure to introduce `Vue` before introducing `DataV`.
+
+[UMD version usage example](./umdExample.html)
+
+### React version
+
+The reaction version is already under development, so stay tuned
+
+### Questionnaire
+
+React version of the component library and feedback[Questionnaire](https://www.wjx.cn/jq/45326197.aspx)
+
+![问卷调查](./questionnaire.jpg)
+
 ### TODO
 
 * **flylineChart**Add multi-center point and reverse fly line function.

build/index.js

@@ -77,15 +77,15 @@ async function start () {
 
   print.tip('After rollupCompile')
 
-  // const uglifyjs = await exec(`uglifyjs dist/${libName}.map.js -o dist/${libName}.min.js`)
+  const terser = await exec(`rollup -c build/rollup.terser.config.js`)
 
-  // if (!uglifyjs) {
-  //   print.error('Exception in uglifyjs')
+  if (!terser) {
+    print.error('Exception in terser')
 
-  //   return
-  // }
+    return
+  }
 
-  // print.tip('After uglifyjs')
+  print.tip('After terser')
 
   print.yellow('-------------------------------------')
   print.success('     DataV Lib Compile Success!      ')

build/rollup.config.js

@@ -5,10 +5,9 @@ import babel from 'rollup-plugin-babel'
 
 export default {
   input: 'build/entry.js',
-  // input: 'src/index.js',
   output: {
     format: 'umd',
-    file: 'dist/datav.map.js',
+    file: 'dist/datav.map.vue.js',
     name: 'datav'
   },
   plugins: [

build/rollup.terser.config.js

@@ -0,0 +1,24 @@
+import resolve from 'rollup-plugin-node-resolve'
+import vue from 'rollup-plugin-vue'
+import commonjs from 'rollup-plugin-commonjs'
+import babel from 'rollup-plugin-babel'
+import { terser } from "rollup-plugin-terser"
+
+export default {
+  input: 'build/entry.js',
+  output: {
+    format: 'umd',
+    file: 'dist/datav.min.vue.js',
+    name: 'datav'
+  },
+  plugins: [
+    resolve(),
+    babel({
+      exclude: 'node_modules/**'
+    }),
+    commonjs(),
+    vue(),
+    terser(),
+  ],
+  external: ['Vue']
+}

deploy/index.js

@@ -0,0 +1,81 @@
+const { fileForEach } = require('@jiaminghi/fs')
+const Client = require('ftp')
+const print = require('./plugin/print')
+const { emptyDir, put } = require('./plugin/ftp')
+const getNodeParams = require('./plugin/nodeParams')
+
+let config = null
+
+try {
+  config = require('./config')
+} catch (err) {
+  void 0
+}
+
+const DIST_PATH = './dist/'
+const FTP_PATH = './datav/'
+
+const ftp = new Client()
+
+ftp.on('ready', async foo => {
+  print.tip('FTP connected!')
+
+  const isEmpty = await emptyDir(ftp, FTP_PATH)
+
+  if (!isEmpty) {
+    print.error('Exception in emptyDir!')
+
+    return false
+  }
+
+  let status = true
+
+  await fileForEach(DIST_PATH, async src => {
+    const destPath = FTP_PATH + src.split('/').slice(-1)[0]
+
+    print.tip('Upload: ' + destPath)
+
+    if (!await put(ftp, src, destPath)) {
+      status = false
+      
+      print.error('Exception in upload ' + destPath)
+    }
+  })
+
+  if (status) {
+    print.yellow('-------------------------------------')
+    print.success('    Automatic Deployment Success!    ')
+    print.yellow('-------------------------------------')  
+  }
+
+  ftp.destroy()
+})
+
+ftp.on('greeting', foo => {
+  print.tip('FTP greeting')
+})
+ftp.on('close', foo => {
+  print.tip('FTP close')
+})
+ftp.on('end', foo => {
+  print.tip('FTP end')
+})
+ftp.on('error', foo => {
+  print.tip('FTP error')
+})
+
+const { host, user, pass } = config || getNodeParams()
+
+if (!host || !user || !pass) {
+  print.error('Upload Dist to FTP Missing Parameters!')
+
+  return false
+}
+
+print.tip('Start Upload!')
+
+ftp.connect({
+  host,
+  user,
+  password: pass
+})

deploy/plugin/ftp.js

@@ -0,0 +1,99 @@
+async function getList (ftp, src) {
+  return new Promise(resolve => {
+    ftp.list(src, (err, list) => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(list)
+      }
+    })
+  })
+}
+
+async function rmDir (ftp, src, recusive = true) {
+  return new Promise(resolve => {
+    ftp.rmdir(src, recusive, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+async function deleteFile (ftp, src) {
+  return new Promise(resolve => {
+    ftp.delete(src, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+async function emptyDir (ftp, src, except = []) {
+  const list = await getList(ftp, src)
+
+  for (let i = 0, listNum = list.length; i < listNum; i++) {
+    const { type, name } = list[i]
+
+    if (type === 'd' && (name === '.' || name === '..')) continue
+    if (except.find(n => n === name)) continue
+
+    const fullSrc = `${src}${name}`
+
+    if (type === 'd') {
+      if (!await rmDir(ftp, fullSrc, true)) return false
+    } else {
+      if (!await deleteFile(ftp, fullSrc)) return false
+    }
+  }
+
+  return true
+}
+
+async function put (ftp, src, dest) {
+  return new Promise(resolve => {
+    ftp.put(src, dest, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+async function mkDir (ftp, src, recusive = true) {
+  return new Promise(resolve => {
+    ftp.mkdir(src, recusive, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+module.exports = {
+  put,
+  rmDir,
+  mkDir,
+  getList,
+  emptyDir,
+  deleteFile
+}

deploy/plugin/nodeParams.js

@@ -0,0 +1,13 @@
+function getNodeParams () {
+  const params = {}
+
+  process.argv.slice(2).forEach(param => {
+    param = param.split('=')
+
+    params[param[0]] = param[1]
+  })
+
+  return params
+}
+
+module.exports = getNodeParams

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

lib/components/activeRingChart/src/main.vue

@@ -113,7 +113,7 @@ export default {
 
       const sum = value.reduce((all, v) => all + v, 0)
 
-      const percent = parseInt(value[activeIndex] / sum * 100)
+      const percent = parseInt(value[activeIndex] / sum * 100) || 0
 
       return {
         content: '{nt}%',

lib/components/borderBox8/src/main.vue

@@ -68,11 +68,12 @@ export default {
   name: 'DvBorderBox8',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${(new Date()).getTime()}`,
-      gradient: `border-box-8-gradient-${(new Date()).getTime()}`,
-      mask: `border-box-8-mask-${(new Date()).getTime()}`
+      path: `border-box-8-path-${timestamp}`,
+      gradient: `border-box-8-gradient-${timestamp}`,
+      mask: `border-box-8-mask-${timestamp}`
     }
   },
   computed: {

lib/components/borderBox9/src/main.vue

@@ -89,11 +89,12 @@ export default {
   name: 'DvBorderBox9',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'border-box-9',
 
-      gradientId: `border-box-9-gradient-${(new Date()).getTime()}`,
-      maskId: `border-box-9-mask-${(new Date()).getTime()}`
+      gradientId: `border-box-9-gradient-${timestamp}`,
+      maskId: `border-box-9-mask-${timestamp}`
     }
   }
 }

lib/components/charts/src/main.vue

@@ -19,9 +19,10 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
-      ref: `charts-container-${(new Date()).getTime()}`,
-      chartRef: `chart-${(new Date()).getTime()}`,
+      ref: `charts-container-${timestamp}`,
+      chartRef: `chart-${timestamp}`,
 
       chart: null
     }

lib/components/decoration10/src/main.vue

@@ -152,16 +152,17 @@ export default {
   name: 'DvDecoration10',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     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()}`
+      animationId1: `d10ani1${timestamp}`,
+      animationId2: `d10ani2${timestamp}`,
+      animationId3: `d10ani3${timestamp}`,
+      animationId4: `d10ani4${timestamp}`,
+      animationId5: `d10ani5${timestamp}`,
+      animationId6: `d10ani6${timestamp}`,
+      animationId7: `d10ani7${timestamp}`
     }
   }
 }

lib/components/decoration9/src/main.vue

@@ -90,10 +90,11 @@ export default {
   name: 'DvDecoration9',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'decoration-9',
 
-      polygonId: `decoration-9-polygon-${(new Date()).getTime()}`,
+      polygonId: `decoration-9-polygon-${timestamp}`,
 
       svgWH: [100, 100],
 

lib/components/flylineChart/src/main.vue

@@ -171,13 +171,14 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'dv-flyline-chart',
       unique: Math.random(),
-      maskId: `flyline-mask-id-${(new Date()).getTime()}`,
-      maskCircleId: `mask-circle-id-${(new Date()).getTime()}`,
-      gradientId: `gradient-id-${(new Date()).getTime()}`,
-      gradient2Id: `gradient2-id-${(new Date()).getTime()}`,
+      maskId: `flyline-mask-id-${timestamp}`,
+      maskCircleId: `mask-circle-id-${timestamp}`,
+      gradientId: `gradient-id-${timestamp}`,
+      gradient2Id: `gradient2-id-${timestamp}`,
 
       defaultConfig: {
         /**

lib/components/percentPond/src/main.vue

@@ -57,9 +57,10 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
-      gradientId1: `percent-pond-gradientId1-${(new Date()).getTime()}`,
-      gradientId2: `percent-pond-gradientId2-${(new Date()).getTime()}`,
+      gradientId1: `percent-pond-gradientId1-${timestamp}`,
+      gradientId2: `percent-pond-gradientId2-${timestamp}`,
 
       width: 0,
       height: 0,
@@ -239,7 +240,7 @@ export default {
       this.height = dom.clientHeight
     },
     mergeConfig () {
-      let { config, defaultConfig } = this
+      const { config, defaultConfig } = this
 
       this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
     }

lib/components/scrollBoard/src/main.vue

@@ -236,7 +236,7 @@ export default {
         data = data.map((row, i) => {
           row = [...row]
 
-          const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</spand>`
+          const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</span>`
 
           row.unshift(indexTag)
 

lib/components/waterLevelPond/src/main.vue

@@ -53,8 +53,9 @@ export default {
     default: () => ({})
   },
   data () {
+    const timestamp = Date.now()
     return {
-      gradientId: `water-level-pond-${(new Date()).getTime()}`,
+      gradientId: `water-level-pond-${timestamp}`,
 
       defaultConfig: {
         /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "lib/index.js",
@@ -11,6 +11,7 @@
   "scripts": {
     "build": "node build/index.js",
     "prepublish": "npm run build",
+    "deploy": "node deploy/index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "license": "MIT",
@@ -34,10 +35,11 @@
     "@babel/plugin-transform-runtime": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "@jiaminghi/fs": "0.0.1",
+    "ftp": "^0.3.10",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-uglify": "^6.0.3",
+    "rollup-plugin-terser": "^5.1.1",
     "rollup-plugin-vue": "^5.0.1",
     "vue-template-compiler": "^2.6.10"
   }

src/components/activeRingChart/src/main.vue

@@ -113,7 +113,7 @@ export default {
 
       const sum = value.reduce((all, v) => all + v, 0)
 
-      const percent = parseInt(value[activeIndex] / sum * 100)
+      const percent = parseInt(value[activeIndex] / sum * 100) || 0
 
       return {
         content: '{nt}%',

src/components/borderBox8/src/main.vue

@@ -68,11 +68,12 @@ export default {
   name: 'DvBorderBox8',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${(new Date()).getTime()}`,
-      gradient: `border-box-8-gradient-${(new Date()).getTime()}`,
-      mask: `border-box-8-mask-${(new Date()).getTime()}`
+      path: `border-box-8-path-${timestamp}`,
+      gradient: `border-box-8-gradient-${timestamp}`,
+      mask: `border-box-8-mask-${timestamp}`
     }
   },
   computed: {

src/components/borderBox9/src/main.vue

@@ -89,11 +89,12 @@ export default {
   name: 'DvBorderBox9',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'border-box-9',
 
-      gradientId: `border-box-9-gradient-${(new Date()).getTime()}`,
-      maskId: `border-box-9-mask-${(new Date()).getTime()}`
+      gradientId: `border-box-9-gradient-${timestamp}`,
+      maskId: `border-box-9-mask-${timestamp}`
     }
   }
 }

src/components/charts/src/main.vue

@@ -19,9 +19,10 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
-      ref: `charts-container-${(new Date()).getTime()}`,
-      chartRef: `chart-${(new Date()).getTime()}`,
+      ref: `charts-container-${timestamp}`,
+      chartRef: `chart-${timestamp}`,
 
       chart: null
     }

src/components/decoration10/src/main.vue

@@ -152,16 +152,17 @@ export default {
   name: 'DvDecoration10',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     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()}`
+      animationId1: `d10ani1${timestamp}`,
+      animationId2: `d10ani2${timestamp}`,
+      animationId3: `d10ani3${timestamp}`,
+      animationId4: `d10ani4${timestamp}`,
+      animationId5: `d10ani5${timestamp}`,
+      animationId6: `d10ani6${timestamp}`,
+      animationId7: `d10ani7${timestamp}`
     }
   }
 }

src/components/decoration9/src/main.vue

@@ -90,10 +90,11 @@ export default {
   name: 'DvDecoration9',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'decoration-9',
 
-      polygonId: `decoration-9-polygon-${(new Date()).getTime()}`,
+      polygonId: `decoration-9-polygon-${timestamp}`,
 
       svgWH: [100, 100],
 

src/components/flylineChart/src/main.vue

@@ -171,13 +171,14 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'dv-flyline-chart',
       unique: Math.random(),
-      maskId: `flyline-mask-id-${(new Date()).getTime()}`,
-      maskCircleId: `mask-circle-id-${(new Date()).getTime()}`,
-      gradientId: `gradient-id-${(new Date()).getTime()}`,
-      gradient2Id: `gradient2-id-${(new Date()).getTime()}`,
+      maskId: `flyline-mask-id-${timestamp}`,
+      maskCircleId: `mask-circle-id-${timestamp}`,
+      gradientId: `gradient-id-${timestamp}`,
+      gradient2Id: `gradient2-id-${timestamp}`,
 
       defaultConfig: {
         /**

src/components/percentPond/src/main.vue

@@ -57,9 +57,10 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
-      gradientId1: `percent-pond-gradientId1-${(new Date()).getTime()}`,
-      gradientId2: `percent-pond-gradientId2-${(new Date()).getTime()}`,
+      gradientId1: `percent-pond-gradientId1-${timestamp}`,
+      gradientId2: `percent-pond-gradientId2-${timestamp}`,
 
       width: 0,
       height: 0,
@@ -239,7 +240,7 @@ export default {
       this.height = dom.clientHeight
     },
     mergeConfig () {
-      let { config, defaultConfig } = this
+      const { config, defaultConfig } = this
 
       this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
     }

src/components/scrollBoard/src/main.vue

@@ -236,7 +236,7 @@ export default {
         data = data.map((row, i) => {
           row = [...row]
 
-          const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</spand>`
+          const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</span>`
 
           row.unshift(indexTag)
 

src/components/waterLevelPond/src/main.vue

@@ -53,8 +53,9 @@ export default {
     default: () => ({})
   },
   data () {
+    const timestamp = Date.now()
     return {
-      gradientId: `water-level-pond-${(new Date()).getTime()}`,
+      gradientId: `water-level-pond-${timestamp}`,
 
       defaultConfig: {
         /**

umdExample.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>DataV</title>
+  <script src="https://unpkg.com/vue"></script>
+  <!--Resources are located on personal servers for experience and testing only, do not use in production environments-->
+  <!--资源位于个人服务器仅供体验和测试，请勿在生产环境使用-->
+  <!--Debug version-->
+  <!--调试版-->
+  <script src="http://lib.jiaminghi.com/datav/datav.map.vue.js"></script>
+  <!--Compression version-->
+  <!--压缩版-->
+  <!-- <script src="http://lib.jiaminghi.com/datav/datav.min.vue.js"></script> -->
+  <style>
+    html, body, #app {
+      width: 100%;
+      height: 100%;
+      margin: 0px;
+      padding: 0px;
+    }
+
+    .border-box-content {
+      color: rgb(66,185,131);
+      font-size: 40px;
+      font-weight: bold;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <dv-border-box-1>Welcome to DataV</dv-border-box-1>
+  </div>
+
+  <script>
+    var app = new Vue({
+      el: '#app'
+    })
+  </script>
+</body>
+</html>