97 lines
2.2 KiB
TypeScript
97 lines
2.2 KiB
TypeScript
import * as React from "react";
|
|
import { PieChart } from "@mui/x-charts/PieChart";
|
|
import { useDrawingArea } from "@mui/x-charts/hooks";
|
|
import { styled } from "@mui/material/styles";
|
|
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";
|
|
|
|
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 data = [
|
|
{ title: "Total Resources", value: 50, color: colorPalette[0] },
|
|
{ title: "Total Stations", value: 20, color: colorPalette[1] },
|
|
{ title: "Station Manager", value: 15, color: colorPalette[2] },
|
|
{ title: "Total Booth", value: 15, color: colorPalette[3] },
|
|
];
|
|
|
|
export default function ResourcePieChart() {
|
|
return (
|
|
<Card
|
|
variant="outlined"
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "8px",
|
|
flexGrow: 1,
|
|
width: "100%",
|
|
height: "90%",
|
|
backgroundColor: "#202020",
|
|
}}
|
|
>
|
|
<CardContent>
|
|
<Typography component="h2" variant="subtitle2" color="#F2F2F2">
|
|
Resources
|
|
</Typography>
|
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
<PieChart
|
|
colors={colorPalette}
|
|
margin={{
|
|
left: 60,
|
|
right: 80,
|
|
top: 80,
|
|
bottom: 80,
|
|
}}
|
|
series={[
|
|
{
|
|
data,
|
|
innerRadius: 50,
|
|
outerRadius: 100,
|
|
paddingAngle: 0,
|
|
highlightScope: {
|
|
faded: "global",
|
|
highlighted: "item",
|
|
},
|
|
},
|
|
]}
|
|
height={300}
|
|
width={300}
|
|
slotProps={{
|
|
legend: { hidden: true },
|
|
}}
|
|
></PieChart>
|
|
|
|
<Stack spacing={1}>
|
|
{data.map((entry, index) => (
|
|
<Stack
|
|
key={index}
|
|
direction="row"
|
|
spacing={1}
|
|
alignItems="center"
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: 16,
|
|
height: 16,
|
|
backgroundColor: entry.color,
|
|
borderRadius: "50%",
|
|
}}
|
|
/>
|
|
<Typography variant="body2" color="#F2F2F2">
|
|
{entry.title}
|
|
</Typography>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|