From c863afe68005e4b54c0b5d4a9cf917b0e35e6f84 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Thu, 28 Apr 2022 13:08:53 +0200
Subject: Add pretty bar chart

---
 .../Forecast/OneHourForecast/PredictionItem.svelte          | 11 ++++++++++-
 .../Forecast/OutlookTwentySevenDay/PredictionItem.svelte    | 13 +++++++++++--
 .../Forecast/ThreeDayForecast/PredictionItem.svelte         | 11 ++++++++++-
 3 files changed, 31 insertions(+), 4 deletions(-)

(limited to 'src/components/Forecast')

diff --git a/src/components/Forecast/OneHourForecast/PredictionItem.svelte b/src/components/Forecast/OneHourForecast/PredictionItem.svelte
index 201c4f5..acde3c2 100644
--- a/src/components/Forecast/OneHourForecast/PredictionItem.svelte
+++ b/src/components/Forecast/OneHourForecast/PredictionItem.svelte
@@ -1,5 +1,6 @@
 <script>
     import Chip from "../../Basic/Chip.svelte";
+    import Bar from "../../Basic/Bar.svelte";
 
     export let prediction;
 
@@ -71,6 +72,12 @@
         width: 1rem;
         text-align: center;
     }
+    .KP {
+        flex-grow: 1;
+        margin-right: 1rem;
+        font-size: 1.7rem;
+        height: 2.2rem;
+    }
 
 </style>
 
@@ -79,8 +86,10 @@
         <h3>{time}</h3>
         <p>{date}</p>
     </div>
+    <div class="KP">
+        <Bar percentage={kp/9} value={kp} />
+    </div>
     <div class="data">
-        <h2>{kp}</h2>
         {#if hasNOMETData}
         <div>
             <p><i class="fas fa-thermometer-half"></i> {Math.round(temp)}°C</p>
diff --git a/src/components/Forecast/OutlookTwentySevenDay/PredictionItem.svelte b/src/components/Forecast/OutlookTwentySevenDay/PredictionItem.svelte
index 201c4f5..8ea0cb7 100644
--- a/src/components/Forecast/OutlookTwentySevenDay/PredictionItem.svelte
+++ b/src/components/Forecast/OutlookTwentySevenDay/PredictionItem.svelte
@@ -1,5 +1,6 @@
 <script>
     import Chip from "../../Basic/Chip.svelte";
+    import Bar from "../../Basic/Bar.svelte";
 
     export let prediction;
 
@@ -20,7 +21,7 @@
     let time = zpad(prediction["time"].getHours().toString()) + ":" + zpad(prediction["time"].getMinutes().toString());
     let temp = prediction["temp"];
     let clouds = prediction["clouds"];
-    let hasNOMETData = prediction["hasNOMETData"];
+    let hasNOMETData = false;
 </script>
 
 <style>
@@ -71,6 +72,12 @@
         width: 1rem;
         text-align: center;
     }
+    .KP {
+        flex-grow: 1;
+        margin-right: 1rem;
+        font-size: 1.7rem;
+        height: 2.2rem;
+    }
 
 </style>
 
@@ -79,8 +86,10 @@
         <h3>{time}</h3>
         <p>{date}</p>
     </div>
+    <div class="KP">
+        <Bar percentage={kp/9} value={kp} />
+    </div>
     <div class="data">
-        <h2>{kp}</h2>
         {#if hasNOMETData}
         <div>
             <p><i class="fas fa-thermometer-half"></i> {Math.round(temp)}°C</p>
diff --git a/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte b/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte
index 0d4a94d..81f527b 100644
--- a/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte
+++ b/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte
@@ -1,5 +1,6 @@
 <script>
     import Chip from "../../Basic/Chip.svelte";
+    import Bar from "../../Basic/Bar.svelte";
 
     export let prediction;
 
@@ -71,6 +72,12 @@
         width: 1rem;
         text-align: center;
     }
+    .KP {
+        flex-grow: 1;
+        margin-right: 1rem;
+        font-size: 1.7rem;
+        height: 2.2rem;
+    }
 
 </style>
 
@@ -84,8 +91,10 @@
             <Chip>{prediction.observed}</Chip>
         </div>
     {/if}
+    <div class="KP">
+        <Bar percentage={kp/9} value={kp} />
+    </div>
     <div class="data">
-        <h2>{kp}</h2>
         {#if hasNOMETData}
         <div>
             <p><i class="fas fa-thermometer-half"></i> {Math.round(temp)}°C</p>
-- 
cgit v1.2.3