Feature/v3 (#225)

* Remove Vue dependency and change extends

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

* 💎 Release new version 3.0.0-rc0

* ⬆️ Update examples

* 📝 Update README.md

* ⬆️ Update examples

* ⬆️ Update englishd docs

* ⬆️ Update transalted docs with current code examples

* 🔥 Remove dist files from gitignore

* ⬆️ Update dependencies vue and chartjs

* Change private data

Implements #182. The private chart instance is now in the vue.js data model. And can be accessed over `this.$data._chart`
Updated unit tests

* 📝 Update docs with private data

* ✨ Add codeclimate ignore

* ⬆️ Update codeclimate

* ⬆️ Update codeclimate

* ⬆️ Update codeclimate

Add build and config folders to ignore

src/BaseCharts/Bar.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -46,6 +45,7 @@ export default Vue.extend({
   },
   data () {
     return {
+      _chart: null,
       defaultOptions: {
         scales: {
           yAxes: [{
@@ -75,7 +75,7 @@ export default Vue.extend({
     },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'bar',
           data: data,
@@ -86,8 +86,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/Bubble.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
         scales: {
           yAxes: [{
@@ -78,7 +78,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'bubble',
           data: data,
@@ -89,8 +89,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/Doughnut.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
       },
       plugins: []
@@ -61,7 +61,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'doughnut',
           data: data,
@@ -72,8 +72,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/HorizontalBar.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
         scales: {
           yAxes: [{
@@ -77,7 +77,7 @@ export default Vue.extend({
     },
     renderChart (data, options, type) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'horizontalBar',
           data: data,
@@ -88,8 +88,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/Line.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
         scales: {
           yAxes: [{
@@ -76,7 +76,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'line',
           data: data,
@@ -87,8 +87,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/Pie.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
       },
       plugins: []
@@ -61,7 +61,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'pie',
           data: data,
@@ -72,8 +72,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/PolarArea.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
       },
       plugins: []
@@ -61,7 +61,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'polarArea',
           data: data,
@@ -72,8 +72,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/Radar.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
       },
       plugins: []
@@ -61,7 +61,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'radar',
           data: data,
@@ -72,8 +72,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/BaseCharts/Scatter.js

@@ -1,8 +1,7 @@
-import Vue from 'vue'
 import Chart from 'chart.js'
 import { mergeOptions } from '../helpers/options'
 
-export default Vue.extend({
+export default {
   render: function (createElement) {
     return createElement(
       'div', {
@@ -48,6 +47,7 @@ export default Vue.extend({
 
   data () {
     return {
+      _chart: null,
       defaultOptions: {
         scales: {
           xAxes: [{
@@ -67,7 +67,7 @@ export default Vue.extend({
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
 
-      this._chart = new Chart(
+      this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'scatter',
           data: data,
@@ -78,8 +78,8 @@ export default Vue.extend({
     }
   },
   beforeDestroy () {
-    if (this._chart) {
-      this._chart.destroy()
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
     }
   }
-})
+}

src/examples/BarExample.js

@@ -1,6 +1,7 @@
-import BarChart from '../BaseCharts/Bar'
+import Bar from '../BaseCharts/Bar'
 
-export default BarChart.extend({
+export default {
+  extends: Bar,
   mounted () {
     this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
@@ -13,4 +14,4 @@ export default BarChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/BubbleExample.js

@@ -1,6 +1,7 @@
-import BubbleChart from '../BaseCharts/Bubble'
+import Bubble from '../BaseCharts/Bubble'
 
-export default BubbleChart.extend({
+export default {
+  extends: Bubble,
   mounted () {
     this.renderChart({
       datasets: [
@@ -49,4 +50,4 @@ export default BubbleChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/DoughnutExample.js

@@ -1,6 +1,7 @@
-import DoughnutChart from '../BaseCharts/Doughnut'
+import Doughnut from '../BaseCharts/Doughnut'
 
-export default DoughnutChart.extend({
+export default {
+  extends: Doughnut,
   mounted () {
     this.renderChart({
       labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
@@ -17,4 +18,4 @@ export default DoughnutChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/HorizontalBarExample.js

@@ -1,6 +1,7 @@
-import HorizontalBarChart from '../BaseCharts/HorizontalBar'
+import HorizontalBar from '../BaseCharts/HorizontalBar'
 
-export default HorizontalBarChart.extend({
+export default {
+  extends: HorizontalBar,
   mounted () {
     this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
@@ -13,4 +14,4 @@ export default HorizontalBarChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/LineExample.js

@@ -1,6 +1,7 @@
-import LineChart from '../BaseCharts/Line'
+import Line from '../BaseCharts/Line'
 
-export default LineChart.extend({
+export default {
+  extends: Line,
   mounted () {
     this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
@@ -13,4 +14,4 @@ export default LineChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/PieExample.js

@@ -1,6 +1,7 @@
-import PieChart from '../BaseCharts/Pie'
+import Pie from '../BaseCharts/Pie'
 
-export default PieChart.extend({
+export default {
+  extends: Pie,
   mounted () {
     this.renderChart({
       labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
@@ -17,4 +18,4 @@ export default PieChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/PolarAreaExample.js

@@ -1,6 +1,7 @@
-import PolarAreaChart from '../BaseCharts/PolarArea'
+import PolarArea from '../BaseCharts/PolarArea'
 
-export default PolarAreaChart.extend({
+export default {
+  extends: PolarArea,
   mounted () {
     this.renderChart({
       labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
@@ -26,4 +27,4 @@ export default PolarAreaChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/RadarExample.js

@@ -1,6 +1,7 @@
-import RadarChart from '../BaseCharts/Radar'
+import Radar from '../BaseCharts/Radar'
 
-export default RadarChart.extend({
+export default {
+  extends: Radar,
   mounted () {
     this.renderChart({
       labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
@@ -28,4 +29,4 @@ export default RadarChart.extend({
       ]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/ReactiveExample.js

@@ -1,7 +1,8 @@
-import BarChart from '../BaseCharts/Bar'
+import Bar from '../BaseCharts/Bar'
 import reactiveData from '../mixins/reactiveData'
 
-export default BarChart.extend({
+export default {
+  extends: Bar,
   mixins: [reactiveData],
   data () {
     return {
@@ -38,4 +39,4 @@ export default BarChart.extend({
       return Math.floor(Math.random() * (50 - 5 + 1)) + 5
     }
   }
-})
+}

src/examples/ReactivePropExample.js

@@ -1,10 +1,11 @@
-import BarChart from '../BaseCharts/Bar'
+import Bar from '../BaseCharts/Bar'
 import reactiveProp from '../mixins/reactiveProp'
 
-export default BarChart.extend({
+export default {
+  extends: Bar,
   mixins: [reactiveProp],
 
   mounted () {
     this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/examples/ScatterExample.js

@@ -1,6 +1,7 @@
 import Scatter from '../BaseCharts/Scatter'
 
-export default Scatter.extend({
+export default {
+  extends: Scatter,
   mounted () {
     this.renderChart({
       datasets: [{
@@ -49,4 +50,4 @@ export default Scatter.extend({
       }]
     }, {responsive: true, maintainAspectRatio: false})
   }
-})
+}

src/mixins/reactiveData.js

@@ -8,7 +8,7 @@ module.exports = {
     'chartData': {
       handler (newData, oldData) {
         if (oldData) {
-          let chart = this._chart
+          let chart = this.$data._chart
 
           // Get new and old DataSet Labels
           let newDatasetLabels = newData.datasets.map((dataset) => {

src/mixins/reactiveProp.js

@@ -8,7 +8,7 @@ module.exports = {
     'chartData': {
       handler (newData, oldData) {
         if (oldData) {
-          let chart = this._chart
+          let chart = this.$data._chart
 
           // Get new and old DataSet Labels
           let newDatasetLabels = newData.datasets.map((dataset) => {