add translations for chart tooltips

2025-10-19 17:59:28 +08:00 · 2024-10-30 17:53:44 -04:00
parent 14a4715eb8
commit 7f82aafff9
17 changed files with 113 additions and 28 deletions
--- a/beszel/site/src/components/charts/area-chart.tsx
+++ b/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())

--- a/beszel/site/src/components/charts/disk-chart.tsx
+++ b/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}
--- a/beszel/site/src/components/charts/mem-chart.tsx
+++ b/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"
--- a/beszel/site/src/components/charts/swap-chart.tsx
+++ b/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}
--- a/beszel/site/src/components/routes/system.tsx
+++ b/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 && (
--- a/beszel/site/src/locales/ar/translation.json
+++ b/beszel/site/src/locales/ar/translation.json
@@ -90,7 +90,7 @@
 				"to_ensure_alerts_are_delivered": "لضمان تسليم التنبيهات.",
 				"to_email_s": "إلى البريد الإلكتروني",
 				"enter_email_address": "أدخل عنوان البريد الإلكتروني...",
-				"des": "احفظ العنوان باستخدام مفتاح الإدخال أو الفاصلة. اتركه فا<EFBFBD><EFBFBD>غاً لتعطيل إشعارات البريد الإلكتروني."
+				"des": "احفظ العنوان باستخدام مفتاح الإدخال أو الفاصلة. اتركه فاغاً لتعطيل إشعارات البريد الإلكتروني."
 			},
 			"webhook_push": {
 				"title": "إشعارات Webhook / Push",
@@ -176,7 +176,13 @@
 		"usage": "الاستخدام",
 		"disk_usage_of": "استخدام القرص لـ",
 		"throughput_of": "معدل نقل",
-		"waiting_for": "في انتظار سجلات كافية للعرض"
+		"waiting_for": "في انتظار سجلات كافية للعرض",
+		"cache_buffers": "ذاكرة التخزين المؤقت / المخازن المؤقتة",
+		"read": "قراءة",
+		"write": "كتابة",
+		"sent": "مرسل",
+		"received": "مستلم",
+		"used": "مستخدم"
 	},
 	"auth": {
 		"login": "الرجاء تسجيل الدخول إلى حسابك",
--- a/beszel/site/src/locales/de/translation.json
+++ b/beszel/site/src/locales/de/translation.json
@@ -178,7 +178,13 @@
 		"usage": "Nutzung",
 		"disk_usage_of": "Festplattennutzung von",
 		"throughput_of": "Durchsatz von",
-		"waiting_for": "Warten auf genügend Datensätze zur Anzeige"
+		"waiting_for": "Warten auf genügend Datensätze zur Anzeige",
+		"cache_buffers": "Cache/Puffer",
+		"read": "Lesen",
+		"write": "Schreiben",
+		"sent": "Gesendet",
+		"received": "Empfangen",
+		"used": "Verwendet"
 	},
 	"auth": {
 		"login": "Bitte melden Sie sich bei Ihrem Konto an",
--- a/beszel/site/src/locales/en/translation.json
+++ b/beszel/site/src/locales/en/translation.json
@@ -160,6 +160,7 @@
 		"docker_cpu_usage": "Docker CPU Usage",
 		"docker_cpu_des": "Average CPU utilization of containers",
 		"total_memory_usage": "Total Memory Usage",
+		"cache_buffers": "Cache / Buffers",
 		"memory_des": "Precise utilization at the recorded time",
 		"docker_memory_usage": "Docker Memory Usage",
 		"docker_memory_des": "Memory usage of docker containers",
@@ -167,8 +168,12 @@
 		"disk_des": "Usage of root partition",
 		"disk_io": "Disk I/O",
 		"disk_io_des": "Throughput of root filesystem",
+		"read": "Read",
+		"write": "Write",
 		"bandwidth": "Bandwidth",
 		"bandwidth_des": "Network traffic of public interfaces",
+		"sent": "Sent",
+		"received": "Received",
 		"docker_network_io": "Docker Network I/O",
 		"docker_network_io_des": "Network traffic of docker containers",
 		"swap_usage": "Swap Usage",
@@ -176,6 +181,7 @@
 		"temperature": "Temperature",
 		"temperature_des": "Temperatures of system sensors",
 		"usage": "Usage",
+		"used": "Used",
 		"disk_usage_of": "Disk usage of",
 		"throughput_of": "Throughput of",
 		"waiting_for": "Waiting for enough records to display"
--- a/beszel/site/src/locales/es/translation.json
+++ b/beszel/site/src/locales/es/translation.json
@@ -178,7 +178,13 @@
 		"usage": "Uso",
 		"disk_usage_of": "Uso de disco de",
 		"throughput_of": "Rendimiento de",
-		"waiting_for": "Esperando suficientes registros para mostrar"
+		"waiting_for": "Esperando suficientes registros para mostrar",
+		"cache_buffers": "Caché/Búferes",
+		"read": "Lectura",
+		"write": "Escritura",
+		"sent": "Enviado",
+		"received": "Recibido",
+		"used": "Usado"
 	},
 	"auth": {
 		"login": "Por favor, inicie sesión en su cuenta",
--- a/beszel/site/src/locales/fr/translation.json
+++ b/beszel/site/src/locales/fr/translation.json
@@ -180,7 +180,13 @@
 		"usage": "Utilisation",
 		"disk_usage_of": "Utilisation du disque de",
 		"throughput_of": "Débit de",
-		"waiting_for": "En attente de suffisamment d'enregistrements pour afficher"
+		"waiting_for": "En attente de suffisamment d'enregistrements pour afficher",
+		"cache_buffers": "Cache/Tampons",
+		"read": "Lecture",
+		"write": "Écriture",
+		"sent": "Envoyé",
+		"received": "Reçu",
+		"used": "Utilisé"
 	},
 	"auth": {
 		"login": "Veuillez vous connecter à votre compte",
--- a/beszel/site/src/locales/ja/translation.json
+++ b/beszel/site/src/locales/ja/translation.json
@@ -179,7 +179,13 @@
 		"usage": "使用率",
 		"disk_usage_of": "のディスク使用率",
 		"throughput_of": "のスループット",
-		"waiting_for": "表示に必要な記録を待機中"
+		"waiting_for": "表示に必要な記録を待機中",
+		"cache_buffers": "キャッシュ/バッファ",
+		"read": "読み込み",
+		"write": "書き込み",
+		"sent": "送信",
+		"received": "受信",
+		"used": "使用済み"
 	},
 	"auth": {
 		"login": "アカウントにサインインしてください",
--- a/beszel/site/src/locales/ko/translation.json
+++ b/beszel/site/src/locales/ko/translation.json
@@ -179,7 +179,13 @@
 		"usage": "사용량",
 		"disk_usage_of": "디스크 사용량",
 		"throughput_of": "처리량",
-		"waiting_for": "표시할 충분한 기록을 기다리는 중"
+		"waiting_for": "표시할 충분한 기록을 기다리는 중",
+		"cache_buffers": "캐시/버퍼",
+		"read": "읽기",
+		"write": "쓰기",
+		"sent": "전송됨",
+		"received": "수신됨",
+		"used": "사용됨"
 	},
 	"auth": {
 		"login": "계정에 로그인하세요",
--- a/beszel/site/src/locales/pt/translation.json
+++ b/beszel/site/src/locales/pt/translation.json
@@ -178,7 +178,13 @@
 		"usage": "Uso",
 		"disk_usage_of": "Uso de disco de",
 		"throughput_of": "Taxa de transferência de",
-		"waiting_for": "Aguardando registros suficientes para exibir"
+		"waiting_for": "Aguardando registros suficientes para exibir",
+		"cache_buffers": "Cache/Buffers",
+		"read": "Leitura",
+		"write": "Escrita",
+		"sent": "Enviado",
+		"received": "Recebido",
+		"used": "Usado"
 	},
 	"auth": {
 		"login": "Por favor, faça login em sua conta",
--- a/beszel/site/src/locales/ru/translation.json
+++ b/beszel/site/src/locales/ru/translation.json
@@ -180,7 +180,13 @@
 		"usage": "Использование",
 		"disk_usage_of": "Использование диска",
 		"throughput_of": "Пропускная способность",
-		"waiting_for": "Ожидание достаточного количества записей для отображения"
+		"waiting_for": "Ожидание достаточного количества записей для отображения",
+		"cache_buffers": "Кэш/Буферы",
+		"read": "Чтение",
+		"write": "Запись",
+		"sent": "Отправлено",
+		"received": "Получено",
+		"used": "Использовано"
 	},
 	"auth": {
 		"login": "Пожалуйста, войдите в свою учетную запись",
--- a/beszel/site/src/locales/vi/translation.json
+++ b/beszel/site/src/locales/vi/translation.json
@@ -179,7 +179,13 @@
 		"usage": "Sử dụng",
 		"disk_usage_of": "Sử dụng ổ đĩa của",
 		"throughput_of": "Thông lượng của",
-		"waiting_for": "Đang chờ đủ bản ghi để hiển thị"
+		"waiting_for": "Đang chờ đủ bản ghi để hiển thị",
+		"cache_buffers": "Bộ nhớ đệm/Buffer",
+		"read": "Đọc",
+		"write": "Ghi",
+		"sent": "Đã gửi",
+		"received": "Đã nhận",
+		"used": "Đã sử dụng"
 	},
 	"auth": {
 		"login": "Vui lòng đăng nhập vào tài khoản của bạn",
--- a/beszel/site/src/locales/zh-CN/translation.json
+++ b/beszel/site/src/locales/zh-CN/translation.json
@@ -179,7 +179,13 @@
 		"usage": "使用率",
 		"disk_usage_of": "的磁盘使用率",
 		"throughput_of": "的吞吐量",
-		"waiting_for": "等待足够的记录以显示"
+		"waiting_for": "等待足够的记录以显示",
+		"cache_buffers": "缓存/缓冲区",
+		"read": "读取",
+		"write": "写入",
+		"sent": "已发送",
+		"received": "已接收",
+		"used": "已使用"
 	},
 	"auth": {
 		"login": "请登入你的账户",
--- a/beszel/site/src/locales/zh-HK/translation.json
+++ b/beszel/site/src/locales/zh-HK/translation.json
@@ -178,7 +178,13 @@
 		"usage": "使用率",
 		"disk_usage_of": "的磁碟使用率",
 		"throughput_of": "的吞吐量",
-		"waiting_for": "等待足夠的記錄以顯示"
+		"waiting_for": "等待足夠的記錄以顯示",
+		"cache_buffers": "快取/緩衝區",
+		"read": "讀取",
+		"write": "寫入",
+		"sent": "已發送",
+		"received": "已接收",
+		"used": "已使用"
 	},
 	"auth": {
 		"login": "請登入你的賬戶",