From 417ab3da505fcb38521b029cb67365a1fb644e21 Mon Sep 17 00:00:00 2001
From: Marcel Schwarz <marcel@icaotix.de>
Date: Wed, 22 Jul 2020 00:10:35 +0200
Subject: [PATCH] Extract duplicate formatter code out of chart definitions

---
 frontend/src/views/charts/AccountPie.vue    | 69 +++------------------
 frontend/src/views/charts/ApexFormatters.js | 20 ++++++
 frontend/src/views/charts/MonthSummary.vue  | 63 +++----------------
 frontend/src/views/charts/RevenuePie.vue    | 32 ++--------
 frontend/src/views/charts/WeekSummary.vue   | 59 ++----------------
 frontend/src/views/charts/WorkPausePie.vue  | 37 ++---------
 6 files changed, 51 insertions(+), 229 deletions(-)
 create mode 100644 frontend/src/views/charts/ApexFormatters.js

diff --git a/frontend/src/views/charts/AccountPie.vue b/frontend/src/views/charts/AccountPie.vue
index a3416f5..d26e56a 100644
--- a/frontend/src/views/charts/AccountPie.vue
+++ b/frontend/src/views/charts/AccountPie.vue
@@ -13,6 +13,7 @@
 <script>
   import VueApexCharts from "vue-apexcharts";
   import {baseUri} from "../../variables.js";
+  import {timeFormatter} from "./ApexFormatters";
 
   export default {
     components: {
@@ -46,69 +47,23 @@
             enabled: true,
             followCursor: true,
             fillSeriesColor: false,
-            x: {
-              show: false
-            },
+            x: {show: false},
             y: {
               formatter: value => {
-                var revenueTMP = 0;
-                for (let index = 0; index < this.series.length; index++) {
-                  if (value == this.series[index]) {
-                    revenueTMP = this.revenue[index];
-                  }
-                }
-                revenueTMP = (revenueTMP / 60) * value * 1.0;
-                revenueTMP = Math.round(revenueTMP * 100) / 100;
-                var decimalTimeString = value;
-                var decimalTime = parseFloat(decimalTimeString);
-                decimalTime = decimalTime * 60;
-                var hours = Math.floor(decimalTime / (60 * 60));
-
-                decimalTime = decimalTime - hours * 60 * 60;
-                var minutes = Math.floor(decimalTime / 60);
-
-                decimalTime = decimalTime - minutes * 60;
-                var seconds = Math.round(decimalTime);
-
-                if (hours < 10) {
-                  hours = "0" + hours;
-                }
-                if (minutes < 10) {
-                  minutes = "0" + minutes;
-                }
-                if (seconds < 10) {
-                  seconds = "0" + seconds;
-                }
-                return (
-                  hours +
-                  ":" +
-                  minutes +
-                  ":" +
-                  seconds +
-                  " with " +
-                  revenueTMP +
-                  "$ revenue."
-                );
+                let idxInRevenue = this.series.findIndex(revenue => revenue === value)
+                let revenue = (this.revenue[idxInRevenue] / 60) * value;
+                revenue = Math.ceil(revenue);
+                return (timeFormatter(value) + " with " + revenue + "$ revenue.")
               }
             }
           },
-          colors: [
-            "#0096ff",
-            "#e21d1f",
-            "#03ac13",
-            "#800080",
-            "#f9d71c",
-            "ff1694"
-          ],
-          theme: {
-            mode: "dark"
-          },
+          colors: ["#0096ff", "#e21d1f", "#03ac13", "#800080", "#f9d71c", "#ff1694"],
+          theme: {mode: "dark"},
           legend: {
             show: false,
             position: "left",
             offsetY: 40
           },
-
           responsive: [
             {
               breakpoint: 480,
@@ -148,11 +103,7 @@
         false
       );
 
-      accountxhttp.setRequestHeader(
-        "Authorization",
-        sessionStorage.getItem("jwt")
-      );
-
+      accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
       accountxhttp.send(null);
 
       this.chartOptions.labels = new Array(timeTrackAccountsTMP.length);
@@ -204,7 +155,6 @@
         );
 
         xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-
         xhttp.send(null);
       }
 
@@ -220,7 +170,6 @@
   };
 </script>
 
