Reformat chart components

2020-07-19 22:40:52 +02:00 · 2020-07-19 22:40:52 +02:00 · 33a0b0840b
commit 33a0b0840b
parent a0a4e1ca97
5 changed files with 882 additions and 903 deletions
--- a/frontend/src/views/charts/AccountPie.vue
+++ b/frontend/src/views/charts/AccountPie.vue
@ -11,15 +11,15 @@
 </template>

 <script>
-import VueApexCharts from "vue-apexcharts";
-import { baseUri } from "../../variables.js";
+  import VueApexCharts from "vue-apexcharts";
+  import {baseUri} from "../../variables.js";

-export default {
+  export default {
    components: {
      apexchart: VueApexCharts
    },
    computed: {
-    chartOptions: function() {
+      chartOptions: function () {
        return {
          labels: ["Working hours", "Pause hours"],
          chart: {
@ -134,7 +134,7 @@ export default {
      var accounts;
      var timeTrackAccountsTMP;
      var accountxhttp = new XMLHttpRequest();
-    accountxhttp.onreadystatechange = function() {
+      accountxhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          accounts = JSON.parse(accountxhttp.responseText);
          timeTrackAccountsTMP = accounts._embedded.accounts;
@ -176,7 +176,7 @@ export default {
      var page = 0;

      while (hasNext) {
-      xhttp.onreadystatechange = function() {
+        xhttp.onreadystatechange = function () {
          if (this.readyState == 4 && this.status == 200) {
            var recordsDB = JSON.parse(xhttp.responseText);
            recordsDB._embedded.records.forEach(tmpRecord => {
@ -210,26 +210,19 @@ export default {

      for (let index = 0; index < records.length; index++) {
        var record = records[index];
-      for (
-        let indexAccs = 0;
-        indexAccs < this.chartOptions.labels.length;
-        indexAccs++
-      ) {
-        if (
-          record.account == this.chartOptions.labels[indexAccs] &&
-          record.type == "PAID"
-        ) {
+        for (let indexAccs = 0; indexAccs < this.chartOptions.labels.length; indexAccs++) {
+          if (record.account == this.chartOptions.labels[indexAccs] && record.type == "PAID") {
            this.series[indexAccs] += record.duration;
          }
        }
      }
    }
-};
+  };
 </script>


 <style scoped>
-.v-card {
+  .v-card {
    border-radius: 20px !important;
-}
+  }
 </style>
--- a/frontend/src/views/charts/MonthSummary.vue
+++ b/frontend/src/views/charts/MonthSummary.vue
@ -12,10 +12,10 @@


 <script>
-import VueApexCharts from "vue-apexcharts";
-import { baseUri } from "../../variables.js";
+  import VueApexCharts from "vue-apexcharts";
+  import {baseUri} from "../../variables.js";

-export default {
+  export default {
    name: "MonthSummary",
    components: {
      apexchart: VueApexCharts
@ -68,7 +68,7 @@ export default {
              show: true
            },
            y: {
-            formatter: function(value) {
+              formatter: function (value) {
                var decimalTimeString = value;
                var decimalTime = parseFloat(decimalTimeString);
                decimalTime = decimalTime * 60;
@ -114,7 +114,7 @@ export default {
          },
          yaxis: {
            labels: {
-            formatter: function(value) {
+              formatter: function (value) {
                var decimalTimeString = value;
                var decimalTime = parseFloat(decimalTimeString);
                decimalTime = decimalTime * 60;
@ -178,7 +178,7 @@ export default {
      today = yyyy + "-" + mm + "-" + dd;

      while (hasNext) {
-      xhttp.onreadystatechange = function() {
+        xhttp.onreadystatechange = function () {
          if (this.readyState == 4 && this.status == 200) {
            var recordsDB = JSON.parse(xhttp.responseText);
            recordsDB._embedded.records.forEach(tmpRecord => {
@ -220,10 +220,7 @@ export default {
        var record = records[index];

        for (let indexA = 0; indexA < daysToDisplay; indexA++) {
-        if (
-          record.startdate.split("T")[0] ==
-          this.chartOptions.xaxis.categories[indexA]
-        ) {
+          if (record.startdate.split("T")[0] == this.chartOptions.xaxis.categories[indexA]) {
            if (record.type == "PAID") {
              this.series[0].data[indexA] += record.duration;
            } else {
@ -236,11 +233,11 @@ export default {
      this.series[0].data[daysToDisplay - 1] = 0;
      this.series[1].data[daysToDisplay - 1] = 0;
    }
-};
+  };
 </script>

 <style scoped>
-.v-card {
+  .v-card {
    border-radius: 20px !important;
-}
+  }
 </style>
--- a/frontend/src/views/charts/RevenuePie.vue
+++ b/frontend/src/views/charts/RevenuePie.vue
@ -11,15 +11,15 @@
 </template>

 <script>
-import VueApexCharts from "vue-apexcharts";
-import { baseUri } from "../../variables.js";
+  import VueApexCharts from "vue-apexcharts";
+  import {baseUri} from "../../variables.js";

-export default {
+  export default {
    components: {
      apexchart: VueApexCharts
    },
    computed: {
-    chartOptions: function() {
+      chartOptions: function () {
        return {
          labels: ["Working hours", "Pause hours"],
          chart: {
@ -97,7 +97,7 @@ export default {
      var accounts;
      var timeTrackAccountsTMP;
      var accountxhttp = new XMLHttpRequest();
-    accountxhttp.onreadystatechange = function() {
+      accountxhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          accounts = JSON.parse(accountxhttp.responseText);
          timeTrackAccountsTMP = accounts._embedded.accounts;
@ -139,7 +139,7 @@ export default {
      var page = 0;

      while (hasNext) {
-      xhttp.onreadystatechange = function() {
+        xhttp.onreadystatechange = function () {
          if (this.readyState == 4 && this.status == 200) {
            var recordsDB = JSON.parse(xhttp.responseText);
            recordsDB._embedded.records.forEach(tmpRecord => {
@ -173,30 +173,23 @@ export default {

      for (let index = 0; index < records.length; index++) {
        var record = records[index];
-      for (
-        let indexAccs = 0;
-        indexAccs < this.chartOptions.labels.length;
-        indexAccs++
-      ) {
-        if (
-          record.account == this.chartOptions.labels[indexAccs] &&
-          record.type == "PAID"
-        ) {
+        for (let indexAccs = 0; indexAccs < this.chartOptions.labels.length; indexAccs++) {
+          if (record.account == this.chartOptions.labels[indexAccs] && record.type == "PAID") {
            this.series[indexAccs] += record.duration;
          }
        }
      }

      for (let index = 0; index < this.series.length; index++) {
-      this.series[index] = this.series[index] * this.revenue[index] /60;
+        this.series[index] = this.series[index] * this.revenue[index] / 60;
      }
    }
-};
+  };
 </script>


 <style scoped>
-.v-card {
+  .v-card {
    border-radius: 20px !important;
-}
+  }
 </style>
--- a/frontend/src/views/charts/WeekSummary.vue
+++ b/frontend/src/views/charts/WeekSummary.vue
@ -12,10 +12,10 @@


 <script>
-import VueApexCharts from "vue-apexcharts";
-import { baseUri } from "../../variables.js";
+  import VueApexCharts from "vue-apexcharts";
+  import {baseUri} from "../../variables.js";

-export default {
+  export default {
    name: "WeekSummary",
    components: {
      apexchart: VueApexCharts
@ -68,7 +68,7 @@ export default {
              show: false
            },
            y: {
-            formatter: function(value) {
+              formatter: function (value) {
                var decimalTimeString = value;
                var decimalTime = parseFloat(decimalTimeString);
                decimalTime = decimalTime * 60;
@ -114,7 +114,7 @@ export default {
          },
          yaxis: {
            labels: {
-            formatter: function(value) {
+              formatter: function (value) {
                var decimalTimeString = value;
                var decimalTime = parseFloat(decimalTimeString);
                decimalTime = decimalTime * 60;
@ -179,7 +179,7 @@ export default {


      while (hasNext) {
-      xhttp.onreadystatechange = function() {
+        xhttp.onreadystatechange = function () {
          if (this.readyState == 4 && this.status == 200) {
            var recordsDB = JSON.parse(xhttp.responseText);
            recordsDB._embedded.records.forEach(tmpRecord => {
@ -221,10 +221,7 @@ export default {
        var record = records[index];

        for (let indexA = 0; indexA < daysToDisplay; indexA++) {
-        if (
-          record.startdate.split("T")[0] ==
-          this.chartOptions.xaxis.categories[indexA]
-        ) {
+          if (record.startdate.split("T")[0] == this.chartOptions.xaxis.categories[indexA]) {
            if (record.type == "PAID") {
              this.series[0].data[indexA] += record.duration;
            } else {
@ -237,11 +234,11 @@ export default {
      this.series[0].data[daysToDisplay - 1] = 0;
      this.series[1].data[daysToDisplay - 1] = 0;
    }
-};
+  };
 </script>

 <style scoped>
-.v-card {
+  .v-card {
    border-radius: 20px !important;
-}
+  }
 </style>
--- a/frontend/src/views/charts/WorkPausePie.vue
+++ b/frontend/src/views/charts/WorkPausePie.vue
@ -11,10 +11,10 @@
 </template>

 <script>
-import VueApexCharts from "vue-apexcharts";
-import { baseUri } from "../../variables.js";
+  import VueApexCharts from "vue-apexcharts";
+  import {baseUri} from "../../variables.js";

-export default {
+  export default {
    components: {
      apexchart: VueApexCharts
    },
@ -50,7 +50,7 @@ export default {
            show: false
          },
          y: {
-          formatter: function(value) {
+            formatter: function (value) {
              var decimalTimeString = value;
              var decimalTime = parseFloat(decimalTimeString);
              decimalTime = decimalTime * 60;
@ -84,7 +84,6 @@ export default {
          position: "left",
          offsetY: 40
        },
-
        responsive: [
          {
            breakpoint: 480,
@ -107,7 +106,7 @@ export default {
      var page = 0;

      while (hasNext) {
-      xhttp.onreadystatechange = function() {
+        xhttp.onreadystatechange = function () {
          if (this.readyState == 4 && this.status == 200) {
            var recordsDB = JSON.parse(xhttp.responseText);
            recordsDB._embedded.records.forEach(tmpRecord => {
@ -155,12 +154,12 @@ export default {
      this.series[0] = paidTime;
      this.series[1] = breakTime;
    }
-};
+  };
 </script>


 <style scoped>
-.v-card {
+  .v-card {
    border-radius: 20px !important;
-}
+  }
 </style>