163 lines
3.4 KiB
JavaScript
163 lines
3.4 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import ComputerDesktopIcon from '@heroicons/react/24/solid/ComputerDesktopIcon';
|
|
import DeviceTabletIcon from '@heroicons/react/24/solid/DeviceTabletIcon';
|
|
import PhoneIcon from '@heroicons/react/24/solid/PhoneIcon';
|
|
import {
|
|
Box,
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
Stack,
|
|
SvgIcon,
|
|
Typography,
|
|
useTheme
|
|
} from '@mui/material';
|
|
import { Chart } from 'src/components/chart';
|
|
|
|
const useChartOptions = (labels,title) => {
|
|
const theme = useTheme();
|
|
let options = {
|
|
chart: {
|
|
background: 'transparent'
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
labels,
|
|
legend: {
|
|
show: false
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
expandOnClick: false
|
|
}
|
|
},
|
|
states: {
|
|
active: {
|
|
filter: {
|
|
type: 'none'
|
|
}
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: 'none'
|
|
}
|
|
}
|
|
},
|
|
stroke: {
|
|
width: 0
|
|
},
|
|
theme: {
|
|
mode: theme.palette.mode
|
|
},
|
|
tooltip: {
|
|
fillSeriesColor: false
|
|
}
|
|
};
|
|
if(title === "Status"){
|
|
options.colors = [
|
|
theme.palette.success.main,
|
|
theme.palette.error.main,
|
|
]
|
|
}else if(title === "Vendors"){
|
|
options.colors = [
|
|
theme.palette.graphics.dark,
|
|
theme.palette.graphics.darkest,
|
|
theme.palette.graphics.light,
|
|
theme.palette.graphics.main,
|
|
theme.palette.graphics.lightest,
|
|
]
|
|
}
|
|
else{
|
|
options.colors = [
|
|
theme.palette.info.main,
|
|
theme.palette.warning.main,
|
|
theme.palette.graphics.lightest,
|
|
theme.palette.graphics.light,
|
|
]
|
|
}
|
|
return options
|
|
};
|
|
|
|
const iconMap = {
|
|
Desktop: (
|
|
<SvgIcon>
|
|
<ComputerDesktopIcon />
|
|
</SvgIcon>
|
|
),
|
|
Tablet: (
|
|
<SvgIcon>
|
|
<DeviceTabletIcon />
|
|
</SvgIcon>
|
|
),
|
|
Phone: (
|
|
<SvgIcon>
|
|
<PhoneIcon />
|
|
</SvgIcon>
|
|
)
|
|
};
|
|
|
|
export const OverviewTraffic = (props) => {
|
|
const { chartSeries, labels, sx, title } = props;
|
|
const chartOptions = useChartOptions(labels,title);
|
|
|
|
return (
|
|
<Card sx={sx}>
|
|
<div style={{display:'flex',justifyContent:'center'}}>
|
|
<CardHeader title={title} />
|
|
</div>
|
|
<CardContent>
|
|
<Chart
|
|
height={300}
|
|
options={chartOptions}
|
|
series={chartSeries}
|
|
type="donut"
|
|
width="100%"
|
|
/>
|
|
<Stack
|
|
alignItems="center"
|
|
direction="row"
|
|
justifyContent="center"
|
|
spacing={2}
|
|
sx={{ mt: 2 }}
|
|
>
|
|
{chartSeries.map((item, index) => {
|
|
const label = labels[index];
|
|
|
|
return (
|
|
<Box
|
|
key={label}
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center'
|
|
}}
|
|
>
|
|
{iconMap[label]}
|
|
<Typography
|
|
sx={{ my: 1 }}
|
|
variant="h8"
|
|
>
|
|
{label}
|
|
</Typography>
|
|
<Typography
|
|
color="text.secondary"
|
|
variant="subtitle2"
|
|
>
|
|
{item}%
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
OverviewTraffic.propTypes = {
|
|
chartSeries: PropTypes.array.isRequired,
|
|
labels: PropTypes.array.isRequired,
|
|
sx: PropTypes.object
|
|
};
|