mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Merge branch 'patch-1' of https://github.com/dsbert/vue-chartjs into patch-1
This commit is contained in:
@@ -1,71 +1,74 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
props: {
|
props: {
|
||||||
chartData: {
|
chartData: {
|
||||||
required: true
|
required: true,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'chartData': {
|
chartData: {
|
||||||
handler (newData, oldData) {
|
handler(newData, oldData) {
|
||||||
if (oldData) {
|
if (oldData) {
|
||||||
let chart = this._chart
|
let chart = this._chart;
|
||||||
|
|
||||||
// Get new and old DataSet Labels
|
// Get new and old DataSet Labels
|
||||||
let newDatasetLabels = newData.datasets.map((dataset) => {
|
let newDatasetLabels = newData.datasets.map(dataset => {
|
||||||
return dataset.label
|
return dataset.label;
|
||||||
})
|
});
|
||||||
|
|
||||||
let oldDatasetLabels = oldData.datasets.map((dataset) => {
|
let oldDatasetLabels = oldData.datasets.map(dataset => {
|
||||||
return dataset.label
|
return dataset.label;
|
||||||
})
|
});
|
||||||
|
|
||||||
// Stringify 'em for easier compare
|
// Stringify 'em for easier compare
|
||||||
const oldLabels = JSON.stringify(oldDatasetLabels)
|
const oldLabels = JSON.stringify(oldDatasetLabels);
|
||||||
const newLabels = JSON.stringify(newDatasetLabels)
|
const newLabels = JSON.stringify(newDatasetLabels);
|
||||||
|
|
||||||
// Check if Labels are equal and if dataset length is equal
|
// 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) => {
|
newData.datasets.forEach((dataset, i) => {
|
||||||
// Get new and old dataset keys
|
// Get new and old dataset keys
|
||||||
const oldDatasetKeys = Object.keys(oldData.datasets[i])
|
const oldDatasetKeys = Object.keys(oldData.datasets[i]);
|
||||||
const newDatasetKeys = Object.keys(dataset)
|
const newDatasetKeys = Object.keys(dataset);
|
||||||
|
|
||||||
// Get keys that aren't present in the new data
|
// Get keys that aren't present in the new data
|
||||||
const deletionKeys = oldDatasetKeys.filter((key) => {
|
const deletionKeys = oldDatasetKeys.filter(key => {
|
||||||
return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
|
return key !== '_meta' && newDatasetKeys.indexOf(key) === -1;
|
||||||
})
|
});
|
||||||
|
|
||||||
// Remove outdated key-value pairs
|
// Remove outdated key-value pairs
|
||||||
deletionKeys.forEach((deletionKey) => {
|
deletionKeys.forEach(deletionKey => {
|
||||||
delete chart.data.datasets[i][deletionKey]
|
delete chart.data.datasets[i][deletionKey];
|
||||||
})
|
});
|
||||||
|
|
||||||
// Update attributes individually to avoid re-rendering the entire chart
|
// Update attributes individually to avoid re-rendering the entire chart
|
||||||
for (const attribute in dataset) {
|
for (const attribute in dataset) {
|
||||||
if (dataset.hasOwnProperty(attribute)) {
|
if (dataset.hasOwnProperty(attribute)) {
|
||||||
chart.data.datasets[i][attribute] = dataset[attribute]
|
chart.data.datasets[i][attribute] = dataset[attribute];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
if (newData.hasOwnProperty('labels')) {
|
if (newData.hasOwnProperty('labels')) {
|
||||||
chart.data.labels = newData.labels
|
chart.data.labels = newData.labels;
|
||||||
}
|
}
|
||||||
if (newData.hasOwnProperty('xLabels')) {
|
if (newData.hasOwnProperty('xLabels')) {
|
||||||
chart.data.xLabels = newData.xLabels
|
chart.data.xLabels = newData.xLabels;
|
||||||
}
|
}
|
||||||
if (newData.hasOwnProperty('yLabels')) {
|
if (newData.hasOwnProperty('yLabels')) {
|
||||||
chart.data.yLabels = newData.yLabels
|
chart.data.yLabels = newData.yLabels;
|
||||||
}
|
}
|
||||||
chart.update()
|
chart.update();
|
||||||
} else {
|
} else {
|
||||||
chart.destroy()
|
chart.destroy();
|
||||||
this.renderChart(this.chartData, this.options)
|
this.renderChart(this.chartData, this.options);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.renderChart(this.chartData, this.options)
|
this.renderChart(this.chartData, this.options);
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user