add hebrew + new cpu charts refactoring

beszel.go

@@ -6,7 +6,7 @@ import "github.com/blang/semver"
 
 const (
 	// Version is the current version of the application.
-	Version = "0.15.2"
+	Version = "0.15.3-beta.1"
 	// AppName is the name of the application.
 	AppName = "beszel"
 )

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

@@ -109,7 +109,7 @@ export default function AreaChartDefault({
 								/>
 							)
 						})}
-						{legend && <ChartLegend content={<ChartLegendContent />} />}
+						{legend && <ChartLegend content={<ChartLegendContent reverse={reverseStackOrder} />} />}
 					</AreaChart>
 				</ChartContainer>
 			</div>

internal/site/src/components/routes/system/cpu-sheet.tsx

@@ -1,6 +1,6 @@
 import { t } from "@lingui/core/macro"
 import { MoreHorizontalIcon } from "lucide-react"
-import { memo, useMemo, useRef, useState } from "react"
+import { memo, useRef, useState } from "react"
 import AreaChartDefault, { DataPoint } from "@/components/charts/area-chart"
 import ChartTimeSelect from "@/components/charts/chart-time-select"
 import { Button } from "@/components/ui/button"
@@ -26,7 +26,7 @@ export default memo(function CpuCoresSheet({
 	const [cpuCoresOpen, setCpuCoresOpen] = useState(false)
 	const hasOpened = useRef(false)
 
-	const supportsBreakdown = useMemo(() => compareSemVer(chartData.agentVersion, minAgentVersion) >= 0, [chartData.agentVersion])
+	const supportsBreakdown = compareSemVer(chartData.agentVersion, minAgentVersion) >= 0
 
 	if (!supportsBreakdown) {
 		return null
@@ -44,48 +44,48 @@ export default memo(function CpuCoresSheet({
 
 	const breakdownDataPoints = [
 		{
-			label: t`Other`,
+			label: "System",
-			dataKey: ({ stats }: SystemStatsRecord) => {
+			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[1],
-				const total = stats?.cpub?.reduce((acc, curr) => acc + curr, 0) ?? 0
+			color: 3,
-				return total > 0 ? 100 - total : null
+			opacity: 0.35,
-			},
-			color: `hsl(80, 65%, 52%)`,
-			opacity: 0.4,
-			stackId: "a"
-		},
-		{
-			label: "Steal",
-			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[3],
-			color: 5,
-			opacity: 0.4,
-			stackId: "a"
-		},
-		{
-			label: "Idle",
-			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[4],
-			color: 2,
-			opacity: 0.4,
-			stackId: "a"
-		},
-		{
-			label: "IOWait",
-			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[2],
-			color: 4,
-			opacity: 0.4,
 			stackId: "a"
 		},
 		{
 			label: "User",
 			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[0],
 			color: 1,
-			opacity: 0.4,
+			opacity: 0.35,
 			stackId: "a"
 		},
 		{
-			label: "System",
+			label: "IOWait",
-			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[1],
+			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[2],
-			color: 3,
+			color: 4,
-			opacity: 0.4,
+			opacity: 0.35,
+			stackId: "a"
+		},
+		{
+			label: "Steal",
+			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[3],
+			color: 5,
+			opacity: 0.35,
+			stackId: "a"
+		},
+		{
+			label: "Idle",
+			dataKey: ({ stats }: SystemStatsRecord) => stats?.cpub?.[4],
+			color: 2,
+			opacity: 0.35,
+			stackId: "a"
+		},
+		{
+			label: t`Other`,
+			dataKey: ({ stats }: SystemStatsRecord) => {
+				const total = stats?.cpub?.reduce((acc, curr) => acc + curr, 0) ?? 0
+				return total > 0 ? 100 - total : null
+			},
+			color: `hsl(80, 65%, 52%)`,
+			opacity: 0.35,
 			stackId: "a"
 		},
 	] as DataPoint[]
@@ -118,13 +118,13 @@ export default memo(function CpuCoresSheet({
 							className="min-h-auto"
 						>
 							<AreaChartDefault
-								reverseStackOrder={true}
 								chartData={chartData}
 								maxToggled={maxValues}
 								legend={true}
 								dataPoints={breakdownDataPoints}
 								tickFormatter={(val) => `${toFixedFloat(val, 2)}%`}
 								contentFormatter={({ value }) => `${decimalString(value)}%`}
+								reverseStackOrder={true}
 								itemSorter={() => 1}
 								domain={[0, 100]}
 							/>

internal/site/src/components/ui/chart.tsx

@@ -257,14 +257,17 @@ const ChartLegendContent = React.forwardRef<
 	Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
 		hideIcon?: boolean
 		nameKey?: string
+		reverse?: boolean
 	}
->(({ className, payload, verticalAlign = "bottom" }, ref) => {
+>(({ className, payload, verticalAlign = "bottom", reverse = false }, ref) => {
 	// const { config } = useChart()
 
 	if (!payload?.length) {
 		return null
 	}
 
+	const reversedPayload = reverse ? [...payload].reverse() : payload
+
 	return (
 		<div
 			ref={ref}
@@ -274,7 +277,7 @@ const ChartLegendContent = React.forwardRef<
 				className
 			)}
 		>
-			{payload.map((item) => {
+			{reversedPayload.map((item) => {
 				// const key = `${nameKey || item.dataKey || 'value'}`
 				// const itemConfig = getPayloadConfigFromPayload(config, item, key)
 

internal/site/src/lib/i18n.ts

@@ -7,13 +7,15 @@ import { messages as enMessages } from "@/locales/en/en"
 import { BatteryState } from "./enums"
 import { $direction } from "./stores"
 
+const rtlLanguages = new Set(["ar", "fa", "he"])
+
 // activates locale
 function activateLocale(locale: string, messages: Messages = enMessages) {
 	i18n.load(locale, messages)
 	i18n.activate(locale)
 	document.documentElement.lang = locale
 	localStorage.setItem("lang", locale)
-	$direction.set(locale.startsWith("ar") || locale.startsWith("fa") ? "rtl" : "ltr")
+	$direction.set(rtlLanguages.has(locale) ? "rtl" : "ltr")
 }
 
 // dynamically loads translations for the given locale

internal/site/src/lib/languages.ts

@@ -44,6 +44,11 @@ export default [
 		label: "Français",
 		e: "🇫🇷",
 	},
+	{
+		lang: "he",
+		label: "עברית",
+		e: "🕎",
+	},
 	{
 		lang: "hr",
 		label: "Hrvatski",