Merge pull request #185 from Cycling74/fde/cpu_percentage

cpu meter with permanently shown CPU load in %
Cycling74 · Dec 10, 2024 · 8441b13 · 8441b13
2 parents 0ed2ec7 + ef57dd6
commit 8441b13
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 3 deletions.
diff --git a/src/components/header/cpu.module.css b/src/components/header/cpu.module.css
@@ -0,0 +1,36 @@
+.cpuRoot {
+	border-radius: var(--mantine-radius-sm);
+	background-color: var(--mantine-color-dark-3);
+	overflow: hidden;
+	position: relative;
+	height: 20px;
+	width: 40px;
+}
+
+.cpuBar {
+	background-color: var(--mantine-primary-color-filled);
+	border-bottom-left-radius: var(--mantine-radius-sm);
+	border-top-left-radius: var(--mantine-radius-sm);
+	height: 100%;
+	left: 0;
+	top: 0;
+	position: absolute;
+	width: 100%;
+	z-index: 2;
+}
+
+.cpuLabel {
+	color: var(--mantine-primary-color-contrast);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: var(--mantine-font-size-xs);
+	font-weight: bold;
+	left: 0;
+	padding: 0 var(--mantine-spacing-xs);
+	position: absolute;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 3;
+}
diff --git a/src/components/header/cpu.tsx b/src/components/header/cpu.tsx
@@ -0,0 +1,19 @@
+import { forwardRef, FunctionComponent, memo } from "react";
+import classes from "./cpu.module.css";
+
+export type CPUStatusProps = {
+	load: number;
+};
+
+export const CPUStatus: FunctionComponent<CPUStatusProps> = memo(forwardRef<HTMLDivElement, CPUStatusProps>(
+	function WrappedCPUStatusComponent({ load }, ref) {
+		return (
+			<div className={ classes.cpuRoot } ref={ ref } >
+				<div className={ classes.cpuBar } style={{ width: `${load}%`}} />
+				<label className={ classes.cpuLabel } >
+					{ `${Math.round(load)}%` }
+				</label>
+			</div>
+		);
+	}
+));
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent, memo, useCallback } from "react";
-import { ActionIcon, AppShell, Burger, Group, Progress, Tooltip } from "@mantine/core";
+import { ActionIcon, AppShell, Burger, Group, Tooltip } from "@mantine/core";
 import classes from "./header.module.css";
 import { useThemeColorScheme } from "../../hooks/useTheme";
 import { useAppDispatch, useAppSelector } from "../../hooks/useAppDispatch";
@@ -12,6 +12,7 @@ import { RunnerInfoKey } from "../../models/runnerInfo";
 import { AppStatus } from "../../lib/constants";
 import { IconElement } from "../elements/icon";
 import { mdiMetronome, mdiSatelliteUplink } from "@mdi/js";
+import { CPUStatus } from "./cpu";
 
 export type HeaderProps = {
 	navOpen: boolean;
@@ -59,8 +60,8 @@ export const Header: FunctionComponent<HeaderProps> = memo(function WrappedHeade
 							<IconElement path={ mdiSatelliteUplink } />
 						</ActionIcon>
 					</Tooltip>
-					<Tooltip label={ `${Math.round(cpuLoad?.oscValue as number || 0)}% CPU Usage`}>
-						<Progress value={ cpuLoad?.oscValue as number || 0 } w={ 25 } size="lg" radius="xs" />
+					<Tooltip label="CPU Usage">
+						<CPUStatus load={ cpuLoad?.oscValue as number || 0  } />
 					</Tooltip>
 				</Group>
 			</Group>