src/mixins/index.js
function dataHandler(newData, oldData) {
if (oldData) {
let chart = this.$data._chart
// Get new and old DataSet Labels
let newDatasetLabels = newData.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)
// 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) => {
// 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]
}
}
})
if (newData.hasOwnProperty('labels')) {
chart.data.labels = newData.labels
this.$emit('labels:update')
}
if (newData.hasOwnProperty('xLabels')) {
chart.data.xLabels = newData.xLabels
this.$emit('xlabels:update')
}
if (newData.hasOwnProperty('yLabels')) {
chart.data.yLabels = newData.yLabels
this.$emit('ylabels:update')
}
chart.update()
this.$emit('chart:update')
} else {
if (chart) {
chart.destroy()
this.$emit('chart:destroy')
}
this.renderChart(this.chartData, this.options)
this.$emit('chart:render')
}
} else {
if (this.$data._chart) {
this.$data._chart.destroy()
this.$emit('chart:destroy')
}
this.renderChart(this.chartData, this.options)
this.$emit('chart:render')
}
}
export const reactiveData = {
data() {
return {
chartData: null
}
},
watch: {
chartData: dataHandler
}
}
export const reactiveProp = {
props: {
chartData: {
type: Object,
required: true,
default: () => {}
}
},
watch: {
chartData: dataHandler
}
}
export default {
reactiveData,
reactiveProp
}