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 | 3x 23x 23x 23x 23x 2x 21x 3x | import type { MenuItemConfig } from '@/components/action-menu';
import { StatisticsBarChart } from '@/features/statistics/components/statistics-bar-chart';
import { DashboardStateRenderer } from './shared/dashboard-state-renderer';
import { DashboardCardWrapper } from './shared/dashboard-card-wrapper';
import { useStatistics } from '@/features/statistics/hooks/use-statistics';
import { useCardVisibility } from '../hooks/use-card-visibility';
import type { ChartDataPoint } from '@/features/statistics/utils/chart-data';
export const StatisticCard = () => {
// Manage card visibility
const { isVisible, hideCard } = useCardVisibility({
id: 'statisticCard',
defaultVisible: true,
});
const {
data = [],
isLoading: loading,
error,
refetch: onRetry,
} = useStatistics();
// Create action items with hide functionality
const cardActionItems: MenuItemConfig[] = [
{ label: 'View' },
{
label: 'Delete',
variant: 'destructive',
onClick: hideCard,
},
];
// Don't render if card is hidden
if (!isVisible) {
return null;
}
return (
<DashboardCardWrapper
title="Statistics"
actionItems={cardActionItems}
contentClassName="p-6 flex items-center justify-center"
className="mt-8 relative"
>
<DashboardStateRenderer
loading={loading}
error={error?.message || null}
data={data}
onRetry={onRetry}
loadingTitle="Statistics"
loadingMessage="Loading statistics..."
errorTitle=""
className="h-64"
>
{statisticsData => (
<div className="w-full">
<StatisticsBarChart
data={statisticsData as ChartDataPoint[]}
dataKey="value"
xAxisKey="company"
height={350}
showGrid={true}
showTooltip={true}
className="w-full"
/>
</div>
)}
</DashboardStateRenderer>
</DashboardCardWrapper>
);
};
|