44 lines
1.1 KiB
JavaScript
44 lines
1.1 KiB
JavaScript
import * as React from "react";
|
|
import CircularProgress from "@mui/material/CircularProgress";
|
|
import Typography from "@mui/material/Typography";
|
|
import Box from "@mui/material/Box";
|
|
|
|
export default function OverviewVisual(props) {
|
|
const { value, color, label } = props;
|
|
return (
|
|
<Box className="overview-visual-wrapper">
|
|
<Box sx={{ position: "relative", display: "inline-flex" }}>
|
|
<CircularProgress
|
|
variant="determinate"
|
|
value={value}
|
|
color={color}
|
|
size="6.25rem"
|
|
className="overview-visual-display"
|
|
/>
|
|
<Box
|
|
sx={{
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
position: "absolute",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Typography variant="h4" component="div">
|
|
{`${Math.round(value)}%`}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
<Typography
|
|
variant="h5"
|
|
component="div"
|
|
className="overview-visual-label"
|
|
>
|
|
{label}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|