52 lines
990 B
JavaScript
52 lines
990 B
JavaScript
import { lazy, Suspense } from 'react';
|
|
|
|
import Box from '@mui/material/Box';
|
|
|
|
import { ChartLoading } from './chart-loading';
|
|
|
|
const ApexChart = lazy(() => import('react-apexcharts').then((mod) => ({ default: mod.default })));
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export function Chart({
|
|
sx,
|
|
type,
|
|
series,
|
|
height,
|
|
options,
|
|
loadingProps,
|
|
width = '100%',
|
|
...other
|
|
}) {
|
|
return (
|
|
<Box
|
|
dir="ltr"
|
|
sx={{
|
|
width,
|
|
height,
|
|
flexShrink: 0,
|
|
borderRadius: 1.5,
|
|
position: 'relative',
|
|
...sx,
|
|
}}
|
|
{...other}
|
|
>
|
|
<Suspense
|
|
fallback={
|
|
loadingProps?.disabled ? null : (
|
|
<ChartLoading type={type} sx={loadingProps?.sx} />
|
|
)
|
|
}
|
|
>
|
|
<ApexChart
|
|
type={type}
|
|
series={series}
|
|
options={options}
|
|
width="100%"
|
|
height="100%"
|
|
/>
|
|
</Suspense>
|
|
</Box>
|
|
);
|
|
}
|