feat: wrapping Chart Gauge adaptations

Client/src/Components/Charts/Gauge/index.jsx

@@ -1,42 +1,32 @@
-import { RadialBarChart, RadialBar, ResponsiveContainer } from "recharts";
+import { RadialBarChart, RadialBar, ResponsiveContainer, Text, Legend } from "recharts";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 
 const MINIMUM_VALUE = 0;
 const MAXIMUM_VALUE = 100;
-const DATA = [{ value: MAXIMUM_VALUE }];
 const PROGRESS_THRESHOLD = 50;
-const DEFAULT_CONTAINER_HEIGHT = 160;
-const TEXT_POSITIONS = {
-	value: { x: "50%", y: "45%" },
-	label: { x: "50%", y: "55%" },
-};
-const COMMON_RADIAL_BAR_PROPS = {
-	minAngle: 15,
-	clockWise: true,
-	dataKey: "value",
-	cornerRadius: 0,
-};
+const DEFAULT_WIDTH = 60;
+// const DEFAULT_CONTAINER_HEIGHT = 160;
+// const TEXT_POSITIONS = {
+// 	value: { x: "50%", y: "45%" },
+// 	label: { x: "50%", y: "55%" },
+// };
 
+const RADIUS = "90%";
+const START_ANGLE = 90;
+const CHART_RANGE = 360;
 const RADIAL_BAR_CHART_PROPS = {
-	cx: "50%",
-	cy: "50%",
-	innerRadius: "45%",
-	outerRadius: "100%",
-	startAngle: 90,
-	endAngle: -270,
+	innerRadius: RADIUS,
+	outerRadius: RADIUS,
+	barSize: 6,
+	startAngle: START_ANGLE,
+	endAngle: START_ANGLE - CHART_RANGE,
+	margin: { top: 0, right: 0, bottom: 0, left: 0 },
 };
 
