diff --git a/src/mixins/reactiveData.js b/src/mixins/reactiveData.js index 70148d1..460b55e 100644 --- a/src/mixins/reactiveData.js +++ b/src/mixins/reactiveData.js @@ -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) - } - } } diff --git a/src/mixins/reactiveProp.js b/src/mixins/reactiveProp.js index fd545b8..3f3116f 100644 --- a/src/mixins/reactiveProp.js +++ b/src/mixins/reactiveProp.js @@ -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) } } } } - } + }, }