From ebcab9f2f8283f0d89b7a4a3332c2ad79c55ba64 Mon Sep 17 00:00:00 2001 From: Nick Nissen Date: Mon, 5 Feb 2018 13:31:24 +0100 Subject: [PATCH] Extract identical code into shared function --- src/examples/ReactiveExample.js | 2 +- src/examples/ReactivePropExample.js | 2 +- src/mixins/index.js | 88 ++++++++++++++++++++++++++++- src/mixins/reactiveData.js | 74 ------------------------ src/mixins/reactiveProp.js | 74 ------------------------ 5 files changed, 88 insertions(+), 152 deletions(-) delete mode 100644 src/mixins/reactiveData.js delete mode 100644 src/mixins/reactiveProp.js diff --git a/src/examples/ReactiveExample.js b/src/examples/ReactiveExample.js index 283484a7..1a2a32c6 100644 --- a/src/examples/ReactiveExample.js +++ b/src/examples/ReactiveExample.js @@ -1,5 +1,5 @@ import { Bar } from '../BaseCharts' -import reactiveData from '../mixins/reactiveData' +import { reactiveData } from '../mixins' export default { extends: Bar, diff --git a/src/examples/ReactivePropExample.js b/src/examples/ReactivePropExample.js index 8fa055a0..11de700b 100644 --- a/src/examples/ReactivePropExample.js +++ b/src/examples/ReactivePropExample.js @@ -1,5 +1,5 @@ import { Bar } from '../BaseCharts' -import reactiveProp from '../mixins/reactiveProp' +import { reactiveProp } from '../mixins' export default { extends: Bar, diff --git a/src/mixins/index.js b/src/mixins/index.js index eb03191c..8555d523 100644 --- a/src/mixins/index.js +++ b/src/mixins/index.js @@ -1,5 +1,89 @@ -import reactiveData from './reactiveData.js' -import reactiveProp from './reactiveProp.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 + } + if (newData.hasOwnProperty('xLabels')) { + chart.data.xLabels = newData.xLabels + } + if (newData.hasOwnProperty('yLabels')) { + chart.data.yLabels = newData.yLabels + } + chart.update() + } else { + chart.destroy() + this.renderChart(this.chartData, this.options) + } + } else { + if (this.$data._chart) { + this.$data._chart.destroy() + } + this.renderChart(this.chartData, this.options) + } +} + +export const reactiveData = { + data () { + return { + chartData: null + } + }, + + watch: { + 'chartData': dataHandler + } +} + +export const reactiveProp = { + props: { + chartData: { + required: true + } + }, + watch: { + 'chartData': dataHandler + } +} export default { reactiveData, diff --git a/src/mixins/reactiveData.js b/src/mixins/reactiveData.js deleted file mode 100644 index 4774c3a6..00000000 --- a/src/mixins/reactiveData.js +++ /dev/null @@ -1,74 +0,0 @@ -module.exports = { - data () { - return { - chartData: null - } - }, - watch: { - 'chartData': { - handler (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 - } - if (newData.hasOwnProperty('xLabels')) { - chart.data.xLabels = newData.xLabels - } - if (newData.hasOwnProperty('yLabels')) { - chart.data.yLabels = newData.yLabels - } - chart.update() - } else { - chart.destroy() - this.renderChart(this.chartData, this.options) - } - } else { - if (this.$data._chart) { - this.$data._chart.destroy() - } - this.renderChart(this.chartData, this.options) - } - } - } - } -} diff --git a/src/mixins/reactiveProp.js b/src/mixins/reactiveProp.js deleted file mode 100644 index 8fd3c286..00000000 --- a/src/mixins/reactiveProp.js +++ /dev/null @@ -1,74 +0,0 @@ -module.exports = { - props: { - chartData: { - required: true - } - }, - watch: { - 'chartData': { - handler (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 - } - if (newData.hasOwnProperty('xLabels')) { - chart.data.xLabels = newData.xLabels - } - if (newData.hasOwnProperty('yLabels')) { - chart.data.yLabels = newData.yLabels - } - chart.update() - } else { - chart.destroy() - this.renderChart(this.chartData, this.options) - } - } else { - if (this.$data._chart) { - this.$data._chart.destroy() - } - this.renderChart(this.chartData, this.options) - } - } - } - } -}