-const RADIAL_BAR_OVERLAY_PROPS = {
-	transform: "rotate(180deg)",
-	position: "absolute",
-	top: "0",
-	left: "0",
-};
-
-const COMMON_HEADER_PROPS = {
-	textAnchor: "middle",
-	dominantBaseline: "middle",
+const COMMON_RADIAL_BAR_PROPS = {
+	dataKey: "value",
+	cornerRadius: 8,
 };
 
 /**
@@ -64,19 +54,40 @@ const COMMON_HEADER_PROPS = {
  */
 const Gauge = ({
 	progressValue,
-	displayText,
-	containerHeight,
-	gaugeHeader,
-	gaugeSubheader,
+	containerWidth,
+	// displayText,
+	// containerHeight,
+	// gaugeHeader,
+	// gaugeSubheader,
 }) => {
 	const theme = useTheme();
 	const myProgressValue = Math.max(MINIMUM_VALUE, Math.min(progressValue, MAXIMUM_VALUE));
+	const chartData = [
+		{
+			value: MAXIMUM_VALUE,
+			fill: "transparent",
+		},
+		{
+			value: myProgressValue,
+			fill:
+				progressValue > PROGRESS_THRESHOLD
+					? theme.palette.primary.main
+					: theme.palette.percentage.uptimePoor,
+		},
+	];
+	const width = containerWidth ?? DEFAULT_WIDTH;
 
 	return (
-		<ResponsiveContainer height={containerHeight ?? DEFAULT_CONTAINER_HEIGHT}>
+		<ResponsiveContainer
+			aspect={1}
+			width={width}
+
+			/* height={containerHeight ?? DEFAULT_CONTAINER_HEIGHT}
+			width={containerWidth} */
+		>
 			<RadialBarChart
 				{...RADIAL_BAR_CHART_PROPS}
-				data={DATA}
+				data={chartData /* [{ ...DATA, fill: "#666666" }, { value: myProgressValue }] */}
 			>
 				<RadialBar
 					{...COMMON_RADIAL_BAR_PROPS}
@@ -86,14 +97,32 @@ const Gauge = ({
 							: theme.palette.percentage.uptimePoor
 					}
 					background={{ fill: theme.palette.background.fill }}
-					data={[{ value: myProgressValue }]}
+					label={{
+						position: "center",
+						fill: "#000000",
+						content: () => (
+							<text
+								x="50%"
+								y="50%"
+								textAnchor="middle"
+								dominantBaseline="middle"
+								style={{
+									fontSize: "12px",
+									fill: "#000000",
+								}}
+							>{`${myProgressValue}%`}</text>
+						),
+					}}
+					/* data={[{ value: myProgressValue }]} */
 				/>
-				<RadialBar
+
+				{/* <RadialBar
 					{...COMMON_RADIAL_BAR_PROPS}
 					data={DATA}
 					style={RADIAL_BAR_OVERLAY_PROPS}
-				/>
-				<text
+				/> */}
+				{/* TODO what is the text tag? */}
+				{/* <text
 					{...TEXT_POSITIONS.value}
 					role="text"
 					aria-label={`${myProgressValue}%`}
@@ -108,7 +137,7 @@ const Gauge = ({
 					style={{ ...COMMON_HEADER_PROPS, ...theme.chart.subheader, ...gaugeSubheader }}
 				>
 					{`${displayText}`}
-				</text>
+				</text> */}
 			</RadialBarChart>
 		</ResponsiveContainer>
 	);
@@ -121,4 +150,4 @@ Gauge.propTypes = {
 	gaugeHeader: PropTypes.object,
 	gaugeSubheader: PropTypes.object,
 };
-export default Gauge;
+export { Gauge };

Client/src/Components/Layouts/HomeLayout/index.css

@@ -6,6 +6,13 @@
 	padding: var(--env-var-spacing-2);
 }
 
+/* TODO go for this approach for responsiveness. The aside needs to be taken care of */
+/* @media (max-width: 1000px) {
+	.home-layout {
+		flex-direction: column !important;
+	}
+} */
+
 .home-layout aside {
 	position: sticky;
 	top: var(--env-var-spacing-2);

Client/src/Pages/Infrastructure/index.jsx

@@ -6,24 +6,28 @@ import {
 	TableBody,
 	TableCell,
 	TableContainer,
+	TableFooter,
 	TableHead,
+	TablePagination,
 	TableRow,
 } from "@mui/material";
 import { Heading } from "../../Components/Heading";
 import { useTheme } from "@emotion/react";
 import Greeting from "../../Utils/greeting";
 import Breadcrumbs from "../../Components/Breadcrumbs";
+import { StatusLabel } from "../../Components/Label";
+import { Gauge } from "../../Components/Charts/Gauge";
 
 const mockedData = {
 	ip: "https://192.168.1.30",
-	status: "Up",
+	status: "up",
 	processor: "2Ghz",
 	cpu: 80,
 	mem: 50,
 	disk: 70,
 };
 
-const ROWS = Array.from(Array(5).keys()).map(() => mockedData);
+const ROWS = Array.from(Array(20).keys()).map(() => mockedData);
 console.log(ROWS);
 
 const columns = [
@@ -100,7 +104,9 @@ function Infrastructure() {
 					marginBottom: "3rem",
 				}}
 			>
-				<Greeting type="uptime" />
+				<Box style={{ maxWidth: "65ch" }}>
+					<Greeting type="uptime" />
+				</Box>
 				<Button
 					variant="contained"
 					color="primary"
@@ -159,15 +165,46 @@ function Infrastructure() {
 								<TableRow key={index}>
 									{/* TODO iterate over column and get column id, applying row[column.id] */}
 									<TableCell>{row.ip}</TableCell>
-									<TableCell>{row.status}</TableCell>
+									<TableCell>
+										<StatusLabel
+											status={row.status}
+											text={row.status}
+											/* Usar o capitalize dentro do Status Label */
+											/* Fazer nao precisar mais passar o text*/
+											customStyles={{ textTransform: "capitalize" }}
+										/>
+									</TableCell>
 									<TableCell>{row.processor}</TableCell>
-									<TableCell>{row.cpu}</TableCell>
-									<TableCell>{row.mem}</TableCell>
-									<TableCell>{row.disk}</TableCell>
+									<TableCell>
+										<Gauge
+											progressValue={row.cpu}
+											containerWidth={60}
+											/* displayText={row.cpu}
+											containerHeight={100}
+											containerWidth={100} */
+										/>
+									</TableCell>
+									<TableCell>
+										<Gauge
+											progressValue={row.mem}
+											containerWidth={60}
+										/>
+									</TableCell>
+									<TableCell>
+										<Gauge
+											progressValue={row.disk}
+											containerWidth={60}
+										/>
+									</TableCell>
 									<TableCell>actions</TableCell>
 								</TableRow>
 							))}
 						</TableBody>
+						<TableFooter>
+							<TableRow>
+								<TablePagination></TablePagination>
+							</TableRow>
+						</TableFooter>
 					</Table>
 				</TableContainer>
 			</Stack>

Client/src/Pages/Monitors/Home/MonitorTable/index.jsx

@@ -343,6 +343,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching }) => {
 									percentageColor,
 									status: determineState(monitor),
 								};
+								console.log({ params });
 
 								return (
 									<TableRow