feat: Format byte numbers on ClickHouse page (#1709)

Author: pulpdrew

.changeset/bright-shoes-smile.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: Format byte numbers on ClickHouse page

packages/app/src/ClickhousePage.tsx

@@ -109,6 +109,10 @@ function InfrastructureTab({
               dateRange: searchedTimeRange,
               timestampValueExpression: 'event_time',
               displayType: DisplayType.Line,
+              numberFormat: {
+                output: 'byte',
+                mantissa: 2,
+              },
             }}
             onTimeRangeSelect={onTimeRangeSelect}
           />
@@ -142,6 +146,10 @@ function InfrastructureTab({
               dateRange: searchedTimeRange,
               timestampValueExpression: 'event_time',
               displayType: DisplayType.Line,
+              numberFormat: {
+                output: 'byte',
+                mantissa: 2,
+              },
             }}
             onTimeRangeSelect={onTimeRangeSelect}
           />
@@ -229,6 +237,10 @@ function InfrastructureTab({
               dateRange: searchedTimeRange,
               timestampValueExpression: 'event_time',
               displayType: DisplayType.Line,
+              numberFormat: {
+                output: 'byte',
+                mantissa: 2,
+              },
             }}
             onTimeRangeSelect={onTimeRangeSelect}
           />
@@ -324,6 +336,13 @@ function InsertsTab({
       filters,
       groupBy: [{ valueExpression: 'tables' }],
       connection,
+      numberFormat:
+        insertsBy === 'bytes'
+          ? {
+              output: 'byte',
+              mantissa: 2,
+            }
+          : undefined,
     };
   }, [insertsBy, searchedTimeRange, connection]);