💎 Release new version v2.3.0

Signed-off-by: Jakub Juszczak <netghost03@gmail.com>

CHANGELOG.md

@@ -1,10 +1,31 @@
 # Change Log
 
+## [v2.2.1](https://github.com/apertureless/vue-chartjs/tree/v2.2.1) (2016-12-07)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.2.0...v2.2.1)
+
+**Merged pull requests:**
+
+- Update README.md [\#16](https://github.com/apertureless/vue-chartjs/pull/16) ([Ag47](https://github.com/Ag47))
+
+## [v2.2.0](https://github.com/apertureless/vue-chartjs/tree/v2.2.0) (2016-10-24)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.1.1...v2.2.0)
+
+**Closed issues:**
+
+- question:syntax with vue-loader [\#12](https://github.com/apertureless/vue-chartjs/issues/12)
+- Rerender when data has changed [\#10](https://github.com/apertureless/vue-chartjs/issues/10)
+
+**Merged pull requests:**
+
+- add horizontal bar parameter [\#14](https://github.com/apertureless/vue-chartjs/pull/14) ([wahaha2012](https://github.com/wahaha2012))
+- WIP Feature/reactive chart data \#11 [\#11](https://github.com/apertureless/vue-chartjs/pull/11) ([apertureless](https://github.com/apertureless))
+
+## [v2.1.1](https://github.com/apertureless/vue-chartjs/tree/v2.1.1) (2016-10-02)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v.2.1.0...v2.1.1)
 
 ## [v.2.1.0](https://github.com/apertureless/vue-chartjs/tree/v.2.1.0) (2016-09-23)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v1.1.3...v.2.1.0)
 
-
 ## [v1.1.3](https://github.com/apertureless/vue-chartjs/tree/v1.1.3) (2016-09-08)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.2...v1.1.3)
 

README.md

@@ -2,15 +2,17 @@
 
 [![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs) ![npm dependencies](https://david-dm.org/apertureless/vue-chartjs.svg) [![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs) [![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs)
 
-> VueJS wrapper for ChartJs
+Is a vue.js wrapper for chart.js. You can easily create your chart components. [See in action](https://apertureless.github.io/vue-chartjs/)
 
 ### Compatibility
 
 - v1 later
--- Vue.js 1.x
+  - Vue.js 1.x
 - v2 later
--- Vue.js 2.x
+  - Vue.js 2.x
 
+After the final release of vue.js 2, you also get the v2 per default if you install vue-chartjs over npm.
+No need for the @next tag anymore. If you want the v1 you need to define the version.
 If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
 
 ## Install
@@ -34,7 +36,7 @@ Just create your own component.
 // CommitChart.js
 import { Bar } from 'vue-chartjs'
 
-export default BarChart.extend({
+export default Bar.extend({
   mounted () {
     // Overwriting base render method with actual data.
     this.renderChart({
@@ -65,8 +67,8 @@ You can overwrite the default chart options. Just pass the options object as a s
 // MonthlyIncome.js
 import { Line } from 'vue-chartjs'
 
-export default LineChart.extend({
-  props: [data, options],
+export default Line.extend({
+  props: ["data", "options"],
   mounted () {
     this.renderChart(this.data, this.options)
   }
@@ -90,6 +92,76 @@ export default {
 </script>
 ```
 
+## Reactivity
+
+Chart.js does not update or re-render the chart if new data is passed.
+However you can simply implement this by your own or use one of the two mixins which are included.
+
+- `reactiveProp`
+- `reactiveData`
+
+Both are included in the `mixins` module.
+
+The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
+
+```javascript
+// MonthlyIncome.js
+import { Line, mixins } from 'vue-chartjs'
+
+export default Line.extend({
+  mixins: [mixins.reactiveProp],
+  props: ["chartData", "options"],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+
+```
+
+### Mixins module
+The `mixins` module is included in the `VueCharts` module and as a seperate module.
+Some ways to import them:
+
+```javascript
+// Load complete module with all charts
+import VueCharts from 'vue-chartjs'
+
+export default VueCharts.Line.extend({
+  mixins: [VueCharts.mixins.reactiveProp],
+  props: ["chartData", "options"],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+```javascript
+// Load speperate modules
+import { Line, mixins } from 'vue-chartjs'
+
+export default Line.extend({
+  mixins: [mixins.reactiveProp],
+  props: ["chartData", "options"],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+```javascript
+// Load speperate modules with destructure assign
+import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default Line.extend({
+  mixins: [reactiveProp],
+  props: ["chartData", "options"],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
 ## Available Charts
 
 ### Bar Chart

build/webpack.base.conf.js

@@ -16,8 +16,9 @@ module.exports = {
     extensions: ['', '.js', '.vue'],
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
-      'vue': 'vue/dist/vue.js',
+      'vue': 'vue/dist/vue.common.js',
       'src': path.resolve(__dirname, '../src'),
+      'mixins': path.resolve(__dirname, '../src/mixins'),
       'BaseCharts': path.resolve(__dirname, '../src/BaseCharts')
     }
   },

build/webpack.prod.conf.js

@@ -1,6 +1,9 @@
 const webpack = require('webpack')
 const base = require('./webpack.base.conf')
 const config = require('../config')
+var env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : config.build.env
 
 base.entry = {
   lib: './src/index.js'
@@ -19,9 +22,7 @@ var webpackConfig = Object.assign({}, base)
 webpackConfig.devtool = '#source-map'
 webpackConfig.plugins = (webpackConfig.plugins || []).concat([
   new webpack.DefinePlugin({
-    'process.env': {
-      NODE_ENV: '"production"'
-    }
+    'process.env.NODE_ENV': env
   }),
   new webpack.optimize.UglifyJsPlugin({
     compress: { warnings: false }

codecov.yml

@@ -0,0 +1,34 @@
+codecov:
+  branch: master
+
+coverage:
+  precision: 2
+  round: down
+  range: "70...100"
+
+  status:
+    project:
+      default:
+        target: auto
+        threshold: null
+        branches: null
+
+    patch:
+      default:
+        target: auto
+        branches: null
+
+    changes:
+      default:
+        branches: null
+
+  ignore:
+    - "tests/*"
+    - "src/examples/*"
+    - "src/mixins/*"
+
+
+comment:
+  layout: "header, diff, changes, sunburst, uncovered, tree"
+  branches: null
+  behavior: default

docs/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>📊 Vue-ChartJs</title>
+  </head>
+  <body>
+    <div id="app">
+      <app></app>
+    </div>
+    <script src="dist/vue-chartjs.js"></script>
+  </body>
+</html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "description": "Vue wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@nextindex.de>",
   "repository": {
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "babel-runtime": "^6.11.6",
-    "chart.js": "^2.2.1",
-    "vue": "^2.0.0-rc.1"
+    "chart.js": "^2.4.0",
+    "vue": "^2.1.6"
   },
   "devDependencies": {
     "babel-core": "^6.10.4",
@@ -38,51 +38,53 @@
     "chai": "^3.5.0",
     "chromedriver": "^2.21.2",
     "connect-history-api-fallback": "^1.1.0",
-    "cross-spawn": "^2.1.5",
-    "css-loader": "^0.23.0",
-    "eslint": "^2.10.2",
-    "eslint-config-standard": "^5.1.0",
+    "cross-spawn": "^5.0.1",
+    "css-loader": "^0.26.1",
+    "eslint": "^3.7.1",
+    "eslint-config-standard": "^6.2.0",
     "eslint-friendly-formatter": "^2.0.5",
     "eslint-loader": "^1.3.0",
     "eslint-plugin-html": "^1.3.0",
-    "eslint-plugin-promise": "^1.0.8",
-    "eslint-plugin-standard": "^1.3.2",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^2.0.1",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.8.4",
+    "file-loader": "^0.9.0",
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^2.8.1",
-    "http-proxy-middleware": "^0.12.0",
-    "inject-loader": "^2.0.1",
+    "http-proxy-middleware": "^0.17.2",
+    "inject-loader": "^3.0.0-beta2",
     "isparta-loader": "^2.0.0",
+    "jasmine-core": "^2.5.2",
     "json-loader": "^0.5.4",
-    "karma": "^0.13.15",
-    "karma-coverage": "^0.5.5",
-    "karma-mocha": "^0.2.2",
+    "karma": "^1.3.0",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-mocha": "^1.2.0",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-sinon-chai": "^1.2.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.24",
+    "karma-spec-reporter": "0.0.26",
     "karma-webpack": "^1.7.0",
-    "lodash": "^4.15.0",
+    "lodash": "^4.16.3",
     "lolex": "^1.4.0",
-    "mocha": "^2.4.5",
-    "nightwatch": "^0.8.18",
-    "ora": "^0.2.0",
-    "phantomjs-prebuilt": "^2.1.3",
-    "selenium-server": "2.53.0",
-    "shelljs": "^0.6.0",
+    "mocha": "^3.1.0",
+    "nightwatch": "^0.9.8",
+    "ora": "^0.3.0",
+    "phantomjs-prebuilt": "^2.1.13",
+    "selenium-server": "^3.0.1",
+    "shelljs": "^0.7.4",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
     "vue-hot-reload-api": "^2.0.6",
     "vue-html-loader": "^1.2.3",
-    "vue-loader": "^9.3.0",
+    "vue-loader": "^10.0.2",
     "vue-style-loader": "^1.0.0",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0",
-    "webpack-merge": "^0.8.3"
+    "webpack-merge": "^1.1.1"
   }
 }

src/BaseCharts/Bar.js

@@ -49,12 +49,12 @@ export default Vue.extend({
   },
 
   methods: {
-    renderChart (data, options) {
+    renderChart (data, options, type) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
       this._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
-          type: 'bar',
+          type: type || 'bar',
           data: data,
           options: chartOptions
         }

src/examples/App.vue

@@ -1,11 +1,20 @@
 <template>
   <div class="container">
+    <h1 style="text-align:center;margin:40px 0;">Barchart</h1>
     <bar-example></bar-example>
+    <h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data</h1>
+    <reactive-example></reactive-example>
+    <h1 style="text-align:center;margin:40px 0;">Linechart</h1>
     <line-example></line-example>
+    <h1 style="text-align:center;margin:40px 0;">Doughnutchart</h1>
     <doughnut-example></doughnut-example>
+    <h1 style="text-align:center;margin:40px 0;">Piechart</h1>
     <pie-example></pie-example>
+    <h1 style="text-align:center;margin:40px 0;">Radarchart</h1>
     <radar-example></radar-example>
+    <h1 style="text-align:center;margin:40px 0;">Polararea</h1>
     <polar-area-example></polar-area-example>
+    <h1 style="text-align:center;margin:40px 0;">Bubblechart</h1>
     <bubble-example></bubble-example>
   </div>
 </template>
@@ -18,9 +27,21 @@
   import RadarExample from './RadarExample'
   import PolarAreaExample from './PolarAreaExample'
   import BubbleExample from './BubbleExample'
+  import ReactiveExample from './ReactiveExample'
+  import ReactivePropExample from './ReactivePropExample'
 
   export default {
-    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample, BubbleExample }
+    components: {
+      BarExample,
+      LineExample,
+      DoughnutExample,
+      PieExample,
+      RadarExample,
+      PolarAreaExample,
+      BubbleExample,
+      ReactiveExample,
+      ReactivePropExample
+    }
   }
 </script>
 

src/examples/BubbleExample.js

@@ -47,6 +47,6 @@ export default BubbleChart.extend({
           ]
         }
       ]
-    })
+    }, {responsive: true, maintainAspectRatio: false})
   }
 })

src/examples/DoughnutExample.js

@@ -15,6 +15,6 @@ export default DoughnutChart.extend({
           data: [40, 20, 80, 10]
         }
       ]
-    })
+    }, {responsive: true, maintainAspectRatio: false})
   }
 })

src/examples/LineExample.js

@@ -11,6 +11,6 @@ export default LineChart.extend({
           data: [40, 39, 10, 40, 39, 80, 40]
         }
       ]
-    })
+    }, {responsive: true, maintainAspectRatio: false})
   }
 })

src/examples/PieExample.js

@@ -15,6 +15,6 @@ export default PieChart.extend({
           data: [40, 20, 80, 10]
         }
       ]
-    })
+    }, {responsive: true, maintainAspectRatio: false})
   }
 })

