Merge pull request #109 from MuseofMoose/patch-1

Fix reactive mixins animation re-rendering issue.
apertureless · Jun 4, 2017 · 43363fc · 43363fc
2 parents 29d1ca3 + dbce4d7
commit 43363fc
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/src/mixins/reactiveData.js b/src/mixins/reactiveData.js
@@ -26,7 +26,26 @@ module.exports = {
           // 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
+              // Get new and old dataset keys
+              const oldDatasetKeys = Object.keys(oldData.datasets[i])
+              const newDatasetKeys = Object.keys(dataset)
+
+              // Get keys that aren't present in the new data
+              const deletionKeys = oldDatasetKeys.filter((key) => {
+                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
+              })
+
+              // Remove outdated key-value pairs
+              deletionKeys.forEach((deletionKey) => {
+                delete chart.data.datasets[i][deletionKey]
+              })
+
+              // Update attributes individually to avoid re-rendering the entire chart
+              for (const attribute in dataset) {
+                if (dataset.hasOwnProperty(attribute)) {
+                  chart.data.datasets[i][attribute] = dataset[attribute]
+                }
+              }
             })
 
             chart.data.labels = newData.labels

diff --git a/src/mixins/reactiveProp.js b/src/mixins/reactiveProp.js
@@ -4,7 +4,6 @@ module.exports = {
       required: true
     }
   },
-
   watch: {
     'chartData': {
       handler (newData, oldData) {
@@ -27,7 +26,26 @@ module.exports = {
           // 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
+              // Get new and old dataset keys
+              const oldDatasetKeys = Object.keys(oldData.datasets[i])
+              const newDatasetKeys = Object.keys(dataset)
+
+              // Get keys that aren't present in the new data
+              const deletionKeys = oldDatasetKeys.filter((key) => {
+                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
+              })
+
+              // Remove outdated key-value pairs
+              deletionKeys.forEach((deletionKey) => {
+                delete chart.data.datasets[i][deletionKey]
+              })
+
+              // Update attributes individually to avoid re-rendering the entire chart
+              for (const attribute in dataset) {
+                if (dataset.hasOwnProperty(attribute)) {
+                  chart.data.datasets[i][attribute] = dataset[attribute]
+                }
+              }
             })
 
             chart.data.labels = newData.labels