change twoDecimalString to use customizable digits

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

@@ -7,7 +7,7 @@ import {
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
-	twoDecimalString,
+	decimalString,
 	chartMargin,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
@@ -103,7 +103,7 @@ export default function AreaChartDefault({
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + unit}
+								contentFormatter={(item) => decimalString(item.value) + unit}
 								indicator="line"
 							/>
 						}

beszel/site/src/components/charts/container-cpu-chart.tsx

@@ -11,7 +11,7 @@ import {
 	chartTimeData,
 	cn,
 	formatShortDate,
-	twoDecimalString,
+	decimalString,
 	chartMargin,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
@@ -116,7 +116,7 @@ export default function ContainerCpuChart({
 						content={
 							<ChartTooltipContent
 								filter={filter}
-								contentFormatter={(item) => twoDecimalString(item.value) + '%'}
+								contentFormatter={(item) => decimalString(item.value) + '%'}
 								indicator="line"
 							/>
 						}

beszel/site/src/components/charts/container-mem-chart.tsx

@@ -12,7 +12,7 @@ import {
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
-	twoDecimalString,
+	decimalString,
 	chartMargin,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
@@ -116,7 +116,7 @@ export default function ContainerMemChart({
 						content={
 							<ChartTooltipContent
 								filter={filter}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' MB'}
+								contentFormatter={(item) => decimalString(item.value) + ' MB'}
 								indicator="line"
 							/>
 						}

beszel/site/src/components/charts/container-net-chart.tsx

@@ -12,7 +12,7 @@ import {
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
-	twoDecimalString,
+	decimalString,
 	chartMargin,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
@@ -119,10 +119,10 @@ export default function ContainerCpuChart({
 										const received = item?.payload?.[key][1] ?? 0
 										return (
 											<span className="flex">
-												{twoDecimalString(received)} MB/s
+												{decimalString(received)} MB/s
 												<span className="opacity-70 ml-0.5"> rx </span>
 												<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
-												{twoDecimalString(sent)} MB/s<span className="opacity-70 ml-0.5"> tx</span>
+												{decimalString(sent)} MB/s<span className="opacity-70 ml-0.5"> tx</span>
 											</span>
 										)
 									} catch (e) {

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

@@ -6,7 +6,7 @@ import {
 	chartTimeData,
 	cn,
 	formatShortDate,
-	twoDecimalString,
+	decimalString,
 	chartMargin,
 } from '@/lib/utils'
 // import Spinner from '../spinner'
@@ -70,7 +70,7 @@ export default function CpuChart({
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + '%'}
+								contentFormatter={(item) => decimalString(item.value) + '%'}
 								indicator="line"
 							/>
 						}

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

@@ -6,7 +6,7 @@ import {
 	chartTimeData,
 	cn,
 	formatShortDate,
-	twoDecimalString,
+	decimalString,
 	toFixedFloat,
 	getSizeVal,
 	getSizeUnit,
@@ -72,7 +72,7 @@ export default function DiskChart({
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
 								contentFormatter={({ value }) =>
-									twoDecimalString(getSizeVal(value)) + getSizeUnit(value)
+									decimalString(getSizeVal(value)) + getSizeUnit(value)
 								}
 								indicator="line"
 							/>

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

@@ -6,7 +6,7 @@ import {
 	chartTimeData,
 	cn,
 	toFixedFloat,
-	twoDecimalString,
+	decimalString,
 	formatShortDate,
 	chartMargin,
 } from '@/lib/utils'
@@ -74,7 +74,7 @@ export default function MemChart({
 								// @ts-ignore
 								itemSorter={(a, b) => a.order - b.order}
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' GB'}
+								contentFormatter={(item) => decimalString(item.value) + ' GB'}
 								indicator="line"
 							/>
 						}

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

@@ -7,7 +7,7 @@ import {
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
-	twoDecimalString,
+	decimalString,
 	chartMargin,
 } from '@/lib/utils'
 import { useStore } from '@nanostores/react'
@@ -58,7 +58,7 @@ export default function SwapChart({
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' GB'}
+								contentFormatter={(item) => decimalString(item.value) + ' GB'}
 								indicator="line"
 							/>
 						}

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

@@ -13,7 +13,7 @@ import {
 	cn,
 	formatShortDate,
 	toFixedWithoutTrailingZeros,
-	twoDecimalString,
+	decimalString,
 	chartMargin,
 } from '@/lib/utils'
 import { useStore } from '@nanostores/react'
@@ -97,7 +97,7 @@ export default function TemperatureChart({
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={(item) => twoDecimalString(item.value) + ' °C'}
+								contentFormatter={(item) => decimalString(item.value) + ' °C'}
 								indicator="line"
 							/>
 						}

beszel/site/src/lib/utils.ts

@@ -224,17 +224,18 @@ export function toFixedFloat(num: number, digits: number) {
 	return parseFloat(num.toFixed(digits))
 }
 
-let twoDecimalFormatter: Intl.NumberFormat
+let decimalFormatters: Map<number, Intl.NumberFormat> = new Map()
-/** Format number to two decimal places */
+/** Format number to x decimal places */
-export function twoDecimalString(num: number) {
+export function decimalString(num: number, digits = 2) {
-	if (!twoDecimalFormatter) {
+	let formatter = decimalFormatters.get(digits)
-		twoDecimalFormatter = new Intl.NumberFormat(undefined, {
+	if (!formatter) {
-			minimumFractionDigits: 2,
+		formatter = new Intl.NumberFormat(undefined, {
-			maximumFractionDigits: 2,
+			minimumFractionDigits: digits,
+			maximumFractionDigits: digits,
 		})
+		decimalFormatters.set(digits, formatter)
 	}
-	// Return a function that formats numbers using the saved formatter
+	return formatter.format(num)
-	return twoDecimalFormatter.format(num)
 }
 
 /** Get value from local storage */