From b4a2fad26f6f4233cb217deff6da27652443f83f Mon Sep 17 00:00:00 2001 From: Harsh Mahajan Date: Wed, 25 Mar 2026 12:12:13 +0530 Subject: [PATCH 1/3] fix: remove usage --- src/lib/layout/usage.svelte | 11 ++- src/lib/layout/usageMultiple.svelte | 14 ++-- .../usage/[[period]]/+page.svelte | 1 + .../databases/usage/[[period]]/+page.svelte | 40 +++++++--- .../usage/[[period]]/+page.svelte | 2 + .../functions/usage/[[period]]/+page.svelte | 1 + .../settings/usage/[[invoice]]/+page.svelte | 75 ++----------------- .../site-[site]/usage/[[period]]/+page.svelte | 1 + .../sites/usage/[[period]]/+page.svelte | 1 + .../usage/[[period]]/+page.svelte | 2 + .../storage/usage/[[period]]/+page.svelte | 1 + 11 files changed, 58 insertions(+), 91 deletions(-) diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte index 9f5889b046..d9ebce7eb4 100644 --- a/src/lib/layout/usage.svelte +++ b/src/lib/layout/usage.svelte @@ -89,6 +89,7 @@ export let path: string = null; export let hidePeriodSelect = false; export let isCumulative: boolean = false; + export let showAggregateTotal: boolean = true; @@ -118,10 +119,12 @@ {/if} {#if count} - - {formatNumberWithCommas(total)} - {countMetadata.title} - + {#if showAggregateTotal} + + {formatNumberWithCommas(total)} + {countMetadata.title} + + {/if}
@@ -41,12 +42,13 @@ {#if count} - {@const totalCount = clampMin(total.reduce((a, b) => a + b, 0))} - - - {formatNumberWithCommas(totalCount)} - Total {title.toLocaleLowerCase()} - + {#if showAggregateTotal} + {@const totalCount = clampMin(total.reduce((a, b) => a + b, 0))} + + {formatNumberWithCommas(totalCount)} + Total {title.toLocaleLowerCase()} + + {/if}
+ import { goto } from '$app/navigation'; import { base } from '$app/paths'; import { page } from '$app/state'; - import { Container, Usage, UsageMultiple } from '$lib/layout'; + import { Container, UsageMultiple } from '$lib/layout'; + import { InputSelect } from '$lib/elements/forms'; import { Layout } from '@appwrite.io/pink-svelte'; import type { PageData } from './$types'; export let data: PageData; - $: total = data.databasesTotal; - $: count = data.databases; - $: reads = data.databasesReads; $: readsTotal = data.databasesReadsTotal; $: writes = data.databasesWrites; $: writesTotal = data.databasesWritesTotal; + + $: usagePath = `${base}/project-${page.params.region}-${page.params.project}/databases/usage`; - +
+ goto(`${usagePath}/${e.detail}`)} + id="period" + options={[ + { + label: '24 hours', + value: '24h' + }, + { + label: '30 days', + value: '30d' + }, + { + label: '90 days', + value: '90d' + } + ]} + value={page.params.period ?? '30d'} /> +
{#if network} - {@const humanized = humanFileSize(total(network))} - - - {humanized.value} - - {humanized.unit} - Users - Total user in your project. + Users in your project. {#if users} - {@const current = formatNum(usersTotal)} - - - {current} - - Users - Database reads and writes - Total database reads and writes in your project. + Read and write activity over time. Legend entries are separate totals for reads and writes. {#if dbReads || dbWrites}
@@ -215,18 +196,9 @@ Image transformations - Total unique image transformations in your project. + Unique image transformations in your project. {#if imageTransformations} - {@const current = formatNum(imageTransformationsTotal)} -
-
-

- {current} - Transformations -

-
-
Screenshots generated - Total unique screenshots generated in your project. + Unique screenshots generated in your project. {#if screenshotsGenerated} - {@const current = formatNum(screenshotsGeneratedTotal)} -
-
-

- {current} - Screenshots generated -

-
-
{#if executions} - {@const current = formatNum(executionsTotal)} - - - {current} - - Executions - {#if storage} - {@const humanized = humanFileSize(storage)} {@const progressBarStorageDate = [ { size: bytesToSize(data.usage.filesStorageTotal, 'MB'), @@ -377,12 +332,6 @@ } } ]} - - - {humanized.value} - - {humanized.unit} - GB hours GB hours represent the memory usage (in gigabytes) of your function executions and builds, multiplied - by the total execution time (in hours). + by execution time (in hours). {#if data.usage.executionsMbSecondsTotal} {@const totalGbHours = mbSecondsToGBHours( @@ -424,12 +373,6 @@ } } ]} - - - {(Math.ceil(totalGbHours * 100) / 100).toLocaleString('en-US')} - - GB hours - {#if data.usage.authPhoneTotal} -
- - - {formatNumberWithCommas(data.usage.authPhoneTotal)} - - OTPs - +

Estimated cost diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte index c2b841035d..11d4d6098f 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte @@ -14,6 +14,7 @@ Date: Thu, 26 Mar 2026 11:58:11 +0530 Subject: [PATCH 2/3] fix: remove all total stats --- src/lib/charts/legend.svelte | 14 +- src/lib/layout/usage.svelte | 12 +- src/lib/layout/usageMultiple.svelte | 49 ++--- .../auth/usage/[[period]]/+page.svelte | 6 +- .../(entity)/views/usage/view.svelte | 10 +- .../usage/[[period]]/+page.svelte | 3 +- .../usage/[[period]]/+page.svelte | 10 +- .../databases/usage/[[period]]/+page.svelte | 11 +- .../usage/[[period]]/+page.svelte | 8 +- .../functions/usage/[[period]]/+page.svelte | 5 +- .../settings/usage/[[invoice]]/+page.svelte | 171 +----------------- .../settings/usage/[[invoice]]/+page.ts | 3 - .../site-[site]/usage/[[period]]/+page.svelte | 3 +- .../sites/usage/[[period]]/+page.svelte | 5 +- .../usage/[[period]]/+page.svelte | 7 +- .../storage/usage/[[period]]/+page.svelte | 5 +- 16 files changed, 69 insertions(+), 253 deletions(-) diff --git a/src/lib/charts/legend.svelte b/src/lib/charts/legend.svelte index 47489efb24..23f1fccdc9 100644 --- a/src/lib/charts/legend.svelte +++ b/src/lib/charts/legend.svelte @@ -13,20 +13,26 @@ export let legendData: LegendData[] = []; export let decimalsForAbbreviate: number = 1; export let numberFormat: 'comma' | 'abbreviate' = 'comma'; + export let showValues: boolean = true; let colors = Object.values(Colors);

{#each legendData as { name, value }, index} - {@const formattedValue = - typeof value === 'number' + {@const formattedValue = showValues + ? typeof value === 'number' ? numberFormat === 'comma' ? formatNumberWithCommas(value) : abbreviateNumber(value, decimalsForAbbreviate) - : value} + : value + : null} - {name} ({formattedValue}) + {#if showValues} + {name} ({formattedValue}) + {:else} + {name} + {/if} {/each}
diff --git a/src/lib/layout/usage.svelte b/src/lib/layout/usage.svelte index d9ebce7eb4..faa7b8e429 100644 --- a/src/lib/layout/usage.svelte +++ b/src/lib/layout/usage.svelte @@ -83,7 +83,7 @@ legend: string; }; - export let total: number; + export let total: number = 0; export let count: Models.Metric[]; export let countMetadata: MetricMetadata; export let path: string = null; @@ -119,12 +119,12 @@ {/if} {#if count} - {#if showAggregateTotal} - + + {#if showAggregateTotal} {formatNumberWithCommas(total)} - {countMetadata.title} - - {/if} + {/if} + {countMetadata.title} +
- import { BarChart, Legend, type LegendData } from '$lib/charts'; - import { accumulateFromEndingTotal } from '$lib/layout/usage.svelte'; - import { Card, SecondaryTabs, SecondaryTabsItem } from '$lib/components'; + import { BarChart, Legend } from '$lib/charts'; + import { Card } from '$lib/components'; import { page } from '$app/state'; import { type Models } from '@appwrite.io/console'; - import { formatNumberWithCommas, clampMin } from '$lib/helpers/numbers'; import { Layout, Typography } from '@appwrite.io/pink-svelte'; export let title: string; - export let total: number[]; - export let path: string = null; + export let description: string = ''; export let count: Models.Metric[][]; - export let legendData: LegendData[]; + export let seriesNames: string[]; export let showHeader: boolean = true; - export let showAggregateTotal: boolean = true; - export let legendNumberFormat: 'comma' | 'abbreviate' = 'comma';
{#if showHeader}
{title} - - {#if path} - - - 24h - - - 30d - - - 90d - - - {/if}
{/if} {#if count} - {#if showAggregateTotal} - {@const totalCount = clampMin(total.reduce((a, b) => a + b, 0))} + {#if description} - {formatNumberWithCommas(totalCount)} - Total {title.toLocaleLowerCase()} + {description} {/if}
({ - name: legendData[index].name, - data: accumulateFromEndingTotal(c, total[index]) + name: seriesNames[index], + data: c.map((metric) => [metric.date, metric.value]) }))} /> - - {#if legendData} - - {/if} + ({ name, value: '' }))} />
{/if} diff --git a/src/routes/(console)/project-[region]-[project]/auth/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/usage/[[period]]/+page.svelte index 9879c54e4d..9f62557578 100644 --- a/src/routes/(console)/project-[region]-[project]/auth/usage/[[period]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/auth/usage/[[period]]/+page.svelte @@ -11,9 +11,11 @@ diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/usage/view.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/usage/view.svelte index c47c8da008..d88058cf1c 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/usage/view.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/usage/view.svelte @@ -7,16 +7,15 @@ import { getTerminologies } from '$database/(entity)'; let { - total, count }: { - total: number; count: Metric[]; } = $props(); const { terminology } = getTerminologies(); const records = terminology.record.lower.plural; + const recordsTitle = terminology.record.title.plural; const entity = terminology.entity.lower.singular; const usagePath = $derived( @@ -36,12 +35,13 @@
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/usage/[[period]]/+page.svelte index a8d8fdb0b0..d9ab7c8f84 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/usage/[[period]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/usage/[[period]]/+page.svelte @@ -5,7 +5,6 @@ let { data }: PageProps = $props(); const count = $derived(data.rows); - const total = $derived(data.rowsTotal); - + diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte index 3a61a4ab93..1eb024ffa6 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte @@ -4,22 +4,14 @@ export let data; $: reads = data.databaseReads; - $: readsTotal = data.databaseReadsTotal; $: writes = data.databaseWrites; - $: writesTotal = data.databaseWritesTotal; + seriesNames={['Reads', 'Writes']} /> diff --git a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte index dbfb4a7d5d..d593e67517 100644 --- a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.svelte @@ -10,10 +10,8 @@ export let data: PageData; $: reads = data.databasesReads; - $: readsTotal = data.databasesReadsTotal; $: writes = data.databasesWrites; - $: writesTotal = data.databasesWritesTotal; $: usagePath = `${base}/project-${page.params.region}-${page.params.project}/databases/usage`; @@ -45,14 +43,9 @@ + seriesNames={['Reads', 'Writes']} /> diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte index 2d1dcbca70..d1295cf5f3 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/usage/[[period]]/+page.svelte @@ -23,9 +23,10 @@ @@ -38,10 +39,11 @@ path={`${base}/project-${page.params.region}-${page.params.project}/functions/function-${page.params.function}/usage`} countMetadata={{ legend: 'GB hours', - title: 'Total GB hours' + title: 'GB hours per day' }} total={gbHoursTotal} - count={gbHoursCount} /> + count={gbHoursCount} + isCumulative /> {/if} diff --git a/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte index f4959032d4..8657b1ec44 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/functions/usage/[[period]]/+page.svelte @@ -12,9 +12,10 @@ diff --git a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte index 82638ae90c..87ecb97123 100644 --- a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte @@ -1,6 +1,6 @@ @@ -127,7 +110,7 @@ Users - Users in your project. + User registrations per day in your project. {#if users} Database reads and writes - Read and write activity over time. Legend entries are separate totals for reads and writes. + Reads and writes per day for this billing period. {#if dbReads || dbWrites}
@@ -179,8 +162,6 @@ } ]} />
- - {:else}
@@ -196,7 +177,7 @@ Image transformations - Unique image transformations in your project. + Image transformations per day in your project. {#if imageTransformations} Screenshots generated - Unique screenshots generated in your project. + Screenshots generated per day in your project. {#if screenshotsGenerated} Executions - Calculated for all functions that are executed in this project. + Function executions per day in this project. {#if executions} - - Storage - Calculated for all your files, deployments, builds, databases and backups. - - {#if storage} - {@const progressBarStorageDate = [ - { - size: bytesToSize(data.usage.filesStorageTotal, 'MB'), - color: '#85DBD8', - tooltip: { - title: 'File storage', - label: `${Math.round(bytesToSize(data.usage.filesStorageTotal, 'MB') * 100) / 100}MB` - } - }, - { - size: bytesToSize(data.usage.deploymentsStorageTotal, 'MB'), - color: '#7C67FE', - tooltip: { - title: 'Deployments storage', - label: `${Math.round(bytesToSize(data.usage.deploymentsStorageTotal, 'MB') * 100) / 100}MB` - } - }, - { - size: bytesToSize(data.usage.buildsStorageTotal, 'MB'), - color: '#FE9567', - tooltip: { - title: 'Builds storage', - label: `${Math.round(bytesToSize(data.usage.buildsStorageTotal, 'MB') * 100) / 100}MB` - } - } - ]} - - {:else} - - - - No data to show - - - {/if} - - - - GB hours - GB hours represent the memory usage (in gigabytes) of your function executions and builds, multiplied - by execution time (in hours). - - {#if data.usage.executionsMbSecondsTotal} - {@const totalGbHours = mbSecondsToGBHours( - data.usage.executionsMbSecondsTotal + data.usage.buildsMbSecondsTotal - )} - {@const progressBarStorageDate = [ - { - size: mbSecondsToGBHours(data.usage.executionsMbSecondsTotal), - color: '#85DBD8', - tooltip: { - title: 'Executions', - label: `${(Math.round(mbSecondsToGBHours(data.usage.executionsMbSecondsTotal) * 100) / 100).toLocaleString('en-US')} GB hours` - } - }, - { - size: mbSecondsToGBHours(data.usage.buildsMbSecondsTotal), - color: '#FE9567', - tooltip: { - title: 'Deployments', - label: `${(Math.round(mbSecondsToGBHours(data.usage.buildsMbSecondsTotal) * 100) / 100).toLocaleString('en-US')} GB hours` - } - } - ]} - - {:else} - - - - No data to show - - - {/if} - - - - Phone OTP - Calculated for all Phone OTP sent across your project. Resets at the start of each billing cycle.
- You will not be charged for Phone OTPs before February 10th. - - {#if data.usage.authPhoneTotal} -
-

- Estimated cost - - {formatCurrency(data.usage.authPhoneEstimate)} - -

-
- {#if data.usage.authPhoneCountryBreakdown.length > 0} - - - - Region - Amount - Estimated cost - - {#each data.usage.authPhoneCountryBreakdown as phone} - - - {getCountryName(phone.name)} - - - {formatNumberWithCommas(phone.value)} - - - {formatCurrency(phone.estimate)} - - - {/each} - - - {/if} - {:else} - - - - No data to show - - - {/if} - -

Metrics are estimates updated every 24 hours and may not accurately reflect your invoice.

diff --git a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.ts b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.ts index 0efb7c6020..a26a37e186 100644 --- a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.ts +++ b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.ts @@ -1,6 +1,5 @@ import { sdk } from '$lib/stores/sdk'; import type { PageLoad } from './$types'; -import { accumulateUsage } from '$lib/sdk/usage'; import { type Models, Query } from '@appwrite.io/console'; export const load: PageLoad = async ({ params, parent }) => { @@ -64,8 +63,6 @@ export const load: PageLoad = async ({ params, parent }) => { } } - usage.users = accumulateUsage(usage.users, usage.usersTotal); - return { usage, invoices, diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte index 11d4d6098f..e47be145dd 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/usage/[[period]]/+page.svelte @@ -15,9 +15,10 @@ diff --git a/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte index 7b5b84ec1d..8dfc67c4a7 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/usage/[[period]]/+page.svelte @@ -12,9 +12,10 @@ diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte index 05f700294d..3b06914fad 100644 --- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/usage/[[period]]/+page.svelte @@ -14,11 +14,12 @@ diff --git a/src/routes/(console)/project-[region]-[project]/storage/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/usage/[[period]]/+page.svelte index 772cad8994..d806feaf23 100644 --- a/src/routes/(console)/project-[region]-[project]/storage/usage/[[period]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/storage/usage/[[period]]/+page.svelte @@ -12,10 +12,11 @@ From 36a5c61504aeff3751c3ba7291dc2dcda74dfc8d Mon Sep 17 00:00:00 2001 From: Harsh Mahajan Date: Mon, 30 Mar 2026 12:25:42 +0530 Subject: [PATCH 3/3] fix storage --- .../settings/usage/[[invoice]]/+page.svelte | 165 +++++++++++++++++- 1 file changed, 162 insertions(+), 3 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte index 87ecb97123..f4ba9c482d 100644 --- a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte @@ -1,6 +1,6 @@