jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2025-12-17 18:56:17 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

add translations for chart tooltips

Browse Source
This commit is contained in:
Henry Dollman
2024-10-30 17:53:44 -04:00
parent 14a4715eb8
commit 7f82aafff9
17 changed files with 113 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
beszel/site/src/components/charts/area-chart.tsx
View File

@@ -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())

4
beszel/site/src/components/charts/disk-chart.tsx
View File

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

6
beszel/site/src/components/charts/mem-chart.tsx
View File

@@ -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"

4
beszel/site/src/components/charts/swap-chart.tsx
View File

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