feat: enhance Jira dashboard with export functionality and sprint comparison
- Added export options for CSV and JSON in `JiraDashboardPageClient`, allowing users to download metrics easily. - Integrated `SprintComparison` component to visualize inter-sprint trends and predictions. - Updated TODO.md to reflect completion of export metrics and sprint comparison features.
This commit is contained in:
Julien Froidefond
336
components/jira/SprintComparison.tsx
Normal file
336
components/jira/SprintComparison.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
'use client';
|
||||
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, Cell } from 'recharts';
|
||||
import { SprintVelocity } from '@/lib/types';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/Card';
|
||||
|
||||
interface SprintComparisonProps {
|
||||
sprintHistory: SprintVelocity[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface ComparisonMetrics {
|
||||
velocityTrend: 'improving' | 'declining' | 'stable';
|
||||
avgCompletion: number;
|
||||
consistency: 'high' | 'medium' | 'low';
|
||||
bestSprint: SprintVelocity;
|
||||
worstSprint: SprintVelocity;
|
||||
predictions: {
|
||||
nextSprintEstimate: number;
|
||||
confidenceLevel: 'high' | 'medium' | 'low';
|
||||
};
|
||||
}
|
||||
|
||||
export function SprintComparison({ sprintHistory, className }: SprintComparisonProps) {
|
||||
// Analyser les tendances
|
||||
const metrics = analyzeSprintTrends(sprintHistory);
|
||||
|
||||
// Données pour les graphiques
|
||||
const comparisonData = sprintHistory.map(sprint => ({
|
||||
name: sprint.sprintName.replace('Sprint ', ''),
|
||||
completion: sprint.completionRate,
|
||||
velocity: sprint.completedPoints,
|
||||
planned: sprint.plannedPoints,
|
||||
variance: sprint.plannedPoints > 0
|
||||
? ((sprint.completedPoints - sprint.plannedPoints) / sprint.plannedPoints) * 100
|
||||
: 0
|
||||
}));
|
||||
|
||||
const CustomTooltip = ({ active, payload, label }: {
|
||||
active?: boolean;
|
||||
payload?: Array<{ value: number; name: string; color: string }>;
|
||||
label?: string
|
||||
}) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-3 shadow-lg">
|
||||
<p className="font-medium text-sm mb-2">Sprint {label}</p>
|
||||
<div className="space-y-1 text-xs">
|
||||
{payload.map((item, index) => (
|
||||
<div key={index} className="flex justify-between gap-4">
|
||||
<span style={{ color: item.color }}>{item.name}:</span>
|
||||
<span className="font-mono" style={{ color: item.color }}>
|
||||
{typeof item.value === 'number' ?
|
||||
(item.name.includes('%') ? `${item.value}%` : item.value) :
|
||||
item.value
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Graphique de comparaison des taux de complétion */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium mb-3">Évolution des taux de complétion</h4>
|
||||
<div style={{ width: '100%', height: '200px' }}>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={comparisonData} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
stroke="var(--muted-foreground)"
|
||||
fontSize={10}
|
||||
/>
|
||||
<YAxis
|
||||
stroke="var(--muted-foreground)"
|
||||
fontSize={10}
|
||||
domain={[0, 100]}
|
||||
label={{ value: '%', angle: 0, position: 'insideLeft' }}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="completion"
|
||||
stroke="hsl(217, 91%, 60%)"
|
||||
strokeWidth={3}
|
||||
dot={{ fill: 'hsl(217, 91%, 60%)', strokeWidth: 2, r: 5 }}
|
||||
name="Taux de complétion"
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Graphique de comparaison des vélocités */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium mb-3">Comparaison planifié vs réalisé</h4>
|
||||
<div style={{ width: '100%', height: '200px' }}>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={comparisonData} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
stroke="var(--muted-foreground)"
|
||||
fontSize={10}
|
||||
/>
|
||||
<YAxis
|
||||
stroke="var(--muted-foreground)"
|
||||
fontSize={10}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Bar dataKey="planned" name="Planifié" fill="hsl(240, 5%, 64%)" radius={[2, 2, 0, 0]} />
|
||||
<Bar dataKey="velocity" name="Réalisé" fill="hsl(217, 91%, 60%)" radius={[2, 2, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Métriques de comparaison */}
|
||||
<div className="mt-6 grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Card className="p-3">
|
||||
<div className="text-center">
|
||||
<div className={`text-lg font-bold ${
|
||||
metrics.velocityTrend === 'improving' ? 'text-green-500' :
|
||||
metrics.velocityTrend === 'declining' ? 'text-red-500' : 'text-blue-500'
|
||||
}`}>
|
||||
{metrics.velocityTrend === 'improving' ? '📈' :
|
||||
metrics.velocityTrend === 'declining' ? '📉' : '➡️'}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--muted-foreground)] mt-1">
|
||||
Tendance générale
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-3">
|
||||
<div className="text-center">
|
||||
<div className={`text-lg font-bold ${
|
||||
metrics.avgCompletion > 80 ? 'text-green-500' :
|
||||
metrics.avgCompletion > 60 ? 'text-orange-500' : 'text-red-500'
|
||||
}`}>
|
||||
{Math.round(metrics.avgCompletion)}%
|
||||
</div>
|
||||
<div className="text-xs text-[var(--muted-foreground)] mt-1">
|
||||
Complétion moyenne
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-3">
|
||||
<div className="text-center">
|
||||
<div className={`text-lg font-bold ${
|
||||
metrics.consistency === 'high' ? 'text-green-500' :
|
||||
metrics.consistency === 'medium' ? 'text-orange-500' : 'text-red-500'
|
||||
}`}>
|
||||
{metrics.consistency === 'high' ? 'Haute' :
|
||||
metrics.consistency === 'medium' ? 'Moyenne' : 'Faible'}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--muted-foreground)] mt-1">
|
||||
Consistance
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-3">
|
||||
<div className="text-center">
|
||||
<div className={`text-lg font-bold ${
|
||||
metrics.predictions.confidenceLevel === 'high' ? 'text-green-500' :
|
||||
metrics.predictions.confidenceLevel === 'medium' ? 'text-orange-500' : 'text-red-500'
|
||||
}`}>
|
||||
{metrics.predictions.nextSprintEstimate}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--muted-foreground)] mt-1">
|
||||
Prédiction suivante
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Insights et recommandations */}
|
||||
<div className="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<Card className="p-4">
|
||||
<h4 className="text-sm font-medium mb-3">🏆 Meilleur sprint</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span>Sprint:</span>
|
||||
<span className="font-semibold">{metrics.bestSprint.sprintName}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Points complétés:</span>
|
||||
<span className="font-semibold text-green-500">{metrics.bestSprint.completedPoints}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Taux de complétion:</span>
|
||||
<span className="font-semibold text-green-500">{metrics.bestSprint.completionRate}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-4">
|
||||
<h4 className="text-sm font-medium mb-3">📉 Sprint à améliorer</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span>Sprint:</span>
|
||||
<span className="font-semibold">{metrics.worstSprint.sprintName}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Points complétés:</span>
|
||||
<span className="font-semibold text-red-500">{metrics.worstSprint.completedPoints}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Taux de complétion:</span>
|
||||
<span className="font-semibold text-red-500">{metrics.worstSprint.completionRate}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Recommandations */}
|
||||
<Card className="mt-4 p-4">
|
||||
<h4 className="text-sm font-medium mb-2">💡 Recommandations</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
{getRecommendations(metrics).map((recommendation, index) => (
|
||||
<div key={index} className="flex items-start gap-2">
|
||||
<span className="text-blue-500 mt-0.5">•</span>
|
||||
<span>{recommendation}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Analyse les tendances des sprints
|
||||
*/
|
||||
function analyzeSprintTrends(sprintHistory: SprintVelocity[]): ComparisonMetrics {
|
||||
if (sprintHistory.length === 0) {
|
||||
return {
|
||||
velocityTrend: 'stable',
|
||||
avgCompletion: 0,
|
||||
consistency: 'low',
|
||||
bestSprint: sprintHistory[0],
|
||||
worstSprint: sprintHistory[0],
|
||||
predictions: { nextSprintEstimate: 0, confidenceLevel: 'low' }
|
||||
};
|
||||
}
|
||||
|
||||
// Tendance de vélocité (comparer premiers vs derniers sprints)
|
||||
const firstHalf = sprintHistory.slice(0, Math.ceil(sprintHistory.length / 2));
|
||||
const secondHalf = sprintHistory.slice(Math.floor(sprintHistory.length / 2));
|
||||
|
||||
const firstHalfAvg = firstHalf.reduce((sum, s) => sum + s.completedPoints, 0) / firstHalf.length;
|
||||
const secondHalfAvg = secondHalf.reduce((sum, s) => sum + s.completedPoints, 0) / secondHalf.length;
|
||||
|
||||
const improvementRate = (secondHalfAvg - firstHalfAvg) / firstHalfAvg * 100;
|
||||
const velocityTrend: 'improving' | 'declining' | 'stable' =
|
||||
improvementRate > 10 ? 'improving' :
|
||||
improvementRate < -10 ? 'declining' : 'stable';
|
||||
|
||||
// Complétion moyenne
|
||||
const avgCompletion = sprintHistory.reduce((sum, s) => sum + s.completionRate, 0) / sprintHistory.length;
|
||||
|
||||
// Consistance (variance des taux de complétion)
|
||||
const completionRates = sprintHistory.map(s => s.completionRate);
|
||||
const variance = completionRates.reduce((sum, rate) => sum + Math.pow(rate - avgCompletion, 2), 0) / completionRates.length;
|
||||
const standardDeviation = Math.sqrt(variance);
|
||||
|
||||
const consistency: 'high' | 'medium' | 'low' =
|
||||
standardDeviation < 10 ? 'high' :
|
||||
standardDeviation < 20 ? 'medium' : 'low';
|
||||
|
||||
// Meilleur et pire sprint
|
||||
const bestSprint = sprintHistory.reduce((best, current) =>
|
||||
current.completionRate > best.completionRate ? current : best);
|
||||
const worstSprint = sprintHistory.reduce((worst, current) =>
|
||||
current.completionRate < worst.completionRate ? current : worst);
|
||||
|
||||
// Prédiction pour le prochain sprint
|
||||
const recentSprints = sprintHistory.slice(-3); // 3 derniers sprints
|
||||
const recentAvg = recentSprints.reduce((sum, s) => sum + s.completedPoints, 0) / recentSprints.length;
|
||||
const nextSprintEstimate = Math.round(recentAvg);
|
||||
|
||||
const confidenceLevel: 'high' | 'medium' | 'low' =
|
||||
consistency === 'high' && velocityTrend !== 'declining' ? 'high' :
|
||||
consistency === 'medium' ? 'medium' : 'low';
|
||||
|
||||
return {
|
||||
velocityTrend,
|
||||
avgCompletion,
|
||||
consistency,
|
||||
bestSprint,
|
||||
worstSprint,
|
||||
predictions: { nextSprintEstimate, confidenceLevel }
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Génère des recommandations basées sur l'analyse
|
||||
*/
|
||||
function getRecommendations(metrics: ComparisonMetrics): string[] {
|
||||
const recommendations: string[] = [];
|
||||
|
||||
if (metrics.velocityTrend === 'declining') {
|
||||
recommendations.push("Tendance en baisse détectée - Identifier les blockers récurrents");
|
||||
recommendations.push("Revoir les estimations ou la complexité des tâches récentes");
|
||||
} else if (metrics.velocityTrend === 'improving') {
|
||||
recommendations.push("Excellente progression ! Maintenir les bonnes pratiques actuelles");
|
||||
}
|
||||
|
||||
if (metrics.avgCompletion < 60) {
|
||||
recommendations.push("Taux de complétion faible - Considérer des sprints plus courts ou moins ambitieux");
|
||||
} else if (metrics.avgCompletion > 90) {
|
||||
recommendations.push("Taux de complétion très élevé - L'équipe pourrait prendre plus d'engagements");
|
||||
}
|
||||
|
||||
if (metrics.consistency === 'low') {
|
||||
recommendations.push("Consistance faible - Améliorer la prévisibilité des estimations");
|
||||
recommendations.push("Organiser des rétrospectives pour identifier les causes de variabilité");
|
||||
}
|
||||
|
||||
if (recommendations.length === 0) {
|
||||
recommendations.push("Performance stable et prévisible - Continuer sur cette lancée !");
|
||||
}
|
||||
|
||||
return recommendations;
|
||||
}
|
||||
Reference in New Issue
Block a user