- Replaced direct imports from 'antd' with centralized imports from '@/shared/antd-imports' to align with new import rules and improve maintainability.
30 lines
772 B
TypeScript
30 lines
772 B
TypeScript
import React, { Suspense } from 'react';
|
|
import { Spin } from '@/shared/antd-imports';
|
|
|
|
// Lazy load chart components to reduce initial bundle size
|
|
const LazyBar = React.lazy(() =>
|
|
import('react-chartjs-2').then(module => ({ default: module.Bar }))
|
|
);
|
|
const LazyDoughnut = React.lazy(() =>
|
|
import('react-chartjs-2').then(module => ({ default: module.Doughnut }))
|
|
);
|
|
|
|
interface ChartLoaderProps {
|
|
type: 'bar' | 'doughnut';
|
|
data: any;
|
|
options?: any;
|
|
[key: string]: any;
|
|
}
|
|
|
|
const ChartLoader: React.FC<ChartLoaderProps> = ({ type, ...props }) => {
|
|
const ChartComponent = type === 'bar' ? LazyBar : LazyDoughnut;
|
|
|
|
return (
|
|
<Suspense fallback={<Spin size="large" />}>
|
|
<ChartComponent {...props} />
|
|
</Suspense>
|
|
);
|
|
};
|
|
|
|
export default ChartLoader;
|