From 49ae424698771cfdf85e0096cfad815fce26015c Mon Sep 17 00:00:00 2001 From: henrygd Date: Tue, 15 Jul 2025 21:46:41 -0400 Subject: [PATCH] refactor: consolidate fixedFloat funcs + remove trailing zeroes from y axis --- .../src/components/charts/container-chart.tsx | 14 +++----------- beszel/site/src/components/charts/disk-chart.tsx | 4 ++-- .../src/components/charts/gpu-power-chart.tsx | 11 ++--------- beszel/site/src/components/charts/mem-chart.tsx | 4 ++-- beszel/site/src/components/charts/swap-chart.tsx | 14 +++----------- .../src/components/charts/temperature-chart.tsx | 4 ++-- beszel/site/src/components/routes/system.tsx | 15 +++++++-------- beszel/site/src/lib/utils.ts | 7 ++----- 8 files changed, 23 insertions(+), 50 deletions(-) diff --git a/beszel/site/src/components/charts/container-chart.tsx b/beszel/site/src/components/charts/container-chart.tsx index 938fe43..7d32566 100644 --- a/beszel/site/src/components/charts/container-chart.tsx +++ b/beszel/site/src/components/charts/container-chart.tsx @@ -1,15 +1,7 @@ import { Area, AreaChart, CartesianGrid, YAxis } from "recharts" import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart" import { memo, useMemo } from "react" -import { - useYAxisWidth, - cn, - formatShortDate, - chartMargin, - toFixedWithoutTrailingZeros, - formatBytes, - decimalString, -} from "@/lib/utils" +import { useYAxisWidth, cn, formatShortDate, chartMargin, toFixedFloat, formatBytes, decimalString } from "@/lib/utils" // import Spinner from '../spinner' import { useStore } from "@nanostores/react" import { $containerFilter, $userSettings } from "@/lib/stores" @@ -84,14 +76,14 @@ export default memo(function ContainerChart({ // tick formatter if (chartType === ChartType.CPU) { obj.tickFormatter = (value) => { - const val = toFixedWithoutTrailingZeros(value, 2) + unit + const val = toFixedFloat(value, 2) + unit return updateYAxisWidth(val) } } else { const chartUnit = isNetChart ? userSettings.unitNet : Unit.Bytes obj.tickFormatter = (val) => { const { value, unit } = formatBytes(val, isNetChart, chartUnit, true) - return updateYAxisWidth(decimalString(value, value >= 10 ? 0 : 1) + " " + unit) + return updateYAxisWidth(toFixedFloat(value, value >= 10 ? 0 : 1) + " " + unit) } } // tooltip formatter diff --git a/beszel/site/src/components/charts/disk-chart.tsx b/beszel/site/src/components/charts/disk-chart.tsx index fceedb8..4412c04 100644 --- a/beszel/site/src/components/charts/disk-chart.tsx +++ b/beszel/site/src/components/charts/disk-chart.tsx @@ -1,6 +1,6 @@ import { Area, AreaChart, CartesianGrid, YAxis } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart" -import { useYAxisWidth, cn, formatShortDate, decimalString, chartMargin, formatBytes } from "@/lib/utils" +import { useYAxisWidth, cn, formatShortDate, decimalString, chartMargin, formatBytes, toFixedFloat } from "@/lib/utils" import { ChartData } from "@/types" import { memo } from "react" import { useLingui } from "@lingui/react/macro" @@ -48,7 +48,7 @@ export default memo(function DiskChart({ axisLine={false} tickFormatter={(val) => { const { value, unit } = formatBytes(val * 1024, false, Unit.Bytes, true) - return updateYAxisWidth(decimalString(value, value >= 10 ? 0 : 1) + " " + unit) + return updateYAxisWidth(toFixedFloat(value, value >= 10 ? 0 : 1) + " " + unit) }} /> {xAxis(chartData)} diff --git a/beszel/site/src/components/charts/gpu-power-chart.tsx b/beszel/site/src/components/charts/gpu-power-chart.tsx index d4fdb63..88f84a8 100644 --- a/beszel/site/src/components/charts/gpu-power-chart.tsx +++ b/beszel/site/src/components/charts/gpu-power-chart.tsx @@ -8,14 +8,7 @@ import { ChartTooltipContent, xAxis, } from "@/components/ui/chart" -import { - useYAxisWidth, - cn, - formatShortDate, - toFixedWithoutTrailingZeros, - decimalString, - chartMargin, -} from "@/lib/utils" +import { useYAxisWidth, cn, formatShortDate, toFixedFloat, decimalString, chartMargin } from "@/lib/utils" import { ChartData } from "@/types" import { memo, useMemo } from "react" @@ -72,7 +65,7 @@ export default memo(function GpuPowerChart({ chartData }: { chartData: ChartData domain={[0, "auto"]} width={yAxisWidth} tickFormatter={(value) => { - const val = toFixedWithoutTrailingZeros(value, 2) + const val = toFixedFloat(value, 2) return updateYAxisWidth(val + "W") }} tickLine={false} diff --git a/beszel/site/src/components/charts/mem-chart.tsx b/beszel/site/src/components/charts/mem-chart.tsx index f87f43c..1a60537 100644 --- a/beszel/site/src/components/charts/mem-chart.tsx +++ b/beszel/site/src/components/charts/mem-chart.tsx @@ -1,6 +1,6 @@ import { Area, AreaChart, CartesianGrid, YAxis } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart" -import { useYAxisWidth, cn, toFixedFloat, decimalString, formatShortDate, chartMargin, formatBytes } from "@/lib/utils" +import { useYAxisWidth, cn, decimalString, formatShortDate, chartMargin, formatBytes, toFixedFloat } from "@/lib/utils" import { memo } from "react" import { ChartData } from "@/types" import { useLingui } from "@lingui/react/macro" @@ -41,7 +41,7 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) { axisLine={false} tickFormatter={(value) => { const { value: convertedValue, unit } = formatBytes(value * 1024, false, Unit.Bytes, true) - return updateYAxisWidth(decimalString(convertedValue, value >= 10 ? 0 : 1) + " " + unit) + return updateYAxisWidth(toFixedFloat(convertedValue, value >= 10 ? 0 : 1) + " " + unit) }} /> )} diff --git a/beszel/site/src/components/charts/swap-chart.tsx b/beszel/site/src/components/charts/swap-chart.tsx index 886e267..8074355 100644 --- a/beszel/site/src/components/charts/swap-chart.tsx +++ b/beszel/site/src/components/charts/swap-chart.tsx @@ -2,15 +2,7 @@ import { t } from "@lingui/core/macro" import { Area, AreaChart, CartesianGrid, YAxis } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart" -import { - useYAxisWidth, - cn, - formatShortDate, - toFixedWithoutTrailingZeros, - decimalString, - chartMargin, - formatBytes, -} from "@/lib/utils" +import { useYAxisWidth, cn, formatShortDate, decimalString, chartMargin, formatBytes, toFixedFloat } from "@/lib/utils" import { ChartData } from "@/types" import { memo } from "react" import { $userSettings } from "@/lib/stores" @@ -37,13 +29,13 @@ export default memo(function SwapChart({ chartData }: { chartData: ChartData }) direction="ltr" orientation={chartData.orientation} className="tracking-tighter" - domain={[0, () => toFixedWithoutTrailingZeros(chartData.systemStats.at(-1)?.stats.s ?? 0.04, 2)]} + domain={[0, () => toFixedFloat(chartData.systemStats.at(-1)?.stats.s ?? 0.04, 2)]} width={yAxisWidth} tickLine={false} axisLine={false} tickFormatter={(value) => { const { value: convertedValue, unit } = formatBytes(value * 1024, false, userSettings.unitDisk, true) - return updateYAxisWidth(decimalString(convertedValue, value >= 10 ? 0 : 1) + " " + unit) + return updateYAxisWidth(toFixedFloat(convertedValue, value >= 10 ? 0 : 1) + " " + unit) }} /> {xAxis(chartData)} diff --git a/beszel/site/src/components/charts/temperature-chart.tsx b/beszel/site/src/components/charts/temperature-chart.tsx index 8a87298..0754b73 100644 --- a/beszel/site/src/components/charts/temperature-chart.tsx +++ b/beszel/site/src/components/charts/temperature-chart.tsx @@ -12,7 +12,7 @@ import { useYAxisWidth, cn, formatShortDate, - toFixedWithoutTrailingZeros, + toFixedFloat, chartMargin, formatTemperature, decimalString, @@ -76,7 +76,7 @@ export default memo(function TemperatureChart({ chartData }: { chartData: ChartD width={yAxisWidth} tickFormatter={(val) => { const { value, unit } = formatTemperature(val, userSettings.unitTemp) - return updateYAxisWidth(toFixedWithoutTrailingZeros(value, 2) + " " + unit) + return updateYAxisWidth(toFixedFloat(value, 2) + " " + unit) }} tickLine={false} axisLine={false} diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx index aa3cad4..376cce1 100644 --- a/beszel/site/src/components/routes/system.tsx +++ b/beszel/site/src/components/routes/system.tsx @@ -26,7 +26,7 @@ import { getHostDisplayValue, getPbTimestamp, listen, - toFixedWithoutTrailingZeros, + toFixedFloat, useLocalStorage, } from "@/lib/utils" import { Separator } from "../ui/separator" @@ -478,7 +478,7 @@ export default function SystemDetail({ name }: { name: string }) { chartData={chartData} chartName="CPU Usage" maxToggled={maxValues} - tickFormatter={(val) => toFixedWithoutTrailingZeros(val, 2) + "%"} + tickFormatter={(val) => toFixedFloat(val, 2) + "%"} contentFormatter={({ value }) => decimalString(value) + "%"} /> @@ -533,7 +533,7 @@ export default function SystemDetail({ name }: { name: string }) { maxToggled={maxValues} tickFormatter={(val) => { const { value, unit } = formatBytes(val, true, userSettings.unitDisk, true) - return decimalString(value, value >= 10 ? 0 : 1) + " " + unit + return toFixedFloat(value, value >= 10 ? 0 : 1) + " " + unit }} contentFormatter={({ value }) => { const { value: convertedValue, unit } = formatBytes(value, true, userSettings.unitDisk, true) @@ -555,8 +555,7 @@ export default function SystemDetail({ name }: { name: string }) { maxToggled={maxValues} tickFormatter={(val) => { let { value, unit } = formatBytes(val, true, userSettings.unitNet, true) - // value = value >= 10 ? Math.ceil(value) : value - return decimalString(value, value >= 10 ? 0 : 1) + " " + unit + return toFixedFloat(value, value >= 10 ? 0 : 1) + " " + unit }} contentFormatter={({ value }) => { const { value: convertedValue, unit } = formatBytes(value, true, userSettings.unitNet, true) @@ -638,7 +637,7 @@ export default function SystemDetail({ name }: { name: string }) { toFixedWithoutTrailingZeros(val, 2) + "%"} + tickFormatter={(val) => toFixedFloat(val, 2) + "%"} contentFormatter={({ value }) => decimalString(value) + "%"} /> @@ -654,7 +653,7 @@ export default function SystemDetail({ name }: { name: string }) { max={gpu.mt} tickFormatter={(val) => { const { value, unit } = formatBytes(val, false, Unit.Bytes, true) - return decimalString(value, value >= 10 ? 0 : 1) + " " + unit + return toFixedFloat(value, value >= 10 ? 0 : 1) + " " + unit }} contentFormatter={({ value }) => { const { value: convertedValue, unit } = formatBytes(value, false, Unit.Bytes, true) @@ -699,7 +698,7 @@ export default function SystemDetail({ name }: { name: string }) { maxToggled={maxValues} tickFormatter={(val) => { const { value, unit } = formatBytes(val, true, userSettings.unitDisk, true) - return decimalString(value, value >= 10 ? 0 : 1) + " " + unit + return toFixedFloat(value, value >= 10 ? 0 : 1) + " " + unit }} contentFormatter={({ value }) => { const { value: convertedValue, unit } = formatBytes(value, true, userSettings.unitDisk, true) diff --git a/beszel/site/src/lib/utils.ts b/beszel/site/src/lib/utils.ts index d8e8c35..cf19457 100644 --- a/beszel/site/src/lib/utils.ts +++ b/beszel/site/src/lib/utils.ts @@ -226,16 +226,13 @@ export function useYAxisWidth() { return { yAxisWidth, updateYAxisWidth } } -export function toFixedWithoutTrailingZeros(num: number, digits: number) { - return parseFloat(num.toFixed(digits)).toString() -} - +/** Format number to x decimal places, without trailing zeros */ export function toFixedFloat(num: number, digits: number) { return parseFloat((digits === 0 ? Math.ceil(num) : num).toFixed(digits)) } let decimalFormatters: Map = new Map() -/** Format number to x decimal places */ +/** Format number to x decimal places, maintaining trailing zeros */ export function decimalString(num: number, digits = 2) { if (digits === 0) { return Math.ceil(num).toString()