feat: update Jira components with improved color schemes and UI enhancements
- Refined color schemes in `BurndownChart`, `CollaborationMatrix`, `ThroughputChart`, and `TeamActivityHeatmap` for better visibility and consistency. - Adjusted opacity handling in `TeamActivityHeatmap` for improved visual clarity. - Cleaned up imports in `CollaborationMatrix` and `SprintComparison` for better code organization. - Enhanced `JiraSync` component with updated color for the sync status indicator. - Updated `jira-period-filter` to remove unused imports, streamlining the codebase.
This commit is contained in:
@@ -21,21 +21,21 @@ export function TeamActivityHeatmap({ workloadByAssignee, statusDistribution, cl
|
||||
// Couleurs pour les différents types de travail
|
||||
const getWorkloadColor = (todo: number, inProgress: number, review: number) => {
|
||||
const total = todo + inProgress + review;
|
||||
if (total === 0) return 'bg-[var(--muted)]/20';
|
||||
if (total === 0) return null; // Géré séparément
|
||||
|
||||
// Dominante par type de travail
|
||||
// Dominante par type de travail avec couleurs CSS directes (versions plus douces)
|
||||
if (review > inProgress && review > todo) {
|
||||
return 'bg-purple-500'; // Review dominant
|
||||
return '#a855f7'; // purple-500 - Review dominant (plus doux)
|
||||
} else if (inProgress > todo) {
|
||||
return 'bg-orange-500'; // In Progress dominant
|
||||
return '#f59e0b'; // amber-500 - In Progress dominant (plus doux)
|
||||
} else {
|
||||
return 'bg-blue-500'; // Todo dominant
|
||||
return '#3b82f6'; // blue-500 - Todo dominant (plus doux)
|
||||
}
|
||||
};
|
||||
|
||||
const getOpacity = (total: number) => {
|
||||
const intensity = getIntensity(total);
|
||||
return Math.max(0.2, intensity / 100);
|
||||
return Math.max(0.6, Math.min(0.9, intensity / 100)); // Opacité plus élevée et moins de variation
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -45,28 +45,37 @@ export function TeamActivityHeatmap({ workloadByAssignee, statusDistribution, cl
|
||||
<div>
|
||||
<h4 className="text-sm font-medium mb-3">Intensité de travail par membre</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
|
||||
{workloadByAssignee.map(assignee => (
|
||||
<div
|
||||
key={assignee.assignee}
|
||||
className="relative p-3 rounded-lg border border-[var(--border)] transition-all hover:scale-105"
|
||||
style={{
|
||||
backgroundColor: getWorkloadColor(assignee.todoCount, assignee.inProgressCount, assignee.reviewCount),
|
||||
opacity: getOpacity(assignee.totalActive)
|
||||
}}
|
||||
>
|
||||
<div className="text-white text-xs font-medium mb-1 truncate">
|
||||
{workloadByAssignee.map(assignee => {
|
||||
const bgColor = getWorkloadColor(assignee.todoCount, assignee.inProgressCount, assignee.reviewCount);
|
||||
const isEmpty = assignee.totalActive === 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={assignee.assignee}
|
||||
className={`relative p-3 rounded-lg border border-[var(--border)] transition-all hover:scale-105 ${
|
||||
isEmpty ? 'bg-[var(--muted)]/30' : ''
|
||||
}`}
|
||||
style={bgColor ? {
|
||||
backgroundColor: bgColor,
|
||||
opacity: getOpacity(assignee.totalActive)
|
||||
} : {
|
||||
opacity: getOpacity(assignee.totalActive)
|
||||
}}
|
||||
>
|
||||
<div className={isEmpty ? "text-[var(--foreground)] text-xs font-medium mb-1 truncate" : "text-white text-xs font-medium mb-1 truncate"}>
|
||||
{assignee.displayName}
|
||||
</div>
|
||||
<div className="text-white text-lg font-bold">
|
||||
<div className={isEmpty ? "text-[var(--foreground)] text-lg font-bold" : "text-white text-lg font-bold"}>
|
||||
{assignee.totalActive}
|
||||
</div>
|
||||
<div className="text-white/80 text-xs">
|
||||
<div className={isEmpty ? "text-[var(--muted-foreground)] text-xs" : "text-white/80 text-xs"}>
|
||||
{assignee.todoCount > 0 && `${assignee.todoCount} à faire`}
|
||||
{assignee.inProgressCount > 0 && ` ${assignee.inProgressCount} en cours`}
|
||||
{assignee.reviewCount > 0 && ` ${assignee.reviewCount} review`}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,7 +86,7 @@ export function TeamActivityHeatmap({ workloadByAssignee, statusDistribution, cl
|
||||
<span>À faire dominant</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-orange-500 rounded"></div>
|
||||
<div className="w-3 h-3 bg-amber-500 rounded"></div>
|
||||
<span>En cours dominant</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
|
||||
Reference in New Issue
Block a user