display TB in disk usage charts if value >= 1 TB

beszel/site/src/components/charts/disk-chart.tsx

@@ -50,7 +50,9 @@ export default function DiskChart({
 						minTickGap={6}
 						tickLine={false}
 						axisLine={false}
-						tickFormatter={(value) => updateYAxisWidth(value + ' GB')}
+						tickFormatter={(value) =>
+updateYAxisWidth(toFixedFloat(getSizeVal(value), 2) + getSizeUnit(value))
+}
 					/>
 					<XAxis
 						dataKey="created"
@@ -69,7 +71,9 @@ export default function DiskChart({
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' GB'}
+								contentFormatter={({ value }) =>
+									twoDecimalString(getSizeVal(value)) + getSizeUnit(value)
+								}
 								indicator="line"
 							/>
 						}

beszel/site/src/lib/utils.ts

@@ -290,3 +290,17 @@ export async function updateUserSettings() {
 		console.log('create settings', e)
 	}
 }
+
+/**
+ * Get the unit of size (TB or GB) for a given size in gigabytes
+ * @param n size in gigabytes
+ * @returns unit of size (TB or GB)
+ */
+export const getSizeUnit = (n: number) => (n >= 1_000 ? ' TB' : ' GB')
+
+/**
+ * Get the value of number in gigabytes if less than 1000, otherwise in terabytes
+ * @param n size in gigabytes
+ * @returns value in GB if less than 1000, otherwise value in TB
+ */
+export const getSizeVal = (n: number) => (n >= 1_000 ? n / 1_000 : n)