Refactor stats.js

app/server/static/js/stats.js

@@ -1,107 +1,105 @@
-import {
-    HorizontalBar,
-    mixins,
-    Doughnut
-} from 'vue-chartjs'
-const {
-    reactiveProp,
-    reactiveData
-} = mixins
+import { HorizontalBar, mixins, Doughnut } from 'vue-chartjs';
+import axios from 'axios';
+import Vue from 'vue';
+
+const { reactiveProp, reactiveData } = mixins;
 
 axios.defaults.xsrfCookieName = 'csrftoken';
 axios.defaults.xsrfHeaderName = 'X-CSRFToken';
-var base_url = window.location.href.split('/').slice(3, 5).join('/');
+const baseURL = window.location.href.split('/').slice(3, 5).join('/');
 const HTTP = axios.create({
-    baseURL: `/api/${base_url}/`,
-})
+  baseURL: `/api/${baseURL}/`,
+});
 
 
 Vue.component('line-chart', {
-    extends: HorizontalBar,
-    mixins: [reactiveProp],
-    props: ['chartData'],
-    data: function () {
-        return {
-            options: {
-                scales: {
-                    yAxes: [{
-                        barPercentage: 0.3,
-                    }],
-                    xAxes: [{
-                        ticks: {
-                            beginAtZero: true,
-                            min: 0
-                        }
-                    }]
-                },
-                maintainAspectRatio: false,
-            }
-        }
-    },
-    mounted() {
-        this.renderChart(this.chartData, this.options)
-    }
-})
+  extends: HorizontalBar,
+  mixins: [reactiveProp],
+  props: ['chartData'],
+  data() {
+    return {
+      options: {
+        scales: {
+          yAxes: [{
+            barPercentage: 0.3,
+          }],
+          xAxes: [{
+            ticks: {
+              beginAtZero: true,
+              min: 0,
+            },
+          }],
+        },
+        maintainAspectRatio: false,
+      },
+    };
+  },
+
+  mounted() {
+    this.renderChart(this.chartData, this.options);
+  },
+});
 
 
 Vue.component('doughnut-chart', {
-    extends: Doughnut,
-    mixins: [reactiveProp],
-    props: ['chartData'],
-    data: function () {
-        return {
-            options: {
-                maintainAspectRatio: false,
-            }
-        }
-    },
-    mounted() {
-        this.renderChart(this.chartData, this.options)
-    }
-})
+  extends: Doughnut,
+  mixins: [reactiveProp],
+  props: ['chartData'],
+  data() {
+    return {
+      options: {
+        maintainAspectRatio: false,
+      },
+    };
+  },
 
-var vm = new Vue({
-    el: '#mail-app',
-    delimiters: ['[[', ']]'],
-    data: {
-        labelData: null,
-        userData: null,
-        progressData: null
-    },
+  mounted() {
+    this.renderChart(this.chartData, this.options);
+  },
+});
+
+const vm = new Vue({
+  el: '#mail-app',
+  delimiters: ['[[', ']]'],
+  data: {
+    labelData: null,
+    userData: null,
+    progressData: null,
+  },
 
-    methods: {
-        makeData(data, labels, label) {
-            var data = {
-                labels: labels,
-                datasets: [{
-                    label: label,
-                    backgroundColor: '#00d1b2',
-                    data: data
-                }]
-            }
-            return data
-        }
+  methods: {
+    makeData(data, labels, label) {
+      const res = {
+        labels: labels,
+        datasets: [{
+          label: label,
+          backgroundColor: '#00d1b2',
+          data: data,
+        }],
+      };
+      return res;
     },
+  },
+
+  created() {
+    HTTP.get('stats').then((response) => {
+      this.labelData = this.makeData(response.data.label.data, response.data.label.labels, 'Label stats');
+      this.userData = this.makeData(response.data.user.data, response.data.user.users, 'User stats');
+    });
+    HTTP.get('progress').then((response) => {
+      const complete = response.data.total - response.data.remaining;
+      const incomplete = response.data.remaining;
+      this.progressData = {
+        datasets: [{
+          data: [complete, incomplete],
+          backgroundColor: ['#00d1b2', '#ffdd57'],
+        }],
 
-    created: function () {
-        HTTP.get('stats').then(response => {
-            this.labelData = this.makeData(response.data.label.data, response.data.label.labels, 'Label stats');
-            this.userData = this.makeData(response.data.user.data, response.data.user.users, 'User stats');
-        })
-        HTTP.get('progress').then(response => {
-            var complete = response.data['total'] - response.data['remaining'];
-            var incomplete = response.data['remaining'];
-            this.progressData = {
-                datasets: [{
-                    data: [complete, incomplete],
-                    backgroundColor: ['#00d1b2', '#ffdd57']
-                }],
-            
-                labels: [
-                    'Completed',
-                    'Incomplete',
-                ]
-            }
-        })
-    }
-})
+        labels: [
+          'Completed',
+          'Incomplete',
+        ],
+      };
+    });
+  },
+});