WIP Feature/reactive chart data #11

README.md

@@ -36,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({
@@ -67,7 +67,7 @@ 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({
+export default Line.extend({
   props: [data, options],
   mounted () {
     this.renderChart(this.data, this.options)
@@ -92,6 +92,30 @@ 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`
+
+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'
+
+export default Line.extend({
+  mixins: [reactiveProp]
+  props: [chartData, options],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+
+```
+
 ## Available Charts
 
 ### Bar Chart

src/examples/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="container">
     <bar-example></bar-example>
+    <reactive-example></reactive-example>
     <line-example></line-example>
     <doughnut-example></doughnut-example>
     <pie-example></pie-example>
@@ -18,9 +19,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/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)
+
+    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,8 @@ 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'
 
 const VueCharts = {
   Bar,
@@ -13,7 +15,7 @@ const VueCharts = {
   Pie,
   PolarArea,
   Radar,
-  Bubble
+  Bubble,
+  reactiveProp,
+  reactiveData
 }
-
-module.exports = VueCharts

src/mixins/reactiveData.js

@@ -0,0 +1,34 @@
+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)) {
+            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)
+          }
+        }
+      }
+    }
+  }
+}

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)
+          }
+        }
+      }
+    }
+  }
+}