Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

add: imagine specific credits usage.

Browse Source
This commit is contained in:
Darshan
2025-12-06 19:15:03 +05:30
parent 1c4cacd72d
commit 1c4a03e8da
3 changed files with 52 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -22,7 +22,7 @@
},
"dependencies": {
"@ai-sdk/svelte": "^1.1.24",
"@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@4838219",
"@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@f3cd1df",
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@5b26bb8",
"@appwrite.io/pink-legacy": "^1.0.3",
pnpm-lock.yaml
Generated
+5 -5
View File
@@ -12,8 +12,8 @@ importers:
specifier: ^1.1.24
version: 1.1.24(svelte@5.45.5)(zod@3.24.3)
'@appwrite.io/console':
specifier: https://pkg.vc/-/@appwrite/@appwrite.io/console@4838219
version: https://pkg.vc/-/@appwrite/@appwrite.io/console@4838219
specifier: https://pkg.vc/-/@appwrite/@appwrite.io/console@f3cd1df
version: https://pkg.vc/-/@appwrite/@appwrite.io/console@f3cd1df
'@appwrite.io/pink-icons':
specifier: 0.25.0
version: 0.25.0
@@ -278,8 +278,8 @@ packages:
'@apm-js-collab/tracing-hooks@0.3.1':
resolution: {integrity: sha512-Vu1CbmPURlN5fTboVuKMoJjbO5qcq9fA5YXpskx3dXe/zTBvjODFoerw+69rVBlRLrJpwPqSDqEuJDEKIrTldw==}
'@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@4838219':
resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/console@4838219}
'@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@f3cd1df':
resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/console@f3cd1df}
version: 1.10.0
'@appwrite.io/pink-icons-svelte@2.0.0-RC.1':
@@ -3673,7 +3673,7 @@ snapshots:
transitivePeerDependencies:
- supports-color
'@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@4838219': {}
'@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@f3cd1df': {}
'@appwrite.io/pink-icons-svelte@2.0.0-RC.1(svelte@5.45.5)':
dependencies:
src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
+46 -2
View File
@@ -15,7 +15,9 @@
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 { isFreePlan } from '$lib/helpers/billing.js';
import { isFreePlan, isPaidPlan } from '$lib/helpers/billing.js';
import { resolvedProfile } from '$lib/profiles/index.svelte';
import { Platform } from '@appwrite.io/console';
export let data;
@@ -67,7 +69,7 @@
on:click={() => ($showUsageRatesModal = true)}
>Learn more about plan usage limits.</Link.Button>
</p>
{:else if $organization.billingPlan === BillingPlan.PRO}
{:else if isPaidPlan($organization.billingPlan)}
<p class="text">
On the Pro plan, you'll be charged only for any usage that exceeds the thresholds
per resource listed below. <Link.Button
@@ -83,6 +85,48 @@
</p>
{/if}
</div>
{#if resolvedProfile.platform === Platform.Imagine}
<CardGrid>
<svelte:fragment slot="title">Imagine Credits</svelte:fragment>
Total Imagine credits consumed across your project. Resets at the start of each billing cycle.
<svelte:fragment slot="aside">
{#if data.usage.imagineCredits}
{@const creditsTotal = data.usage.imagineCredits.reduce((sum, item) => sum + item.value, 0)}
<Layout.Stack gap="s" direction="row" alignItems="baseline">
<Typography.Title>
{formatNumberWithCommas(creditsTotal)}
</Typography.Title>
<Typography.Text>Credits</Typography.Text>
</Layout.Stack>
{#if data.usage.imagineCredits.length > 0}
<BarChart
options={{
yAxis: {
axisLabel: {
formatter: formatNum
}
}
}}
series={[
{
name: 'Credits',
data: [...data.usage.imagineCredits.map((e) => [e.date, e.value])]
}
]} />
{/if}
{:else}
<Card isDashed>
<Layout.Stack gap="xs" alignItems="center" justifyContent="center">
<Icon icon={IconChartSquareBar} size="l" />
<Typography.Text variant="m-600">No data to show</Typography.Text>
</Layout.Stack>
</Card>
{/if}
</svelte:fragment>
</CardGrid>
{/if}
<CardGrid>
<svelte:fragment slot="title">Bandwidth</svelte:fragment>
Calculated for all bandwidth used across your project. Resets at the start of each billing cycle.