y axis formatting

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>
 				);

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;

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;