feat(tauri/ui): chart title, minor styling cleanup

rainlanguage · Feb 11, 2024 · 48d92bc · 48d92bc
1 parent b09d138
commit 48d92bc
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/tauri-app/src/lib/components/ChartHistogram.svelte b/tauri-app/src/lib/components/ChartHistogram.svelte
@@ -8,6 +8,7 @@
   export let data: {value: number, time: UTCTimestamp, color?: string}[] = [];
   export let loading = false;
   export let emptyMessage = "None found"
+  export let title: string | undefined = undefined;
 
   const TIME_DELTA_24_HOURS = 60 * 60 * 24;
   const TIME_DELTA_7_DAYS = TIME_DELTA_24_HOURS * 7;
@@ -73,19 +74,28 @@
 
 <div class="w-full h-full relative">
   <div bind:this={chartElement} class="w-full min-h-[32rem] h-full" {...$$props}></div>
-  {#if data.length > 0 || loading}
-    <div class="absolute top-5 right-5 z-50">
-      {#if loading}
-        <Spinner class="mr-2 h-4 w-4" color="white" />
-      {/if}
-        <ButtonGroup class="bg-gray-800">
-          <ButtonTab on:click={() => (timeDelta = TIME_DELTA_1_YEAR)} active={timeDelta === TIME_DELTA_1_YEAR} size="xs" class="px-2 py-1">1 Year</ButtonTab>
-          <ButtonTab on:click={() => (timeDelta = TIME_DELTA_30_DAYS)} active={timeDelta === TIME_DELTA_30_DAYS} size="xs" class="px-2 py-1">30 Days</ButtonTab>
-          <ButtonTab on:click={() => (timeDelta = TIME_DELTA_7_DAYS)} active={timeDelta === TIME_DELTA_7_DAYS} size="xs" class="px-2 py-1">7 Days</ButtonTab>
-          <ButtonTab on:click={() => (timeDelta = TIME_DELTA_24_HOURS)} active={timeDelta === TIME_DELTA_24_HOURS} size="xs" class="px-2 py-1">24 Hours</ButtonTab>
-        </ButtonGroup>
-    </div>
-  {:else}
-    <div class="absolute top-5 z-50 w-full text-center text-gray-900 dark:text-white">{emptyMessage}</div>
-  {/if}
+
+  <div class="absolute top-5 left-5 z-50 text-gray-900 dark:text-white">
+    {#if title !== undefined}
+      <div class="text-xl mb-2">{title}</div>
+    {/if}
+
+    {#if data.length === 0 && !loading}
+      <div>{emptyMessage}</div>
+    {/if}
+  </div>
+
+  <div class="absolute top-5 right-5 z-50">
+    {#if loading}
+      <Spinner class="mr-2 h-4 w-4" color="white" />
+    {/if}
+    {#if data.length > 0}
+      <ButtonGroup class="bg-gray-800">
+        <ButtonTab on:click={() => (timeDelta = TIME_DELTA_1_YEAR)} active={timeDelta === TIME_DELTA_1_YEAR} size="xs" class="px-2 py-1">1 Year</ButtonTab>
+        <ButtonTab on:click={() => (timeDelta = TIME_DELTA_30_DAYS)} active={timeDelta === TIME_DELTA_30_DAYS} size="xs" class="px-2 py-1">30 Days</ButtonTab>
+        <ButtonTab on:click={() => (timeDelta = TIME_DELTA_7_DAYS)} active={timeDelta === TIME_DELTA_7_DAYS} size="xs" class="px-2 py-1">7 Days</ButtonTab>
+        <ButtonTab on:click={() => (timeDelta = TIME_DELTA_24_HOURS)} active={timeDelta === TIME_DELTA_24_HOURS} size="xs" class="px-2 py-1">24 Hours</ButtonTab>
+      </ButtonGroup>
+    {/if}
+  </div>
 </div>
diff --git a/tauri-app/src/routes/vaults/[id]/+page.svelte b/tauri-app/src/routes/vaults/[id]/+page.svelte
@@ -62,7 +62,7 @@
 {#if vault === undefined}
   <div class="text-center text-gray-900 dark:text-white">Vault not found</div>
 {:else}
-  <div class="flex w-full justify-center flex-wrap space-x-0 lg:flex-nowrap lg:space-x-4 ">
+  <div class="flex w-full justify-center flex-wrap space-x-0 lg:flex-nowrap lg:space-x-4 mb-8 space-y-8 lg:space-y-0">
     <Card class="space-y-8 grow-0 w-full" size="md">
       <div>
         <h5 class="mb-2 w-full text-xl font-bold tracking-tight text-gray-900 dark:text-white">
@@ -115,10 +115,10 @@
       {/if}
     </Card>
 
-    <ChartHistogram priceUnit={vault.token.symbol} data={vaultListBalanceChangesAllChartDataSorted} loading={$vaultListBalanceChanges.isFetchingAll} emptyMessage="No deposits or withdrawals found" />
+    <ChartHistogram title="Deposits & Withdrawals" priceUnit={vault.token.symbol} data={vaultListBalanceChangesAllChartDataSorted} loading={$vaultListBalanceChanges.isFetchingAll} emptyMessage="No deposits or withdrawals found" />
   </div>
 
-  <div class="space-y-12 mt-8">
+  <div class="space-y-12">
     <div class="w-full">
       <Heading tag="h4" class="mb-2">Deposits & Withdrawals</Heading>