Add pretty bar chart

4 files changed, 52 insertions, 18 deletions

diff --git a/src/components/Basic/Bar.svelte b/src/components/Basic/Bar.svelte
index 7b17c3e..88d541e 100644
--- a/src/components/Basic/Bar.svelte
+++ b/src/components/Basic/Bar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    export let percentage = 0.7;
-    export let vertical = false;
+    export let percentage;
+    export let value;
 </script>
 
 <style>
@@ -10,7 +10,7 @@
     
     .wrapper {
         position: relative;
-        background-color: #c6c6c6;
+        /* background-color: #c6c6c6; */
         border-radius:15px;
         width: 100%;
         height: 100%;
@@ -22,27 +22,34 @@
         border-radius: 15px;
         height: 100%;
         width: 100%;
-        top: calc(100% - var(--progress));
+        left: calc(100% - var(--progress));
     }
     
     .bar {
         position: absolute;
         height: 100%;
         width: 100%;
-        bottom: calc(100% - var(--progress));
+        right: calc(100% - var(--progress));
         overflow: hidden;
-        background: linear-gradient(0deg, 
-                                    rgba(217,217,217,1) 0%, 
-                                    rgba(164,255,177,1) 70%, 
-                                    rgba(255,136,240,1) 100%);
+        background: linear-gradient(90deg, 
+                                    rgba(255, 42,228,1) 0%,
+                                    rgba(164,255,177,1) 60%, 
+                                    rgba(214,255,241,1) 85%,
+                                    rgba(255,255,255,1) 100%); 
         border-radius: 15px;
     }
+
+    .value {
+        position: absolute;
+        right: 0.1rem;
+        top: 0;
+        font-size: 1.5rem;
+    }
 </style>
 
-<div>
-    <div class="wrapper" class:vertical style="--progress: {percentage*100}%">
-        <div class="bar-wrapper">
-            <div class="bar"></div>
-        </div>
+<div class="wrapper" style="--progress: {percentage*100}%">
+    <div class="bar-wrapper">
+        <div class="bar"></div>
     </div>
+    <span class="value">{value}</span>
 </div>
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>