From aa76f518cbeaffb722cf12b7a49e4bf053b9a92c Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Tue, 14 Feb 2017 17:31:18 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Change=20reactiveMixins?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Destroy chart instance on render()
Add additional check for dataset length
Add comments
Refactor reactiveData to match reactiveProp style
---
 src/mixins/reactiveData.js | 36 +++++++++++++++++-------------------
 src/mixins/reactiveProp.js | 16 ++++++++++++----
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/mixins/reactiveData.js b/src/mixins/reactiveData.js
index 70148d18..460b55ec 100644
--- a/src/mixins/reactiveData.js
+++ b/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].data = dataset.data
+            })
+
+            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)
-    }
-  }
 }
diff --git a/src/mixins/reactiveProp.js b/src/mixins/reactiveProp.js
index fd545b87..3f3116f8 100644
--- a/src/mixins/reactiveProp.js
+++ b/src/mixins/reactiveProp.js
@@ -11,25 +11,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)) {
+          // 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.labels = newData.labels
             chart.update()
           } else {
+            chart.destroy()
             this.renderChart(this.chartData, this.options)
           }
         }
       }
     }
-  }
+  },
 }