From ed38bed0896aa33abebf63ad394c35bf387491c3 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 12 Sep 2024 16:40:16 +0200
Subject: [PATCH] Visual update progressbar component

---
 src/lib/components/progressBarBig.svelte      | 12 +--
 .../components/progressbar/ProgressBar.svelte | 24 ++++-
 .../components/progressbar/_progressbar.scss  | 92 ++++++++++++++++++-
 3 files changed, 117 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/progressBarBig.svelte b/src/lib/components/progressBarBig.svelte
index cbaeaefb7..f3d19c36d 100644
--- a/src/lib/components/progressBarBig.svelte
+++ b/src/lib/components/progressBarBig.svelte
@@ -29,11 +29,11 @@
         </p>
     </div>
     {#if showBar}
-        <ProgressBar maxSize={100} data={[]}/>
-        <div
-            class="progress-bar-container u-margin-block-start-16"
-            class:is-warning={progress >= 75 && progress < 100}
-            class:is-danger={progress >= 100}
-            style:--graph-size={Math.max(Math.min(progress, maximum), minimum) + '%'} />
+        <ProgressBar maxSize={100} data={[{size: 10, color: '#85DBD8', tooltip: {title: "First Appwrite project", label: "107GB", linkTitle: "View usage", linkPath: "/something"}},{size: 20, color: '#68A3FE59', tooltip: {title: "Second Appwrite project", label: "107GB", linkTitle: "View usage", linkPath: "/something"}},{size: 10, color: '#7C67FE59', tooltip: {title: "Third Appwrite project", label: "107GB", linkTitle: "View usage", linkPath: "/something"}}]}/>
+<!--        <div-->
+<!--            class="progress-bar-container u-margin-block-start-16"-->
+<!--            class:is-warning={progress >= 75 && progress < 100}-->
+<!--            class:is-danger={progress >= 100}-->
+<!--            style:&#45;&#45;graph-size={Math.max(Math.min(progress, maximum), minimum) + '%'} />-->
     {/if}
 </section>
diff --git a/src/lib/components/progressbar/ProgressBar.svelte b/src/lib/components/progressbar/ProgressBar.svelte
index 8625bf869..e3810d0ac 100644
--- a/src/lib/components/progressbar/ProgressBar.svelte
+++ b/src/lib/components/progressbar/ProgressBar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { ProgressbarProps } from '$lib/components';
+    import type { ProgressbarData, ProgressbarProps } from '$lib/components';
 
     type $$Props = ProgressbarProps;
 
@@ -8,9 +8,29 @@
      */
     export let maxSize: $$Props['maxSize'];
 
+    /**
+     * The remaining value of the progressbar
+     */
+    let remainder = $$props.data.reduce((sum:number, item:ProgressbarData) => sum - item.size, maxSize);
+
 </script>
 <section class="progressbar__container">
-
+    {#each $$props.data as item}
+        <div class="progressbar__content" style="background-color:{item.color}; width: {(item.size/maxSize)*100}%;">
+            {#if item.tooltip}
+                <div class="progressbar__content-tooltip">
+                    <div>
+                    <span class="progressbar__content-tooltip-title">{item.tooltip.title}</span>
+                    <span class="progressbar__content-tooltip-label">{item.tooltip.label}</span>
+                    </div>
+                        <a href="{item.tooltip.linkPath}">{item.tooltip.linkTitle}</a>
+                </div>
+            {/if}
+        </div>
+    {/each}
+    {#if remainder > 0}
+        <div class="progressbar__content" style="width: {(remainder/maxSize)*100}%;"/>
+    {/if}
 </section>
 
 
diff --git a/src/lib/components/progressbar/_progressbar.scss b/src/lib/components/progressbar/_progressbar.scss
index facf05510..9bb4cb070 100644
--- a/src/lib/components/progressbar/_progressbar.scss
+++ b/src/lib/components/progressbar/_progressbar.scss
@@ -1,5 +1,13 @@
 @mixin base {
 
+  :root {
+    --progressbar-border-radius: 0.25rem;
+    --progressbar-tooltip-background-color: #FFFFFF;
+    --progressbar-tooltip-border-color: #EDEDF0;
+    --progressbar-tooltip-label-color: #818186;
+    --progressbar-tooltip-link-color: #6C6C71;
+  }
+
   :global(.theme-dark) {
     --progressbar-background-color: var(--neutral-800,#2D2D31);
   }
@@ -7,14 +15,92 @@
     --progressbar-background-color: var(--neutral-40, #F4F4F7);
   }
 
-
-
   .progressbar {
 
     &__container {
       height: 0.5rem;
       background-color: var(--progressbar-background-color);
-      border-radius: 0.25rem;
+      border-radius: var(--progressbar-border-radius);
+      display: flex;
+      flex-direction: row;
+      gap: 2px;
+    }
+
+    &__content {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+
+      &::before {
+        content: "";
+        height: 2.5rem;
+        margin-top: -1.25rem;
+        width: 100%;
+      }
+
+      &:first-child {
+        border-top-left-radius: var(--progressbar-border-radius);
+        border-bottom-left-radius: var(--progressbar-border-radius);
+      }
+      &:last-child {
+        border-top-right-radius: var(--progressbar-border-radius);
+        border-bottom-right-radius: var(--progressbar-border-radius);
+      }
+
+      &-tooltip {
+        display: none;
+        position: absolute;
+        background-color: var(--progressbar-tooltip-background-color);
+        padding: 0.75rem;
+        margin-top: -5.25rem;
+        border: 1px solid var(--progressbar-tooltip-border-color);
+        border-radius: 0.5rem;
+        flex-direction: column;
+        gap: 0.25rem;
+
+       &::before, &::after {
+         top: 100%;
+         left: 50%;
+         border: solid transparent;
+         content: "";
+         height: 0;
+         width: 0;
+         position: absolute;
+         pointer-events: none;
+       }
+        &::after {
+          border-top-color: var(--progressbar-tooltip-background-color);
+          border-width: 10px;
+          margin-left: -10px;
+        }
+        &::before {
+          border-top-color: var(--progressbar-tooltip-border-color);;
+          border-width: 11px;
+          margin-left: -11px;
+        }
+        &:hover {
+          display: flex;
+        }
+
+        &-title {
+          font-weight: 600;
+          margin-right: 0.5rem;
+        }
+        &-label {
+          color: var(--progressbar-tooltip-label-color);
+        }
+
+        a{
+          color: var(--progressbar-tooltip-link-color);
+          text-decoration: underline;
+        }
+      }
+
+      &:hover {
+        .progressbar__content-tooltip {
+          display: flex;
+        }
+      }
     }
 
   }