From 45e543b636969c7949dcf0a3b7d5d413ac4b7c78 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Sun, 2 Oct 2016 10:31:14 +0200
Subject: [PATCH 01/11] =?UTF-8?q?=E2=9C=A8=20Add=20reactiveData=20mixin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mixins/reactiveData.js | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/mixins/reactiveData.js

diff --git a/src/mixins/reactiveData.js b/src/mixins/reactiveData.js
new file mode 100644
index 00000000..50d9ec63
--- /dev/null
+++ b/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)
+          }
+        }
+      }
+    }
+  }
+}

From a7194b990f28c548ae228517bfe76dff3ae7ce2e Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Sun, 2 Oct 2016 10:32:30 +0200
Subject: [PATCH 02/11] =?UTF-8?q?=E2=9C=A8=20Add=20reactive=20Data=20examp?=
 =?UTF-8?q?le?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/examples/ReactiveExample.js | 41 +++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/examples/ReactiveExample.js

diff --git a/src/examples/ReactiveExample.js b/src/examples/ReactiveExample.js
new file mode 100644
index 00000000..1f282b84
--- /dev/null
+++ b/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
+    }
+  }
+})

From 59cc74a00d050912e03486f4bee21ab8ae4faa59 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Sun, 2 Oct 2016 10:34:06 +0200
Subject: [PATCH 03/11] =?UTF-8?q?=E2=9C=A8=20Add=20reactiveData=20Example?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/examples/App.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/examples/App.vue b/src/examples/App.vue
index cfc2c192..8f7abe77 100644
--- a/src/examples/App.vue
+++ b/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,10 @@
   import RadarExample from './RadarExample'
   import PolarAreaExample from './PolarAreaExample'
   import BubbleExample from './BubbleExample'
+  import ReactiveExample from './ReactiveExample'
 
   export default {
-    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample, BubbleExample }
+    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample, BubbleExample, ReactiveExample }
   }
 </script>
 

From e716482154ace808ae0ab2f359bef14764fcacc4 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Sun, 2 Oct 2016 18:10:44 +0200
Subject: [PATCH 04/11] =?UTF-8?q?=E2=9C=A8=20Add=20reactiveProperty=20mixi?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mixins/reactiveProp.js | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/mixins/reactiveProp.js

diff --git a/src/mixins/reactiveProp.js b/src/mixins/reactiveProp.js
new file mode 100644
index 00000000..fd545b87
--- /dev/null
+++ b/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)
+          }
+        }
+      }
+    }
+  }
+}

From 06c3148897e9e439739337d0d3b7d7a3424b7cc5 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Sun, 2 Oct 2016 18:25:02 +0200
Subject: [PATCH 05/11] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20Update=20examples?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/examples/App.vue                | 13 ++++++++++++-
 src/examples/ReactivePropExample.js | 10 ++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/examples/ReactivePropExample.js

diff --git a/src/examples/App.vue b/src/examples/App.vue
index 8f7abe77..0e636609 100644
--- a/src/examples/App.vue
+++ b/src/examples/App.vue
@@ -20,9 +20,20 @@
   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, ReactiveExample }
+    components: {
+      BarExample,
+      LineExample,
+      DoughnutExample,
+      PieExample,
+      RadarExample,
+      PolarAreaExample,
+      BubbleExample,
+      ReactiveExample,
+      ReactivePropExample
+    }
   }
 </script>
 
diff --git a/src/examples/ReactivePropExample.js b/src/examples/ReactivePropExample.js
new file mode 100644
index 00000000..e5b9dea6
--- /dev/null
+++ b/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)
+  }
+})

From ef9fbe472a4d17f562611fc27e5e761d998c7112 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Sun, 2 Oct 2016 18:26:06 +0200
Subject: [PATCH 06/11] =?UTF-8?q?=F0=9F=93=9D=20Update=20README=20with=20r?=
 =?UTF-8?q?eactive=20Data=20and=20props=20example?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f761b630..7cccad51 100644
--- a/README.md
+++ b/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

From c21cf2f3aca187f9186ffb439f659e6df57a8da3 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Sun, 2 Oct 2016 18:26:38 +0200
Subject: [PATCH 07/11] =?UTF-8?q?=E2=9C=A8=20Add=20export=20for=20mixins?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.js                           | 6 +++++-
 test/unit/specs/mixins/reactiveData.js | 0
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 test/unit/specs/mixins/reactiveData.js

diff --git a/src/index.js b/src/index.js
index 7740349e..158c9381 100644
--- a/src/index.js
+++ b/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,9 @@ const VueCharts = {
   Pie,
   PolarArea,
   Radar,
-  Bubble
+  Bubble,
+  reactiveProp,
+  reactiveData
 }
 
 module.exports = VueCharts
diff --git a/test/unit/specs/mixins/reactiveData.js b/test/unit/specs/mixins/reactiveData.js
new file mode 100644
index 00000000..e69de29b

