fix: rendering of image transformations component

Author: ChiragAgg5k

src/lib/sdk/usage.ts

@@ -323,8 +323,13 @@ export type UsageProject = {
      */
     authPhoneCountriesBreakdown: Models.MetricBreakdown[];
 
+    /**
+     * Array of image transformations per period.
+     */
+    imageTransformations: Metric[];
+
     /**
      * Aggregated statistics of total number of image transformations.
      */
-    imageTransformations: number;
+    imageTransformationsTotal: number;
 };

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

@@ -272,34 +272,33 @@
             {#if data.organizationUsage.imageTransformationsTotal}
                 {@const current = data.organizationUsage.imageTransformationsTotal}
                 {@const max = getServiceLimit('imageTransformations', tier, plan)}
-                <div style:margin-top="-1.5em" style:margin-bottom="-1em">
-                    <ProgressBarBig
-                        currentUnit="Transformations"
-                        currentValue={formatNum(current)}
-                        maxUnit="transformations"
-                        maxValue={`out of ${formatNum(max)}`}
-                        progressValue={current}
-                        progressMax={max}
-                        showBar={false} />
-                    <BarChart
-                        options={{
-                            yAxis: {
-                                axisLabel: {
-                                    formatter: formatNum
-                                }
-                            }
-                        }}
-                        series={[
-                            {
-                                name: 'Image Transformations',
-                                data: [
-                                    ...(data.organizationUsage.imageTransformations ?? []).map(
-                                        (e) => [e.date, e.value]
-                                    )
-                                ]
+                <ProgressBarBig
+                    currentUnit="Transformations"
+                    currentValue={formatNum(current)}
+                    maxUnit="transformations"
+                    maxValue={`out of ${formatNum(max)}`}
+                    progressValue={current}
+                    progressMax={max}
+                    showBar={false} />
+                <BarChart
+                    options={{
+                        yAxis: {
+                            axisLabel: {
+                                formatter: formatNum
                             }
-                        ]} />
-                </div>
+                        }
+                    }}
+                    series={[
+                        {
+                            name: 'Image Transformations',
+                            data: [
+                                ...(data.organizationUsage.imageTransformations ?? []).map((e) => [
+                                    e.date,
+                                    e.value
+                                ])
+                            ]
+                        }
+                    ]} />
                 {#if projects?.length > 0}
                     <ProjectBreakdown {projects} metric="imageTransformations" {data} />
                 {/if}

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

@@ -36,10 +36,10 @@
         data.usage.filesStorageTotal +
         data.usage.deploymentsStorageTotal +
         data.usage.buildsStorageTotal;
-
+    $: imageTransformations = data.usage.imageTransformations;
+    $: imageTransformationsTotal = data.usage.imageTransformationsTotal;
     $: dbReads = data.usage.databasesReads;
     $: dbWrites = data.usage.databasesWrites;
-    $: imageTransformations = data.usage.imageTransformations;
 
     $: legendData = [
         { name: 'Reads', value: data.usage.databasesReadsTotal },
@@ -254,22 +254,29 @@
 
         <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])]
-                            }
-                        ]} />
+                {@const current = formatNum(imageTransformationsTotal)}
+                <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">Transformations</span>
+                        </p>
+                    </div>
                 </div>
+                <BarChart
+                    options={{
+                        yAxis: {
+                            axisLabel: {
+                                formatter: formatNum
+                            }
+                        }
+                    }}
+                    series={[
+                        {
+                            name: 'Image transformations',
+                            data: [...imageTransformations.map((e) => [e.date, e.value])]
+                        }
+                    ]} />
             {:else}
                 <Card isDashed>
                     <div class="u-flex u-cross-center u-flex-vertical u-main-center u-flex">