KevinMidboe/vue-chartjs
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-chartjs.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #109 from MuseofMoose/patch-1

Browse Source 
Fix reactive mixins animation re-rendering issue.
This commit is contained in:
Jakub
2017-06-04 15:06:52 +02:00
committed by GitHub
parent 29d1ca3428 dbce4d7c2c
commit 43363fc2ae
2 changed files with 40 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/mixins/reactiveData.js
View File

@@ -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

22
src/mixins/reactiveProp.js
View File

@@ -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