ajout de la possibilité de partager publiquement la page statistiques d'une campagne
This commit is contained in:
Yannick Le Duc
@@ -6,61 +6,23 @@ import Link from 'next/link';
|
|||||||
import { Campaign, Proposition, Participant, Vote } from '@/types';
|
import { Campaign, Proposition, Participant, Vote } from '@/types';
|
||||||
import { campaignService, propositionService, participantService, voteService } from '@/lib/services';
|
import { campaignService, propositionService, participantService, voteService } from '@/lib/services';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { Progress } from '@/components/ui/progress';
|
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
||||||
import Navigation from '@/components/Navigation';
|
import Navigation from '@/components/Navigation';
|
||||||
import AuthGuard from '@/components/AuthGuard';
|
import AuthGuard from '@/components/AuthGuard';
|
||||||
import {
|
import {
|
||||||
BarChart3,
|
BarChart3,
|
||||||
Users,
|
ArrowLeft
|
||||||
Vote as VoteIcon,
|
|
||||||
TrendingUp,
|
|
||||||
Target,
|
|
||||||
Award,
|
|
||||||
FileText,
|
|
||||||
Calendar,
|
|
||||||
ArrowLeft,
|
|
||||||
SortAsc,
|
|
||||||
TrendingDown,
|
|
||||||
Users2,
|
|
||||||
Target as TargetIcon,
|
|
||||||
Hash
|
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { ExportStatsButton } from '@/components/ExportStatsButton';
|
import { ExportStatsButton } from '@/components/ExportStatsButton';
|
||||||
|
import { SharePublicStatsButton } from '@/components/SharePublicStatsButton';
|
||||||
|
import { StatsDisplay } from '@/components/StatsDisplay';
|
||||||
|
import { useStatsCalculation } from '@/hooks/useStatsCalculation';
|
||||||
|
import Footer from '@/components/Footer';
|
||||||
|
import VersionDisplay from '@/components/VersionDisplay';
|
||||||
|
|
||||||
export const dynamic = 'force-dynamic';
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
interface PropositionStats {
|
|
||||||
proposition: Proposition;
|
|
||||||
voteCount: number;
|
|
||||||
averageAmount: number;
|
|
||||||
minAmount: number;
|
|
||||||
maxAmount: number;
|
|
||||||
totalAmount: number;
|
|
||||||
participationRate: number;
|
|
||||||
voteDistribution: number;
|
|
||||||
consensusScore: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
type SortOption =
|
|
||||||
| 'popularity'
|
|
||||||
| 'total_impact'
|
|
||||||
| 'consensus'
|
|
||||||
| 'engagement'
|
|
||||||
| 'distribution'
|
|
||||||
| 'alphabetical';
|
|
||||||
|
|
||||||
const sortOptions = [
|
|
||||||
{ value: 'total_impact', label: 'Impact total', icon: Target, description: 'Somme totale investie' },
|
|
||||||
{ value: 'popularity', label: 'Popularité', icon: TrendingUp, description: 'Moyenne puis nombre de votants' },
|
|
||||||
{ value: 'consensus', label: 'Consensus', icon: Users2, description: 'Plus petit écart-type' },
|
|
||||||
{ value: 'engagement', label: 'Engagement', icon: Users, description: 'Taux de participation' },
|
|
||||||
{ value: 'distribution', label: 'Répartition', icon: BarChart3, description: 'Nombre de votes différents' },
|
|
||||||
{ value: 'alphabetical', label: 'Alphabétique', icon: Hash, description: 'Ordre alphabétique' }
|
|
||||||
];
|
|
||||||
|
|
||||||
function CampaignStatsPageContent() {
|
function CampaignStatsPageContent() {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const campaignId = params.id as string;
|
const campaignId = params.id as string;
|
||||||
@@ -70,8 +32,8 @@ function CampaignStatsPageContent() {
|
|||||||
const [propositions, setPropositions] = useState<Proposition[]>([]);
|
const [propositions, setPropositions] = useState<Proposition[]>([]);
|
||||||
const [votes, setVotes] = useState<Vote[]>([]);
|
const [votes, setVotes] = useState<Vote[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [propositionStats, setPropositionStats] = useState<PropositionStats[]>([]);
|
|
||||||
const [sortBy, setSortBy] = useState<SortOption>('total_impact');
|
const { propositionStats } = useStatsCalculation(campaign, participants, propositions, votes);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Vérifier la configuration Supabase
|
// Vérifier la configuration Supabase
|
||||||
@@ -110,42 +72,6 @@ function CampaignStatsPageContent() {
|
|||||||
setParticipants(participantsData);
|
setParticipants(participantsData);
|
||||||
setPropositions(propositionsData);
|
setPropositions(propositionsData);
|
||||||
setVotes(votesData);
|
setVotes(votesData);
|
||||||
|
|
||||||
// Calculer les statistiques des propositions
|
|
||||||
const stats = propositionsData.map(proposition => {
|
|
||||||
const propositionVotes = votesData.filter(vote => vote.proposition_id === proposition.id && vote.amount > 0);
|
|
||||||
const amounts = propositionVotes.map(vote => vote.amount);
|
|
||||||
const totalAmount = amounts.reduce((sum, amount) => sum + amount, 0);
|
|
||||||
|
|
||||||
// Calculer l'écart-type pour le consensus
|
|
||||||
const mean = amounts.length > 0 ? totalAmount / amounts.length : 0;
|
|
||||||
const variance = amounts.length > 0
|
|
||||||
? amounts.reduce((sum, amount) => sum + Math.pow(amount - mean, 2), 0) / amounts.length
|
|
||||||
: 0;
|
|
||||||
const consensusScore = Math.sqrt(variance);
|
|
||||||
|
|
||||||
// Calculer le taux de participation pour cette proposition
|
|
||||||
const participationRate = participantsData.length > 0
|
|
||||||
? (propositionVotes.length / participantsData.length) * 100
|
|
||||||
: 0;
|
|
||||||
|
|
||||||
// Calculer la répartition des votes (nombre de montants différents)
|
|
||||||
const uniqueAmounts = new Set(amounts).size;
|
|
||||||
|
|
||||||
return {
|
|
||||||
proposition,
|
|
||||||
voteCount: propositionVotes.length,
|
|
||||||
averageAmount: amounts.length > 0 ? Math.round(totalAmount / amounts.length) : 0,
|
|
||||||
minAmount: amounts.length > 0 ? Math.min(...amounts) : 0,
|
|
||||||
maxAmount: amounts.length > 0 ? Math.max(...amounts) : 0,
|
|
||||||
totalAmount,
|
|
||||||
participationRate: Math.round(participationRate * 100) / 100,
|
|
||||||
voteDistribution: uniqueAmounts,
|
|
||||||
consensusScore: Math.round(consensusScore * 100) / 100
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
setPropositionStats(stats);
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Erreur lors du chargement des données:', error);
|
console.error('Erreur lors du chargement des données:', error);
|
||||||
} finally {
|
} finally {
|
||||||
@@ -153,52 +79,6 @@ function CampaignStatsPageContent() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getSortedStats = () => {
|
|
||||||
const sorted = [...propositionStats];
|
|
||||||
|
|
||||||
switch (sortBy) {
|
|
||||||
case 'popularity':
|
|
||||||
return sorted.sort((a, b) => {
|
|
||||||
if (b.averageAmount !== a.averageAmount) {
|
|
||||||
return b.averageAmount - a.averageAmount;
|
|
||||||
}
|
|
||||||
return b.voteCount - a.voteCount;
|
|
||||||
});
|
|
||||||
|
|
||||||
case 'total_impact':
|
|
||||||
return sorted.sort((a, b) => b.totalAmount - a.totalAmount);
|
|
||||||
|
|
||||||
case 'consensus':
|
|
||||||
return sorted.sort((a, b) => a.consensusScore - b.consensusScore);
|
|
||||||
|
|
||||||
case 'engagement':
|
|
||||||
return sorted.sort((a, b) => b.participationRate - a.participationRate);
|
|
||||||
|
|
||||||
case 'distribution':
|
|
||||||
return sorted.sort((a, b) => b.voteDistribution - a.voteDistribution);
|
|
||||||
|
|
||||||
case 'alphabetical':
|
|
||||||
return sorted.sort((a, b) => a.proposition.title.localeCompare(b.proposition.title));
|
|
||||||
|
|
||||||
default:
|
|
||||||
return sorted;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getParticipationRate = () => {
|
|
||||||
if (participants.length === 0) return 0;
|
|
||||||
const votedParticipants = participants.filter(p => {
|
|
||||||
const participantVotes = votes.filter(v => v.participant_id === p.id);
|
|
||||||
return participantVotes.some(v => v.amount > 0);
|
|
||||||
});
|
|
||||||
return Math.round((votedParticipants.length / participants.length) * 100);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getAverageVotesPerProposition = () => {
|
|
||||||
if (propositions.length === 0) return 0;
|
|
||||||
const totalVotes = votes.filter(v => v.amount > 0).length;
|
|
||||||
return Math.round(totalVotes / propositions.length);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
@@ -242,9 +122,6 @@ function CampaignStatsPageContent() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const participationRate = getParticipationRate();
|
|
||||||
const averageVotesPerProposition = getAverageVotesPerProposition();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||||
<div className="container mx-auto px-4 py-8">
|
<div className="container mx-auto px-4 py-8">
|
||||||
@@ -279,6 +156,10 @@ function CampaignStatsPageContent() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
|
<SharePublicStatsButton
|
||||||
|
campaignId={campaignId}
|
||||||
|
disabled={loading}
|
||||||
|
/>
|
||||||
<ExportStatsButton
|
<ExportStatsButton
|
||||||
campaignTitle={campaign.title}
|
campaignTitle={campaign.title}
|
||||||
propositions={propositions}
|
propositions={propositions}
|
||||||
@@ -292,203 +173,22 @@ function CampaignStatsPageContent() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Overview Stats */}
|
{/* Stats Display */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
<StatsDisplay
|
||||||
<Card>
|
campaign={campaign}
|
||||||
<CardContent className="p-6">
|
participants={participants}
|
||||||
<div className="flex items-center justify-between">
|
propositions={propositions}
|
||||||
<div>
|
votes={votes}
|
||||||
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Taux de participation</p>
|
propositionStats={propositionStats}
|
||||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{participationRate}%</p>
|
showSorting={true}
|
||||||
</div>
|
showExportButton={false}
|
||||||
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
/>
|
||||||
<Users className="w-6 h-6 text-blue-600 dark:text-blue-300" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Progress value={participationRate} className="mt-4" />
|
|
||||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
|
|
||||||
{participants.filter(p => votes.some(v => v.participant_id === p.id && v.amount > 0)).length} / {participants.length} participants
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
{/* Footer */}
|
||||||
<CardContent className="p-6">
|
<Footer />
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div>
|
{/* Version Display */}
|
||||||
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Propositions</p>
|
<VersionDisplay />
|
||||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{propositions.length}</p>
|
|
||||||
</div>
|
|
||||||
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
|
|
||||||
<FileText className="w-6 h-6 text-purple-600 dark:text-purple-300" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
|
|
||||||
{averageVotesPerProposition} votes moy. par proposition
|
|
||||||
</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Propositions Stats */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
<VoteIcon className="w-5 h-5" />
|
|
||||||
Préférences par proposition
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Statistiques des montants exprimés par les participants pour chaque proposition
|
|
||||||
</CardDescription>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-sm font-medium text-slate-600 dark:text-slate-300">Trier par :</span>
|
|
||||||
<Select value={sortBy} onValueChange={(value: SortOption) => setSortBy(value)}>
|
|
||||||
<SelectTrigger className="w-56">
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent className="w-80">
|
|
||||||
{sortOptions.map((option) => {
|
|
||||||
const IconComponent = option.icon;
|
|
||||||
return (
|
|
||||||
<SelectItem key={option.value} value={option.value} className="py-3">
|
|
||||||
<div className="flex items-center gap-3 w-full">
|
|
||||||
<IconComponent className="w-4 h-4 flex-shrink-0" />
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<div className="font-medium truncate">{option.label}</div>
|
|
||||||
<div className="text-xs text-slate-500 truncate">{option.description}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SelectItem>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
{propositionStats.length === 0 ? (
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<FileText className="w-12 h-12 text-slate-400 mx-auto mb-4" />
|
|
||||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
|
||||||
Aucune proposition
|
|
||||||
</h3>
|
|
||||||
<p className="text-slate-600 dark:text-slate-300">
|
|
||||||
Aucune proposition n'a été soumise pour cette campagne.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{getSortedStats().map((stat, index) => (
|
|
||||||
<div key={stat.proposition.id} className="border rounded-lg p-6 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
|
|
||||||
<div className="flex items-start justify-between mb-4">
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="flex items-center gap-3 mb-4">
|
|
||||||
<Badge variant="outline" className="text-xs">
|
|
||||||
#{index + 1}
|
|
||||||
</Badge>
|
|
||||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
|
||||||
{stat.proposition.title}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{index === 0 && stat.averageAmount > 0 && (
|
|
||||||
<Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
|
|
||||||
<Award className="w-3 h-3 mr-1" />
|
|
||||||
{sortBy === 'popularity' ? 'Préférée' :
|
|
||||||
sortBy === 'total_impact' ? 'Plus d\'impact' :
|
|
||||||
sortBy === 'consensus' ? 'Plus de consensus' :
|
|
||||||
sortBy === 'engagement' ? 'Plus d\'engagement' :
|
|
||||||
sortBy === 'distribution' ? 'Plus de répartition' : 'Première'}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
|
||||||
{stat.voteCount}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
|
||||||
{stat.voteCount === 1 ? 'Votant' : 'Votants'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-green-600 dark:text-green-400">
|
|
||||||
{stat.averageAmount}€
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-slate-500 dark:text-slate-400">Moyenne</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-purple-600 dark:text-purple-400">
|
|
||||||
{stat.totalAmount}€
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-slate-500 dark:text-slate-400">Total</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-orange-600 dark:text-orange-400">
|
|
||||||
{stat.minAmount}€
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-slate-500 dark:text-slate-400">Minimum</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-red-600 dark:text-red-400">
|
|
||||||
{stat.maxAmount}€
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-slate-500 dark:text-slate-400">Maximum</p>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<p className="text-2xl font-bold text-indigo-600 dark:text-indigo-400">
|
|
||||||
{stat.participationRate}%
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-slate-500 dark:text-slate-400">Participation</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Métriques avancées */}
|
|
||||||
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Users2 className="w-4 h-4 text-slate-500" />
|
|
||||||
<span className="text-sm text-slate-600 dark:text-slate-300">Consensus</span>
|
|
||||||
</div>
|
|
||||||
<Badge variant="outline" className="text-xs">
|
|
||||||
Écart-type: {stat.consensusScore}€
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<BarChart3 className="w-4 h-4 text-slate-500" />
|
|
||||||
<span className="text-sm text-slate-600 dark:text-slate-300">Répartition</span>
|
|
||||||
</div>
|
|
||||||
<Badge variant="outline" className="text-xs">
|
|
||||||
{stat.voteDistribution} montants différents
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{stat.voteCount > 0 && (
|
|
||||||
<div className="mt-4">
|
|
||||||
<div className="flex justify-between text-xs text-slate-500 dark:text-slate-400 mb-1">
|
|
||||||
<span>Répartition des préférences</span>
|
|
||||||
<span>{stat.voteCount} {stat.voteCount === 1 ? 'votant' : 'votants'}</span>
|
|
||||||
</div>
|
|
||||||
<Progress
|
|
||||||
value={(stat.averageAmount / campaign.budget_per_user) * 100}
|
|
||||||
className="h-2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
173
src/app/stats/[id]/page.tsx
Normal file
173
src/app/stats/[id]/page.tsx
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useParams } from 'next/navigation';
|
||||||
|
import { Campaign, Proposition, Participant, Vote } from '@/types';
|
||||||
|
import { campaignService, propositionService, participantService, voteService } from '@/lib/services';
|
||||||
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { BarChart3 } from 'lucide-react';
|
||||||
|
import { StatsDisplay } from '@/components/StatsDisplay';
|
||||||
|
import { useStatsCalculation } from '@/hooks/useStatsCalculation';
|
||||||
|
import Footer from '@/components/Footer';
|
||||||
|
import VersionDisplay from '@/components/VersionDisplay';
|
||||||
|
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
|
function PublicStatsPageContent() {
|
||||||
|
const params = useParams();
|
||||||
|
const campaignId = params.id as string;
|
||||||
|
|
||||||
|
const [campaign, setCampaign] = useState<Campaign | null>(null);
|
||||||
|
const [participants, setParticipants] = useState<Participant[]>([]);
|
||||||
|
const [propositions, setPropositions] = useState<Proposition[]>([]);
|
||||||
|
const [votes, setVotes] = useState<Vote[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const { propositionStats } = useStatsCalculation(campaign, participants, propositions, votes);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Vérifier la configuration Supabase
|
||||||
|
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
|
||||||
|
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
|
||||||
|
|
||||||
|
// Si pas de configuration ou valeurs par défaut, rediriger vers setup
|
||||||
|
if (!supabaseUrl || !supabaseAnonKey ||
|
||||||
|
supabaseUrl === 'https://placeholder.supabase.co' ||
|
||||||
|
supabaseAnonKey === 'your-anon-key') {
|
||||||
|
console.log('🔧 Configuration Supabase manquante, redirection vers /setup');
|
||||||
|
window.location.href = '/setup';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (campaignId) {
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
}, [campaignId]);
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
const [campaignData, participantsData, propositionsData, votesData] = await Promise.all([
|
||||||
|
campaignService.getById(campaignId),
|
||||||
|
participantService.getByCampaign(campaignId),
|
||||||
|
propositionService.getByCampaign(campaignId),
|
||||||
|
voteService.getByCampaign(campaignId)
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (!campaignData) {
|
||||||
|
throw new Error('Campagne non trouvée');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vérifier que la campagne est en cours de vote ou terminée pour permettre l'accès public
|
||||||
|
if (campaignData.status !== 'voting' && campaignData.status !== 'closed') {
|
||||||
|
throw new Error('Les statistiques ne sont pas encore disponibles pour cette campagne');
|
||||||
|
}
|
||||||
|
|
||||||
|
setCampaign(campaignData);
|
||||||
|
setParticipants(participantsData);
|
||||||
|
setPropositions(propositionsData);
|
||||||
|
setVotes(votesData);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors du chargement des données:', error);
|
||||||
|
setError(error instanceof Error ? error.message : 'Une erreur est survenue');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-slate-900 dark:border-slate-100 mx-auto mb-4"></div>
|
||||||
|
<p className="text-slate-600 dark:text-slate-300">Chargement des statistiques...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !campaign) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<Card className="border-dashed">
|
||||||
|
<CardContent className="p-12 text-center">
|
||||||
|
<div className="w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-2xl">❌</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||||
|
{error || 'Campagne introuvable'}
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-600 dark:text-slate-300 mb-6">
|
||||||
|
{error === 'Campagne non trouvée'
|
||||||
|
? 'La campagne que vous recherchez n\'existe pas ou a été supprimée.'
|
||||||
|
: error === 'Les statistiques ne sont pas encore disponibles pour cette campagne'
|
||||||
|
? 'Cette campagne n\'a pas encore commencé ou les statistiques ne sont pas encore disponibles.'
|
||||||
|
: 'Une erreur est survenue lors du chargement des données.'}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-50 dark:bg-slate-900">
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className="flex items-center gap-4 mb-4">
|
||||||
|
<Badge variant={campaign.status === 'voting' ? 'default' : 'secondary'}>
|
||||||
|
{campaign.status === 'voting' ? 'En cours de vote' : 'Terminée'}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100 flex items-center gap-3">
|
||||||
|
<BarChart3 className="w-8 h-8 text-blue-600" />
|
||||||
|
Statistiques publiques
|
||||||
|
</h1>
|
||||||
|
<p className="text-slate-600 dark:text-slate-300 mt-2">
|
||||||
|
{campaign.title}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1">
|
||||||
|
{campaign.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats Display */}
|
||||||
|
<StatsDisplay
|
||||||
|
campaign={campaign}
|
||||||
|
participants={participants}
|
||||||
|
propositions={propositions}
|
||||||
|
votes={votes}
|
||||||
|
propositionStats={propositionStats}
|
||||||
|
showSorting={true}
|
||||||
|
showExportButton={false}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<Footer />
|
||||||
|
|
||||||
|
{/* Version Display */}
|
||||||
|
<VersionDisplay />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PublicStatsPage() {
|
||||||
|
return <PublicStatsPageContent />;
|
||||||
|
}
|
||||||
60
src/components/SharePublicStatsButton.tsx
Normal file
60
src/components/SharePublicStatsButton.tsx
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Share2, Check } from 'lucide-react';
|
||||||
|
|
||||||
|
interface SharePublicStatsButtonProps {
|
||||||
|
campaignId: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SharePublicStatsButton({
|
||||||
|
campaignId,
|
||||||
|
disabled = false
|
||||||
|
}: SharePublicStatsButtonProps) {
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
|
const handleShare = async () => {
|
||||||
|
if (disabled) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const publicUrl = `${window.location.origin}/stats/${campaignId}`;
|
||||||
|
await navigator.clipboard.writeText(publicUrl);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erreur lors de la copie:', error);
|
||||||
|
// Fallback pour les navigateurs qui ne supportent pas clipboard API
|
||||||
|
const textArea = document.createElement('textarea');
|
||||||
|
textArea.value = `${window.location.origin}/stats/${campaignId}`;
|
||||||
|
document.body.appendChild(textArea);
|
||||||
|
textArea.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(textArea);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
onClick={handleShare}
|
||||||
|
disabled={disabled}
|
||||||
|
variant="outline"
|
||||||
|
className="gap-2"
|
||||||
|
>
|
||||||
|
{copied ? (
|
||||||
|
<>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
URL copiée !
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Share2 className="h-4 w-4" />
|
||||||
|
Partager publiquement
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
332
src/components/StatsDisplay.tsx
Normal file
332
src/components/StatsDisplay.tsx
Normal file
@@ -0,0 +1,332 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Campaign, Proposition, Participant, Vote } from '@/types';
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Progress } from '@/components/ui/progress';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import {
|
||||||
|
BarChart3,
|
||||||
|
Users,
|
||||||
|
Vote as VoteIcon,
|
||||||
|
TrendingUp,
|
||||||
|
Target,
|
||||||
|
Award,
|
||||||
|
FileText,
|
||||||
|
SortAsc,
|
||||||
|
TrendingDown,
|
||||||
|
Users2,
|
||||||
|
Target as TargetIcon,
|
||||||
|
Hash
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
export interface PropositionStats {
|
||||||
|
proposition: Proposition;
|
||||||
|
voteCount: number;
|
||||||
|
averageAmount: number;
|
||||||
|
minAmount: number;
|
||||||
|
maxAmount: number;
|
||||||
|
totalAmount: number;
|
||||||
|
participationRate: number;
|
||||||
|
voteDistribution: number;
|
||||||
|
consensusScore: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
type SortOption =
|
||||||
|
| 'popularity'
|
||||||
|
| 'total_impact'
|
||||||
|
| 'consensus'
|
||||||
|
| 'engagement'
|
||||||
|
| 'distribution'
|
||||||
|
| 'alphabetical';
|
||||||
|
|
||||||
|
const sortOptions = [
|
||||||
|
{ value: 'total_impact', label: 'Impact total', icon: Target, description: 'Somme totale investie' },
|
||||||
|
{ value: 'popularity', label: 'Popularité', icon: TrendingUp, description: 'Moyenne puis nombre de votants' },
|
||||||
|
{ value: 'consensus', label: 'Consensus', icon: Users2, description: 'Plus petit écart-type' },
|
||||||
|
{ value: 'engagement', label: 'Engagement', icon: Users, description: 'Taux de participation' },
|
||||||
|
{ value: 'distribution', label: 'Répartition', icon: BarChart3, description: 'Nombre de votes différents' },
|
||||||
|
{ value: 'alphabetical', label: 'Alphabétique', icon: Hash, description: 'Ordre alphabétique' }
|
||||||
|
];
|
||||||
|
|
||||||
|
interface StatsDisplayProps {
|
||||||
|
campaign: Campaign;
|
||||||
|
participants: Participant[];
|
||||||
|
propositions: Proposition[];
|
||||||
|
votes: Vote[];
|
||||||
|
propositionStats: PropositionStats[];
|
||||||
|
showSorting?: boolean;
|
||||||
|
showExportButton?: boolean;
|
||||||
|
exportButton?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function StatsDisplay({
|
||||||
|
campaign,
|
||||||
|
participants,
|
||||||
|
propositions,
|
||||||
|
votes,
|
||||||
|
propositionStats,
|
||||||
|
showSorting = true,
|
||||||
|
showExportButton = false,
|
||||||
|
exportButton
|
||||||
|
}: StatsDisplayProps) {
|
||||||
|
const [sortBy, setSortBy] = useState<SortOption>('total_impact');
|
||||||
|
|
||||||
|
const getSortedStats = () => {
|
||||||
|
const sorted = [...propositionStats];
|
||||||
|
|
||||||
|
switch (sortBy) {
|
||||||
|
case 'popularity':
|
||||||
|
return sorted.sort((a, b) => {
|
||||||
|
if (b.averageAmount !== a.averageAmount) {
|
||||||
|
return b.averageAmount - a.averageAmount;
|
||||||
|
}
|
||||||
|
return b.voteCount - a.voteCount;
|
||||||
|
});
|
||||||
|
|
||||||
|
case 'total_impact':
|
||||||
|
return sorted.sort((a, b) => b.totalAmount - a.totalAmount);
|
||||||
|
|
||||||
|
case 'consensus':
|
||||||
|
return sorted.sort((a, b) => a.consensusScore - b.consensusScore);
|
||||||
|
|
||||||
|
case 'engagement':
|
||||||
|
return sorted.sort((a, b) => b.participationRate - a.participationRate);
|
||||||
|
|
||||||
|
case 'distribution':
|
||||||
|
return sorted.sort((a, b) => b.voteDistribution - a.voteDistribution);
|
||||||
|
|
||||||
|
case 'alphabetical':
|
||||||
|
return sorted.sort((a, b) => a.proposition.title.localeCompare(b.proposition.title));
|
||||||
|
|
||||||
|
default:
|
||||||
|
return sorted;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getParticipationRate = () => {
|
||||||
|
if (participants.length === 0) return 0;
|
||||||
|
const votedParticipants = participants.filter(p => {
|
||||||
|
const participantVotes = votes.filter(v => v.participant_id === p.id);
|
||||||
|
return participantVotes.some(v => v.amount > 0);
|
||||||
|
});
|
||||||
|
return Math.round((votedParticipants.length / participants.length) * 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getAverageVotesPerProposition = () => {
|
||||||
|
if (propositions.length === 0) return 0;
|
||||||
|
const totalVotes = votes.filter(v => v.amount > 0).length;
|
||||||
|
return Math.round(totalVotes / propositions.length);
|
||||||
|
};
|
||||||
|
|
||||||
|
const participationRate = getParticipationRate();
|
||||||
|
const averageVotesPerProposition = getAverageVotesPerProposition();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Overview Stats */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Taux de participation</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{participationRate}%</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
||||||
|
<Users className="w-6 h-6 text-blue-600 dark:text-blue-300" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Progress value={participationRate} className="mt-4" />
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
|
||||||
|
{participants.filter(p => votes.some(v => v.participant_id === p.id && v.amount > 0)).length} / {participants.length} participants
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-600 dark:text-slate-300">Propositions</p>
|
||||||
|
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{propositions.length}</p>
|
||||||
|
</div>
|
||||||
|
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center">
|
||||||
|
<FileText className="w-6 h-6 text-purple-600 dark:text-purple-300" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400 mt-2">
|
||||||
|
{averageVotesPerProposition} votes moy. par proposition
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Propositions Stats */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<VoteIcon className="w-5 h-5" />
|
||||||
|
Préférences par proposition
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Statistiques des montants exprimés par les participants pour chaque proposition
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{showSorting && (
|
||||||
|
<>
|
||||||
|
<span className="text-sm font-medium text-slate-600 dark:text-slate-300">Trier par :</span>
|
||||||
|
<Select value={sortBy} onValueChange={(value: SortOption) => setSortBy(value)}>
|
||||||
|
<SelectTrigger className="w-56">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent className="w-80">
|
||||||
|
{sortOptions.map((option) => {
|
||||||
|
const IconComponent = option.icon;
|
||||||
|
return (
|
||||||
|
<SelectItem key={option.value} value={option.value} className="py-3">
|
||||||
|
<div className="flex items-center gap-3 w-full">
|
||||||
|
<IconComponent className="w-4 h-4 flex-shrink-0" />
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<div className="font-medium truncate">{option.label}</div>
|
||||||
|
<div className="text-xs text-slate-500 truncate">{option.description}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SelectItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{showExportButton && exportButton}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{propositionStats.length === 0 ? (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<FileText className="w-12 h-12 text-slate-400 mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||||
|
Aucune proposition
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-600 dark:text-slate-300">
|
||||||
|
Aucune proposition n'a été soumise pour cette campagne.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{getSortedStats().map((stat, index) => (
|
||||||
|
<div key={stat.proposition.id} className="border rounded-lg p-6 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
#{index + 1}
|
||||||
|
</Badge>
|
||||||
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100">
|
||||||
|
{stat.proposition.title}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{index === 0 && stat.averageAmount > 0 && (
|
||||||
|
<Badge className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
|
||||||
|
<Award className="w-3 h-3 mr-1" />
|
||||||
|
{sortBy === 'popularity' ? 'Préférée' :
|
||||||
|
sortBy === 'total_impact' ? 'Plus d\'impact' :
|
||||||
|
sortBy === 'consensus' ? 'Plus de consensus' :
|
||||||
|
sortBy === 'engagement' ? 'Plus d\'engagement' :
|
||||||
|
sortBy === 'distribution' ? 'Plus de répartition' : 'Première'}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
||||||
|
{stat.voteCount}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||||
|
{stat.voteCount === 1 ? 'Votant' : 'Votants'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-2xl font-bold text-green-600 dark:text-green-400">
|
||||||
|
{stat.averageAmount}€
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400">Moyenne</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-2xl font-bold text-purple-600 dark:text-purple-400">
|
||||||
|
{stat.totalAmount}€
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400">Total</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-2xl font-bold text-orange-600 dark:text-orange-400">
|
||||||
|
{stat.minAmount}€
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400">Minimum</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-2xl font-bold text-red-600 dark:text-red-400">
|
||||||
|
{stat.maxAmount}€
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400">Maximum</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-2xl font-bold text-indigo-600 dark:text-indigo-400">
|
||||||
|
{stat.participationRate}%
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400">Participation</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Métriques avancées */}
|
||||||
|
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Users2 className="w-4 h-4 text-slate-500" />
|
||||||
|
<span className="text-sm text-slate-600 dark:text-slate-300">Consensus</span>
|
||||||
|
</div>
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
Écart-type: {stat.consensusScore}€
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<BarChart3 className="w-4 h-4 text-slate-500" />
|
||||||
|
<span className="text-sm text-slate-600 dark:text-slate-300">Répartition</span>
|
||||||
|
</div>
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
{stat.voteDistribution} montants différents
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{stat.voteCount > 0 && (
|
||||||
|
<div className="mt-4">
|
||||||
|
<div className="flex justify-between text-xs text-slate-500 dark:text-slate-400 mb-1">
|
||||||
|
<span>Répartition des préférences</span>
|
||||||
|
<span>{stat.voteCount} {stat.voteCount === 1 ? 'votant' : 'votants'}</span>
|
||||||
|
</div>
|
||||||
|
<Progress
|
||||||
|
value={(stat.averageAmount / campaign.budget_per_user) * 100}
|
||||||
|
className="h-2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
49
src/hooks/useStatsCalculation.ts
Normal file
49
src/hooks/useStatsCalculation.ts
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import { useMemo } from 'react';
|
||||||
|
import { Campaign, Proposition, Participant, Vote } from '@/types';
|
||||||
|
import { PropositionStats } from '@/components/StatsDisplay';
|
||||||
|
|
||||||
|
export function useStatsCalculation(
|
||||||
|
campaign: Campaign | null,
|
||||||
|
participants: Participant[],
|
||||||
|
propositions: Proposition[],
|
||||||
|
votes: Vote[]
|
||||||
|
) {
|
||||||
|
const propositionStats = useMemo((): PropositionStats[] => {
|
||||||
|
if (!campaign) return [];
|
||||||
|
|
||||||
|
return propositions.map(proposition => {
|
||||||
|
const propositionVotes = votes.filter(vote => vote.proposition_id === proposition.id && vote.amount > 0);
|
||||||
|
const amounts = propositionVotes.map(vote => vote.amount);
|
||||||
|
const totalAmount = amounts.reduce((sum, amount) => sum + amount, 0);
|
||||||
|
|
||||||
|
// Calculer l'écart-type pour le consensus
|
||||||
|
const mean = amounts.length > 0 ? totalAmount / amounts.length : 0;
|
||||||
|
const variance = amounts.length > 0
|
||||||
|
? amounts.reduce((sum, amount) => sum + Math.pow(amount - mean, 2), 0) / amounts.length
|
||||||
|
: 0;
|
||||||
|
const consensusScore = Math.sqrt(variance);
|
||||||
|
|
||||||
|
// Calculer le taux de participation pour cette proposition
|
||||||
|
const participationRate = participants.length > 0
|
||||||
|
? (propositionVotes.length / participants.length) * 100
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
// Calculer la répartition des votes (nombre de montants différents)
|
||||||
|
const uniqueAmounts = new Set(amounts).size;
|
||||||
|
|
||||||
|
return {
|
||||||
|
proposition,
|
||||||
|
voteCount: propositionVotes.length,
|
||||||
|
averageAmount: amounts.length > 0 ? Math.round(totalAmount / amounts.length) : 0,
|
||||||
|
minAmount: amounts.length > 0 ? Math.min(...amounts) : 0,
|
||||||
|
maxAmount: amounts.length > 0 ? Math.max(...amounts) : 0,
|
||||||
|
totalAmount,
|
||||||
|
participationRate: Math.round(participationRate * 100) / 100,
|
||||||
|
voteDistribution: uniqueAmounts,
|
||||||
|
consensusScore: Math.round(consensusScore * 100) / 100
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}, [campaign, participants, propositions, votes]);
|
||||||
|
|
||||||
|
return { propositionStats };
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user