-
 <style scoped>
   .v-card {
     border-radius: 20px !important;
diff --git a/frontend/src/views/charts/ApexFormatters.js b/frontend/src/views/charts/ApexFormatters.js
new file mode 100644
index 0000000..deab179
--- /dev/null
+++ b/frontend/src/views/charts/ApexFormatters.js
@@ -0,0 +1,20 @@
+const timeFormatter = value => {
+  let decimalTime = parseFloat(value);
+
+  decimalTime = decimalTime * 60;
+  let hours = Math.floor(decimalTime / (60 * 60));
+
+  decimalTime = decimalTime - hours * 60 * 60;
+  let minutes = Math.floor(decimalTime / 60);
+
+  decimalTime = decimalTime - minutes * 60;
+  let seconds = Math.round(decimalTime);
+
+  hours = hours > 10 ? hours : "0" + hours
+  minutes = minutes > 10 ? minutes : "0" + minutes
+  seconds = seconds > 10 ? seconds : "0" + seconds
+
+  return (hours + ":" + minutes + ":" + seconds);
+}
+
+export {timeFormatter};
diff --git a/frontend/src/views/charts/MonthSummary.vue b/frontend/src/views/charts/MonthSummary.vue
index 56c5d68..41713f8 100644
--- a/frontend/src/views/charts/MonthSummary.vue
+++ b/frontend/src/views/charts/MonthSummary.vue
@@ -14,6 +14,7 @@
 <script>
   import VueApexCharts from "vue-apexcharts";
   import {baseUri} from "../../variables.js";
+  import {timeFormatter} from "./ApexFormatters";
 
   export default {
     name: "MonthSummary",
@@ -55,40 +56,13 @@
             }
           },
           colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
-          theme: {
-            mode: "dark"
-          },
-          dataLabels: {
-            enabled: false
-          },
+          theme: {mode: "dark"},
+          dataLabels: {enabled: false},
           tooltip: {
             enabled: true,
             followCursor: true,
-            x: {
-              show: true
-            },
-            y: {
-              formatter: function (value) {
-                var decimalTimeString = value;
-                var decimalTime = parseFloat(decimalTimeString);
-                decimalTime = decimalTime * 60;
-                var hours = Math.floor(decimalTime / (60 * 60));
-                decimalTime = decimalTime - hours * 60 * 60;
-                var minutes = Math.floor(decimalTime / 60);
-                decimalTime = decimalTime - minutes * 60;
-                var seconds = Math.round(decimalTime);
-                if (hours < 10) {
-                  hours = "0" + hours;
-                }
-                if (minutes < 10) {
-                  minutes = "0" + minutes;
-                }
-                if (seconds < 10) {
-                  seconds = "0" + seconds;
-                }
-                return hours + ":" + minutes + ":" + seconds;
-              }
-            }
+            x: {show: true},
+            y: {formatter: timeFormatter}
           },
           responsive: [
             {
@@ -113,37 +87,14 @@
             categories: []
           },
           yaxis: {
-            labels: {
-              formatter: function (value) {
-                var decimalTimeString = value;
-                var decimalTime = parseFloat(decimalTimeString);
-                decimalTime = decimalTime * 60;
-                var hours = Math.floor(decimalTime / (60 * 60));
-                decimalTime = decimalTime - hours * 60 * 60;
-                var minutes = Math.floor(decimalTime / 60);
-                decimalTime = decimalTime - minutes * 60;
-                var seconds = Math.round(decimalTime);
-                if (hours < 10) {
-                  hours = "0" + hours;
-                }
-                if (minutes < 10) {
-                  minutes = "0" + minutes;
-                }
-                if (seconds < 10) {
-                  seconds = "0" + seconds;
-                }
-                return hours + ":" + minutes + ":" + seconds;
-              }
-            }
+            labels: {formatter: timeFormatter}
           },
           legend: {
             show: false,
             position: "left",
             offsetY: 40
           },
-          fill: {
-            opacity: 1
-          }
+          fill: {opacity: 1}
         }
       };
     },
diff --git a/frontend/src/views/charts/RevenuePie.vue b/frontend/src/views/charts/RevenuePie.vue
index ac2057f..94a7ffa 100644
--- a/frontend/src/views/charts/RevenuePie.vue
+++ b/frontend/src/views/charts/RevenuePie.vue
@@ -46,32 +46,16 @@
             enabled: true,
             followCursor: true,
             fillSeriesColor: false,
-            x: {
-              show: false
-            },
-            y: {
-              formatter: value => {
-                return Math.round(value * 100) / 100 + "$"
-              }
-            }
-          },
-          colors: [
-            "#0096ff",
-            "#e21d1f",
-            "#03ac13",
-            "#800080",
-            "#f9d71c",
-            "ff1694"
-          ],
-          theme: {
-            mode: "dark"
+            x: {show: false},
+            y: {formatter: value => Math.ceil(value) + "$"}
           },
+          colors: ["#0096ff", "#e21d1f", "#03ac13", "#800080", "#f9d71c", "ff1694"],
+          theme: {mode: "dark"},
           legend: {
             show: false,
             position: "left",
             offsetY: 40
           },
-
           responsive: [
             {
               breakpoint: 480,
@@ -111,11 +95,7 @@
         false
       );
 
-      accountxhttp.setRequestHeader(
-        "Authorization",
-        sessionStorage.getItem("jwt")
-      );
-
+      accountxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
       accountxhttp.send(null);
 
       this.chartOptions.labels = new Array(timeTrackAccountsTMP.length);
@@ -167,7 +147,6 @@
         );
 
         xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-
         xhttp.send(null);
       }
 