src/examples/PolarAreaExample.js

@@ -24,6 +24,6 @@ export default PolarAreaChart.extend({
           data: [28, 48, 40, 19, 96, 27, 100]
         }
       ]
-    })
+    }, {responsive: true, maintainAspectRatio: false})
   }
 })

src/examples/RadarExample.js

@@ -26,6 +26,6 @@ export default RadarChart.extend({
           data: [28, 48, 40, 19, 96, 27, 100]
         }
       ]
-    })
+    }, {responsive: true, maintainAspectRatio: false})
   }
 })

src/examples/ReactiveExample.js

@@ -0,0 +1,41 @@
+import BarChart from '../BaseCharts/Bar'
+import reactiveData from '../mixins/reactiveData'
+
+export default BarChart.extend({
+  mixins: [reactiveData],
+  data () {
+    return {
+      chartData: ''
+    }
+  },
+  created () {
+    this.fillData()
+  },
+
+  mounted () {
+    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
+
+    setInterval(() => {
+      this.fillData()
+    }, 5000)
+  },
+
+  methods: {
+    fillData () {
+      this.chartData = {
+        labels: ['January' + this.getRandomInt(), 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
+          }
+        ]
+      }
+    },
+
+    getRandomInt () {
+      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+    }
+  }
+})

src/examples/ReactivePropExample.js

