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) { if (oldData) {
let chart = this._chart 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 return dataset.label
}) })
let oldDataLabels = oldData.datasets.map((dataset) => { let oldDatasetLabels = oldData.datasets.map((dataset) => {
return dataset.label return dataset.label
}) })
if (JSON.stringify(newDataLabels) === JSON.stringify(oldDataLabels)) { // Stringify 'em for easier compare
this.forceUpdate(newData, chart) 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 { } 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) { if (oldData) {
let chart = this._chart 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 return dataset.label
}) })
let oldDataLabels = oldData.datasets.map((dataset) => { let oldDatasetLabels = oldData.datasets.map((dataset) => {
return dataset.label 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) => { newData.datasets.forEach((dataset, i) => {
chart.data.datasets[i].data = dataset.data chart.data.datasets[i].data = dataset.data
}) })
chart.data.labels = newData.labels chart.data.labels = newData.labels
chart.update() chart.update()
} else { } else {
chart.destroy()
this.renderChart(this.chartData, this.options) this.renderChart(this.chartData, this.options)
} }
} }
} }
} }
} },
} }