add translations for chart tooltips

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

@@ -12,6 +12,7 @@ import {
 // import Spinner from '../spinner'
 import { ChartData } from "@/types"
 import { memo, useMemo } from "react"
+import { useTranslation } from "react-i18next"
 
 /** [label, key, color, opacity] */
 type DataKeys = [string, string, number, number]
@@ -38,6 +39,7 @@ export default memo(function AreaChartDefault({
 	chartData: ChartData
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+	const { t } = useTranslation()
 
 	const { chartTime } = chartData
 
@@ -45,26 +47,26 @@ export default memo(function AreaChartDefault({
 
 	const dataKeys: DataKeys[] = useMemo(() => {
 		// [label, key, color, opacity]
-		if (chartName === "CPU Usage") {
+		if (chartName === t("alerts.info.cpu_usage")) {
 			return [[chartName, "cpu", 1, 0.4]]
 		} else if (chartName === "dio") {
 			return [
-				["Write", "dw", 3, 0.3],
-				["Read", "dr", 1, 0.3],
+				[t("monitor.write"), "dw", 3, 0.3],
+				[t("monitor.read"), "dr", 1, 0.3],
 			]
 		} else if (chartName === "bw") {
 			return [
-				["Sent", "ns", 5, 0.2],
-				["Received", "nr", 2, 0.2],
+				[t("monitor.sent"), "ns", 5, 0.2],
+				[t("monitor.received"), "nr", 2, 0.2],
 			]
 		} else if (chartName.startsWith("efs")) {
 			return [
-				["Write", `${chartName}.w`, 3, 0.3],
-				["Read", `${chartName}.r`, 1, 0.3],
+				[t("monitor.write"), `${chartName}.w`, 3, 0.3],
+				[t("monitor.read"), `${chartName}.r`, 1, 0.3],
 			]
 		}
 		return []
-	}, [])
+	}, [t])
 
 	// console.log('Rendered at', new Date())
 

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

@@ -12,6 +12,7 @@ import {
 } from "@/lib/utils"
 import { ChartData } from "@/types"
 import { memo } from "react"
+import { useTranslation } from "react-i18next"
 
 export default memo(function DiskChart({
 	dataKey,
@@ -23,6 +24,7 @@ export default memo(function DiskChart({
 	chartData: ChartData
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+	const { t } = useTranslation()
 
 	if (chartData.systemStats.length === 0) {
 		return null
@@ -66,7 +68,7 @@ export default memo(function DiskChart({
 					/>
 					<Area
 						dataKey={dataKey}
-						name="Disk Usage"
+						name={t("alerts.info.disk_usage")}
 						type="monotoneX"
 						fill="hsl(var(--chart-4))"
 						fillOpacity={0.4}

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

@@ -4,8 +4,10 @@ import { ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/comp
 import { useYAxisWidth, cn, toFixedFloat, decimalString, formatShortDate, chartMargin } from "@/lib/utils"
 import { memo } from "react"
 import { ChartData } from "@/types"
+import { useTranslation } from "react-i18next"
 
 export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
+	const { t } = useTranslation()
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
 	const totalMem = toFixedFloat(chartData.systemStats.at(-1)?.stats.m ?? 0, 1)
@@ -57,7 +59,7 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 						}
 					/>
 					<Area
-						name="Used"
+						name={t("monitor.used")}
 						order={3}
 						dataKey="stats.mu"
 						type="monotoneX"
@@ -81,7 +83,7 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 						/>
 					)}
 					<Area
-						name="Cache / Buffers"
+						name={t("monitor.cache_buffers")}
 						order={1}
 						dataKey="stats.mb"
 						type="monotoneX"

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

@@ -11,9 +11,11 @@ import {
 } from "@/lib/utils"
 import { ChartData } from "@/types"
 import { memo } from "react"
+import { useTranslation } from "react-i18next"
 
 export default memo(function SwapChart({ chartData }: { chartData: ChartData }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+	const { t } = useTranslation()
 
 	if (chartData.systemStats.length === 0) {
 		return null
@@ -50,7 +52,7 @@ export default memo(function SwapChart({ chartData }: { chartData: ChartData })
 					/>
 					<Area
 						dataKey="stats.su"
-						name="Swap Usage"
+						name={t("monitor.used")}
 						type="monotoneX"
 						fill="hsl(var(--chart-2))"
 						fillOpacity={0.4}

beszel/site/src/components/routes/system.tsx

@@ -235,9 +235,9 @@ export default function SystemDetail({ name }: { name: string }) {
 		let uptime: number | string = system.info.u
 		if (system.info.u < 172800) {
 			const hours = Math.trunc(uptime / 3600)
-			uptime = `${hours} hour${hours == 1 ? "" : "s"}`
+			uptime = t("hours", { count: hours })
 		} else {
-			uptime = `${Math.trunc(system.info?.u / 86400)} days`
+			uptime = t("days", { count: Math.trunc(system.info?.u / 86400) })
 		}
 		return [
 			{ value: system.host, Icon: GlobeIcon },
@@ -261,7 +261,7 @@ export default function SystemDetail({ name }: { name: string }) {
 			Icon: any
 			hide?: boolean
 		}[]
-	}, [system.info])
+	}, [system.info, t])
 
 	/** Space for tooltip if more than 12 containers */
 	useEffect(() => {
@@ -376,7 +376,12 @@ export default function SystemDetail({ name }: { name: string }) {
 						)}`}
 						cornerEl={isLongerChart ? <SelectAvgMax store={cpuMaxStore} /> : null}
 					>
-						<AreaChartDefault chartData={chartData} chartName="CPU Usage" maxToggled={cpuMaxStore[0]} unit="%" />
+						<AreaChartDefault
+							chartData={chartData}
+							chartName={t("alerts.info.cpu_usage")}
+							maxToggled={cpuMaxStore[0]}
+							unit="%"
+						/>
 					</ChartCard>
 
 					{containerFilterBar && (