From 227dc9e7e822335762f2b6f4ec3ef1bedb019590 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 29 Jan 2026 00:04:51 +0000
Subject: [PATCH] y axis formatting

---
 .../src/Pages/Infrastructure/Details/Components/Charts.tsx | 7 +++++++
 .../Infrastructure/Details/Components/ChartsNetwork.tsx    | 3 +--
 client/src/Pages/Infrastructure/Details/index.tsx          | 2 --
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/client/src/Pages/Infrastructure/Details/Components/Charts.tsx b/client/src/Pages/Infrastructure/Details/Components/Charts.tsx
index ac8011023..a293c310e 100644
--- a/client/src/Pages/Infrastructure/Details/Components/Charts.tsx
+++ b/client/src/Pages/Infrastructure/Details/Components/Charts.tsx
@@ -6,6 +6,8 @@ import type { HardwareCheckStats } from "@/Types/Monitor";
 import { useMemo } from "react";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
+const formatPercent = (value: number) => `${(value * 100).toFixed(0)}%`;
+const formatTemp = (value: number) => `${value.toFixed(0)}°C`;
 
 const getChartConfigs = (theme: any, checks: HardwareCheckStats[], t: any) => {
 	return [
@@ -16,6 +18,7 @@ const getChartConfigs = (theme: any, checks: HardwareCheckStats[], t: any) => {
 			strokeColor: theme.palette.primary.main,
 			gradientStartColor: theme.palette.primary.main,
 			yDomain: [0, 1],
+			yAxisFormatter: formatPercent,
 			idx: null,
 		},
 		{
@@ -25,6 +28,7 @@ const getChartConfigs = (theme: any, checks: HardwareCheckStats[], t: any) => {
 			strokeColor: theme.palette.success.main,
 			gradientStartColor: theme.palette.success.main,
 			yDomain: [0, 1],
+			yAxisFormatter: formatPercent,
 			idx: null,
 		},
 		{
@@ -34,6 +38,7 @@ const getChartConfigs = (theme: any, checks: HardwareCheckStats[], t: any) => {
 			strokeColor: theme.palette.error.main,
 			gradientStartColor: theme.palette.error.main,
 			yDomain: [0, 150],
+			yAxisFormatter: formatTemp,
 			idx: null,
 		},
 		...(checks[0]?.disks?.map((_, idx) => ({
@@ -43,6 +48,7 @@ const getChartConfigs = (theme: any, checks: HardwareCheckStats[], t: any) => {
 			strokeColor: theme.palette.warning.main,
 			gradientStartColor: theme.palette.warning.main,
 			yDomain: [0, 1],
+			yAxisFormatter: formatPercent,
 			idx,
 		})) || []),
 	];
@@ -88,6 +94,7 @@ export const InfraDetailsCharts = ({
 							gradientStartColor={config.gradientStartColor}
 							gradientEndColor="#ffffff"
 							strokeColor={config.strokeColor}
+							yAxisFormatter={config.yAxisFormatter}
 						/>
 					</Grid>
 				);
diff --git a/client/src/Pages/Infrastructure/Details/Components/ChartsNetwork.tsx b/client/src/Pages/Infrastructure/Details/Components/ChartsNetwork.tsx
index fb3ea845c..a911e00e3 100644
--- a/client/src/Pages/Infrastructure/Details/Components/ChartsNetwork.tsx
+++ b/client/src/Pages/Infrastructure/Details/Components/ChartsNetwork.tsx
@@ -7,8 +7,7 @@ import { useMemo } from "react";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
-const formatBytesToMB = (value: number) =>
-	`${(value / (1024 * 1024)).toFixed(2)} MB`;
+const formatBytesToMB = (value: number) => `${(value / (1024 * 1024)).toFixed(2)} MB`;
 
 interface ChartConfig {
 	title: string;
diff --git a/client/src/Pages/Infrastructure/Details/index.tsx b/client/src/Pages/Infrastructure/Details/index.tsx
index 31357d3c7..d7f208072 100644
--- a/client/src/Pages/Infrastructure/Details/index.tsx
+++ b/client/src/Pages/Infrastructure/Details/index.tsx
@@ -41,8 +41,6 @@ const InfrastructureDetails = () => {
 		{ refreshInterval: 10000, keepPreviousData: true }
 	);
 
-	console.log(monitorDetailsData);
-
 	const monitor = monitorDetailsData?.monitor;
 	const monitorStats = monitorDetailsData?.monitorStats ?? null;
 	const stats = monitorDetailsData?.stats;