Skip to content

feat: add screenshotsGenerated metrics across console #2543

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HarshMN2345 wants to merge 6 commits into
base: main
Choose a base branch
from
+126 −3
Open

feat: add screenshotsGenerated metrics across console #2543

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b7e99ba
add screenshotsGenerated metric across console
HarshMN2345 Nov 3, 2025
80fb7f6
pnpm lockfile
HarshMN2345 Nov 3, 2025
930d0fb
package upgrade
HarshMN2345 Nov 3, 2025
1af8a32
Refactor usage data handling for screenshots generated
HarshMN2345 Nov 3, 2025
524336d
Merge remote-tracking branch 'origin/main' into feat-screenshots-api-…
HarshMN2345 Dec 7, 2025
53b9707
broken lockfile fix
HarshMN2345 Dec 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
},
"dependencies": {
"@ai-sdk/svelte": "^1.1.24",
"@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@fe3277e",
"@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@0aa6399",
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@46f65c7",
"@appwrite.io/pink-legacy": "^1.0.3",
Expand Down
10 changes: 5 additions & 5 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions src/lib/sdk/billing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,12 +292,14 @@ export type OrganizationUsage = {
databasesReads: Array<Models.Metric>;
databasesWrites: Array<Models.Metric>;
imageTransformations: Array<Models.Metric>;
screenshotsGenerated: Array<Models.Metric>;
executionsTotal: number;
filesStorageTotal: number;
buildsStorageTotal: number;
databasesReadsTotal: number;
databasesWritesTotal: number;
imageTransformationsTotal: number;
screenshotsGeneratedTotal: number;
deploymentsStorageTotal: number;
executionsMBSecondsTotal: number;
buildsMBSecondsTotal: number;
Expand All @@ -316,6 +318,7 @@ export type OrganizationUsage = {
authPhoneTotal: number;
authPhoneEstimate: number;
imageTransformations: number;
screenshotsGenerated: number;
}>;
authPhoneTotal: number;
authPhoneEstimate: number;
Expand Down Expand Up @@ -384,6 +387,7 @@ export type Plan = {
bandwidth: number;
storage: number;
imageTransformations: number;
screenshotsGenerated: number;
webhooks: number;
users: number;
teams: number;
Expand Down Expand Up @@ -411,6 +415,7 @@ export type Plan = {
databasesWrites: AdditionalResource;
GBHours: AdditionalResource;
imageTransformations: AdditionalResource;
screenshotsGenerated: AdditionalResource;
};
addons: {
seats: PlanAddon;
Expand Down
10 changes: 10 additions & 0 deletions src/lib/sdk/usage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,4 +332,14 @@ export type UsageProject = {
* Aggregated statistics of total number of image transformations.
*/
imageTransformationsTotal: number;

/**
* Array of screenshots generated per period.
*/
screenshotsGenerated: Metric[];

/**
* Aggregated statistics of total number of screenshots generated.
*/
screenshotsGeneratedTotal: number;
};
3 changes: 2 additions & 1 deletion src/lib/stores/billing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,8 @@ export type PlanServices =
| 'webhooks'
| 'sites'
| 'authPhone'
| 'imageTransformations';
| 'imageTransformations'
| 'screenshotsGenerated';

export function getServiceLimit(serviceId: PlanServices, tier: Tier = null, plan?: Plan): number {
if (!isCloud) return 0;
Expand Down
16 changes: 16 additions & 0 deletions src/routes/(console)/organization-[organization]/billing/planSummary.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,9 @@
imageTransformations: projectData?.resources?.find(
(resource) => resource.resourceId === 'imageTransformations'
),
screenshotsGenerated: projectData?.resources?.find(
(resource) => resource.resourceId === 'screenshotsGenerated'
),
bandwidth: projectData?.resources?.find(
(resource) => resource.resourceId === 'bandwidth'
),
Expand Down Expand Up @@ -280,6 +283,19 @@
),
maxValue: currentPlan?.imageTransformations
},
{
id: `screenshots-generated`,
cells: {
item: 'Screenshots generated',
usage: `${formatNum(project.screenshotsGenerated.value || 0)} / ${currentPlan?.screenshotsGenerated ? formatNum(currentPlan.screenshotsGenerated) : 'Unlimited'}`,
price: formatCurrency(project.screenshotsGenerated.amount || 0)
},
progressData: createProgressData(
project.screenshotsGenerated.value || 0,
currentPlan?.screenshotsGenerated
),
maxValue: currentPlan?.screenshotsGenerated
},
{
id: `gb-hours`,
cells: {
Expand Down
47 changes: 47 additions & 0 deletions src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,6 +322,53 @@
</svelte:fragment>
</CardGrid>

<CardGrid gap="none">
<svelte:fragment slot="title">Screenshots generated</svelte:fragment>
The total number of screenshots generated across all projects in your organization.
<svelte:fragment slot="aside">
{#if data.organizationUsage.screenshotsGeneratedTotal}
{@const current = data.organizationUsage.screenshotsGeneratedTotal}
{@const max = getServiceLimit('screenshotsGenerated', tier, plan)}
<ProgressBarBig
currentUnit="Screenshots"
currentValue={formatNum(current)}
maxValue={max ? `/ ${formatNum(max)}` : undefined}
progressValue={current}
progressMax={max}
showBar={false} />
<BarChart
options={{
yAxis: {
axisLabel: {
formatter: formatNum
}
}
}}
series={[
{
name: 'Screenshots generated',
data: [
...(data.organizationUsage.screenshotsGenerated ?? []).map((e) => [
e.date,
e.value
])
]
}
]} />
{#if projects?.length > 0}
<ProjectBreakdown {projects} metric="screenshotsGenerated" {usageProjects} />
{/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>

<CardGrid gap="none">
<svelte:fragment slot="title">Executions</svelte:fragment>
Calculated for all functions that are executed in all projects in your organization.
Expand Down
4 changes: 3 additions & 1 deletion src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ export const load: PageLoad = async ({ params, parent }) => {
databasesReadsTotal: null,
databasesWritesTotal: null,
imageTransformations: null,
imageTransformationsTotal: null
imageTransformationsTotal: null,
screenshotsGenerated: null,
screenshotsGeneratedTotal: null
}
};
}
Expand Down
4 changes: 3 additions & 1 deletion src/routes/(console)/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
| 'authPhoneTotal'
| 'databasesReads'
| 'databasesWrites'
| 'imageTransformations';
| 'imageTransformations'
| 'screenshotsGenerated';
type Estimate = 'authPhoneEstimate';
Expand Down Expand Up @@ -89,6 +90,7 @@
switch (metric) {
case 'imageTransformations':
case 'screenshotsGenerated':
case 'authPhoneTotal':
return formatNumberWithCommas(value);
case 'executions':
Expand Down
40 changes: 40 additions & 0 deletions src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
data.usage.buildsStorageTotal;
$: imageTransformations = data.usage.imageTransformations;
$: imageTransformationsTotal = data.usage.imageTransformationsTotal;
$: screenshotsGenerated = (data.usage as any).screenshotsGenerated ?? null;
$: screenshotsGeneratedTotal = (data.usage as any).screenshotsGeneratedTotal ?? 0;
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Address type casting with proper type definitions.

The as any casts bypass TypeScript's type safety. Since screenshotsGenerated and screenshotsGeneratedTotal are defined in the UsageProject type (src/lib/sdk/usage.ts), the data loader should be updated to properly type the usage data.

Consider updating the data loader or type imports to avoid the as any cast:

-$: screenshotsGenerated = (data.usage as any).screenshotsGenerated ?? null;
-$: screenshotsGeneratedTotal = (data.usage as any).screenshotsGeneratedTotal ?? 0;
+$: screenshotsGenerated = data.usage.screenshotsGenerated ?? null;
+$: screenshotsGeneratedTotal = data.usage.screenshotsGeneratedTotal ?? 0;

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools
🪛 ESLint

[error] 33-33: Unexpected any. Specify a different type.

(@typescript-eslint/no-explicit-any)

[error] 34-34: Unexpected any. Specify a different type.

(@typescript-eslint/no-explicit-any)

$: dbReads = data.usage.databasesReads;
$: dbWrites = data.usage.databasesWrites;
Expand Down Expand Up @@ -241,6 +243,44 @@
{/if}
</svelte:fragment>
</CardGrid>
<CardGrid>
<svelte:fragment slot="title">Screenshots generated</svelte:fragment>
Total number of screenshots generated in your project.
<svelte:fragment slot="aside">
{#if screenshotsGenerated}
{@const current = formatNum(screenshotsGeneratedTotal)}
<div class="u-flex u-flex-vertical">
<div class="u-flex u-main-space-between">
<p>
<span class="heading-level-4">{current}</span>
<span class="body-text-1 u-bold">Screenshots</span>
</p>
</div>
</div>
<BarChart
options={{
yAxis: {
axisLabel: {
formatter: formatNum
}
}
}}
series={[
{
name: 'Screenshots generated',
data: [...screenshotsGenerated.map((e) => [e.date, e.value])]
}
]} />
{: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>
<CardGrid>
<svelte:fragment slot="title">Executions</svelte:fragment>
Calculated for all functions that are executed in this project.
Expand Down
Loading