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 branch 'patch-1' of https://github.com/dsbert/vue-chartjs into patch-1

Browse Source
This commit is contained in:
bertolds
2017-08-07 09:46:03 -04:00
parent 0e419886b1 a5b58c3b98
commit b7f2bf7db2
1 changed files with 38 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/mixins/reactiveProp.js
View File

@@ -1,71 +1,74 @@
module.exports = {
props: {
chartData: {
required: true
}
required: true,
},
},
watch: {
'chartData': {
handler (newData, oldData) {
chartData: {
handler(newData, oldData) {
if (oldData) {
let chart = this._chart
let chart = this._chart;
// Get new and old DataSet Labels
let newDatasetLabels = newData.datasets.map((dataset) => {
return dataset.label
})
let newDatasetLabels = newData.datasets.map(dataset => {
return dataset.label;
});
let oldDatasetLabels = oldData.datasets.map((dataset) => {
return dataset.label
})
let oldDatasetLabels = oldData.datasets.map(dataset => {
return dataset.label;
});
// Stringify 'em for easier compare
const oldLabels = JSON.stringify(oldDatasetLabels)
const newLabels = JSON.stringify(newDatasetLabels)
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) {
if (
newLabels === oldLabels &&
oldData.datasets.length === newData.datasets.length
) {
newData.datasets.forEach((dataset, i) => {
// Get new and old dataset keys
const oldDatasetKeys = Object.keys(oldData.datasets[i])
const newDatasetKeys = Object.keys(dataset)
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
})
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]
})
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.datasets[i][attribute] = dataset[attribute];
}
}
})
});
if (newData.hasOwnProperty('labels')) {
chart.data.labels = newData.labels
chart.data.labels = newData.labels;
}
if (newData.hasOwnProperty('xLabels')) {
chart.data.xLabels = newData.xLabels
chart.data.xLabels = newData.xLabels;
}
if (newData.hasOwnProperty('yLabels')) {
chart.data.yLabels = newData.yLabels
chart.data.yLabels = newData.yLabels;
}
chart.update()
chart.update();
} else {
chart.destroy()
this.renderChart(this.chartData, this.options)
chart.destroy();
this.renderChart(this.chartData, this.options);
}
} else {
this.renderChart(this.chartData, this.options)
this.renderChart(this.chartData, this.options);
}
}
}
}
}
},
},
},
};