migrate to lingui

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

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

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

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

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

@@ -4,11 +4,12 @@ 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"
+import { t } from "@lingui/macro"
+import { useLingui } from "@lingui/react"
 
 export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
-	const { t } = useTranslation()
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
+	const { _ } = useLingui()
 
 	const totalMem = toFixedFloat(chartData.systemStats.at(-1)?.stats.m ?? 0, 1)
 
@@ -61,7 +62,7 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 						}
 					/>
 					<Area
-						name={t("monitor.used")}
+						name={_(t`Used`)}
 						order={3}
 						dataKey="stats.mu"
 						type="monotoneX"
@@ -85,7 +86,7 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 						/>
 					)}
 					<Area
-						name={t("monitor.cache_buffers")}
+						name={_(t`Cache / Buffers`)}
 						order={1}
 						dataKey="stats.mb"
 						type="monotoneX"

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

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