@@ -187,7 +166,6 @@
   };
 </script>
 
-
 <style scoped>
   .v-card {
     border-radius: 20px !important;
diff --git a/frontend/src/views/charts/WeekSummary.vue b/frontend/src/views/charts/WeekSummary.vue
index f0ab0e2..7e3e263 100644
--- a/frontend/src/views/charts/WeekSummary.vue
+++ b/frontend/src/views/charts/WeekSummary.vue
@@ -14,6 +14,7 @@
 <script>
   import VueApexCharts from "vue-apexcharts";
   import {baseUri} from "../../variables.js";
+  import {timeFormatter} from "./ApexFormatters";
 
   export default {
     name: "WeekSummary",
@@ -55,40 +56,13 @@
             }
           },
           colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
-          theme: {
-            mode: "dark"
-          },
-          dataLabels: {
-            enabled: false
-          },
+          theme: {mode: "dark"},
+          dataLabels: {enabled: false},
           tooltip: {
             enabled: true,
             followCursor: true,
-            x: {
-              show: false
-            },
-            y: {
-              formatter: function (value) {
-                var decimalTimeString = value;
-                var decimalTime = parseFloat(decimalTimeString);
-                decimalTime = decimalTime * 60;
-                var hours = Math.floor(decimalTime / (60 * 60));
-                decimalTime = decimalTime - hours * 60 * 60;
-                var minutes = Math.floor(decimalTime / 60);
-                decimalTime = decimalTime - minutes * 60;
-                var seconds = Math.round(decimalTime);
-                if (hours < 10) {
-                  hours = "0" + hours;
-                }
-                if (minutes < 10) {
-                  minutes = "0" + minutes;
-                }
-                if (seconds < 10) {
-                  seconds = "0" + seconds;
-                }
-                return hours + ":" + minutes + ":" + seconds;
-              }
-            }
+            x: {show: false},
+            y: {formatter: timeFormatter}
           },
           responsive: [
             {
@@ -113,28 +87,7 @@
             categories: []
           },
           yaxis: {
-            labels: {
-              formatter: function (value) {
-                var decimalTimeString = value;
-                var decimalTime = parseFloat(decimalTimeString);
-                decimalTime = decimalTime * 60;
-                var hours = Math.floor(decimalTime / (60 * 60));
-                decimalTime = decimalTime - hours * 60 * 60;
-                var minutes = Math.floor(decimalTime / 60);
-                decimalTime = decimalTime - minutes * 60;
-                var seconds = Math.round(decimalTime);
-                if (hours < 10) {
-                  hours = "0" + hours;
-                }
-                if (minutes < 10) {
-                  minutes = "0" + minutes;
-                }
-                if (seconds < 10) {
-                  seconds = "0" + seconds;
-                }
-                return hours + ":" + minutes + ":" + seconds;
-              }
-            }
+            labels: {formatter: timeFormatter}
           },
           legend: {
             show: false,
diff --git a/frontend/src/views/charts/WorkPausePie.vue b/frontend/src/views/charts/WorkPausePie.vue
index 9c188b0..6f421b0 100644
--- a/frontend/src/views/charts/WorkPausePie.vue
+++ b/frontend/src/views/charts/WorkPausePie.vue
@@ -13,6 +13,7 @@
 <script>
   import VueApexCharts from "vue-apexcharts";
   import {baseUri} from "../../variables.js";
+  import {timeFormatter} from "./ApexFormatters";
 
   export default {
     components: {
@@ -46,39 +47,11 @@
           enabled: true,
           followCursor: true,
           fillSeriesColor: false,
-          x: {
-            show: false
-          },
-          y: {
-            formatter: function (value) {
-              var decimalTimeString = value;
-              var decimalTime = parseFloat(decimalTimeString);
-              decimalTime = decimalTime * 60;
-              var hours = Math.floor(decimalTime / (60 * 60));
-
-              decimalTime = decimalTime - hours * 60 * 60;
-              var minutes = Math.floor(decimalTime / 60);
-
-              decimalTime = decimalTime - minutes * 60;
-              var seconds = Math.round(decimalTime);
-
-              if (hours < 10) {
-                hours = "0" + hours;
-              }
-              if (minutes < 10) {
-                minutes = "0" + minutes;
-              }
-              if (seconds < 10) {
-                seconds = "0" + seconds;
-              }
-              return hours + ":" + minutes + ":" + seconds;
-            }
-          }
+          x: {show: false},
+          y: {formatter: timeFormatter}
         },
         colors: ["#0096ff", "#e21d1f", "#546E7A", "#E91E63", "#FF9800"],
-        theme: {
-          mode: "dark"
-        },
+        theme: {mode: "dark"},
         legend: {
           show: false,
           position: "left",
@@ -134,7 +107,6 @@
         );
 
         xhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
-
         xhttp.send(null);
       }
 
@@ -157,7 +129,6 @@
   };
 </script>
 
-
 <style scoped>
   .v-card {
     border-radius: 20px !important;