Apply appropriate units to yaxis for each barchar

studio/components/interfaces/BillingV2/Usage/Activity.tsx

@@ -107,7 +107,9 @@ const Activity = () => {
             attribute={MAU_KEY}
             data={mauData?.data ?? []}
             unit={undefined}
-            yDomain={[0, 100]}
+            yDomain={[0, monthly_active_users?.limit ?? 0]}
+            yLeftMargin={18}
+            yFormatter={(value) => value.toLocaleString()}
           />
         )}
       </SectionContent>
@@ -173,7 +175,7 @@ const Activity = () => {
                 attribute={MAU_KEY}
                 data={assetTransformationsData?.data ?? []}
                 unit={undefined}
-                yDomain={[0, 100]}
+                yDomain={[0, storage_image_render_count?.limit ?? 0]}
               />
             )}
           </>
@@ -230,7 +232,9 @@ const Activity = () => {
             attribute={FUNC_INVOCATIONS_KEY}
             data={funcInvocationsData?.data ?? []}
             unit={undefined}
-            yDomain={[0, 100]}
+            yDomain={[0, func_invocations?.limit ?? 0]}
+            yLeftMargin={26}
+            yFormatter={(value) => value.toLocaleString()}
           />
         )}
       </SectionContent>

studio/components/interfaces/BillingV2/Usage/Bandwidth.tsx

@@ -90,15 +90,14 @@ const Bandwidth = () => {
           </div>
         ) : (
           // [Joshen] TODO
-          // - Provide a way to format y axis (bytes)
-          // - Fix the y axis cartesian grid intervals if possible (atm it looks random)
           // - the max Y domain could be dynamic (slightly above limit, but take the usage + some threshold if above limit)
           <BarChart
             attribute={DB_EGRESS_KEY}
             data={dbEgressData?.data ?? []}
             unit={undefined}
             yDomain={[0, db_egress?.limit ?? 0]}
-            yFormatter={(value) => formatBytes(value)}
+            yLeftMargin={14}
+            yFormatter={(value) => formatBytes(value, 1, 'GB').replace(/\s/g, '')}
           />
         )}
       </SectionContent>
@@ -153,7 +152,9 @@ const Bandwidth = () => {
             attribute={STORAGE_EGRESS_KEY}
             data={storageEgressData?.data ?? []}
             unit={undefined}
-            yDomain={[0, 100]}
+            yDomain={[0, storage_egress?.limit ?? 0]}
+            yLeftMargin={14}
+            yFormatter={(value) => formatBytes(value, 1, 'GB').replace(/\s/g, '')}
           />
         )}
       </SectionContent>

studio/components/interfaces/BillingV2/Usage/BarChart.tsx

@@ -28,14 +28,33 @@ export interface BarChartProps {
   reference?: Reference
   unit?: string
   yDomain?: number[]
+  yLeftMargin?: number
   yFormatter?: (value: number) => string
 }
 
-const BarChart = ({ data, attribute, reference, unit, yDomain, yFormatter }: BarChartProps) => {
+const BarChart = ({
+  data,
+  attribute,
+  reference,
+  unit,
+  yDomain,
+  yLeftMargin = 10,
+  yFormatter,
+}: BarChartProps) => {
+  const ticks =
+    yDomain !== undefined
+      ? [
+          yDomain[0],
+          (yDomain[1] - yDomain[0]) * 0.25,
+          (yDomain[1] - yDomain[0]) * 0.5,
+          (yDomain[1] - yDomain[0]) * 0.75,
+          yDomain[1],
+        ]
+      : undefined
   return (
     <div className="w-full h-[200px]">
       <ResponsiveContainer width="100%" height={200}>
-        <ComposedChart data={data} margin={{ top: 0, right: 0, left: 10, bottom: 0 }}>
+        <ComposedChart data={data} margin={{ top: 0, right: 0, left: yLeftMargin, bottom: 0 }}>
           <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-scale-800" />
           <XAxis dataKey="period_start" />
           <YAxis
@@ -44,6 +63,7 @@ const BarChart = ({ data, attribute, reference, unit, yDomain, yFormatter }: Bar
             tickLine={{ stroke: 'none' }}
             domain={yDomain}
             unit={unit}
+            ticks={ticks}
             tickFormatter={yFormatter}
           />
           <Bar dataKey={attribute}>

studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx

@@ -20,7 +20,6 @@ const Infrastructure = () => {
     interval: '1d',
     startDate,
     endDate,
-    modifier: (x: number) => x * 100,
   })
 
   const MEMORY_USAGE_KEY = 'ram_usage'

studio/components/interfaces/BillingV2/Usage/SizeAndCounts.tsx

@@ -92,7 +92,9 @@ const SizeAndCounts = () => {
             attribute={TOTAL_DB_SIZE_KEY}
             data={dbSizeData?.data ?? []}
             unit={undefined}
-            yDomain={[0, 100]}
+            yDomain={[0, db_size?.limit ?? 0]}
+            yLeftMargin={14}
+            yFormatter={(value) => formatBytes(value, 1, 'GB').replace(/\s/g, '')}
           />
         )}
       </SectionContent>
@@ -145,7 +147,9 @@ const SizeAndCounts = () => {
             attribute={TOTAL_STORAGE_SIZE_KEY}
             data={storageSizeData?.data ?? []}
             unit={undefined}
-            yDomain={[0, 100]}
+            yDomain={[0, storage_size?.limit ?? 0]}
+            yLeftMargin={14}
+            yFormatter={(value) => formatBytes(value, 1, 'GB').replace(/\s/g, '')}
           />
         )}
       </SectionContent>

studio/lib/helpers.ts

@@ -136,15 +136,17 @@ export const propsAreEqual = (prevProps: any, nextProps: any) => {
   }
 }
 
-export const formatBytes = (bytes: any, decimals = 2) => {
-  if (bytes === 0 || bytes === undefined) return '0 bytes'
-
+export const formatBytes = (
+  bytes: any,
+  decimals = 2,
+  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'
+) => {
   const k = 1024
   const dm = decimals < 0 ? 0 : decimals
   const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
 
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-
+  if (bytes === 0 || bytes === undefined) return size !== undefined ? `0 ${size}` : '0 bytes'
+  const i = size !== undefined ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k))
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }