bulk-email/src/components/ResourcePieChart/resourcePieChart.tsx

import { PieChart } from "@mui/x-charts/PieChart";
import Typography from "@mui/material/Typography";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
import { AppDispatch, RootState } from "../../redux/store/store";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { fetchDashboardData } from "../../redux/slices/dashboardSlice";

// const colorPalette = [
// 	"hsla(202, 69%, 60%, 1)",
// 	"hsl(204, 48.60%, 72.50%)",
// 	"hsl(214, 56.40%, 30.60%)",
// 	"hsl(222, 6.80%, 50.80%)",
// ];
const colorPalette = [
	"rgb(11, 13, 14)",
	"hsl(204, 59.60%, 78.60%)",
	"hsl(214, 77.50%, 13.90%)",
	"hsl(222, 4.10%, 52.20%)",
];

export default function ResourcePieChart() {
	const theme = useTheme();
	const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
	const isSmScreen = useMediaQuery(theme.breakpoints.between("sm", "md"));
	const dispatch = useDispatch<AppDispatch>();

	const { carPortCounts } = useSelector(
		(state: RootState) => state.dashboardReducer
	);
	console.log("first", carPortCounts);
	useEffect(() => {
		dispatch(fetchDashboardData());
	}, [dispatch]);

	// console.log("Raw CarPortCounts from API:", carPortCounts);

	const dataToDisplay = carPortCounts;

	const getChartDimensions = () => {
		if (isXsScreen) {
			return {
				height: 240,
				width: 240,
				innerRadius: 40,
				outerRadius: 80,
				margin: { left: 20, right: 20, top: 40, bottom: 40 },
			};
		} else if (isSmScreen) {
			return {
				height: 260,
				width: 260,
				innerRadius: 50,
				outerRadius: 90,
				margin: { left: 40, right: 40, top: 60, bottom: 60 },
			};
		} else {
			return {
				height: 350,
				width: 350,
				innerRadius: 55,
				outerRadius: 110,
				margin: { left: 60, right: 80, top: 80, bottom: 80 },
			};
		}
	};

	const dimensions = getChartDimensions();

	return (
		<Card
			variant="outlined"
			sx={{
				display: "flex",
				flexDirection: "column",
				gap: { xs: "8px", sm: "10px", md: "12px" },
				flexGrow: 1,
				width: "100%",
				height: "auto",
				minHeight: { xs: "320px", sm: "340px", md: "360px" },
				padding: { xs: "12px", sm: "14px", md: "16px" },
				borderRadius: "30px",
				border: "none",

				background: "#D0E1E9",
			}}
		>
			<CardContent
				sx={{ padding: 0, "&:last-child": { paddingBottom: 0 } }}
			>
				<Typography
					component="h2"
					variant="subtitle2"
					sx={{
						fontWeight: 600,
						fontSize: { xs: "12px", sm: "14px", md: "16px" },
						lineHeight: "24px",
						marginBottom: { xs: 1, sm: 1.5, md: 2 },
					}}
				>
					Car Port Usage
				</Typography>
				<Box
					sx={{
						display: "flex",
						flexDirection: { xs: "column", sm: "row" },
						alignItems: "center",
						justifyContent: "center",
					}}
				>
					<PieChart
						colors={colorPalette}
						margin={dimensions.margin}
						series={[
							{
								data: dataToDisplay.map((entry, index) => ({
									title: entry.carPort,
									value: entry.count,
									color: colorPalette[
										index % colorPalette.length
									],
								})),
								innerRadius: dimensions.innerRadius,
								outerRadius: dimensions.outerRadius,
								paddingAngle: 2,
								cornerRadius: 8,
								highlightScope: {
									faded: "global",
									highlighted: "item",
								},
							},
						]}
						height={dimensions.height}
						width={dimensions.width}
						slotProps={{
							legend: { hidden: true },
						}}
					/>
					<Stack
						spacing={1}
						sx={{
							mt: { xs: 2, sm: 0 },
							ml: { xs: 0, sm: 2 },
						}}
					>
						<Typography sx={{ whiteSpace: "pre" ,fontWeight:500}}>
							Car Port Types:
						</Typography>

						{dataToDisplay.map((entry, index) => (
							<Stack
								key={index}
								direction="row"
								spacing={1}
								alignItems="center"
							>
								<Box
									sx={{
										width: { xs: 12, sm: 14, md: 16 },
										height: { xs: 12, sm: 14, md: 16 },
										backgroundColor:
											colorPalette[
												index % colorPalette.length
											],
										borderRadius: "50%",
									}}
								/>
								<Typography
									variant="body2"
									sx={{
										fontSize: {
											xs: "12px",
											sm: "14px",
											md: "16px",
										},
										// color: "#FFFFFF",
										color: "#111111",
									}}
								>
									{entry.carPort}
								</Typography>
							</Stack>
						))}
					</Stack>
				</Box>
			</CardContent>
		</Card>
	);
}