From 1d5c2737aa9c8eda3e305235e5f8e372b4e17f56 Mon Sep 17 00:00:00 2001
From: Patrick Fruh <patrick@kaeltis.de>
Date: Tue, 9 Jun 2020 20:59:22 +0200
Subject: [PATCH] Added space between value and percent sign

Also added space between number and percent sign to follow International System of Units (SI)
---
 frontend/src/components/Service/MiniSparkLine.vue    | 2 +-
 frontend/src/components/Service/ServiceChart.vue     | 2 +-
 frontend/src/components/Service/ServiceInfo.vue      | 4 ++--
 frontend/src/components/Service/ServiceSparkLine.vue | 2 +-
 frontend/src/components/Service/ServiceTopStats.vue  | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Service/MiniSparkLine.vue b/frontend/src/components/Service/MiniSparkLine.vue
index 12f8aa38..e5141ca0 100644
--- a/frontend/src/components/Service/MiniSparkLine.vue
+++ b/frontend/src/components/Service/MiniSparkLine.vue
@@ -55,7 +55,7 @@
             show: false,
           },
           y: {
-            formatter: (value) => { return value + "%" },
+            formatter: (value) => { return value + " %" },
           },
         },
         title: {
diff --git a/frontend/src/components/Service/ServiceChart.vue b/frontend/src/components/Service/ServiceChart.vue
index c9363e56..14283cee 100644
--- a/frontend/src/components/Service/ServiceChart.vue
+++ b/frontend/src/components/Service/ServiceChart.vue
@@ -130,7 +130,7 @@
                           show: false,
                       },
                     y: {
-                      formatter: (value) => { return value + "%" },
+                      formatter: (value) => { return value + " %" },
                     },
                   },
                   legend: {
diff --git a/frontend/src/components/Service/ServiceInfo.vue b/frontend/src/components/Service/ServiceInfo.vue
index d12b80be..91434979 100644
--- a/frontend/src/components/Service/ServiceInfo.vue
+++ b/frontend/src/components/Service/ServiceInfo.vue
@@ -23,7 +23,7 @@
 
                     <div v-if="service.online" class="col-3 text-left">
                         <span class="text-success font-5 font-weight-bold">
-                            {{service.online_24_hours.toString()}}%
+                            {{service.online_24_hours.toString()}} %
                         </span>
                         <span class="font-2 d-block">Total Uptime</span>
                     </div>
@@ -83,7 +83,7 @@
                     </router-link>
                 </div>
                 <div class="col-12 col-md-3 mb-2 mb-md-0 mt-0 mt-md-1">
-                    <span class="text-black-50 float-md-right">{{service.online_7_days}}% Uptime</span>
+                    <span class="text-black-50 float-md-right">{{service.online_7_days}} % Uptime</span>
                 </div>
 
             </div>
diff --git a/frontend/src/components/Service/ServiceSparkLine.vue b/frontend/src/components/Service/ServiceSparkLine.vue
index 5141f578..599e1a9c 100644
--- a/frontend/src/components/Service/ServiceSparkLine.vue
+++ b/frontend/src/components/Service/ServiceSparkLine.vue
@@ -72,7 +72,7 @@
             show: false,
           },
           y: {
-            formatter: (value) => { return value + "%" },
+            formatter: (value) => { return value + " %" },
           },
         },
         title: {
diff --git a/frontend/src/components/Service/ServiceTopStats.vue b/frontend/src/components/Service/ServiceTopStats.vue
index d7bc49a1..e6baf0f3 100644
--- a/frontend/src/components/Service/ServiceTopStats.vue
+++ b/frontend/src/components/Service/ServiceTopStats.vue
@@ -5,11 +5,11 @@
             <span class="font-1 subtitle">Average Response</span>
         </div>
         <div class="col-4">
-            <span class="font-5 d-block font-weight-bold">{{service.online_24_hours}}%</span>
+            <span class="font-5 d-block font-weight-bold">{{service.online_24_hours}} %</span>
             <span class="font-1 subtitle">Uptime last 24 Hours</span>
         </div>
         <div class="col-4">
-            <span class="font-5 d-block font-weight-bold">{{service.online_7_days}}%</span>
+            <span class="font-5 d-block font-weight-bold">{{service.online_7_days}} %</span>
             <span class="font-1 subtitle">Uptime last 7 Days</span>
         </div>
     </div>