Refactor unit preferences and update chart components

* Refactor user settings to use enum for unit preferences (temperature,
network, disk).
* Update chart components to utilize new unit formatting functions
* Remove deprecated conversion functions and streamline unit handling
across charts.
* Enhance settings page to allow user selection of unit preferences with
updated labels.

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

@@ -2,22 +2,11 @@ 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,
-	convertNetworkSpeed,
-	convertDiskSpeed,
-} from "@/lib/utils"
+import { useYAxisWidth, cn, formatShortDate, chartMargin } from "@/lib/utils"
 // import Spinner from '../spinner'
 import { ChartData } from "@/types"
 import { memo, useMemo } from "react"
 import { useLingui } from "@lingui/react/macro"
-import { useStore } from "@nanostores/react"
-import { $userSettings } from "@/lib/stores"
 
 /** [label, key, color, opacity] */
 type DataKeys = [string, string, number, number]
@@ -34,7 +23,6 @@ const getNestedValue = (path: string, max = false, data: any): number | null =>
 
 export default memo(function AreaChartDefault({
 	maxToggled = false,
-	unit = " MB/s",
 	chartName,
 	chartData,
 	max,
@@ -42,35 +30,19 @@ export default memo(function AreaChartDefault({
 	contentFormatter,
 }: {
 	maxToggled?: boolean
-	unit?: string
 	chartName: string
 	chartData: ChartData
 	max?: number
-	tickFormatter?: (value: number) => string
-	contentFormatter?: (value: number) => string
+	tickFormatter: (value: number) => string
+	contentFormatter: ({ value }: { value: number }) => string
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 	const { i18n } = useLingui()
-	const userSettings = useStore($userSettings)
 
 	const { chartTime } = chartData
 
 	const showMax = chartTime !== "1h" && maxToggled
 
-	// Determine if this is a network chart or disk chart and adjust unit accordingly
-	const isNetworkChart = chartName === "bw"
-	const isDiskChart = chartName === "dio" || chartName.startsWith("efs")
-	const displayUnit = useMemo(() => {
-		if (isNetworkChart) {
-			const { symbol } = convertNetworkSpeed(1, userSettings.networkUnit)
-			return symbol
-		} else if (isDiskChart) {
-			const { symbol } = convertDiskSpeed(1, userSettings.diskUnit)
-			return symbol
-		}
-		return unit
-	}, [isNetworkChart, isDiskChart, userSettings.networkUnit, userSettings.diskUnit, unit])
-
 	const dataKeys: DataKeys[] = useMemo(() => {
 		// [label, key, color, opacity]
 		if (chartName === "CPU Usage") {
@@ -117,21 +89,7 @@ export default memo(function AreaChartDefault({
 						className="tracking-tighter"
 						width={yAxisWidth}
 						domain={[0, max ?? "auto"]}
-						tickFormatter={(value) => {
-							let val: string
-							if (tickFormatter) {
-								val = tickFormatter(value)
-							} else if (isNetworkChart) {
-								const { value: convertedValue, symbol } = convertNetworkSpeed(value, userSettings.networkUnit)
-								val = toFixedWithoutTrailingZeros(convertedValue, 2) + symbol
-							} else if (isDiskChart) {
-								const { value: convertedValue, symbol } = convertDiskSpeed(value, userSettings.diskUnit)
-								val = toFixedWithoutTrailingZeros(convertedValue, 2) + symbol
-							} else {
-								val = toFixedWithoutTrailingZeros(value, 2) + displayUnit
-							}
-							return updateYAxisWidth(val)
-						}}
+						tickFormatter={(value) => updateYAxisWidth(tickFormatter(value))}
 						tickLine={false}
 						axisLine={false}
 					/>
@@ -142,18 +100,7 @@ export default memo(function AreaChartDefault({
 						content={
 							<ChartTooltipContent
 								labelFormatter={(_, data) => formatShortDate(data[0].payload.created)}
-								contentFormatter={({ value }) => {
-									if (contentFormatter) {
-										return contentFormatter(value)
-									} else if (isNetworkChart) {
-										const { display } = convertNetworkSpeed(value, userSettings.networkUnit)
-										return display
-									} else if (isDiskChart) {
-										const { display } = convertDiskSpeed(value, userSettings.diskUnit)
-										return display
-									}
-									return decimalString(value) + displayUnit
-								}}
+								contentFormatter={contentFormatter}
 								// indicator="line"
 							/>
 						}