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

---
 src/components/Basic/Bar.svelte | 35 +++++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 14 deletions(-)

(limited to 'src/components/Basic/Bar.svelte')

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>
-- 
cgit v1.2.3