chore: updated usage to project level

src/lib/sdk/billing.ts

@@ -237,6 +237,7 @@ export type OrganizationUsage = {
         users: number;
         authPhoneTotal: number;
         authPhoneEstimate: number;
+        imageTransformations: number;
     }>;
     authPhoneTotal: number;
     authPhoneEstimate: number;

src/lib/sdk/usage.ts

@@ -319,7 +319,12 @@ export type UsageProject = {
     authPhoneEstimate: number;
 
     /**
-     * Aggregated statistics of total number SMS by country
+     * Aggregated statistics of total number SMS by country.
      */
     authPhoneCountriesBreakdown: Models.MetricBreakdown[];
+
+    /**
+     * Aggregated statistics of total number of image transformations.
+     */
+    imageTransformations: number;
 };

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

@@ -94,6 +94,7 @@
         }
 
         switch (metric) {
+            case 'imageTransformations':
             case 'authPhoneTotal':
                 return formatNumberWithCommas(value);
             case 'executions':
@@ -106,6 +107,7 @@
     }
 
     onMount(() => {
+        console.log(JSON.stringify(projects, null, 2));
         if (metric === undefined && databaseOperationMetric === undefined) {
             throw new Error(`metric or database operations must be defined`);
         }

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

@@ -1,28 +1,28 @@
 <script lang="ts">
-    import { Container } from '$lib/layout';
-    import { CardGrid, Heading, Card, ProgressBarBig } from '$lib/components';
+    import { base } from '$app/paths';
+    import { BarChart, Legend } from '$lib/charts';
+    import { Card, CardGrid, Heading, ProgressBarBig } from '$lib/components';
+    import Collapsible from '$lib/components/collapsible.svelte';
+    import CollapsibleItem from '$lib/components/collapsibleItem.svelte';
+    import { BillingPlan } from '$lib/constants.js';
+    import { Button } from '$lib/elements/forms';
     import {
-        TableRow,
+        Table,
         TableBody,
         TableCell,
         TableCellHead,
         TableHeader,
-        Table,
+        TableRow,
         TableRowLink
     } from '$lib/elements/table';
+    import { getCountryName } from '$lib/helpers/diallingCodes.js';
+    import { formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
+    import { bytesToSize, humanFileSize, mbSecondsToGBHours } from '$lib/helpers/sizeConvertion';
+    import { formatNum } from '$lib/helpers/string';
+    import { Container } from '$lib/layout';
+    import { total } from '$lib/layout/usage.svelte';
     import { showUsageRatesModal, tierToPlan, upgradeURL } from '$lib/stores/billing';
     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 { formatNum } from '$lib/helpers/string';
-    import { total } from '$lib/layout/usage.svelte';
-    import { BillingPlan } from '$lib/constants.js';
-    import { base } from '$app/paths';
-    import { formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
-    import Collapsible from '$lib/components/collapsible.svelte';
-    import CollapsibleItem from '$lib/components/collapsibleItem.svelte';
-    import { getCountryName } from '$lib/helpers/diallingCodes.js';
 
     export let data;
 
@@ -39,6 +39,7 @@
 
     $: dbReads = data.usage.databasesReads;
     $: dbWrites = data.usage.databasesWrites;
+    $: imageTransformations = data.usage.imageTransformations;
 
     $: legendData = [
         { name: 'Reads', value: data.usage.databasesReadsTotal },
@@ -246,6 +247,42 @@
             {/if}
         </svelte:fragment>
     </CardGrid>
+    <CardGrid>
+        <Heading tag="h6" size="7">Image transformations</Heading>
+
+        <p class="text">Total image transformations in your project.</p>
+
+        <svelte:fragment slot="aside">
+            {#if imageTransformations}
+                <div style:margin-top="-1.5em" style:margin-bottom="-1em">
+                    <BarChart
+                        options={{
+                            yAxis: {
+                                axisLabel: {
+                                    formatter: formatNum
+                                }
+                            }
+                        }}
+                        series={[
+                            {
+                                name: 'Image transformations',
+                                data: [...imageTransformations.map((e) => [e.date, e.value])]
+                            }
+                        ]} />
+                </div>
+            {: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>