Merge pull request #2844 from appwrite/fix-progress

Fix: hide empty segment

Author: ItzNotABug

src/lib/components/progressbar/ProgressBar.svelte

@@ -9,19 +9,31 @@
      */
     export let maxSize: $$Props['maxSize'];
 
+    /**
+     * Hides empty segments where size is <= 0;
+     */
+    export let hideEmptySegments: $$Props['hideEmptySegments'] = false;
+
     /**
      * The data for the progressbar
      */
     export let data: $$Props['data'];
 
+    $: segments = hideEmptySegments ? data.filter((item) => item.size > 0) : data;
+
     /**
      * The remaining value of the progressbar
      */
-    $: remainder = data.reduce((sum: number, item: ProgressbarData) => sum - item.size, maxSize);
+    $: remainder = segments.reduce(
+        (sum: number, item: ProgressbarData) => sum - item.size,
+        maxSize
+    );
+
+    $: segmentGap = segments.length > 1 ? '2px' : '0px';
 </script>
 
-<section class="progressbar__container">
-    {#each $$props.data as item}
+<section class="progressbar__container" style:--progressbar-segment-gap={segmentGap}>
+    {#each segments as item}
         <Tooltip disabled={!item.tooltip} maxWidth="max-content">
             <div
                 class="progressbar__content"
@@ -64,7 +76,7 @@
             border-radius: var(--progressbar-border-radius);
             display: flex;
             flex-direction: row;
-            gap: 2px;
+            gap: var(--progressbar-segment-gap, 2px);
             margin-top: 1rem;
             overflow: hidden;
         }

src/lib/components/progressbar/index.ts

@@ -11,6 +11,7 @@ export type ProgressbarData = {
 
 export type ProgressbarProps = {
     maxSize: number;
+    hideEmptySegments?: boolean;
     data: Array<ProgressbarData>;
 };
 

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/varchar.svelte

@@ -145,7 +145,10 @@
                 </span>
             </Tooltip>
         </Layout.Stack>
-        <ProgressBar maxSize={bytesMax} data={getProgressData(bytesUsed, bytesMax, size)} />
+        <ProgressBar
+            hideEmptySegments
+            maxSize={bytesMax}
+            data={getProgressData(bytesUsed, bytesMax, size)} />
         {#if exceedsLimit}
             <Typography.Text variant="m-400" color="--fgcolor-danger">
                 This column exceeds the remaining row space. Consider using text, mediumtext, or