Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | 1x 21x 21x 1x 21x 3x 18x 7x 11x | import { StatisticsBarChart } from './components/statistics-bar-chart';
import { useStatistics } from './hooks/use-statistics';
import { Heading } from '@/components/heading';
import { Text } from '@/components/text';
import { STATISTICS_PAGE, CHART_DEFAULTS } from '@/constants/statistics';
export const StatisticsPage = () => {
const { data, isLoading, error, refetch } = useStatistics();
const handleRetry = () => {
refetch();
};
if (isLoading) {
return (
<div className="flex-1 p-[85px]">
<div className="mb-6">
<Heading as="h1" size="h3">
{STATISTICS_PAGE.TITLE}
</Heading>
</div>
<div className="flex items-center justify-center h-64">
<div className="text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
<Text variant="muted">{STATISTICS_PAGE.LOADING_TEXT}</Text>
</div>
</div>
</div>
);
}
if (error) {
return (
<div className="flex-1 p-[85px]">
<div className="mb-6">
<Heading as="h1" size="h3">
{STATISTICS_PAGE.TITLE}
</Heading>
</div>
<div className="flex items-center justify-center h-64">
<div className="text-center max-w-md">
<div className="mb-4">
<svg
className="w-16 h-16 text-red-500 mx-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.864-.833-2.634 0L4.098 16.5c-.77.833.192 2.5 1.732 2.5z"
/>
</svg>
</div>
<Heading as="h3" size="h5" variant="destructive" className="mb-2">
{STATISTICS_PAGE.ERROR_TITLE}
</Heading>
<Text variant="destructive" className="mb-4">
{error?.message || STATISTICS_PAGE.ERROR_DEFAULT}
</Text>
<button
onClick={handleRetry}
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
>
{STATISTICS_PAGE.RETRY_BUTTON}
</button>
</div>
</div>
</div>
);
}
return (
<div className="flex-1 p-[85px]">
{/* Page Header */}
<div className="mb-6">
<Heading as="h1" size="h3">
{STATISTICS_PAGE.TITLE}
</Heading>
</div>
{/* Statistics Bar Chart with API data */}
<div className="bg-card rounded-lg border border-border shadow-sm p-6">
<div className="mb-4">
<Heading as="h2" size="h4">
{STATISTICS_PAGE.REPORT_TITLE}
</Heading>
</div>
<StatisticsBarChart
data={data || []}
dataKey={CHART_DEFAULTS.DATA_KEY}
xAxisKey={CHART_DEFAULTS.X_AXIS_KEY}
height={CHART_DEFAULTS.HEIGHT}
showGrid={CHART_DEFAULTS.SHOW_GRID}
showTooltip={CHART_DEFAULTS.SHOW_TOOLTIP}
showXAxis={CHART_DEFAULTS.SHOW_X_AXIS}
showYAxis={CHART_DEFAULTS.SHOW_Y_AXIS}
className={CHART_DEFAULTS.CLASS_NAME}
/>
</div>
</div>
);
};
export default StatisticsPage;
|