118 lines
3.2 KiB
TypeScript
118 lines
3.2 KiB
TypeScript
import Box from '@mui/material/Box';
|
|
import type { CardProps } from '@mui/material/Card';
|
|
import Card from '@mui/material/Card';
|
|
import Divider from '@mui/material/Divider';
|
|
import Stack from '@mui/material/Stack';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import useMediaQuery from '@mui/material/useMediaQuery';
|
|
import type { ChartOptions } from 'src/components/chart';
|
|
import { Chart, useChart } from 'src/components/chart';
|
|
import { fNumber } from 'src/utils/format-number';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
type Props = CardProps & {
|
|
chart: {
|
|
colors?: string[];
|
|
series: {
|
|
label: string;
|
|
percent: number;
|
|
total: number;
|
|
}[];
|
|
options?: ChartOptions;
|
|
};
|
|
};
|
|
|
|
export function BookingCheckInWidgets({ chart, sx, ...other }: Props) {
|
|
const theme = useTheme();
|
|
const smUp = useMediaQuery(theme.breakpoints.up('sm'));
|
|
|
|
const chartColors = chart.colors ?? [
|
|
[theme.palette.primary.light, theme.palette.primary.main],
|
|
[theme.palette.warning.light, theme.palette.warning.main],
|
|
];
|
|
|
|
const chartOptions = useChart({
|
|
chart: { sparkline: { enabled: true } },
|
|
stroke: { width: 0 },
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
colorStops: [
|
|
{ offset: 0, color: chartColors[0][0], opacity: 1 },
|
|
{ offset: 100, color: chartColors[0][1], opacity: 1 },
|
|
],
|
|
},
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
dataLabels: {
|
|
name: { show: false },
|
|
value: {
|
|
offsetY: 6,
|
|
fontSize: theme.typography.subtitle2.fontSize as string,
|
|
fontWeight: theme.typography.subtitle2.fontWeight,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
...chart.options,
|
|
});
|
|
|
|
return (
|
|
<Card sx={sx} {...other}>
|
|
<Stack
|
|
divider={
|
|
<Divider
|
|
flexItem
|
|
orientation={smUp ? 'vertical' : 'horizontal'}
|
|
sx={{ borderStyle: 'dashed' }}
|
|
/>
|
|
}
|
|
sx={{ flexDirection: { xs: 'column', sm: 'row' } }}
|
|
>
|
|
{chart.series.map((item) => (
|
|
<Box
|
|
key={item.label}
|
|
sx={{
|
|
py: 5,
|
|
gap: 3,
|
|
width: 1,
|
|
display: 'flex',
|
|
px: { xs: 3, sm: 0 },
|
|
alignItems: 'center',
|
|
justifyContent: { sm: 'center' },
|
|
}}
|
|
>
|
|
<Chart
|
|
type="radialBar"
|
|
series={[item.percent]}
|
|
options={{
|
|
...chartOptions,
|
|
...(item.label !== 'Sold' && {
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
colorStops: [
|
|
{ offset: 0, color: chartColors[1][0], opacity: 1 },
|
|
{ offset: 100, color: chartColors[1][1], opacity: 1 },
|
|
],
|
|
},
|
|
},
|
|
}),
|
|
}}
|
|
sx={{ width: 80, height: 80 }}
|
|
/>
|
|
|
|
<div>
|
|
<Box sx={{ mb: 0.5, typography: 'h5' }}>{fNumber(item.total)}</Box>
|
|
|
|
<Box sx={{ typography: 'body2', color: 'text.secondary' }}>{item.label}</Box>
|
|
</div>
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|