From c0a3bbeefc6c81b1a1d1e921e6e85e5dd3b5521d Mon Sep 17 00:00:00 2001 From: Henry Dollman Date: Sat, 12 Oct 2024 16:03:51 -0400 Subject: [PATCH] change twoDecimalString to use customizable digits --- .../site/src/components/charts/area-chart.tsx | 4 ++-- .../components/charts/container-cpu-chart.tsx | 4 ++-- .../components/charts/container-mem-chart.tsx | 4 ++-- .../components/charts/container-net-chart.tsx | 6 +++--- .../site/src/components/charts/cpu-chart.tsx | 4 ++-- .../site/src/components/charts/disk-chart.tsx | 4 ++-- .../site/src/components/charts/mem-chart.tsx | 4 ++-- .../site/src/components/charts/swap-chart.tsx | 4 ++-- .../components/charts/temperature-chart.tsx | 4 ++-- beszel/site/src/lib/utils.ts | 19 ++++++++++--------- 10 files changed, 29 insertions(+), 28 deletions(-) diff --git a/beszel/site/src/components/charts/area-chart.tsx b/beszel/site/src/components/charts/area-chart.tsx index b16ac0b..1d9021f 100644 --- a/beszel/site/src/components/charts/area-chart.tsx +++ b/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={ formatShortDate(data[0].payload.created)} - contentFormatter={(item) => twoDecimalString(item.value) + unit} + contentFormatter={(item) => decimalString(item.value) + unit} indicator="line" /> } diff --git a/beszel/site/src/components/charts/container-cpu-chart.tsx b/beszel/site/src/components/charts/container-cpu-chart.tsx index 311a75b..ae37bf7 100644 --- a/beszel/site/src/components/charts/container-cpu-chart.tsx +++ b/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={ twoDecimalString(item.value) + '%'} + contentFormatter={(item) => decimalString(item.value) + '%'} indicator="line" /> } diff --git a/beszel/site/src/components/charts/container-mem-chart.tsx b/beszel/site/src/components/charts/container-mem-chart.tsx index d345b7c..8e89da5 100644 --- a/beszel/site/src/components/charts/container-mem-chart.tsx +++ b/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={ twoDecimalString(item.value) + ' MB'} + contentFormatter={(item) => decimalString(item.value) + ' MB'} indicator="line" /> } diff --git a/beszel/site/src/components/charts/container-net-chart.tsx b/beszel/site/src/components/charts/container-net-chart.tsx index 721d31e..10b94e1 100644 --- a/beszel/site/src/components/charts/container-net-chart.tsx +++ b/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 ( - {twoDecimalString(received)} MB/s + {decimalString(received)} MB/s rx - {twoDecimalString(sent)} MB/s tx + {decimalString(sent)} MB/s tx ) } catch (e) { diff --git a/beszel/site/src/components/charts/cpu-chart.tsx b/beszel/site/src/components/charts/cpu-chart.tsx index 766458d..7300d15 100644 --- a/beszel/site/src/components/charts/cpu-chart.tsx +++ b/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={ formatShortDate(data[0].payload.created)} - contentFormatter={(item) => twoDecimalString(item.value) + '%'} + contentFormatter={(item) => decimalString(item.value) + '%'} indicator="line" /> } diff --git a/beszel/site/src/components/charts/disk-chart.tsx b/beszel/site/src/components/charts/disk-chart.tsx index cb8bd9d..d36d57d 100644 --- a/beszel/site/src/components/charts/disk-chart.tsx +++ b/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({ formatShortDate(data[0].payload.created)} contentFormatter={({ value }) => - twoDecimalString(getSizeVal(value)) + getSizeUnit(value) + decimalString(getSizeVal(value)) + getSizeUnit(value) } indicator="line" /> diff --git a/beszel/site/src/components/charts/mem-chart.tsx b/beszel/site/src/components/charts/mem-chart.tsx index ab6bd85..58da7d8 100644 --- a/beszel/site/src/components/charts/mem-chart.tsx +++ b/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" /> } diff --git a/beszel/site/src/components/charts/swap-chart.tsx b/beszel/site/src/components/charts/swap-chart.tsx index edb8bd5..0c648dd 100644 --- a/beszel/site/src/components/charts/swap-chart.tsx +++ b/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={ formatShortDate(data[0].payload.created)} - contentFormatter={(item) => twoDecimalString(item.value) + ' GB'} + contentFormatter={(item) => decimalString(item.value) + ' GB'} indicator="line" /> } diff --git a/beszel/site/src/components/charts/temperature-chart.tsx b/beszel/site/src/components/charts/temperature-chart.tsx index 6018226..6db26df 100644 --- a/beszel/site/src/components/charts/temperature-chart.tsx +++ b/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={ formatShortDate(data[0].payload.created)} - contentFormatter={(item) => twoDecimalString(item.value) + ' °C'} + contentFormatter={(item) => decimalString(item.value) + ' °C'} indicator="line" /> } diff --git a/beszel/site/src/lib/utils.ts b/beszel/site/src/lib/utils.ts index 5015e71..c030308 100644 --- a/beszel/site/src/lib/utils.ts +++ b/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 -/** Format number to two decimal places */ -export function twoDecimalString(num: number) { - if (!twoDecimalFormatter) { - twoDecimalFormatter = new Intl.NumberFormat(undefined, { - minimumFractionDigits: 2, - maximumFractionDigits: 2, +let decimalFormatters: Map = new Map() +/** Format number to x decimal places */ +export function decimalString(num: number, digits = 2) { + let formatter = decimalFormatters.get(digits) + if (!formatter) { + formatter = new Intl.NumberFormat(undefined, { + minimumFractionDigits: digits, + maximumFractionDigits: digits, }) + decimalFormatters.set(digits, formatter) } - // Return a function that formats numbers using the saved formatter - return twoDecimalFormatter.format(num) + return formatter.format(num) } /** Get value from local storage */