fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 09:49:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

change twoDecimalString to use customizable digits

Browse Source
This commit is contained in:
Henry Dollman
2024-10-12 16:03:51 -04:00
parent 10d348c052
commit c0a3bbeefc
10 changed files with 29 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
beszel/site/src/components/charts/area-chart.tsx
View File

@@ -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"
/>
}

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

@@ -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"
/>
}

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

@@ -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"
/>
}

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

@@ -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) {

4
beszel/site/src/components/charts/cpu-chart.tsx
View File

@@ -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"
/>
}

4
beszel/site/src/components/charts/disk-chart.tsx
View File

@@ -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"
/>

4
beszel/site/src/components/charts/mem-chart.tsx
View File

@@ -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"
/>
}

4
beszel/site/src/components/charts/swap-chart.tsx
View File

@@ -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"
/>
}

4
beszel/site/src/components/charts/temperature-chart.tsx
View File

@@ -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"
/>
}

19
beszel/site/src/lib/utils.ts
View File

@@ -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<number, Intl.NumberFormat> = 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 */