Feature/v3

[apertureless]

💎 vue-chart.js v3

Finally version 3 of vue-chartjs is ready to 🚣 . We have some breaking changes, but they are easy to change!

✅ Removed Vue.extend() in the base components #201
✅ Changed the private data from private instance to private data instance #182
✅ Updated peerDependencies vue & chart.js

🔥 Breaking Changes!

🐣 Component creation

In v2 you were creating your own chart components by extending the base component like this:

import { Line } from 'vue-chartjs'

export default Line.extend({
  ....
})

This was possible because the base components had a export default Vue.extend({}) in it. Which creates a subclass of the vue ctor. vue docs
Because of this Vue needed to be included as a dependency and bundled into the package for the browser build.

This was causing a lot of confusing 😕 and also some weird errors #216, #151 and some more problems like increased bundle size and duplicated dependencies for browser build.

🔐 Chart instance

Like mentioned in #182 vue could possibly overwrite the private _chart variable as it is saved as an unprotected instance variable. Now it makes usage of vue's private data notation.

⬆ 📖 Upgrade Guide

🐣 Component creation

Create your components now with either extends or mixins :

import { Line } from 'vue-chartjs'

export default {
   extends: Line,
   data () {...},
   mounted () {
      ....
   }
}

or

import { Line } from 'vue-chartjs'

export default {
   mixins: [Line],
   data () {...},
   mounted () {
      ....
   }
}

🔐 Chart instance

Replace this._chart with this.$data._chart

[codecov]

Codecov Report

Merging #225 into develop will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff           @@
##           develop   #225   +/-   ##
======================================
  Coverage      100%   100%           
======================================
  Files           11     11           
  Lines          105     96    -9     
======================================
- Hits           105     96    -9

Impacted Files	Coverage Δ
src/BaseCharts/Radar.js	100% <100%> (ø)	⬆️
src/BaseCharts/Pie.js	100% <100%> (ø)	⬆️
src/BaseCharts/HorizontalBar.js	100% <100%> (ø)	⬆️
src/BaseCharts/Bubble.js	100% <100%> (ø)	⬆️
src/BaseCharts/Scatter.js	100% <100%> (ø)	⬆️
src/BaseCharts/PolarArea.js	100% <100%> (ø)	⬆️
src/BaseCharts/Line.js	100% <100%> (ø)	⬆️
src/BaseCharts/Bar.js	100% <100%> (ø)	⬆️
src/BaseCharts/Doughnut.js	100% <100%> (ø)	⬆️