From ecdb98c4c8f14a3f9c62e7ca430f23ad9cca18d6 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Sun, 2 Oct 2016 18:30:48 +0200
Subject: [PATCH 08/11] =?UTF-8?q?=F0=9F=90=9B=20Fix=20paths?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/index.js b/src/index.js
index 158c9381..2e481795 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,8 +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'
+import reactiveProp from './mixins/reactiveProp'
+import reactiveData from './mixins/reactiveData'
 
 const VueCharts = {
   Bar,
@@ -19,5 +19,3 @@ const VueCharts = {
   reactiveProp,
   reactiveData
 }
-
-module.exports = VueCharts

From 4ec6fa4caea3eb64d0e47674ed83193e9ec406a6 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Sun, 9 Oct 2016 17:17:06 +0200
Subject: [PATCH 09/11] =?UTF-8?q?=E2=9C=A8=20Add=20codecov=20yml?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 codecov.yml  | 33 +++++++++++++++++++++++++++++++++
 package.json | 22 +++++++++++-----------
 2 files changed, 44 insertions(+), 11 deletions(-)
 create mode 100644 codecov.yml

diff --git a/codecov.yml b/codecov.yml
new file mode 100644
index 00000000..729b0ae2
--- /dev/null
+++ b/codecov.yml
@@ -0,0 +1,33 @@
+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/*"
+
+
+comment:
+  layout: "header, diff, changes, sunburst, uncovered, tree"
+  branches: null
+  behavior: default
diff --git a/package.json b/package.json
index fff2cb30..b2f3d972 100644
--- a/package.json
+++ b/package.json
@@ -38,9 +38,9 @@
     "chai": "^3.5.0",
     "chromedriver": "^2.21.2",
     "connect-history-api-fallback": "^1.1.0",
-    "cross-spawn": "^2.1.5",
+    "cross-spawn": "^4.0.2",
     "css-loader": "^0.25.0",
-    "eslint": "^3.7.0",
+    "eslint": "^3.7.1",
     "eslint-config-standard": "^6.2.0",
     "eslint-friendly-formatter": "^2.0.5",
     "eslint-loader": "^1.3.0",
@@ -57,22 +57,22 @@
     "inject-loader": "^2.0.1",
     "isparta-loader": "^2.0.0",
     "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-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.26",
     "karma-webpack": "^1.7.0",
-    "lodash": "^4.15.0",
+    "lodash": "^4.16.3",
     "lolex": "^1.4.0",
     "mocha": "^3.1.0",
-    "nightwatch": "^0.8.18",
-    "ora": "^0.2.0",
-    "phantomjs-prebuilt": "^2.1.3",
+    "nightwatch": "^0.9.8",
+    "ora": "^0.3.0",
+    "phantomjs-prebuilt": "^2.1.13",
     "selenium-server": "^2.53.1",
-    "shelljs": "^0.6.0",
+    "shelljs": "^0.7.4",
     "sinon": "^1.17.3",
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
@@ -83,6 +83,6 @@
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0",
-    "webpack-merge": "^0.8.3"
+    "webpack-merge": "^0.14.1"
   }
 }

From f94b320dfa48587a10cec4b685ab2e58cb20c343 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Sat, 15 Oct 2016 12:58:51 +0200
Subject: [PATCH 10/11] =?UTF-8?q?=E2=9C=A8=20Change=20reactiveDataMixin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 codecov.yml                |  1 +
 package.json               |  2 ++
 src/mixins/reactiveData.js | 22 ++++++++++++++++------
 test/unit/.eslintrc        |  1 +
 test/unit/karma.conf.js    |  2 +-
 5 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/codecov.yml b/codecov.yml
index 729b0ae2..22b54b6b 100644
--- a/codecov.yml
+++ b/codecov.yml
@@ -25,6 +25,7 @@ coverage:
   ignore:
     - "tests/*"
     - "src/examples/*"
+    - "src/mixins/*"
 
 
 comment:
diff --git a/package.json b/package.json
index b2f3d972..0cdc2f59 100644
--- a/package.json
+++ b/package.json
@@ -56,9 +56,11 @@
     "http-proxy-middleware": "^0.17.2",
     "inject-loader": "^2.0.1",
     "isparta-loader": "^2.0.0",
+    "jasmine-core": "^2.5.2",
     "json-loader": "^0.5.4",
     "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",
diff --git a/src/mixins/reactiveData.js b/src/mixins/reactiveData.js
index 50d9ec63..70148d18 100644
--- a/src/mixins/reactiveData.js
+++ b/src/mixins/reactiveData.js
@@ -19,16 +19,26 @@ module.exports = {
           })
 
           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()
+            this.forceUpdate(newData, chart)
           } else {
-            this.renderChart(this.chartData, this.options)
+            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)
+    }
   }
 }
diff --git a/test/unit/.eslintrc b/test/unit/.eslintrc
index 959a4f4b..88899468 100644
--- a/test/unit/.eslintrc
+++ b/test/unit/.eslintrc
@@ -4,6 +4,7 @@
   },
   "globals": {
     "expect": true,
+    "jasmine": true,
     "sinon": true
   }
 }
diff --git a/test/unit/karma.conf.js b/test/unit/karma.conf.js
index 048b7290..a31f254e 100644
--- a/test/unit/karma.conf.js
+++ b/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: {

From 6f77de832e4b5540069da04bb59d0a0fbd1635f0 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Sat, 15 Oct 2016 13:00:24 +0200
Subject: [PATCH 11/11] =?UTF-8?q?=F0=9F=90=9B=20Fix=20missing=20export?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/index.js b/src/index.js
index 2e481795..0a181d57 100644
--- a/src/index.js
+++ b/src/index.js
@@ -19,3 +19,5 @@ const VueCharts = {
   reactiveProp,
   reactiveData
 }
+
+module.exports = VueCharts