fix: org usage breakdown

src/lib/components/progressBarBig.svelte

@@ -6,8 +6,10 @@
     export let progressValue: number;
     export let progressMax: number;
     export let showBar = true;
+    export let minimum = 0;
+    export let maximum = 100;
 
-    $: progress = Math.min(Math.max(Math.round((progressValue / progressMax) * 100), 0), 100);
+    $: progress = Math.round((progressValue / progressMax) * 100);
 </script>
 
 <section class="progress-bar">
@@ -29,6 +31,6 @@
             class="progress-bar-container u-margin-block-start-16"
             class:is-warning={progress >= 75 && progress < 100}
             class:is-danger={progress >= 100}
-            style:--graph-size={progress + '%'} />
+            style:--graph-size={Math.max(Math.min(progress, maximum), minimum) + '%'} />
     {/if}
 </section>

src/lib/sdk/billing.ts

@@ -165,6 +165,7 @@ export type Aggregation = {
 
 export type OrganizationUsage = {
     bandwidth: Array<Models.Metric>;
+    executions: Array<Models.Metric>;
     executionsTotal: number;
     storageTotal: number;
     users: Array<Models.Metric>;

src/routes/console/organization-[organization]/usage/[[invoice]]/+page.svelte

@@ -220,7 +220,24 @@
                     maxUnit="Executions"
                     maxValue={formatNum(max)}
                     progressValue={current}
-                    progressMax={max} />
+                    progressMax={max}
+                    showBar={false} />
+                <BarChart
+                    options={{
+                        yAxis: {
+                            axisLabel: {
+                                formatter: formatNum
+                            }
+                        }
+                    }}
+                    series={[
+                        {
+                            name: 'Executions',
+                            data: [
+                                ...data.organizationUsage.executions.map((e) => [e.date, e.value])
+                            ]
+                        }
+                    ]} />
                 <ProjectBreakdown projects={project} metric="executions" {data} />
             {:else}
                 <Card isDashed>
@@ -255,7 +272,8 @@
                     maxUnit="GB"
                     maxValue={max.toString()}
                     progressValue={bytesToSize(current, 'GB')}
-                    progressMax={max} />
+                    progressMax={max}
+                    minimum={1} />
                 <ProjectBreakdown projects={project} metric="storage" {data} />
             {:else}
                 <Card isDashed>

src/routes/console/organization-[organization]/usage/[[invoice]]/+page.ts

@@ -19,6 +19,7 @@ export const load: PageLoad = async ({ params, parent }) => {
                 users: null,
                 usersTotal: null,
                 storageTotal: null,
+                executions: null,
                 executionsTotal: null,
                 projects: null
             }

src/routes/console/project-[project]/functions/function-[function]/usage/[[period]]/+page.svelte

@@ -4,6 +4,7 @@
     import { BarChart } from '$lib/charts';
     import { page } from '$app/stores';
     import type { PageData } from './$types';
+    import { formatNumberWithCommas } from '$lib/helpers/numbers';
 
     export let data: PageData;
     $: total = data.executionsTotal;
@@ -33,7 +34,7 @@
     </div>
     {#if count}
         <Card>
-            <Heading tag="h6" size="6">{total}</Heading>
+            <Heading tag="h6" size="6">{formatNumberWithCommas(total)}</Heading>
             <p>Executions</p>
             <div class="u-margin-block-start-16" />
             <BarChart