From ceb5988e1c62a500f3bd70def008e350ff066bb6 Mon Sep 17 00:00:00 2001 From: Spencer Dellis Date: Fri, 19 May 2017 02:40:29 -0400 Subject: [PATCH 1/5] Resolve reactive props animation issue. A small consequence of replacing the entire dataset in the mixins files is that it causes certain charts to completely re-render even if only the 'data' attribute of a dataset is changing. In my case, I set up a reactive doughnut chart with two data points but whenever the data values change, instead of shifting the fill coloring, it completely re-renders the entire chart. You can see the issue in this fiddle (note the constant re-rendering): https://jsfiddle.net/sg0c82ev/11/ To solve the issue, I instead run a diff between the new and old dataset keys, remove keys that aren't present in the new data, and update the rest of the attributes individually. After making these changes my doughnut chart is animating as expected (even when adding and removing new dataset attributes). A fiddle with my changes: https://jsfiddle.net/sg0c82ev/12/ Perhaps this is too specific of a scenario to warrant a complexity increase like this (and better suited for a custom watcher) but I figured it would be better to dump it here and make it available for review. Let me know what you think. --- src/mixins/reactiveProp.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/mixins/reactiveProp.js b/src/mixins/reactiveProp.js index a4f520ed..b6bf3205 100644 --- a/src/mixins/reactiveProp.js +++ b/src/mixins/reactiveProp.js @@ -27,7 +27,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 From b762d400d2452528beb01fc7079b0e53a9ac4c40 Mon Sep 17 00:00:00 2001 From: Spencer Dellis Date: Fri, 19 May 2017 03:13:43 -0400 Subject: [PATCH 2/5] Removing unnecessary line --- src/mixins/reactiveProp.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/mixins/reactiveProp.js b/src/mixins/reactiveProp.js index b6bf3205..53c53a62 100644 --- a/src/mixins/reactiveProp.js +++ b/src/mixins/reactiveProp.js @@ -4,7 +4,6 @@ module.exports = { required: true } }, - watch: { 'chartData': { handler (newData, oldData) { From 5cc8f0a87822e708f189b9b604eb9c63522d6554 Mon Sep 17 00:00:00 2001 From: Spencer Dellis Date: Fri, 19 May 2017 03:16:12 -0400 Subject: [PATCH 3/5] Resolve reactivity mixin animation issue. A small consequence of replacing the entire dataset in the [reactive mixins files](https://github.com/apertureless/vue-chartjs/blob/develop/src/mixins/reactiveData.js) is that it causes charts to completely re-render even if only the 'data' attribute of a dataset is changing. In my case, I set up a reactive doughnut chart with two data points but whenever the data values change, instead of shifting the fill coloring, it completely re-renders the entire chart. You can see the issue in this fiddle (the problem remains even when changing chart type): https://jsfiddle.net/sg0c82ev/11/ To solve the issue, I instead run a diff between the new and old dataset keys, remove keys that aren't present in the new data, and update the rest of the attributes individually. After making these changes my doughnut chart is animating as expected (even when adding and removing new dataset attributes). A fiddle with my changes: https://jsfiddle.net/sg0c82ev/12/ Perhaps this is too specific of a scenario to warrant a complexity increase (and better suited for a custom handler) but I figured it would be better to dump it here and make it available for review. Let me know what you think. --- src/mixins/reactiveData.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/mixins/reactiveData.js b/src/mixins/reactiveData.js index 7d8b1469..5fc00afa 100644 --- 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 From d49b06f92a7c0c420a4a9fee8e4c2e73c47cd7b3 Mon Sep 17 00:00:00 2001 From: Spencer Dellis Date: Fri, 19 May 2017 11:11:33 -0400 Subject: [PATCH 4/5] Fixing eslint issues. --- src/mixins/reactiveProp.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/mixins/reactiveProp.js b/src/mixins/reactiveProp.js index 53c53a62..059ebbee 100644 --- a/src/mixins/reactiveProp.js +++ b/src/mixins/reactiveProp.js @@ -29,17 +29,17 @@ module.exports = { // 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)) { From dbce4d7c2c71660bd7e39e3f3a7c7bd179a63395 Mon Sep 17 00:00:00 2001 From: Spencer Dellis Date: Fri, 19 May 2017 11:11:56 -0400 Subject: [PATCH 5/5] Fixing eslint issues. --- src/mixins/reactiveData.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/mixins/reactiveData.js b/src/mixins/reactiveData.js index 5fc00afa..3b0df55d 100644 --- a/src/mixins/reactiveData.js +++ b/src/mixins/reactiveData.js @@ -29,17 +29,17 @@ module.exports = { // 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)) {