wip: Refactor mixin in seperate functions

src/mixins/index.js

@@ -1,67 +1,74 @@
+/* eslint-disable */
+
 function dataHandler (newData, oldData) {
   if (oldData) {
-    let chart = this.$data._chart
+    const chart = this.$data._chart
+    _checkChanges(newData, oldData, chart)
+  } else {
+    _destroyAndRenderChart(chart)
+}
 
-    // Get new and old DataSet Labels
-    let newDatasetLabels = newData.datasets.map((dataset) => {
-      return dataset.label
-    })
+function _checkChanges (newData, oldData, 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
-    })
+  let oldDatasetLabels = oldData.datasets.map((dataset) => {
+    return dataset.label
+  })
 
-    // Stringify 'em for easier compare
-    const oldLabels = JSON.stringify(oldDatasetLabels)
-    const newLabels = JSON.stringify(newDatasetLabels)
+  // 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)
+  // 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]
-          }
-        }
+      // Get keys that aren't present in the new data
+      const deletionKeys = oldDatasetKeys.filter((key) => {
+        return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
       })
 
-      if (newData.hasOwnProperty('labels')) {
-        chart.data.labels = newData.labels
+      // 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('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)
+    })
+
+    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 {
-    if (this.$data._chart) {
-      this.$data._chart.destroy()
-    }
-    this.renderChart(this.chartData, this.options)
+    _destroyAndRenderChart(chart)
   }
 }
 
+function _destroyAndRenderChart (chart) {
+  if (chart) {
+    chart.destroy()
+  }
+  this.renderChart(this.chartData, this.options)
+}
+
 export const reactiveData = {
   data () {
     return {
@@ -77,7 +84,6 @@ export const reactiveData = {
 export const reactiveProp = {
   props: {
     chartData: {
-      type: Object,
       required: true,
       default: () => {}
     }
@@ -91,3 +97,4 @@ export default {
   reactiveData,
   reactiveProp
 }
+