💎 Release new version 2.3.6

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

CHANGELOG.md

@@ -2,10 +2,30 @@
 
 ## [Unreleased](https://github.com/apertureless/vue-chartjs/tree/HEAD)
 
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.3...HEAD)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.5...HEAD)
 
-**Fixed bugs:**
+**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)
@@ -24,7 +44,7 @@
 ## [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)
 
-**Implemented enhancements:**
+**Closed issues:**
 
 - Content Security Policy [\#22](https://github.com/apertureless/vue-chartjs/issues/22)
 
@@ -36,13 +56,10 @@
 ## [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)
 
-**Fixed bugs:**
-
-- Issues after using gulp-- production [\#19](https://github.com/apertureless/vue-chartjs/issues/19)
-
 **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:**
 
@@ -59,8 +76,9 @@
 ## [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)
 
-**Fixed bugs:**
+**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:**
@@ -72,6 +90,7 @@
 
 **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)
 
@@ -89,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:**
 
@@ -104,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)
 
@@ -114,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)
 
@@ -125,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

@@ -19,13 +19,13 @@
 
 ### 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

dist/vue-chartjs.js

@@ -42978,38 +42978,38 @@ return /******/ (function(modules) { // webpackBootstrap
 	  watch: {
 	    'chartData': {
 	      handler: function handler(newData, oldData) {
+	        var _this = this;
+
 	        if (oldData) {
-	          var chart = this._chart;
+	          (function () {
+	            var chart = _this._chart;
 
-	          var newDataLabels = newData.datasets.map(function (dataset) {
-	            return dataset.label;
-	          });
+	            var newDatasetLabels = newData.datasets.map(function (dataset) {
+	              return dataset.label;
+	            });
 
-	          var oldDataLabels = oldData.datasets.map(function (dataset) {
-	            return dataset.label;
-	          });
+	            var oldDatasetLabels = oldData.datasets.map(function (dataset) {
+	              return dataset.label;
+	            });
 
-	          if ((0, _stringify2.default)(newDataLabels) === (0, _stringify2.default)(oldDataLabels)) {
-	            this.forceUpdate(newData, chart);
-	          } else {
-	            this.forceRender();
-	          }
+	            var oldLabels = (0, _stringify2.default)(oldDatasetLabels);
+	            var newLabels = (0, _stringify2.default)(newDatasetLabels);
+
+	            if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
+	              newData.datasets.forEach(function (dataset, i) {
+	                chart.data.datasets[i] = dataset;
+	              });
+
+	              chart.data.labels = newData.labels;
+	              chart.update();
+	            } else {
+	              chart.destroy();
+	              _this.renderChart(_this.chartData, _this.options);
+	            }
+	          })();
 	        }
 	      }
 	    }
-	  },
-	  methods: {
-	    forceUpdate: function forceUpdate(newData, chart) {
-	      newData.datasets.forEach(function (dataset, i) {
-	        chart.data.datasets[i].data = dataset.data;
-	      });
-
-	      chart.data.labels = newData.labels;
-	      chart.update();
-	    },
-	    forceRender: function forceRender() {
-	      this.renderChart(this.chartData, this.options);
-	    }
 	  }
 	};
 
@@ -43064,21 +43064,26 @@ return /******/ (function(modules) { // webpackBootstrap
 	          (function () {
 	            var chart = _this._chart;
 
-	            var newDataLabels = newData.datasets.map(function (dataset) {
+	            var newDatasetLabels = newData.datasets.map(function (dataset) {
 	              return dataset.label;
 	            });
 
-	            var oldDataLabels = oldData.datasets.map(function (dataset) {
+	            var oldDatasetLabels = oldData.datasets.map(function (dataset) {
 	              return dataset.label;
 	            });
 
-	            if ((0, _stringify2.default)(newDataLabels) === (0, _stringify2.default)(oldDataLabels)) {
+	            var oldLabels = (0, _stringify2.default)(oldDatasetLabels);
+	            var newLabels = (0, _stringify2.default)(newDatasetLabels);
+
+	            if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
 	              newData.datasets.forEach(function (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);
 	            }
 	          })();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "2.3.4",
+  "version": "2.3.6",
   "description": "vue.js wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@nextindex.de>",
   "repository": {

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