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 9f5889b046..faa7b8e429 100644 --- a/src/lib/layout/usage.svelte +++ b/src/lib/layout/usage.svelte @@ -83,12 +83,13 @@ 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; export let hidePeriodSelect = false; export let isCumulative: boolean = false; + export let showAggregateTotal: boolean = true; @@ -119,7 +120,9 @@ {#if count} - {formatNumberWithCommas(total)} + {#if showAggregateTotal} + {formatNumberWithCommas(total)} + {/if} {countMetadata.title}
diff --git a/src/lib/layout/usageMultiple.svelte b/src/lib/layout/usageMultiple.svelte index 85f5091ca4..47b9bb1189 100644 --- a/src/lib/layout/usageMultiple.svelte +++ b/src/lib/layout/usageMultiple.svelte @@ -1,66 +1,41 @@
{#if showHeader}
{title} - - {#if path} - - - 24h - - - 30d - - - 90d - - - {/if}
{/if} {#if count} - {@const totalCount = clampMin(total.reduce((a, b) => a + b, 0))} - - - {formatNumberWithCommas(totalCount)} - Total {title.toLocaleLowerCase()} - + {#if description} + + {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 84c6ff2b72..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,21 +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 d0caac9cfd..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 @@ -1,42 +1,51 @@ - +
+ 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'} /> +
+ 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 705478db75..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 @@ -22,9 +22,11 @@ {#if count} @@ -33,13 +35,15 @@ {#if mbSecondsCount} + 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 a91d5a6f3f..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 @@ -11,9 +11,11 @@ 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 521d08acda..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 @@ -10,47 +10,31 @@ import { organization } from '$lib/stores/organization'; import { Button } from '$lib/elements/forms'; import { bytesToSize, humanFileSize, mbSecondsToGBHours } from '$lib/helpers/sizeConvertion'; - import { BarChart, Legend } from '$lib/charts'; + import { BarChart } from '$lib/charts'; import { formatNum } from '$lib/helpers/string'; - import { total } from '$lib/layout/usage.svelte'; import { base } from '$app/paths'; - import { formatCurrency, formatNumberWithCommas, clampMin } from '$lib/helpers/numbers'; - import { getCountryName } from '$lib/helpers/diallingCodes.js'; import { Accordion, Icon, Layout, Link, Table, Typography } from '@appwrite.io/pink-svelte'; import { IconChartSquareBar } from '@appwrite.io/pink-icons-svelte'; import { page } from '$app/state'; import { BillingPlanGroup } from '@appwrite.io/console'; + import { formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers.js'; + import { getCountryName } from '$lib/helpers/diallingCodes.js'; export let data; $: baseRoute = `${base}/project-${page.params.region}-${page.params.project}`; $: network = data.usage.network; $: users = data.usage.users; - $: usersTotal = data.usage.usersTotal; $: executions = data.usage.executions; - $: executionsTotal = data.usage.executionsTotal; $: storage = data.usage.filesStorageTotal + data.usage.deploymentsStorageTotal + data.usage.buildsStorageTotal; $: imageTransformations = data.usage.imageTransformations; - $: imageTransformationsTotal = data.usage.imageTransformationsTotal; $: screenshotsGenerated = data.usage.screenshotsGenerated; - $: screenshotsGeneratedTotal = data.usage.screenshotsGeneratedTotal; $: dbReads = data.usage.databasesReads; $: dbWrites = data.usage.databasesWrites; - $: legendData = [ - { - name: 'Reads', - value: clampMin(data.usage.databasesReads.reduce((sum, item) => sum + item.value, 0)) - }, - { - name: 'Writes', - value: clampMin(data.usage.databasesWrites.reduce((sum, item) => sum + item.value, 0)) - } - ]; - $: currentPlanId = data?.currentInvoice?.plan ?? $organization?.billingPlanId; $: currentBillingPlan = billingIdToPlan(currentPlanId); @@ -97,13 +81,6 @@ Calculated for all bandwidth used across your project. Resets at the start of each billing cycle. {#if network} - {@const humanized = humanFileSize(total(network))} - - - {humanized.value} - - {humanized.unit} - Users - Total user in your project. + User registrations per day in your project. {#if users} - {@const current = formatNum(usersTotal)} - - - {current} - - Users - Database reads and writes - Total database reads and writes in your project. + Reads and writes per day for this billing period. {#if dbReads || dbWrites}
@@ -198,8 +168,6 @@ } ]} />
- - {:else}
@@ -215,18 +183,9 @@ Image transformations - Total unique image transformations in your project. + Image transformations per day in your project. {#if imageTransformations} - {@const current = formatNum(imageTransformationsTotal)} -
-
-

- {current} - Transformations -

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

- {current} - Screenshots generated -

-
-
Executions - Calculated for all functions that are executed in this project. + Function executions per day in this project. {#if executions} - {@const current = formatNum(executionsTotal)} - - - {current} - - Executions - { @@ -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 c2b841035d..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 @@ -14,9 +14,11 @@ 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 4dec5a14e4..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 @@ -11,9 +11,11 @@ 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 3c39c5f9ef..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 @@ -13,20 +13,23 @@ 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 659277fbd2..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 @@ -11,10 +11,12 @@