diff --git a/src/mixins/reactiveProp.js b/src/mixins/reactiveProp.js index e90a27c..71ded74 100644 --- a/src/mixins/reactiveProp.js +++ b/src/mixins/reactiveProp.js @@ -1,71 +1,74 @@ module.exports = { props: { chartData: { - required: true - } + required: true, + }, }, watch: { - 'chartData': { - handler (newData, oldData) { + chartData: { + handler(newData, oldData) { if (oldData) { - let chart = this._chart + let chart = this._chart; // Get new and old DataSet Labels - let newDatasetLabels = newData.datasets.map((dataset) => { - return dataset.label - }) + let newDatasetLabels = newData.datasets.map(dataset => { + return dataset.label; + }); - let oldDatasetLabels = oldData.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) + 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) { + 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) + 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 - }) + 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] - }) + 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] + chart.data.datasets[i][attribute] = dataset[attribute]; } } - }) + }); if (newData.hasOwnProperty('labels')) { - chart.data.labels = newData.labels + chart.data.labels = newData.labels; } if (newData.hasOwnProperty('xLabels')) { - chart.data.xLabels = newData.xLabels + chart.data.xLabels = newData.xLabels; } if (newData.hasOwnProperty('yLabels')) { - chart.data.yLabels = newData.yLabels + chart.data.yLabels = newData.yLabels; } - chart.update() + chart.update(); } else { - chart.destroy() - this.renderChart(this.chartData, this.options) + chart.destroy(); + this.renderChart(this.chartData, this.options); } } else { - this.renderChart(this.chartData, this.options) + this.renderChart(this.chartData, this.options); } - } - } - } -} + }, + }, + }, +};