@@ -0,0 +1,10 @@
+import BarChart from '../BaseCharts/Bar'
+import reactiveData from '../mixins/reactiveProp'
+
+export default BarChart.extend({
+  mixins: [reactiveData],
+
+  mounted () {
+    this.renderChart(this.chartData)
+  }
+})

src/index.js

@@ -5,6 +5,7 @@ import Pie from './BaseCharts/Pie'
 import PolarArea from './BaseCharts/PolarArea'
 import Radar from './BaseCharts/Radar'
 import Bubble from './BaseCharts/Bubble'
+import mixins from './mixins/index.js'
 
 const VueCharts = {
   Bar,
@@ -13,7 +14,20 @@ const VueCharts = {
   Pie,
   PolarArea,
   Radar,
-  Bubble
+  Bubble,
+  mixins
 }
 
-module.exports = VueCharts
+export default VueCharts
+
+export {
+  VueCharts,
+  Bar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  mixins
+}

src/mixins/index.js

@@ -0,0 +1,7 @@
+import reactiveData from './reactiveData.js'
+import reactiveProp from './reactiveProp.js'
+
+export default {
+  reactiveData,
+  reactiveProp
+}

src/mixins/reactiveData.js

@@ -0,0 +1,44 @@
+module.exports = {
+  data () {
+    return {
+      chartData: null
+    }
+  },
+  watch: {
+    'chartData': {
+      handler (newData, oldData) {
+        if (oldData) {
+          let chart = this._chart
+
+          let newDataLabels = newData.datasets.map((dataset) => {
+            return dataset.label
+          })
+
+          let oldDataLabels = oldData.datasets.map((dataset) => {
+            return dataset.label
+          })
+
+          if (JSON.stringify(newDataLabels) === JSON.stringify(oldDataLabels)) {
+            this.forceUpdate(newData, chart)
+          } else {
+            this.forceRender()
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    forceUpdate (newData, chart) {
+      newData.datasets.forEach((dataset, i) => {
+        chart.data.datasets[i].data = dataset.data
+      })
+
+      chart.data.labels = newData.labels
+      chart.update()
+    },
+
+    forceRender () {
+      this.renderChart(this.chartData, this.options)
+    }
+  }
+}

src/mixins/reactiveProp.js

@@ -0,0 +1,35 @@
+module.exports = {
+  props: {
+    chartData: {
+      required: true
+    }
+  },
+
+  watch: {
+    'chartData': {
+      handler (newData, oldData) {
+        if (oldData) {
+          let chart = this._chart
+
+          let newDataLabels = newData.datasets.map((dataset) => {
+            return dataset.label
+          })
+
+          let oldDataLabels = oldData.datasets.map((dataset) => {
+            return dataset.label
+          })
+
+          if (JSON.stringify(newDataLabels) === JSON.stringify(oldDataLabels)) {
+            newData.datasets.forEach((dataset, i) => {
+              chart.data.datasets[i].data = dataset.data
+            })
+            chart.data.labels = newData.labels
+            chart.update()
+          } else {
+            this.renderChart(this.chartData, this.options)
+          }
+        }
+      }
+    }
+  }
+}

test/unit/.eslintrc

@@ -4,6 +4,7 @@
   },
   "globals": {
     "expect": true,
+    "jasmine": true,
     "sinon": true
   }
 }

test/unit/karma.conf.js

@@ -54,7 +54,7 @@ module.exports = function (config) {
     //    http://karma-runner.github.io/0.13/config/browsers.html
     // 2. add it to the `browsers` array below.
     browsers: ['PhantomJS'],
-    frameworks: ['mocha', 'sinon-chai'],
+    frameworks: ['mocha', 'sinon-chai', 'jasmine'],
     reporters: ['spec', 'coverage'],
     files: ['./index.js'],
     preprocessors: {