💎 Release new version 2.3.6

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

CHANGELOG.md

@@ -1,5 +1,104 @@
 # Change Log
 
+## [Unreleased](https://github.com/apertureless/vue-chartjs/tree/HEAD)
+
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.5...HEAD)
+
+**Closed issues:**
+
+- barchart 如何横向显示条形图 [\#37](https://github.com/apertureless/vue-chartjs/issues/37)
+
+## [v2.3.5](https://github.com/apertureless/vue-chartjs/tree/v2.3.5) (2017-02-14)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.4...v2.3.5)
+
+**Closed issues:**
+
+- Destory chart instance in reactiveMixins on render [\#35](https://github.com/apertureless/vue-chartjs/issues/35)
+- Rerendering doughtnut chart not working [\#33](https://github.com/apertureless/vue-chartjs/issues/33)
+
+**Merged pull requests:**
+
+- 🔨 Change reactiveMixins to fix \#35 [\#36](https://github.com/apertureless/vue-chartjs/pull/36) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.4](https://github.com/apertureless/vue-chartjs/tree/v2.3.4) (2017-02-11)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.3...v2.3.4)
+
+**Closed issues:**
+
+- Update Chart.js docs to include link to vue-chartjs [\#32](https://github.com/apertureless/vue-chartjs/issues/32)
+- Compatibility with Vue 2.1.10 [\#30](https://github.com/apertureless/vue-chartjs/issues/30)
+
+## [v2.3.3](https://github.com/apertureless/vue-chartjs/tree/v2.3.3) (2017-01-19)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.2...v2.3.3)
+
+**Closed issues:**
+
+- How to create mixed chart types [\#29](https://github.com/apertureless/vue-chartjs/issues/29)
+- hello a q about reactivity [\#28](https://github.com/apertureless/vue-chartjs/issues/28)
+- chart do not render after build  [\#26](https://github.com/apertureless/vue-chartjs/issues/26)
+
+**Merged pull requests:**
+
+- 🐛 Fix \#30 type error [\#31](https://github.com/apertureless/vue-chartjs/pull/31) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.2](https://github.com/apertureless/vue-chartjs/tree/v2.3.2) (2016-12-23)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.1...v2.3.2)
+
+**Closed issues:**
+
+- Content Security Policy [\#22](https://github.com/apertureless/vue-chartjs/issues/22)
+
+**Merged pull requests:**
+
+- ✨ Add minimal release webpack config [\#27](https://github.com/apertureless/vue-chartjs/pull/27) ([apertureless](https://github.com/apertureless))
+- 📝 Update README [\#25](https://github.com/apertureless/vue-chartjs/pull/25) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.1](https://github.com/apertureless/vue-chartjs/tree/v2.3.1) (2016-12-20)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.0...v2.3.1)
+
+**Closed issues:**
+
+- Error in rendering [\#21](https://github.com/apertureless/vue-chartjs/issues/21)
+- Issues after using gulp-- production [\#19](https://github.com/apertureless/vue-chartjs/issues/19)
+
+**Merged pull requests:**
+
+- ✅ Add tests for chart instance destroying [\#24](https://github.com/apertureless/vue-chartjs/pull/24) ([apertureless](https://github.com/apertureless))
+- Feature/runtimebuild \#22 [\#23](https://github.com/apertureless/vue-chartjs/pull/23) ([apertureless](https://github.com/apertureless))
+
+## [v2.3.0](https://github.com/apertureless/vue-chartjs/tree/v2.3.0) (2016-12-17)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.2.1...v2.3.0)
+
+**Closed issues:**
+
+- Uncaught TypeError: \_c is not a function  [\#20](https://github.com/apertureless/vue-chartjs/issues/20)
+
+## [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)
+
+**Closed issues:**
+
+- Chart height definition inside the component [\#18](https://github.com/apertureless/vue-chartjs/issues/18)
+- Uncaught TypeError: Cannot read property 'draw' of null [\#15](https://github.com/apertureless/vue-chartjs/issues/15)
+
+**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:**
+
+- The page is blank？ [\#13](https://github.com/apertureless/vue-chartjs/issues/13)
+- 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)
 
@@ -9,13 +108,10 @@
 ## [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)
 
-**Implemented enhancements:**
-
-- Add test [\#1](https://github.com/apertureless/vue-chartjs/issues/1)
-
-**Fixed bugs:**
+**Closed issues:**
 
 - Passing chart size \(width / height\) as prop doesnt resize the chart [\#8](https://github.com/apertureless/vue-chartjs/issues/8)
+- Add test [\#1](https://github.com/apertureless/vue-chartjs/issues/1)
 
 **Merged pull requests:**
 
@@ -24,7 +120,7 @@
 ## [1.1.2](https://github.com/apertureless/vue-chartjs/tree/1.1.2) (2016-09-07)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.1...1.1.2)
 
-**Implemented enhancements:**
+**Closed issues:**
 
 - Change name of the render method to ensure compatiblity with Vue 2.0 [\#4](https://github.com/apertureless/vue-chartjs/issues/4)
 
@@ -34,7 +130,7 @@
 ## [1.1.0](https://github.com/apertureless/vue-chartjs/tree/1.1.0) (2016-08-21)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.3...1.1.0)
 
-**Implemented enhancements:**
+**Closed issues:**
 
 - Use Vue.util.mergeOptions to merge default options with user's options [\#5](https://github.com/apertureless/vue-chartjs/issues/5)
 
@@ -45,9 +141,12 @@
 ## [1.0.3](https://github.com/apertureless/vue-chartjs/tree/1.0.3) (2016-08-20)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.2...1.0.3)
 
-**Implemented enhancements:**
+**Closed issues:**
 
 - Publish on NPM [\#2](https://github.com/apertureless/vue-chartjs/issues/2)
+
+**Merged pull requests:**
+
 - Properly destroy chartjs objects [\#3](https://github.com/apertureless/vue-chartjs/pull/3) ([LinusBorg](https://github.com/LinusBorg))
 
 ## [1.0.2](https://github.com/apertureless/vue-chartjs/tree/1.0.2) (2016-07-27)

README.md

@@ -1,18 +1,31 @@
-# Vue-ChartJs
+<div align="center">
+  <img width="256" heigth="256" src="/assets/vue-chartjs.png" alt="vue-chartjs logo">
+</div>
 
-[![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)
+[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)
+[![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)
+[![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)
+[![npm](https://img.shields.io/npm/dm/localeval.svg)](https://www.npmjs.com/package/vue-chartjs)
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
 
-> VueJS wrapper for ChartJs
+# vue-chartjs
+
+**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
+
+## Demo
+
+[Demo](https://apertureless.github.io/vue-chartjs/)
 
 ### Compatibility
 
-- v1 later
+- v1 later `@legacy`
   - Vue.js 1.x
 - v2 later
   - 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.
+No need for the @next tag anymore. If you want the v1 you need to define the version or use the legacy tag.
 If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
 
 ## Install
@@ -68,7 +81,7 @@ You can overwrite the default chart options. Just pass the options object as a s
 import { Line } from 'vue-chartjs'
 
 export default Line.extend({
-  props: [data, options],
+  props: ["data", "options"],
   mounted () {
     this.renderChart(this.data, this.options)
   }
@@ -100,15 +113,17 @@ However you can simply implement this by your own or use one of the two mixins w
 - `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, reactiveProp } from 'vue-chartjs'
+import { Line, mixins } from 'vue-chartjs'
 
 export default Line.extend({
-  mixins: [reactiveProp]
-  props: [chartData, options],
+  mixins: [mixins.reactiveProp],
+  props: ["chartData", "options"],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
@@ -116,6 +131,50 @@ export default Line.extend({
 
 ```
 
+### 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

assets/vue-chartjs.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><defs><linearGradient id="a" x1="100%" x2="0%" y1="4.18%" y2="65.116%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient><linearGradient id="b" x1="108.208%" x2="5.433%" y1="12.265%" y2="86.92%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient></defs><g fill="none"><path fill="#fff" stroke="#EBEBEB" stroke-width="8.456" d="M128.744 13l99.745 57.46v114.921l-99.745 57.46-99.744-57.46v-114.921z"/><path fill="url(#a)" d="M129 17.941l90.395 51.432-4.057 117.675-86.903 4.653z"/><path fill="url(#b)" d="M129 17.814l-90.961 51.559-3.191 113.538 93.587 8.79z"/><path fill="#41B883" d="M32.955 72.755l95.789 54.681v110.49l-95.789-54.681z"/><path fill="#35495E" d="M224.48 71.627l-95.789 55.809v110.49l95.789-54.681z"/><path fill="#596F85" d="M224.48 71.627l-95.789 55.809v-7.892l88.445-51.299z"/><path fill="#61D09F" d="M32.955 72.755l95.789 54.681v-7.892l-89.575-50.171z"/></g></svg>

build/webpack.base.conf.js

@@ -16,8 +16,8 @@ module.exports = {
     extensions: ['', '.js', '.vue'],
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {
-      'vue': 'vue/dist/vue.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 }

build/webpack.release.js

@@ -0,0 +1,78 @@
+var vue = require('vue-loader')
+var path = require('path')
+var webpack = require("webpack")
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+var projectRoot = path.resolve(__dirname, '../')
+var cssLoader = ExtractTextPlugin.extract('style-loader', 'css-loader')
+
+module.exports = {
+  entry: {
+    'vue-chartjs': './src/index.js'
+  },
+  output: {
+    filename: './dist/[name].js',
+    library: 'VueChartJs',
+    libraryTarget: 'umd'
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.vue$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.js$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      }
+    ],
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel'
+      },
+      {
+        test: /\.css$/,
+        loader: cssLoader
+      },
+      {
+        test: /\.s[a|c]ss$/,
+        loader: ExtractTextPlugin.extract('style-loader','css-loader!sass-loader')
+      }
+    ]
+  },
+  eslint: {
+    formatter: require('eslint-friendly-formatter')
+  },
+  babel: {
+    presets: ['es2015'],
+    plugins: ['transform-runtime']
+  }
+}
+
+if (process.env.NODE_ENV === 'production') {
+
+  delete module.exports.devtool
+  module.exports.plugins = [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.optimize.OccurenceOrderPlugin()
+    // new ExtractTextPlugin('build.css')
+  ]
+}

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,7 +1,7 @@
 {
   "name": "vue-chartjs",
-  "version": "2.2.0",
-  "description": "Vue wrapper for chart.js",
+  "version": "2.3.6",
+  "description": "vue.js wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@nextindex.de>",
   "repository": {
     "type": "git",
@@ -22,12 +22,12 @@
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
-    "prepublish": "node build/build.js"
+    "release": "webpack --progress --hide-modules --config  ./build/webpack.release.js"
   },
   "dependencies": {
     "babel-runtime": "^6.11.6",
-    "chart.js": "^2.2.1",
-    "vue": "^2.0.1"
+    "chart.js": "^2.5.0",
+    "vue": "^2.1.10"
   },
   "devDependencies": {
     "babel-core": "^6.10.4",
@@ -38,14 +38,14 @@
     "chai": "^3.5.0",
     "chromedriver": "^2.21.2",
     "connect-history-api-fallback": "^1.1.0",
-    "cross-spawn": "^4.0.2",
-    "css-loader": "^0.25.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": "^2.0.1",
+    "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^2.0.1",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
@@ -54,7 +54,7 @@
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^2.8.1",
     "http-proxy-middleware": "^0.17.2",
-    "inject-loader": "^2.0.1",
+    "inject-loader": "^3.0.0-beta2",
     "isparta-loader": "^2.0.0",
     "jasmine-core": "^2.5.2",
     "json-loader": "^0.5.4",
@@ -67,24 +67,25 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.26",
     "karma-webpack": "^1.7.0",
-    "lodash": "^4.16.3",
+    "lodash": "^4.17.4",
     "lolex": "^1.4.0",
     "mocha": "^3.1.0",
     "nightwatch": "^0.9.8",
     "ora": "^0.3.0",
     "phantomjs-prebuilt": "^2.1.13",
-    "selenium-server": "^2.53.1",
+    "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",
+    "vue-template-compiler": "^2.1.10",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0",
-    "webpack-merge": "^0.14.1"
+    "webpack-merge": "^1.1.1"
   }
 }

src/BaseCharts/Bar.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {
@@ -51,7 +63,6 @@ export default Vue.extend({
   methods: {
     renderChart (data, options, type) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
-
       this._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: type || 'bar',

src/BaseCharts/Bubble.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {

src/BaseCharts/Doughnut.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {

src/BaseCharts/Line.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {

src/BaseCharts/Pie.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {

src/BaseCharts/PolarArea.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {

src/BaseCharts/Radar.js

@@ -3,11 +3,23 @@ import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
 export default Vue.extend({
-  template: `
-    <div>
-      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
-    </div>
-  `,
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
 
   props: {
     chartId: {

src/examples/App.vue

@@ -1,12 +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>

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

@@ -13,7 +13,7 @@ export default BarChart.extend({
   },
 
   mounted () {
-    this.renderChart(this.chartData)
+    this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
 
     setInterval(() => {
       this.fillData()

src/examples/ReactivePropExample.js

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

src/index.js

@@ -5,8 +5,7 @@ import Pie from './BaseCharts/Pie'
 import PolarArea from './BaseCharts/PolarArea'
 import Radar from './BaseCharts/Radar'
 import Bubble from './BaseCharts/Bubble'
-import reactiveProp from './mixins/reactiveProp'
-import reactiveData from './mixins/reactiveData'
+import mixins from './mixins/index.js'
 
 const VueCharts = {
   Bar,
@@ -16,8 +15,19 @@ const VueCharts = {
   PolarArea,
   Radar,
   Bubble,
-  reactiveProp,
-  reactiveData
+  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

@@ -10,35 +10,33 @@ module.exports = {
         if (oldData) {
           let chart = this._chart
 
-          let newDataLabels = newData.datasets.map((dataset) => {
+          // Get new and old DataSet Labels
+          let newDatasetLabels = newData.datasets.map((dataset) => {
             return dataset.label
           })
 
-          let oldDataLabels = oldData.datasets.map((dataset) => {
+          let oldDatasetLabels = oldData.datasets.map((dataset) => {
             return dataset.label
           })
 
-          if (JSON.stringify(newDataLabels) === JSON.stringify(oldDataLabels)) {
-            this.forceUpdate(newData, chart)
+          // Stringify 'em for easier compare
+          const oldLabels = JSON.stringify(oldDatasetLabels)
+          const newLabels = JSON.stringify(newDatasetLabels)
+
+          // Check if Labels are equal and if dataset length is equal
+          if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
+            newData.datasets.forEach((dataset, i) => {
+              chart.data.datasets[i] = dataset
+            })
+
+            chart.data.labels = newData.labels
+            chart.update()
           } else {
-            this.forceRender()
+            chart.destroy()
+            this.renderChart(this.chartData, this.options)
           }
         }
       }
     }
-  },
-  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

@@ -11,21 +11,29 @@ module.exports = {
         if (oldData) {
           let chart = this._chart
 
-          let newDataLabels = newData.datasets.map((dataset) => {
+          // Get new and old DataSet Labels
+          let newDatasetLabels = newData.datasets.map((dataset) => {
             return dataset.label
           })
 
-          let oldDataLabels = oldData.datasets.map((dataset) => {
+          let oldDatasetLabels = oldData.datasets.map((dataset) => {
             return dataset.label
           })
 
-          if (JSON.stringify(newDataLabels) === JSON.stringify(oldDataLabels)) {
+          // Stringify 'em for easier compare
+          const oldLabels = JSON.stringify(oldDatasetLabels)
+          const newLabels = JSON.stringify(newDatasetLabels)
+
+          // Check if Labels are equal and if dataset length is equal
+          if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
             newData.datasets.forEach((dataset, i) => {
-              chart.data.datasets[i].data = dataset.data
+              chart.data.datasets[i] = dataset
             })
+
             chart.data.labels = newData.labels
             chart.update()
           } else {
+            chart.destroy()
             this.renderChart(this.chartData, this.options)
           }
         }

test/unit/specs/Bar.spec.js

@@ -10,7 +10,11 @@ describe('BarChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<bar-chart></bar-chart>',
+      render: function (createElement) {
+        return createElement(
+          BarChart
+        )
+      },
       components: { BarChart }
     }).$mount(el)
 
@@ -22,10 +26,39 @@ describe('BarChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<bar-chart chartId="barchartprop"></bar-chart>',
+      render: function (createElement) {
+        return createElement(
+          BarChart, {
+            props: {
+              chartId: 'barchartprop'
+            }
+          }
+        )
+      },
       components: { BarChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#barchartprop')).not.to.be.an('undefined')
   })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BarChart
+        )
+      },
+      components: { BarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })

test/unit/specs/Bubble.spec.js

@@ -10,7 +10,11 @@ describe('BubbleChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<bubble-chart></bubble-chart>',
+      render: function (createElement) {
+        return createElement(
+          BubbleChart
+        )
+      },
       components: { BubbleChart }
     }).$mount(el)
 
@@ -22,10 +26,39 @@ describe('BubbleChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<bubble-chart chartId="bubblechartprop"></bubble-chart>',
+      render: function (createElement) {
+        return createElement(
+          BubbleChart, {
+            props: {
+              chartId: 'bubblechartprop'
+            }
+          }
+        )
+      },
       components: { BubbleChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#bubblechartprop')).not.to.be.an('undefined')
   })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BubbleChart
+        )
+      },
+      components: { BubbleChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })

test/unit/specs/Doughnut.spec.js

@@ -10,7 +10,11 @@ describe('DoughnutChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<doughnut-chart></doughnut-chart>',
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart
+        )
+      },
       components: { DoughnutChart }
     }).$mount(el)
 
@@ -22,10 +26,39 @@ describe('DoughnutChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<doughnut-chart chartId="doughnutchartprop"></doughnut-chart>',
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart, {
+            props: {
+              chartId: 'doughnutchartprop'
+            }
+          }
+        )
+      },
       components: { DoughnutChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#doughnutchartprop')).not.to.be.an('undefined')
   })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          DoughnutChart
+        )
+      },
+      components: { DoughnutChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })

test/unit/specs/Line.spec.js

@@ -10,7 +10,11 @@ describe('LineChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<line-chart></line-chart>',
+      render: function (createElement) {
+        return createElement(
+          LineChart
+        )
+      },
       components: { LineChart }
     }).$mount(el)
 
@@ -22,10 +26,39 @@ describe('LineChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<line-chart chartId="linechartprop"></line-chart>',
+      render: function (createElement) {
+        return createElement(
+          LineChart, {
+            props: {
+              chartId: 'linechartprop'
+            }
+          }
+        )
+      },
       components: { LineChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#linechartprop')).not.to.be.an('undefined')
   })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          LineChart
+        )
+      },
+      components: { LineChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })

test/unit/specs/Pie.spec.js

@@ -10,7 +10,11 @@ describe('PieChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<pie-chart></pie-chart>',
+      render: function (createElement) {
+        return createElement(
+          PieChart
+        )
+      },
       components: { PieChart }
     }).$mount(el)
 
@@ -22,10 +26,38 @@ describe('PieChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<pie-chart chartId="piechartprop"></pie-chart>',
+      render: function (createElement) {
+        return createElement(
+          PieChart, {
+            props: {
+              chartId: 'piechartprop'
+            }
+          }
+        )
+      },
       components: { PieChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#piechartprop')).not.to.be.an('undefined')
   })
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PieChart
+        )
+      },
+      components: { PieChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })

test/unit/specs/PolarArea.spec.js

@@ -10,7 +10,11 @@ describe('PolarChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<polar-chart></polar-chart>',
+      render: function (createElement) {
+        return createElement(
+          PolarChart
+        )
+      },
       components: { PolarChart }
     }).$mount(el)
 
@@ -22,10 +26,39 @@ describe('PolarChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<polar-chart chartId="polarchartprop"></polar-chart>',
+      render: function (createElement) {
+        return createElement(
+          PolarChart, {
+            props: {
+              chartId: 'polarchartprop'
+            }
+          }
+        )
+      },
       components: { PolarChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#polarchartprop')).not.to.be.an('undefined')
   })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          PolarChart
+        )
+      },
+      components: { PolarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })

test/unit/specs/Radar.spec.js

@@ -10,7 +10,11 @@ describe('RadarChart', () => {
 
   it('should render a canvas', () => {
     const vm = new Vue({
-      template: '<radar-chart></radar-chart>',
+      render: function (createElement) {
+        return createElement(
+          RadarChart
+        )
+      },
       components: { RadarChart }
     }).$mount(el)
 
@@ -22,10 +26,38 @@ describe('RadarChart', () => {
 
   it('should change id based on prop', () => {
     const vm = new Vue({
-      template: '<radar-chart chartId="rodarchartprop"></radar-chart>',
+      render: function (createElement) {
+        return createElement(
+          RadarChart, {
+            props: {
+              chartId: 'rodarchartprop'
+            }
+          }
+        )
+      },
       components: { RadarChart }
     }).$mount(el)
 
     expect(vm.$el.querySelector('#rodarchartprop')).not.to.be.an('undefined')
   })
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          RadarChart
+        )
+      },
+      components: { RadarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
 })