refactor: consolidate fixedFloat funcs + remove trailing zeroes from y axis

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 {
+import { useYAxisWidth, cn, formatShortDate, chartMargin, toFixedFloat, formatBytes, decimalString } from "@/lib/utils"
-	useYAxisWidth,
-	cn,
-	formatShortDate,
-	chartMargin,
-	toFixedWithoutTrailingZeros,
-	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

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)}

beszel/site/src/components/charts/gpu-power-chart.tsx

@@ -8,14 +8,7 @@ import {
 	ChartTooltipContent,
 	xAxis,
 } from "@/components/ui/chart"
-import {
+import { useYAxisWidth, cn, formatShortDate, toFixedFloat, decimalString, chartMargin } from "@/lib/utils"
-	useYAxisWidth,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	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}

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)
 							}}
 						/>
 					)}

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 {
+import { useYAxisWidth, cn, formatShortDate, decimalString, chartMargin, formatBytes, toFixedFloat } from "@/lib/utils"
-	useYAxisWidth,
-	cn,
-	formatShortDate,
-	toFixedWithoutTrailingZeros,
-	decimalString,
-	chartMargin,
-	formatBytes,
-} 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)}

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}

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) + "%"}
 						/>
 					</ChartCard>
@@ -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 toFixedFloat(value, value >= 10 ? 0 : 1) + " " + unit
-								return decimalString(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 }) {
 										<AreaChartDefault
 											chartData={chartData}
 											chartName={`g.${id}.u`}
-											tickFormatter={(val) => toFixedWithoutTrailingZeros(val, 2) + "%"}
+											tickFormatter={(val) => toFixedFloat(val, 2) + "%"}
 											contentFormatter={({ value }) => decimalString(value) + "%"}
 										/>
 									</ChartCard>
@@ -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)

beszel/site/src/lib/utils.ts

@@ -226,16 +226,13 @@ export function useYAxisWidth() {
 	return { yAxisWidth, updateYAxisWidth }
 }
 
-export function toFixedWithoutTrailingZeros(num: number, digits: number) {
+/** Format number to x decimal places, without trailing zeros */
-	return parseFloat(num.toFixed(digits)).toString()
-}
-
 export function toFixedFloat(num: number, digits: number) {
 	return parseFloat((digits === 0 ? Math.ceil(num) : num).toFixed(digits))
 }
 
 let decimalFormatters: Map<number, Intl.NumberFormat> = 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()