23e3c30126
- Replaced hardcoded priority colors in `PriorityDistributionChart` and `DashboardStats` with centralized configuration functions for better maintainability. - Updated `RecentTasks` to utilize new status badge classes and labels from the centralized configuration. - Enhanced `status-config.ts` with new functions for retrieving colors and styles, ensuring consistency across components. - Marked the task for refactoring priority colors in TODO.md as complete.
95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend, PieLabelRenderProps } from 'recharts';
|
|
import { Card } from '@/components/ui/Card';
|
|
import { getPriorityChartColor } from '@/lib/status-config';
|
|
|
|
interface PriorityData {
|
|
priority: string;
|
|
count: number;
|
|
percentage: number;
|
|
[key: string]: string | number; // Index signature pour Recharts
|
|
}
|
|
|
|
interface PriorityDistributionChartProps {
|
|
data: PriorityData[];
|
|
title?: string;
|
|
}
|
|
|
|
// Couleurs importées depuis la configuration centralisée
|
|
|
|
export function PriorityDistributionChart({ data, title = "Distribution des Priorités" }: PriorityDistributionChartProps) {
|
|
// Tooltip personnalisé
|
|
const CustomTooltip = ({ active, payload }: { active?: boolean; payload?: Array<{ payload: PriorityData }> }) => {
|
|
if (active && payload && payload.length) {
|
|
const data = payload[0].payload;
|
|
return (
|
|
<div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-3 shadow-lg">
|
|
<p className="text-sm font-medium mb-1">{data.priority}</p>
|
|
<p className="text-sm text-[var(--muted-foreground)]">
|
|
{data.count} tâches ({data.percentage}%)
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
// Légende personnalisée
|
|
const CustomLegend = ({ payload }: { payload?: Array<{ value: string; color: string }> }) => {
|
|
return (
|
|
<div className="flex flex-wrap justify-center gap-4 mt-4">
|
|
{payload?.map((entry, index: number) => (
|
|
<div key={index} className="flex items-center gap-2">
|
|
<div
|
|
className="w-3 h-3 rounded-full"
|
|
style={{ backgroundColor: entry.color }}
|
|
></div>
|
|
<span className="text-sm text-[var(--muted-foreground)]">
|
|
{entry.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Label personnalisé pour afficher les pourcentages
|
|
const renderLabel = (props: PieLabelRenderProps) => {
|
|
const percentage = typeof props.percent === 'number' ? props.percent * 100 : 0;
|
|
return percentage > 5 ? `${Math.round(percentage)}%` : '';
|
|
};
|
|
|
|
return (
|
|
<Card className="p-6">
|
|
<h3 className="text-lg font-semibold mb-4">{title}</h3>
|
|
<div className="h-64">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
labelLine={false}
|
|
label={renderLabel}
|
|
outerRadius={80}
|
|
fill="#8884d8"
|
|
dataKey="count"
|
|
nameKey="priority"
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell
|
|
key={`cell-${index}`}
|
|
fill={getPriorityChartColor(entry.priority)}
|
|
/>
|
|
))}
|
|
</Pie>
|
|
<Tooltip content={<CustomTooltip />} />
|
|
<Legend content={<CustomLegend />} />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|