Add: database read, writes to usage

package.json

@@ -19,7 +19,7 @@
         "e2e:ui": "playwright test tests/e2e --ui"
     },
     "dependencies": {
-        "@appwrite.io/console": "1.4.7",
+        "@appwrite.io/console": "1.5.1",
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
         "@popperjs/core": "^2.11.8",

src/lib/charts/bar.svelte

@@ -13,7 +13,6 @@
     {formatted}
     series={series.map((s) => {
         s.type = 'bar';
-        s.stack = 'total';
         s.barMaxWidth = 6;
         s.itemStyle = {
             borderRadius: [10, 10, 0, 0]

src/lib/charts/index.ts

@@ -1,2 +1,3 @@
 export { default as BarChart } from './bar.svelte';
 export { default as LineChart } from './line.svelte';
+export { default as Legend, type LegendData } from './legend.svelte';

src/lib/charts/legend.svelte

@@ -0,0 +1,23 @@
+<script context="module" lang="ts">
+    export type LegendData = {
+        name: string;
+        value: string | number | boolean;
+    };
+</script>
+
+<script lang="ts">
+    import { Colors } from '$lib/charts/config';
+    import { Status } from '$lib/components';
+
+    export let legendData: LegendData[] = [];
+
+    let colors = Object.values(Colors);
+</script>
+
+<div class="u-flex u-cross-center u-gap-16">
+    {#each legendData as { name, value }, index}
+        <Status status="none" statusIconStyle="background-color: {colors[index % colors.length]}">
+            {name} ({value})
+        </Status>
+    {/each}
+</div>

src/lib/components/status.svelte

@@ -6,17 +6,35 @@
         | 'completed'
         | 'processing'
         | 'ready'
-        | 'building';
+        | 'building'
+        | 'none';
+
+    export let statusIconStyle: string | undefined = undefined;
 </script>
 
 <div
-    class="status"
+    class="status u-cross-center"
     class:is-pending={status === 'pending'}
     class:is-failed={status === 'failed'}
     class:is-complete={status === 'completed' || status === 'ready'}
     class:is-processing={status === 'processing' || status === 'building'}>
     {#if status}
-        <span class="status-icon" />
+        <span class="status-icon" style={statusIconStyle} />
     {/if}
     <span class="text" data-private><slot /></span>
 </div>
+
+<style>
+    .status-icon {
+        width: 8px;
+        height: 8px;
+    }
+
+    .status {
+        gap: 6px;
+    }
+
+    .text {
+        line-height: 140%;
+    }
+</style>

src/lib/layout/index.ts

@@ -13,6 +13,7 @@ export { default as WizardStep } from './wizardStep.svelte';
 export { default as Breadcrumbs } from './breadcrumbs.svelte';
 export { default as Unauthenticated } from './unauthenticated.svelte';
 export { default as Usage, type UsagePeriods } from './usage.svelte';
+export { default as UsageMultiple } from './usageMultiple.svelte';
 export { default as Activity } from './activity.svelte';
 export { default as Progress } from './progress.svelte';
 export { default as GridHeader } from './gridHeader.svelte';

src/lib/layout/usage.svelte

@@ -43,7 +43,7 @@
         metrics: Models.Metric[],
         endingTotal: number
     ): Array<[string, number]> {
-        return metrics.reduceRight(
+        return (metrics ?? []).reduceRight(
             (acc, curr) => {
                 acc.data.unshift([curr.date, acc.total]);
                 acc.total -= curr.value;

src/lib/layout/usageMultiple.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { Container } from '$lib/layout';
+    import { BarChart, Legend, type LegendData } from '$lib/charts';
+    import { accumulateFromEndingTotal } from '$lib/layout/usage.svelte';
+    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 overlapCover={overlapContainerCover}>
+    <div class="u-flex u-main-space-between common-section">
+        {#if showHeader}
+            <Heading tag="h2" size="5">{title}</Heading>
+        {/if}
+
+        {#if path}
+            <SecondaryTabs>
+                <SecondaryTabsItem href={`${path}/24h`} disabled={$page.params.period === '24h'}>
+                    24h
+                </SecondaryTabsItem>
+                <SecondaryTabsItem
+                    href={`${path}/30d`}
+                    disabled={!$page.params.period || $page.params.period === '30d'}>
+                    30d
+                </SecondaryTabsItem>
+                <SecondaryTabsItem href={`${path}/90d`} disabled={$page.params.period === '90d'}>
+                    90d
+                </SecondaryTabsItem>
+            </SecondaryTabs>
+        {/if}
+    </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'}
+                    series={count.map((c, index) => ({
+                        name: legendData[index].name,
+                        data: accumulateFromEndingTotal(c, total[index])
+                    }))} />
+
+                {#if legendData}
+                    <Legend {legendData} />
+                {/if}
+            </div>
+        {/if}
+    </Card>
+</Container>
+
+<style lang="scss">
+    .multiple-chart-container {
+        height: 12rem;
+    }
+
+    :global(.multiple-chart-container .echart) {
+        margin-top: -1em;
+        margin-bottom: -1em;
+    }
+</style>

src/lib/sdk/billing.ts

@@ -179,9 +179,13 @@ export type Aggregation = {
 export type OrganizationUsage = {
     bandwidth: Array<Models.Metric>;
     executions: Array<Models.Metric>;
+    databasesReads: Array<Models.Metric>;
+    databasesWrites: Array<Models.Metric>;
     executionsTotal: number;
     filesStorageTotal: number;
     buildsStorageTotal: number;
+    databasesReadsTotal: number;
+    databasesWritesTotal: number;
     deploymentsStorageTotal: number;
     executionsMBSecondsTotal: number;
     buildsMBSecondsTotal: number;

src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte

@@ -10,7 +10,7 @@
     import { organization } from '$lib/stores/organization';
     import { Button } from '$lib/elements/forms';
     import { bytesToSize, humanFileSize, mbSecondsToGBHours } from '$lib/helpers/sizeConvertion';
-    import { BarChart } from '$lib/charts';
+    import { BarChart, Legend } from '$lib/charts';
     import ProjectBreakdown from './ProjectBreakdown.svelte';
     import { formatNum } from '$lib/helpers/string';
     import { accumulateFromEndingTotal, total } from '$lib/layout/usage.svelte';
@@ -29,6 +29,11 @@
     const plan = data?.plan ?? undefined;
 
     $: project = (data.organizationUsage as OrganizationUsage).projects;
+
+    $: legendData = [
+        { name: 'Reads', value: data.organizationUsage.databasesReadsTotal },
+        { name: 'Writes', value: data.organizationUsage.databasesWritesTotal }
+    ];
 </script>
 
 <Container>
@@ -133,7 +138,7 @@
                         <span
                             class="icon-chart-square-bar text-large"
                             aria-hidden="true"
-                            style="font-size: 32px;" />
+                            style:font-size="32px" />
                         <p class="u-bold">No data to show</p>
                     </div>
                 </Card>
@@ -193,6 +198,67 @@
         </svelte:fragment>
     </CardGrid>
 
+    <CardGrid>
+        <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.
+        </p>
+        <svelte:fragment slot="aside">
+            {#if data.organizationUsage.databasesReads || data.organizationUsage.databasesWrites}
+                <div style:margin-top="-1.5em" style:margin-bottom="-1em">
+                    <BarChart
+                        options={{
+                            yAxis: {
+                                axisLabel: {
+                                    formatter: formatNum
+                                }
+                            }
+                        }}
+                        series={[
+                            {
+                                name: 'Reads',
+                                data: [
+                                    ...(data.organizationUsage.databasesReads ?? []).map((e) => [
+                                        e.date,
+                                        e.value
+                                    ])
+                                ]
+                            },
+                            {
+                                name: 'Writes',
+                                data: [
+                                    ...(data.organizationUsage.databasesWrites ?? []).map((e) => [
+                                        e.date,
+                                        e.value
+                                    ])
+                                ]
+                            }
+                        ]} />
+                </div>
+
+                <Legend {legendData} />
+
+                {#if project?.length > 0}
+                    <ProjectBreakdown
+                        {data}
+                        projects={project}
+                        databaseOperationMetric={['databasesReads', 'databasesWrites']} />
+                {/if}
+            {:else}
+                <Card isDashed>
+                    <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">
+                        <span
+                            class="icon-chart-square-bar text-large"
+                            aria-hidden="true"
+                            style="font-size: 32px;" />
+                        <p class="u-bold">No data to show</p>
+                    </div>
+                </Card>
+            {/if}
+        </svelte:fragment>
+    </CardGrid>
+
     <CardGrid>
         <Heading tag="h6" size="7">Executions</Heading>
 
@@ -318,6 +384,7 @@
             {/if}
         </svelte:fragment>
     </CardGrid>
+
     <CardGrid>
         <Heading tag="h6" size="7">GB hours</Heading>
 
@@ -378,6 +445,7 @@
             {/if}
         </svelte:fragment>
     </CardGrid>
+
     <CardGrid>
         <Heading tag="h6" size="7">Phone OTP</Heading>
         <p class="text">
@@ -430,6 +498,7 @@
             {/if}
         </svelte:fragment>
     </CardGrid>
+
     <TotalMembers members={data?.organizationMembers} />
 
     <p class="text common-section u-color-text-gray">

src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts

@@ -29,7 +29,11 @@ export const load: PageLoad = async ({ params, parent }) => {
                 executionsMBSecondsTotal: null,
                 buildsMBSecondsTotal: null,
                 authPhoneTotal: null,
-                authPhoneEstimate: null
+                authPhoneEstimate: null,
+                databasesReads: null,
+                databasesWrites: null,
+                databasesReadsTotal: null,
+                databasesWritesTotal: null
             }
         };
     }