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

🔨 Change reactiveMixins

Browse Source 
Destroy chart instance on render()
Add additional check for dataset length
Add comments
Refactor reactiveData to match reactiveProp style
This commit is contained in:
Jakub Juszczak
2017-02-14 17:31:18 +01:00
parent 53fb0d80d4
commit aa76f518cb
2 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/mixins/reactiveData.js
View File

@@ -10,35 +10,33 @@ module.exports = {
if (oldData) {
let chart = this._chart
let newDataLabels = newData.datasets.map((dataset) => {
// Get new and old DataSet Labels
let newDatasetLabels = newData.datasets.map((dataset) => {
return dataset.label
})
let oldDataLabels = oldData.datasets.map((dataset) => {
let oldDatasetLabels = oldData.datasets.map((dataset) => {
return dataset.label
})
if (JSON.stringify(newDataLabels) === JSON.stringify(oldDataLabels)) {
this.forceUpdate(newData, chart)
// 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) => {
chart.data.datasets[i].data = dataset.data
})
chart.data.labels = newData.labels
chart.update()
} else {
this.forceRender()
chart.destroy()
this.renderChart(this.chartData, this.options)
}
}
}
}
},
methods: {
forceUpdate (newData, chart) {
newData.datasets.forEach((dataset, i) => {
chart.data.datasets[i].data = dataset.data
})
chart.data.labels = newData.labels
chart.update()
},
forceRender () {
this.renderChart(this.chartData, this.options)
}
}
}

16
src/mixins/reactiveProp.js
View File

@@ -11,25 +11,33 @@ module.exports = {
if (oldData) {
let chart = this._chart
let newDataLabels = newData.datasets.map((dataset) => {
// Get new and old DataSet Labels
let newDatasetLabels = newData.datasets.map((dataset) => {
return dataset.label
})
let oldDataLabels = oldData.datasets.map((dataset) => {
let oldDatasetLabels = oldData.datasets.map((dataset) => {
return dataset.label
})
if (JSON.stringify(newDataLabels) === JSON.stringify(oldDataLabels)) {
// 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) => {
chart.data.datasets[i].data = dataset.data
})
chart.data.labels = newData.labels
chart.update()
} else {
chart.destroy()
this.renderChart(this.chartData, this.options)
}
}
}
}
}
},
}