From e358afc2fcb0a65443c625f1b472a1228bd2e3e3 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 27 Jan 2025 15:54:28 +0530
Subject: [PATCH] address comments: update copies, specs of the graphs.

---
 src/lib/layout/usageMultiple.svelte           | 16 +++++++-
 .../usage/[[invoice]]/+page.svelte            |  2 +-
 .../usage/[[period]]/+page.svelte             | 38 ++++++++++---------
 .../databases/usage/[[period]]/+page.svelte   | 38 ++++++++++---------
 4 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/src/lib/layout/usageMultiple.svelte b/src/lib/layout/usageMultiple.svelte
index b12b0bc1e..aa9292c9c 100644
--- a/src/lib/layout/usageMultiple.svelte
+++ b/src/lib/layout/usageMultiple.svelte
@@ -5,17 +5,23 @@
     import { Card, Heading, SecondaryTabs, SecondaryTabsItem } from '$lib/components';
     import { page } from '$app/stores';
     import { type Models } from '@appwrite.io/console';
+    import { formatNumberWithCommas } from '$lib/helpers/numbers';
 
     export let title: string;
     export let total: number[];
     export let path: string = null;
     export let count: Models.Metric[][];
     export let legendData: LegendData[];
+    export let showHeader: boolean = true;
+    export let overlapContainerCover = false;
 </script>
 
-<Container>
+<Container overlapCover={overlapContainerCover}>
     <div class="u-flex u-main-space-between common-section">
-        <Heading tag="h2" size="5">{title}</Heading>
+        {#if showHeader}
+            <Heading tag="h2" size="5">{title}</Heading>
+        {/if}
+
         {#if path}
             <SecondaryTabs>
                 <SecondaryTabsItem href={`${path}/24h`} disabled={$page.params.period === '24h'}>
@@ -34,6 +40,12 @@
     </div>
     <Card>
         {#if count}
+            {@const totalCount = total.reduce((a, b) => a + b, 0)}
+
+            <Heading tag="h6" size="6">{formatNumberWithCommas(totalCount)}</Heading>
+            <p>Total {title.toLocaleLowerCase()}</p>
+            <div class="u-margin-block-start-16" />
+
             <div class="multiple-chart-container u-flex-vertical u-gap-16">
                 <BarChart
                     formatted={$page.params.period === '24h' ? 'hours' : 'days'}
diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
index a140f27b2..46fdce2a9 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -199,7 +199,7 @@
     </CardGrid>
 
     <CardGrid>
-        <Heading tag="h6" size="7">Databases reads and writes</Heading>
+        <Heading tag="h6" size="7">Database reads and writes</Heading>
 
         <p class="text">
             The total number of database reads and writes across all projects in your organization.
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
index fd5fd5875..56e0eb722 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
@@ -17,21 +17,25 @@
     $: writesTotal = data.databaseWritesTotal;
 </script>
 
-<Usage
-    title="Databases"
-    path={`${base}/project-${$page.params.project}/databases/database-${$page.params.database}/usage`}
-    {total}
-    {count}
-    countMetadata={{
-        legend: 'Collections',
-        title: 'Total collections'
-    }} />
+<div class="u-flex u-flex-vertical u-gap-16">
+    <Usage
+        title="Usage"
+        path={`${base}/project-${$page.params.project}/databases/database-${$page.params.database}/usage`}
+        {total}
+        {count}
+        countMetadata={{
+            legend: 'Collections',
+            title: 'Total collections'
+        }} />
 
-<UsageMultiple
-    title="Reads and writes"
-    total={[readsTotal, writesTotal]}
-    count={[reads, writes]}
-    legendData={[
-        { name: 'Reads', value: readsTotal },
-        { name: 'Writes', value: writesTotal }
-    ]} />
+    <UsageMultiple
+        title="Reads and writes"
+        showHeader={false}
+        overlapContainerCover
+        total={[readsTotal, writesTotal]}
+        count={[reads, writes]}
+        legendData={[
+            { name: 'Reads', value: readsTotal },
+            { name: 'Writes', value: writesTotal }
+        ]} />
+</div>
diff --git a/src/routes/(console)/project-[project]/databases/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[project]/databases/usage/[[period]]/+page.svelte
index 334403f69..b4fbc25e7 100644
--- a/src/routes/(console)/project-[project]/databases/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/usage/[[period]]/+page.svelte
@@ -16,21 +16,25 @@
     $: writesTotal = data.databasesWritesTotal;
 </script>
 
-<Usage
-    title="Databases"
-    path={`${base}/project-${$page.params.project}/databases/usage`}
-    {total}
-    {count}
-    countMetadata={{
-        legend: 'Databases',
-        title: 'Total databases'
-    }} />
+<div class="u-flex u-flex-vertical u-gap-16">
+    <Usage
+        title="Usage"
+        path={`${base}/project-${$page.params.project}/databases/usage`}
+        {total}
+        {count}
+        countMetadata={{
+            legend: 'Databases',
+            title: 'Total databases'
+        }} />
 
-<UsageMultiple
-    title="Reads and writes"
-    total={[readsTotal, writesTotal]}
-    count={[reads, writes]}
-    legendData={[
-        { name: 'Reads', value: readsTotal },
-        { name: 'Writes', value: writesTotal }
-    ]} />
+    <UsageMultiple
+        title="Reads and writes"
+        showHeader={false}
+        overlapContainerCover
+        total={[readsTotal, writesTotal]}
+        count={[reads, writes]}
+        legendData={[
+            { name: 'Reads', value: readsTotal },
+            { name: 'Writes', value: writesTotal }
+        ]} />
+</div>