Écran Statistiques : inscriptions, réponses, cotisations et besoins
Nouvel onglet « Statistiques » (/statistiques, COORDINATION), alimenté
par GET /editions/{id}/stats (app/api/stats.py, recalculé à chaque appel,
aucune nouvelle entité) :
- inscriptions : total, 7 derniers jours, évolution cumulée par jour
- réponses : part des bénévoles ayant renseigné chaque information,
artistes les plus demandés
- cotisations : en ligne / sur place / aucune, montants par type,
mécénat, formulaires remplis sans paiement abouti
- besoins face aux bénévoles, par journée de festival : heures × personnes
demandées vs disponibilités déclarées vs affectées ; par poste, places
pourvues (plafonnées à l'effectif idéal de chaque créneau) et rapport
vœux / place
Graphiques SVG maison (components/charts.tsx) avec infobulles au survol
et au clavier, vue tableau pour chacun, palette validée (daltonisme,
contraste), mise en page vérifiée sur ordinateur et mobile. Le mock
calcule les mêmes chiffres et étale les inscriptions du jeu de démo.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
AdamThomas
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
ff57bbd863
commit
ee1f6ed72e
@@ -167,6 +167,12 @@ export function useMatrix() {
|
||||
return useQuery({ queryKey: queryKeys.matrix, queryFn: () => api.matrix.get(edition) });
|
||||
}
|
||||
|
||||
/** Statistiques de l'édition (inscriptions, réponses, paiements, besoins) —
|
||||
* recalculées côté serveur à chaque appel. */
|
||||
export function useStats() {
|
||||
return useQuery({ queryKey: ['stats', edition] as const, queryFn: () => api.stats.get(edition) });
|
||||
}
|
||||
|
||||
/** Configuration du recto/verso des badges (images, champs). */
|
||||
export function useBadgeTemplate() {
|
||||
return useQuery({
|
||||
|
||||
@@ -241,6 +241,9 @@ export function createHttpApi(baseUrl: string): PlanningApi {
|
||||
matrix: {
|
||||
get: (editionId) => request(`${base(editionId)}/matrix`),
|
||||
},
|
||||
stats: {
|
||||
get: (editionId) => request(`${base(editionId)}/stats`),
|
||||
},
|
||||
badges: {
|
||||
getTemplate: (editionId) => request(`${base(editionId)}/badges/template`),
|
||||
uploadFrontImage: (editionId, file: File) => {
|
||||
|
||||
@@ -161,6 +161,14 @@ const ARTIST_POOL = [
|
||||
];
|
||||
|
||||
const NOW = '2026-10-10T09:00:00';
|
||||
|
||||
/** Date d'inscription de démonstration du i-ème bénévole : plus dense en
|
||||
* fin de période (relances), jamais après `NOW`. */
|
||||
function registeredAt(i: number): string {
|
||||
const daysBefore = Math.floor(((i * 37) % 64) ** 1.4 / 9);
|
||||
const d = new Date(Date.UTC(2026, 9, 10 - daysBefore, 9 + (i % 10), (i * 13) % 60));
|
||||
return d.toISOString().slice(0, 19);
|
||||
}
|
||||
const NEVER_ASSIGNED = new Set([7, 21, 34, 48, 55]);
|
||||
const OVERLOADED = [3, 9];
|
||||
|
||||
@@ -323,6 +331,25 @@ export function buildMockState(): MockState {
|
||||
created_at: NOW,
|
||||
updated_at: NOW,
|
||||
});
|
||||
// Démo des statistiques : inscriptions étalées sur ~5 semaines et
|
||||
// quelques cotisations — dérivées de `i`, pas de `rnd()`, pour ne rien
|
||||
// décaler du reste du jeu de démonstration.
|
||||
const v = volunteers[volunteers.length - 1];
|
||||
v.created_at = registeredAt(i);
|
||||
if (i % 4 === 1) v.willing_to_pay_fee = true;
|
||||
if (i % 7 === 2 || i % 11 === 3) {
|
||||
const mecenat = i % 11 === 3;
|
||||
Object.assign(v, {
|
||||
willing_to_pay_fee: true,
|
||||
fee_payment_label: mecenat ? 'Mécénat' : 'Cotisation classique',
|
||||
fee_amount: mecenat ? 40 : 15,
|
||||
fee_payment_status: 'PAID',
|
||||
fee_paid_at: v.created_at,
|
||||
...(mecenat
|
||||
? { mecenat_address: '1 rue du Festival', mecenat_city: 'Rennes', mecenat_postal_code: '35000', mecenat_country: 'France' }
|
||||
: {}),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const me = volunteers[0];
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { uncoveredMinutes } from '@/lib/planning';
|
||||
import { dayBoundaryFromDayParts, festivalDay, uncoveredMinutes } from '@/lib/planning';
|
||||
import { hoursBetween, naiveMinutes } from '@/lib/time';
|
||||
|
||||
import type {
|
||||
@@ -44,6 +44,7 @@ import type {
|
||||
TokenResponse,
|
||||
Violation,
|
||||
VolunteerRead,
|
||||
EditionStats,
|
||||
} from '../schema';
|
||||
import { getAuthToken } from '../session';
|
||||
import { ApiError, type PlanningApi } from '../types';
|
||||
@@ -534,6 +535,146 @@ function hasBlocking(violations: Violation[]): boolean {
|
||||
return violations.some((v) => v.severity === 'BLOCKING');
|
||||
}
|
||||
|
||||
/** Miroir de `app/api/stats.py` (mêmes règles, données du mock). */
|
||||
function buildStats(): EditionStats {
|
||||
const vols = state.volunteers;
|
||||
const round = (n: number) => Math.round(n * 100) / 100;
|
||||
const addDay = (d: string) =>
|
||||
new Date(Date.UTC(+d.slice(0, 4), +d.slice(5, 7) - 1, +d.slice(8, 10) + 1))
|
||||
.toISOString()
|
||||
.slice(0, 10);
|
||||
|
||||
const perDay = new Map<string, number>();
|
||||
for (const v of vols) perDay.set(v.created_at.slice(0, 10), (perDay.get(v.created_at.slice(0, 10)) ?? 0) + 1);
|
||||
const byDay: EditionStats['registrations']['by_day'] = [];
|
||||
const days = [...perDay.keys()].sort();
|
||||
if (days.length) {
|
||||
let cumulative = 0;
|
||||
for (let d = days[0]; d <= days[days.length - 1]; d = addDay(d)) {
|
||||
cumulative += perDay.get(d) ?? 0;
|
||||
byDay.push({ date: d, count: perDay.get(d) ?? 0, cumulative });
|
||||
}
|
||||
}
|
||||
const latest = days.length ? days[days.length - 1] : '';
|
||||
const weekAgo = latest
|
||||
? new Date(Date.parse(`${latest}T00:00:00Z`) - 6 * 86400000).toISOString().slice(0, 10)
|
||||
: '';
|
||||
|
||||
const paid = vols.filter((v) => v.fee_payment_status === 'PAID');
|
||||
const byLabel = new Map<string, VolunteerRead[]>();
|
||||
for (const v of paid) byLabel.set(v.fee_payment_label ?? '', [...(byLabel.get(v.fee_payment_label ?? '') ?? []), v]);
|
||||
const mecenat = paid.filter((v) => v.mecenat_address);
|
||||
const sum = (list: VolunteerRead[]) => round(list.reduce((t, v) => t + (v.fee_amount ?? 0), 0));
|
||||
|
||||
const boundary = dayBoundaryFromDayParts(state.dayParts);
|
||||
type Row = { shifts: number; min: number; ideal: number; avail: number; who: Set<string>; assigned: number };
|
||||
const rows = new Map<string, Row>();
|
||||
const row = (d: string) => {
|
||||
if (!rows.has(d)) rows.set(d, { shifts: 0, min: 0, ideal: 0, avail: 0, who: new Set(), assigned: 0 });
|
||||
return rows.get(d) as Row;
|
||||
};
|
||||
const shiftsById = new Map(state.shifts.map((s) => [s.id, s]));
|
||||
for (const s of state.shifts) {
|
||||
const r = row(festivalDay(s.starts_at, boundary));
|
||||
const h = hoursBetween(s.starts_at, s.ends_at);
|
||||
r.shifts += 1;
|
||||
r.min += h * s.min_staff;
|
||||
r.ideal += h * s.ideal_staff;
|
||||
}
|
||||
for (const a of state.assignments) {
|
||||
const s = shiftsById.get(a.shift_id);
|
||||
if (s) row(festivalDay(s.starts_at, boundary)).assigned += hoursBetween(s.starts_at, s.ends_at);
|
||||
}
|
||||
const withAvailability = new Set<string>();
|
||||
for (const [vid, windows] of state.availability) {
|
||||
for (const w of windows) {
|
||||
const start = `${w.date}T${w.start_time.slice(0, 5)}:00`;
|
||||
const endDate = w.end_time > w.start_time ? w.date : addDay(w.date);
|
||||
const r = row(festivalDay(start, boundary));
|
||||
r.avail += hoursBetween(start, `${endDate}T${w.end_time.slice(0, 5)}:00`);
|
||||
r.who.add(vid);
|
||||
withAvailability.add(vid);
|
||||
}
|
||||
}
|
||||
const assignedByShift = new Map<string, number>();
|
||||
for (const a of state.assignments) assignedByShift.set(a.shift_id, (assignedByShift.get(a.shift_id) ?? 0) + 1);
|
||||
|
||||
return {
|
||||
registrations: {
|
||||
total: vols.length,
|
||||
last_7_days: vols.filter((v) => v.created_at.slice(0, 10) >= weekAgo).length,
|
||||
by_day: byDay,
|
||||
},
|
||||
answers: {
|
||||
total: vols.length,
|
||||
email: vols.filter((v) => v.email).length,
|
||||
phone: vols.filter((v) => v.phone).length,
|
||||
photo: vols.filter((v) => v.has_photo).length,
|
||||
comment: vols.filter((v) => v.comment).length,
|
||||
companion_note: vols.filter((v) => v.companion_wish_note).length,
|
||||
available: vols.filter((v) => v.self_declared_available).length,
|
||||
position_wishes: vols.filter((v) => v.wished_position_ids.length).length,
|
||||
artist_wishes: vols.filter((v) => v.artist_ids.length).length,
|
||||
companion_wishes: vols.filter((v) => v.wished_companion_ids.length).length,
|
||||
},
|
||||
payments: {
|
||||
online: vols.filter((v) => v.fee_payment_status !== null).length,
|
||||
on_site: vols.filter((v) => v.fee_payment_status === null && v.willing_to_pay_fee).length,
|
||||
none: vols.filter((v) => v.fee_payment_status === null && !v.willing_to_pay_fee).length,
|
||||
pending_unfinished: [...state.pendingSubmissions.values()].filter((p) => p.promotedVolunteerId === null).length,
|
||||
total_collected: sum(paid),
|
||||
mecenat_count: mecenat.length,
|
||||
mecenat_total: sum(mecenat),
|
||||
by_option: [...byLabel.entries()]
|
||||
.sort(([a], [b]) => a.localeCompare(b))
|
||||
.map(([label, group]) => ({
|
||||
label,
|
||||
mecenat: group.some((v) => v.mecenat_address),
|
||||
count: group.length,
|
||||
amount_total: sum(group),
|
||||
})),
|
||||
},
|
||||
artist_wishes: [...state.artists]
|
||||
.sort((a, b) => a.performance_date.localeCompare(b.performance_date) || a.start_time.localeCompare(b.start_time))
|
||||
.map((a) => ({
|
||||
id: a.id,
|
||||
name: a.name,
|
||||
date: a.performance_date,
|
||||
count: vols.filter((v) => v.artist_ids.includes(a.id)).length,
|
||||
})),
|
||||
needs: {
|
||||
by_day: [...rows.entries()]
|
||||
.sort(([a], [b]) => a.localeCompare(b))
|
||||
.map(([date, r]) => ({
|
||||
date,
|
||||
shifts: r.shifts,
|
||||
min_hours: round(r.min),
|
||||
ideal_hours: round(r.ideal),
|
||||
available_hours: round(r.avail),
|
||||
available_volunteers: r.who.size,
|
||||
assigned_hours: round(r.assigned),
|
||||
})),
|
||||
by_position: [...state.positions]
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
.map((p) => {
|
||||
const own = state.shifts.filter((s) => s.position_id === p.id);
|
||||
return {
|
||||
position_id: p.id,
|
||||
name: p.name,
|
||||
shifts: own.length,
|
||||
min_slots: own.reduce((t, s) => t + s.min_staff, 0),
|
||||
ideal_slots: own.reduce((t, s) => t + s.ideal_staff, 0),
|
||||
assigned: own.reduce((t, s) => t + (assignedByShift.get(s.id) ?? 0), 0),
|
||||
filled: own.reduce((t, s) => t + Math.min(assignedByShift.get(s.id) ?? 0, s.ideal_staff), 0),
|
||||
wishes: vols.filter((v) => v.wished_position_ids.includes(p.id)).length,
|
||||
};
|
||||
}),
|
||||
volunteers_with_availability: withAvailability.size,
|
||||
volunteers_with_assignment: new Set(state.assignments.map((a) => a.volunteer_id)).size,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function buildMatrix(): MatrixResponse {
|
||||
const counts = new Map<string, number>();
|
||||
for (const a of state.assignments) {
|
||||
@@ -1515,6 +1656,10 @@ export function createMockApi(): PlanningApi {
|
||||
get: () => delay(buildMatrix()),
|
||||
},
|
||||
|
||||
stats: {
|
||||
get: () => delay(buildStats()),
|
||||
},
|
||||
|
||||
badges: {
|
||||
getTemplate: (): Promise<BadgeTemplateRead> =>
|
||||
delay({
|
||||
|
||||
@@ -731,3 +731,77 @@ export interface PublicFormSubmission {
|
||||
artist_wish_ids?: string[];
|
||||
photo?: File | null;
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------------- //
|
||||
// Statistiques d'une édition (`GET /editions/{id}/stats`, app/api/stats.py) //
|
||||
// --------------------------------------------------------------------------- //
|
||||
export interface StatsRegistrationDay {
|
||||
date: string;
|
||||
count: number;
|
||||
cumulative: number;
|
||||
}
|
||||
|
||||
export interface StatsAnswers {
|
||||
total: number;
|
||||
email: number;
|
||||
phone: number;
|
||||
photo: number;
|
||||
comment: number;
|
||||
companion_note: number;
|
||||
available: number;
|
||||
position_wishes: number;
|
||||
artist_wishes: number;
|
||||
companion_wishes: number;
|
||||
}
|
||||
|
||||
export interface StatsPaymentOption {
|
||||
label: string;
|
||||
mecenat: boolean;
|
||||
count: number;
|
||||
amount_total: number;
|
||||
}
|
||||
|
||||
export interface StatsNeedDay {
|
||||
date: string;
|
||||
shifts: number;
|
||||
min_hours: number;
|
||||
ideal_hours: number;
|
||||
available_hours: number;
|
||||
available_volunteers: number;
|
||||
assigned_hours: number;
|
||||
}
|
||||
|
||||
export interface StatsNeedPosition {
|
||||
position_id: string;
|
||||
name: string;
|
||||
shifts: number;
|
||||
min_slots: number;
|
||||
ideal_slots: number;
|
||||
assigned: number;
|
||||
/** Places pourvues, plafonnées créneau par créneau à l'effectif idéal. */
|
||||
filled: number;
|
||||
wishes: number;
|
||||
}
|
||||
|
||||
export interface EditionStats {
|
||||
registrations: { total: number; last_7_days: number; by_day: StatsRegistrationDay[] };
|
||||
answers: StatsAnswers;
|
||||
payments: {
|
||||
online: number;
|
||||
on_site: number;
|
||||
none: number;
|
||||
/** Formulaires remplis dont le paiement en ligne n'a jamais abouti. */
|
||||
pending_unfinished: number;
|
||||
total_collected: number;
|
||||
mecenat_count: number;
|
||||
mecenat_total: number;
|
||||
by_option: StatsPaymentOption[];
|
||||
};
|
||||
artist_wishes: Array<{ id: string; name: string; date: string; count: number }>;
|
||||
needs: {
|
||||
by_day: StatsNeedDay[];
|
||||
by_position: StatsNeedPosition[];
|
||||
volunteers_with_availability: number;
|
||||
volunteers_with_assignment: number;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -58,6 +58,7 @@ import type {
|
||||
VolunteerPlanningEntry,
|
||||
VolunteerRead,
|
||||
VolunteerUpdate,
|
||||
EditionStats,
|
||||
} from './schema';
|
||||
|
||||
/**
|
||||
@@ -156,6 +157,10 @@ export interface PlanningApi {
|
||||
matrix: {
|
||||
get(editionId: string): Promise<MatrixResponse>;
|
||||
};
|
||||
stats: {
|
||||
/** Statistiques de l'édition (COORDINATION uniquement). */
|
||||
get(editionId: string): Promise<EditionStats>;
|
||||
};
|
||||
badges: {
|
||||
/** Configuration du recto/verso (COORDINATION uniquement). */
|
||||
getTemplate(editionId: string): Promise<BadgeTemplateRead>;
|
||||
|
||||
@@ -11,6 +11,7 @@ import { GrillePage } from '@/pages/GrillePage';
|
||||
import { MobileLeadPage } from '@/pages/MobileLeadPage';
|
||||
import { MobileVolunteerPage } from '@/pages/MobileVolunteerPage';
|
||||
import { PublicSignupPage } from '@/pages/PublicSignupPage';
|
||||
import { StatsPage } from '@/pages/StatsPage';
|
||||
import { VolunteerViewPage } from '@/pages/VolunteerViewPage';
|
||||
|
||||
export const routes: RouteObject[] = [
|
||||
@@ -35,6 +36,7 @@ export const routes: RouteObject[] = [
|
||||
{ path: 'configuration', element: <ConfigPage /> },
|
||||
{ path: 'badges', element: <BadgesPage /> },
|
||||
{ path: 'inscriptions', element: <FormBuilderPage /> },
|
||||
{ path: 'statistiques', element: <StatsPage /> },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -11,6 +11,7 @@ export const ROUTE_ROLES: Record<string, Role[]> = {
|
||||
'/configuration': ['COORDINATOR'],
|
||||
'/badges': ['COORDINATOR'],
|
||||
'/inscriptions': ['COORDINATOR'],
|
||||
'/statistiques': ['COORDINATOR'],
|
||||
'/mobile-benevole': ['VOLUNTEER'],
|
||||
'/mobile-referent': ['LEAD'],
|
||||
};
|
||||
@@ -23,6 +24,7 @@ export const NAV_TABS: Array<{ to: string; num: string; labelKey: string }> = [
|
||||
{ to: '/configuration', num: '06', labelKey: 'tab.config' },
|
||||
{ to: '/badges', num: '07', labelKey: 'tab.badges' },
|
||||
{ to: '/inscriptions', num: '08', labelKey: 'tab.forms' },
|
||||
{ to: '/statistiques', num: '09', labelKey: 'tab.stats' },
|
||||
];
|
||||
|
||||
export function canAccess(pathname: string, role: Role): boolean {
|
||||
|
||||
@@ -0,0 +1,527 @@
|
||||
import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
|
||||
|
||||
import { cx } from '@/lib/cx';
|
||||
|
||||
// Graphiques de l'écran Statistiques — SVG à la main (aucune bibliothèque de
|
||||
// graphiques dans le projet). Règles suivies : marques fines (barres ≤ 24 px,
|
||||
// bout arrondi de 4 px côté valeur, carré côté ligne de base ; courbes de
|
||||
// 2 px), séparation par un vide de 2 px couleur de fond (jamais de bordure),
|
||||
// quadrillage en filet plein discret, un seul axe par graphique, texte
|
||||
// toujours à l'encre (jamais dans la couleur de la série), infobulle au
|
||||
// survol et au focus — qui ne fait que compléter : chaque graphique a sa vue
|
||||
// en tableau (`TableToggle`). Palette catégorielle vérifiée (daltonisme,
|
||||
// séparation, contraste) sur le fond `paper` : l'aqua est sous 3:1, d'où
|
||||
// libellés directs + tableau.
|
||||
|
||||
export const SERIES = {
|
||||
blue: '#2a78d6',
|
||||
orange: '#eb6834',
|
||||
aqua: '#1baf7a',
|
||||
/** « Rien / aucun » : gris de mise en retrait, jamais une série à part entière. */
|
||||
muted: '#c9c3b3',
|
||||
} as const;
|
||||
|
||||
const GRID = '#E0D8C4'; // sand-line : un cran au-dessus du fond paper
|
||||
const SURFACE = '#FFFDF7'; // paper
|
||||
const BAR_MAX_PX = 24;
|
||||
|
||||
const fr = (n: number, digits = 0) =>
|
||||
n.toLocaleString('fr-FR', { maximumFractionDigits: digits, minimumFractionDigits: 0 });
|
||||
|
||||
/** Graduations « propres » (0, 5, 10… / 0, 20, 40…) couvrant `max`. */
|
||||
function niceTicks(max: number, target = 4): number[] {
|
||||
if (max <= 0) return [0, 1];
|
||||
const raw = max / target;
|
||||
const pow = 10 ** Math.floor(Math.log10(raw));
|
||||
const step = [1, 2, 2.5, 5, 10].map((m) => m * pow).find((s) => s >= raw) ?? raw;
|
||||
const ticks: number[] = [];
|
||||
for (let v = 0; v <= max + step * 0.999; v += step) ticks.push(Math.round(v * 100) / 100);
|
||||
return ticks;
|
||||
}
|
||||
|
||||
/** Largeur réelle du conteneur (le SVG se dessine en pixels, pas en %). */
|
||||
function useWidth<T extends HTMLElement>(fallback = 640) {
|
||||
const ref = useRef<T>(null);
|
||||
const [width, setWidth] = useState(fallback);
|
||||
useLayoutEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el || typeof ResizeObserver === 'undefined') return;
|
||||
const ro = new ResizeObserver(([entry]) => setWidth(Math.max(240, entry.contentRect.width)));
|
||||
ro.observe(el);
|
||||
return () => ro.disconnect();
|
||||
}, []);
|
||||
return { ref, width };
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------------- //
|
||||
// Infobulle (position: fixed, bornée à l'écran — même raison que //
|
||||
// lib/useTooltipPosition.ts : jamais coincée par un conteneur défilant) //
|
||||
// --------------------------------------------------------------------------- //
|
||||
interface TipState {
|
||||
x: number;
|
||||
y: number;
|
||||
content: ReactNode;
|
||||
}
|
||||
|
||||
function useTip() {
|
||||
const [tip, setTip] = useState<TipState | null>(null);
|
||||
const show = (e: { clientX: number; clientY: number }, content: ReactNode) =>
|
||||
setTip({ x: e.clientX, y: e.clientY, content });
|
||||
const showAt = (el: Element, content: ReactNode) => {
|
||||
const r = el.getBoundingClientRect();
|
||||
setTip({ x: r.left + r.width / 2, y: r.top, content });
|
||||
};
|
||||
return { tip, show, showAt, hide: () => setTip(null) };
|
||||
}
|
||||
|
||||
function Tooltip({ tip }: { tip: TipState | null }) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [pos, setPos] = useState({ left: -9999, top: -9999 });
|
||||
useLayoutEffect(() => {
|
||||
if (!tip || !ref.current) return;
|
||||
const { width, height } = ref.current.getBoundingClientRect();
|
||||
const left = Math.min(Math.max(tip.x + 12, 8), window.innerWidth - width - 8);
|
||||
const top = tip.y - height - 12 < 8 ? tip.y + 16 : tip.y - height - 12;
|
||||
setPos({ left, top });
|
||||
}, [tip]);
|
||||
if (!tip) return null;
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
role="tooltip"
|
||||
style={{ position: 'fixed', left: pos.left, top: pos.top, zIndex: 50 }}
|
||||
className="pointer-events-none border-2 border-ink bg-paper px-[9px] py-[6px] font-mono text-[11px] shadow-brutal-sm"
|
||||
>
|
||||
{tip.content}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Ligne d'infobulle : la valeur d'abord (forte), puis la série (avec un
|
||||
* court trait de sa couleur, pas une pastille pleine). */
|
||||
function TipRow({ color, label, value }: { color?: string; label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-center gap-[6px] whitespace-nowrap">
|
||||
{color ? <span className="inline-block h-[2px] w-[10px]" style={{ background: color }} /> : null}
|
||||
<b>{value}</b>
|
||||
<span className="opacity-70">{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------------- //
|
||||
// Légende, vue tableau //
|
||||
// --------------------------------------------------------------------------- //
|
||||
export function Legend({ items }: { items: Array<{ label: string; color: string; value?: string }> }) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-x-[14px] gap-y-[4px] font-mono text-[10.5px]">
|
||||
{items.map((item) => (
|
||||
<span key={item.label} className="flex items-center gap-[6px]">
|
||||
<span className="inline-block h-[10px] w-[10px] rounded-[2px]" style={{ background: item.color }} />
|
||||
{item.label}
|
||||
{item.value ? <b>{item.value}</b> : null}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Équivalent tableau d'un graphique — toujours disponible, replié. */
|
||||
export function TableToggle({ label, children }: { label: string; children: ReactNode }) {
|
||||
return (
|
||||
<details className="mt-2">
|
||||
<summary className="cursor-pointer font-display text-[9.5px] font-extrabold uppercase tracking-wide opacity-70 hover:opacity-100">
|
||||
{label}
|
||||
</summary>
|
||||
<div className="mt-2 overflow-x-auto">{children}</div>
|
||||
</details>
|
||||
);
|
||||
}
|
||||
|
||||
export function DataTable({
|
||||
head,
|
||||
rows,
|
||||
}: {
|
||||
head: string[];
|
||||
rows: Array<Array<ReactNode>>;
|
||||
}) {
|
||||
return (
|
||||
<table className="w-full border-collapse font-mono text-[11px]">
|
||||
<thead>
|
||||
<tr>
|
||||
{head.map((h, i) => (
|
||||
<th
|
||||
key={h}
|
||||
className={cx(
|
||||
'border-b-2 border-ink px-[6px] py-[4px] font-display text-[9.5px] font-extrabold uppercase tracking-wide',
|
||||
i === 0 ? 'text-left' : 'text-right',
|
||||
)}
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row, r) => (
|
||||
<tr key={r} className="border-b border-sand-line">
|
||||
{row.map((cell, c) => (
|
||||
<td
|
||||
key={c}
|
||||
className={cx('px-[6px] py-[4px]', c === 0 ? 'text-left' : 'text-right tabular-nums')}
|
||||
>
|
||||
{cell}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------------- //
|
||||
// Courbe cumulée (une série : pas de légende, le titre la nomme) //
|
||||
// --------------------------------------------------------------------------- //
|
||||
export function CumulativeLineChart({
|
||||
points,
|
||||
dateLabel,
|
||||
valueLabel,
|
||||
dailyLabel,
|
||||
}: {
|
||||
points: Array<{ date: string; count: number; cumulative: number }>;
|
||||
dateLabel: (date: string) => string;
|
||||
valueLabel: string;
|
||||
dailyLabel: string;
|
||||
}) {
|
||||
const { ref, width } = useWidth<HTMLDivElement>();
|
||||
const { tip, show, hide } = useTip();
|
||||
const [hover, setHover] = useState<number | null>(null);
|
||||
const height = 220;
|
||||
const pad = { top: 16, right: 48, bottom: 28, left: 40 };
|
||||
const innerW = width - pad.left - pad.right;
|
||||
const innerH = height - pad.top - pad.bottom;
|
||||
const ticks = niceTicks(Math.max(...points.map((p) => p.cumulative), 1));
|
||||
const yMax = ticks[ticks.length - 1];
|
||||
const x = (i: number) => pad.left + (points.length <= 1 ? innerW / 2 : (i / (points.length - 1)) * innerW);
|
||||
const y = (v: number) => pad.top + innerH - (v / yMax) * innerH;
|
||||
const line = points.map((p, i) => `${i ? 'L' : 'M'}${x(i)},${y(p.cumulative)}`).join(' ');
|
||||
const area = `${line} L${x(points.length - 1)},${y(0)} L${x(0)},${y(0)} Z`;
|
||||
const last = points[points.length - 1];
|
||||
// Quelques dates seulement sous l'axe, réparties du début à la fin — leur
|
||||
// nombre suit la largeur (≈ une tous les 80 px), sinon elles se
|
||||
// chevauchent sur un téléphone.
|
||||
const slots = Math.max(2, Math.min(points.length, Math.floor(innerW / 80) + 1));
|
||||
const labelled = new Set(
|
||||
Array.from({ length: slots }, (_, k) =>
|
||||
Math.round((k * (points.length - 1)) / Math.max(1, slots - 1)),
|
||||
),
|
||||
);
|
||||
|
||||
const pick = (clientX: number, rect: DOMRect) => {
|
||||
const rel = clientX - rect.left - pad.left;
|
||||
return Math.min(points.length - 1, Math.max(0, Math.round((rel / innerW) * (points.length - 1))));
|
||||
};
|
||||
const tipContent = (i: number) => (
|
||||
<>
|
||||
<div className="mb-[2px] font-display text-[10px] font-extrabold">{dateLabel(points[i].date)}</div>
|
||||
<TipRow color={SERIES.blue} label={valueLabel} value={fr(points[i].cumulative)} />
|
||||
<TipRow label={dailyLabel} value={`+${fr(points[i].count)}`} />
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="w-full min-w-0 overflow-hidden">
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
role="img"
|
||||
tabIndex={0}
|
||||
aria-label={`${valueLabel} : ${last ? fr(last.cumulative) : 0}`}
|
||||
onPointerMove={(e) => {
|
||||
const i = pick(e.clientX, e.currentTarget.getBoundingClientRect());
|
||||
setHover(i);
|
||||
show(e, tipContent(i));
|
||||
}}
|
||||
onPointerLeave={() => {
|
||||
setHover(null);
|
||||
hide();
|
||||
}}
|
||||
onBlur={() => {
|
||||
setHover(null);
|
||||
hide();
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
|
||||
const i = Math.min(points.length - 1, Math.max(0, (hover ?? points.length - 1) + (e.key === 'ArrowLeft' ? -1 : 1)));
|
||||
setHover(i);
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
show({ clientX: rect.left + x(i), clientY: rect.top + y(points[i].cumulative) }, tipContent(i));
|
||||
}}
|
||||
className="block outline-none focus-visible:outline-2 focus-visible:outline-ink"
|
||||
>
|
||||
{ticks.map((tk) => (
|
||||
<g key={tk}>
|
||||
<line x1={pad.left} x2={width - pad.right} y1={y(tk)} y2={y(tk)} stroke={GRID} strokeWidth={1} />
|
||||
<text x={pad.left - 6} y={y(tk) + 3} textAnchor="end" className="fill-ink font-mono text-[10px] opacity-60">
|
||||
{fr(tk)}
|
||||
</text>
|
||||
</g>
|
||||
))}
|
||||
{points.map((p, i) =>
|
||||
labelled.has(i) ? (
|
||||
<text
|
||||
key={p.date}
|
||||
x={x(i)}
|
||||
y={height - 8}
|
||||
textAnchor={i === 0 ? 'start' : i === points.length - 1 ? 'end' : 'middle'}
|
||||
className="fill-ink font-mono text-[10px] opacity-60"
|
||||
>
|
||||
{dateLabel(p.date)}
|
||||
</text>
|
||||
) : null,
|
||||
)}
|
||||
<path d={area} fill={SERIES.blue} fillOpacity={0.1} />
|
||||
<path d={line} fill="none" stroke={SERIES.blue} strokeWidth={2} strokeLinejoin="round" strokeLinecap="round" />
|
||||
{hover !== null ? (
|
||||
<>
|
||||
<line x1={x(hover)} x2={x(hover)} y1={pad.top} y2={pad.top + innerH} stroke="#14110E" strokeOpacity={0.35} strokeWidth={1} />
|
||||
<circle cx={x(hover)} cy={y(points[hover].cumulative)} r={4} fill={SERIES.blue} stroke={SURFACE} strokeWidth={2} />
|
||||
</>
|
||||
) : null}
|
||||
{last ? (
|
||||
<>
|
||||
<circle cx={x(points.length - 1)} cy={y(last.cumulative)} r={4} fill={SERIES.blue} stroke={SURFACE} strokeWidth={2} />
|
||||
<text x={x(points.length - 1) + 8} y={y(last.cumulative) + 4} className="fill-ink font-mono text-[11px] font-bold">
|
||||
{fr(last.cumulative)}
|
||||
</text>
|
||||
</>
|
||||
) : null}
|
||||
</svg>
|
||||
<Tooltip tip={tip} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------------- //
|
||||
// Barres horizontales (une série, une couleur pour toutes les barres) //
|
||||
// --------------------------------------------------------------------------- //
|
||||
export function BarList({
|
||||
rows,
|
||||
max,
|
||||
color = SERIES.blue,
|
||||
}: {
|
||||
rows: Array<{ key: string; label: string; value: number; valueLabel: string; tip?: string }>;
|
||||
/** Échelle commune (ex. 100 pour des pourcentages) — défaut : la plus grande valeur. */
|
||||
max?: number;
|
||||
color?: string;
|
||||
}) {
|
||||
const { tip, show, showAt, hide } = useTip();
|
||||
const scale = max ?? Math.max(...rows.map((r) => r.value), 1);
|
||||
return (
|
||||
<div className="flex flex-col gap-[6px]">
|
||||
{rows.map((r) => (
|
||||
<div
|
||||
key={r.key}
|
||||
tabIndex={0}
|
||||
onPointerMove={(e) => show(e, <TipRow color={color} label={r.label} value={r.tip ?? r.valueLabel} />)}
|
||||
onPointerLeave={hide}
|
||||
onFocus={(e) => showAt(e.currentTarget, <TipRow color={color} label={r.label} value={r.tip ?? r.valueLabel} />)}
|
||||
onBlur={hide}
|
||||
className="grid items-center gap-[8px] outline-none hover:bg-cream focus-visible:bg-cream"
|
||||
style={{ gridTemplateColumns: 'minmax(90px, 34%) 1fr' }}
|
||||
>
|
||||
<span className="truncate font-mono text-[11px]" title={r.label}>
|
||||
{r.label}
|
||||
</span>
|
||||
<span className="flex items-center gap-[6px]">
|
||||
<span
|
||||
className="block h-[14px] rounded-r-[4px]"
|
||||
style={{
|
||||
width: `${Math.max(r.value > 0 ? 1.5 : 0, (r.value / scale) * 82)}%`,
|
||||
background: color,
|
||||
}}
|
||||
/>
|
||||
<span className="whitespace-nowrap font-mono text-[10.5px] font-bold">{r.valueLabel}</span>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
<Tooltip tip={tip} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------------- //
|
||||
// Colonnes groupées (plusieurs séries, même unité, un seul axe) //
|
||||
// --------------------------------------------------------------------------- //
|
||||
export function GroupedColumns({
|
||||
groups,
|
||||
series,
|
||||
unit,
|
||||
}: {
|
||||
groups: Array<{ key: string; label: string; values: number[] }>;
|
||||
series: Array<{ label: string; color: string }>;
|
||||
unit: string;
|
||||
}) {
|
||||
const { ref, width } = useWidth<HTMLDivElement>();
|
||||
const { tip, show, hide, showAt } = useTip();
|
||||
const [hover, setHover] = useState<number | null>(null);
|
||||
const height = 240;
|
||||
const pad = { top: 18, right: 8, bottom: 30, left: 44 };
|
||||
const innerW = width - pad.left - pad.right;
|
||||
const innerH = height - pad.top - pad.bottom;
|
||||
const ticks = niceTicks(Math.max(...groups.flatMap((g) => g.values), 1));
|
||||
const yMax = ticks[ticks.length - 1];
|
||||
const band = innerW / Math.max(groups.length, 1);
|
||||
const barW = Math.min(BAR_MAX_PX, (band * 0.7 - 2 * (series.length - 1)) / series.length);
|
||||
const groupW = barW * series.length + 2 * (series.length - 1);
|
||||
const y = (v: number) => pad.top + innerH - (v / yMax) * innerH;
|
||||
const content = (g: (typeof groups)[number]) => (
|
||||
<>
|
||||
<div className="mb-[2px] font-display text-[10px] font-extrabold">{g.label}</div>
|
||||
{series.map((s, i) => (
|
||||
<TipRow key={s.label} color={s.color} label={s.label} value={`${fr(g.values[i], 1)} ${unit}`} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
// Barre au bout arrondi côté valeur (haut), carré côté ligne de base.
|
||||
const bar = (x0: number, v: number) => {
|
||||
const top = y(v);
|
||||
const h = y(0) - top;
|
||||
if (h <= 0) return '';
|
||||
const r = Math.min(4, h, barW / 2);
|
||||
return `M${x0},${y(0)} V${top + r} Q${x0},${top} ${x0 + r},${top} H${x0 + barW - r} Q${x0 + barW},${top} ${x0 + barW},${top + r} V${y(0)} Z`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div ref={ref} className="w-full min-w-0 overflow-hidden">
|
||||
<svg width={width} height={height} role="img" aria-label={series.map((s) => s.label).join(', ')} className="block">
|
||||
{ticks.map((tk) => (
|
||||
<g key={tk}>
|
||||
<line x1={pad.left} x2={width - pad.right} y1={y(tk)} y2={y(tk)} stroke={GRID} strokeWidth={1} />
|
||||
<text x={pad.left - 6} y={y(tk) + 3} textAnchor="end" className="fill-ink font-mono text-[10px] opacity-60">
|
||||
{fr(tk)}
|
||||
</text>
|
||||
</g>
|
||||
))}
|
||||
{groups.map((g, gi) => {
|
||||
const x0 = pad.left + gi * band + (band - groupW) / 2;
|
||||
return (
|
||||
<g
|
||||
key={g.key}
|
||||
tabIndex={0}
|
||||
onPointerMove={(e) => {
|
||||
setHover(gi);
|
||||
show(e, content(g));
|
||||
}}
|
||||
onPointerLeave={() => {
|
||||
setHover(null);
|
||||
hide();
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
setHover(gi);
|
||||
showAt(e.currentTarget, content(g));
|
||||
}}
|
||||
onBlur={() => {
|
||||
setHover(null);
|
||||
hide();
|
||||
}}
|
||||
className="outline-none"
|
||||
>
|
||||
{/* Zone de survol : toute la bande du jour, pas seulement les barres. */}
|
||||
<rect
|
||||
x={pad.left + gi * band}
|
||||
y={pad.top}
|
||||
width={band}
|
||||
height={innerH}
|
||||
fill={hover === gi ? '#14110E' : 'transparent'}
|
||||
fillOpacity={hover === gi ? 0.04 : 0}
|
||||
/>
|
||||
{series.map((s, si) => (
|
||||
<path key={s.label} d={bar(x0 + si * (barW + 2), g.values[si])} fill={s.color} />
|
||||
))}
|
||||
<text x={pad.left + gi * band + band / 2} y={height - 10} textAnchor="middle" className="fill-ink font-mono text-[10.5px]">
|
||||
{g.label}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
<line x1={pad.left} x2={width - pad.right} y1={y(0)} y2={y(0)} stroke="#14110E" strokeOpacity={0.4} strokeWidth={1} />
|
||||
</svg>
|
||||
<Tooltip tip={tip} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------------- //
|
||||
// Répartition (partie d'un tout) — une barre, segments séparés par 2 px //
|
||||
// --------------------------------------------------------------------------- //
|
||||
export function ShareBar({
|
||||
segments,
|
||||
}: {
|
||||
segments: Array<{ label: string; value: number; color: string }>;
|
||||
}) {
|
||||
const { tip, show, showAt, hide } = useTip();
|
||||
const total = segments.reduce((t, s) => t + s.value, 0);
|
||||
const visible = segments.filter((s) => s.value > 0);
|
||||
const pct = (v: number) => (total ? Math.round((v / total) * 100) : 0);
|
||||
return (
|
||||
<div>
|
||||
<div className="flex h-[22px] w-full gap-[2px]">
|
||||
{visible.map((s, i) => (
|
||||
<div
|
||||
key={s.label}
|
||||
tabIndex={0}
|
||||
onPointerMove={(e) => show(e, <TipRow color={s.color} label={s.label} value={`${fr(s.value)} (${pct(s.value)} %)`} />)}
|
||||
onPointerLeave={hide}
|
||||
onFocus={(e) => showAt(e.currentTarget, <TipRow color={s.color} label={s.label} value={`${fr(s.value)} (${pct(s.value)} %)`} />)}
|
||||
onBlur={hide}
|
||||
className={cx(
|
||||
'h-full outline-none hover:brightness-110 focus-visible:brightness-110',
|
||||
i === 0 && 'rounded-l-[4px]',
|
||||
i === visible.length - 1 && 'rounded-r-[4px]',
|
||||
)}
|
||||
style={{ flexGrow: s.value, flexBasis: 0, background: s.color }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<Legend items={segments.map((s) => ({ label: s.label, color: s.color, value: `${fr(s.value)} · ${pct(s.value)} %` }))} />
|
||||
</div>
|
||||
<Tooltip tip={tip} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------------------- //
|
||||
// Jauge : une valeur rapportée à un maximum (piste = même teinte, plus claire) //
|
||||
// --------------------------------------------------------------------------- //
|
||||
export function Meter({
|
||||
value,
|
||||
max,
|
||||
label,
|
||||
extra,
|
||||
title,
|
||||
}: {
|
||||
value: number;
|
||||
max: number;
|
||||
label: string;
|
||||
/** Complément court après le libellé (ex. « +2 »), dans une colonne fixe
|
||||
* pour que les jauges restent alignées d'une ligne à l'autre. */
|
||||
extra?: string;
|
||||
title?: string;
|
||||
}) {
|
||||
const ratio = max > 0 ? Math.min(1, value / max) : 0;
|
||||
return (
|
||||
<span className="flex items-center gap-[6px]" title={title ?? label}>
|
||||
<span className="relative block h-[8px] w-[72px] rounded-[4px]" style={{ background: '#cde2fb' }}>
|
||||
<span
|
||||
className="absolute inset-y-0 left-0 rounded-[4px]"
|
||||
style={{ width: `${ratio * 100}%`, background: SERIES.blue }}
|
||||
/>
|
||||
</span>
|
||||
<span className="w-[64px] text-left font-mono text-[10.5px] font-bold">{label}</span>
|
||||
<span className="w-[26px] text-left font-mono text-[10px] opacity-60">{extra ?? ''}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -388,6 +388,68 @@
|
||||
"badge.no_volunteers": "Aucun bénévole ne correspond à cette sélection.",
|
||||
|
||||
"tab.forms": "Inscriptions",
|
||||
"tab.stats": "Statistiques",
|
||||
"stats.kpi.registered": "Bénévoles inscrits · +{count} en 7 jours",
|
||||
"stats.kpi.collected": "Cotisations encaissées en ligne",
|
||||
"stats.kpi.coverage": "Places pourvues · {assigned} / {ideal}",
|
||||
"stats.kpi.withAvailability": "Ont déclaré des disponibilités · sur {total}",
|
||||
"stats.empty": "Aucun bénévole inscrit pour l'instant.",
|
||||
"stats.showTable": "Voir le tableau",
|
||||
"stats.unit.hours": "h",
|
||||
"stats.registrations.title": "Évolution des inscriptions",
|
||||
"stats.registrations.help": "Nombre cumulé de bénévoles en base, par jour d'ajout (formulaire public, import ou ajout à la main).",
|
||||
"stats.registrations.cumulative": "inscrits au total",
|
||||
"stats.registrations.daily": "nouveaux ce jour",
|
||||
"stats.answers.title": "Réponses",
|
||||
"stats.answers.help": "Part des bénévoles ayant renseigné chaque information (formulaire public ou fiche).",
|
||||
"stats.answers.email": "Email",
|
||||
"stats.answers.phone": "Téléphone",
|
||||
"stats.answers.available": "Case « disponible »",
|
||||
"stats.answers.positionWishes": "Vœux de poste",
|
||||
"stats.answers.artistWishes": "Vœux d'artiste",
|
||||
"stats.answers.companionWishes": "Vœux de compagnon",
|
||||
"stats.answers.companionNote": "Compagnon (texte libre)",
|
||||
"stats.answers.photo": "Photo",
|
||||
"stats.answers.comment": "Commentaire",
|
||||
"stats.artists.title": "Artistes que les bénévoles veulent voir",
|
||||
"stats.payments.title": "Cotisations",
|
||||
"stats.payments.help": "En ligne : paiement SumUp confirmé. Sur place : « je paierai sur place » ou case cotisation cochée sans paiement en ligne.",
|
||||
"stats.payments.online": "En ligne",
|
||||
"stats.payments.onSite": "Sur place",
|
||||
"stats.payments.none": "Aucune",
|
||||
"stats.payments.byOption": "Paiements en ligne par type",
|
||||
"stats.payments.noOnline": "Aucun paiement en ligne pour l'instant.",
|
||||
"stats.payments.mecenatTag": "mécénat",
|
||||
"stats.payments.total": "Total",
|
||||
"stats.payments.mecenat": "Dont mécénat : {count} don(s), {amount} (reçus fiscaux).",
|
||||
"stats.payments.unfinished": "{count} formulaire(s) rempli(s) sans paiement abouti : ces personnes ne sont pas comptées parmi les bénévoles (paiement refusé, abandonné ou expiré).",
|
||||
"stats.needs.title": "Besoins et bénévoles",
|
||||
"stats.needs.help": "Heures × personnes demandées par les créneaux, face aux heures de disponibilité déclarées et aux heures déjà affectées — par journée de festival (une soirée qui passe minuit compte pour le jour où elle commence).",
|
||||
"stats.needs.empty": "Aucun créneau défini pour l'instant.",
|
||||
"stats.needs.byDay": "Par jour (heures × personnes)",
|
||||
"stats.needs.byPosition": "Par poste (places = personnes × créneaux)",
|
||||
"stats.needs.min": "Besoin minimal",
|
||||
"stats.needs.ideal": "Besoin idéal",
|
||||
"stats.needs.available": "Disponibilités déclarées",
|
||||
"stats.needs.assigned": "Déjà affecté",
|
||||
"stats.needs.filledWithExtra": "{filled} / {ideal} (+{extra} en sureffectif)",
|
||||
"stats.needs.wishesHint": "Pourvues : places occupées, plafonnées à l'effectif idéal de chaque créneau (« +2 » = bénévoles en sureffectif, non comptés). Vœux / place : nombre de bénévoles qui ont demandé le poste, rapporté aux places idéales. En dessous de 1, le poste aura besoin de bénévoles qui ne l'ont pas choisi.",
|
||||
"stats.col.date": "Date",
|
||||
"stats.col.day": "Jour",
|
||||
"stats.col.answer": "Information",
|
||||
"stats.col.volunteers": "Bénévoles",
|
||||
"stats.col.share": "Part",
|
||||
"stats.col.artist": "Artiste",
|
||||
"stats.col.paymentType": "Type de paiement",
|
||||
"stats.col.amount": "Montant",
|
||||
"stats.col.shifts": "Créneaux",
|
||||
"stats.col.availableVolunteers": "Bénévoles dispo.",
|
||||
"stats.col.position": "Poste",
|
||||
"stats.col.minSlots": "Places min.",
|
||||
"stats.col.idealSlots": "Places idéales",
|
||||
"stats.col.filled": "Pourvues",
|
||||
"stats.col.wishes": "Vœux",
|
||||
"stats.col.wishesPerSlot": "Vœux / place",
|
||||
"form.field.email": "Email",
|
||||
"form.field.phone": "Téléphone",
|
||||
"form.field.positionWishes": "Vœux de poste",
|
||||
|
||||
@@ -0,0 +1,316 @@
|
||||
import { useStats } from '@/api/hooks';
|
||||
import type { EditionStats } from '@/api/schema';
|
||||
import {
|
||||
BarList,
|
||||
CumulativeLineChart,
|
||||
DataTable,
|
||||
GroupedColumns,
|
||||
Legend,
|
||||
Meter,
|
||||
SERIES,
|
||||
ShareBar,
|
||||
TableToggle,
|
||||
} from '@/components/charts';
|
||||
import { ErrorNote, Loading } from '@/components/state';
|
||||
import { HelpTip, Panel, PanelHeader, StatCard } from '@/components/ui';
|
||||
import { t } from '@/i18n';
|
||||
import { foldAccents } from '@/lib/planning';
|
||||
import { longDayLabel, shortDayLabel } from '@/lib/time';
|
||||
|
||||
const fr = (n: number, digits = 0) =>
|
||||
n.toLocaleString('fr-FR', { maximumFractionDigits: digits, minimumFractionDigits: 0 });
|
||||
const euros = (n: number) =>
|
||||
n.toLocaleString('fr-FR', { style: 'currency', currency: 'EUR', maximumFractionDigits: 2 });
|
||||
const pct = (part: number, whole: number) => (whole > 0 ? Math.round((part / whole) * 100) : 0);
|
||||
/** Ex. « 12 sept. » — dates d'inscription (pas des jours de festival). */
|
||||
const calendarDay = (date: string) =>
|
||||
new Date(`${date}T12:00:00`).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
|
||||
|
||||
/**
|
||||
* Statistiques d'une édition (COORDINATION) : inscriptions (nombre,
|
||||
* évolution), réponses au formulaire, cotisations, et besoins (postes ×
|
||||
* créneaux) face aux bénévoles qui ont répondu — disponibilités déclarées,
|
||||
* vœux de poste, affectations. Tout est calculé côté serveur
|
||||
* (`app/api/stats.py`), par journée de festival comme la grille.
|
||||
*/
|
||||
export function StatsPage() {
|
||||
const stats = useStats();
|
||||
if (stats.isLoading) return <Loading />;
|
||||
if (stats.error) return <ErrorNote error={stats.error} />;
|
||||
if (!stats.data) return null;
|
||||
const s = stats.data;
|
||||
|
||||
const idealSlots = s.needs.by_position.reduce((t2, p) => t2 + p.ideal_slots, 0);
|
||||
const filled = s.needs.by_position.reduce((t2, p) => t2 + p.filled, 0);
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex w-full min-w-0 max-w-[1180px] flex-col gap-5 p-4">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard
|
||||
tone="yellow"
|
||||
value={fr(s.registrations.total)}
|
||||
label={t('stats.kpi.registered', { count: s.registrations.last_7_days })}
|
||||
/>
|
||||
<StatCard value={euros(s.payments.total_collected)} label={t('stats.kpi.collected')} />
|
||||
<StatCard
|
||||
value={`${pct(filled, idealSlots)} %`}
|
||||
label={t('stats.kpi.coverage', { assigned: fr(filled), ideal: fr(idealSlots) })}
|
||||
/>
|
||||
<StatCard
|
||||
value={fr(s.needs.volunteers_with_availability)}
|
||||
label={t('stats.kpi.withAvailability', { total: fr(s.registrations.total) })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{s.registrations.total === 0 ? (
|
||||
<Panel>
|
||||
<p className="p-4 font-mono text-[12px]">{t('stats.empty')}</p>
|
||||
</Panel>
|
||||
) : (
|
||||
<>
|
||||
<RegistrationsSection stats={s} />
|
||||
<div className="grid min-w-0 gap-5 lg:grid-cols-2">
|
||||
<AnswersSection stats={s} />
|
||||
<PaymentsSection stats={s} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<NeedsSection stats={s} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ title, help, children }: { title: string; help?: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<Panel className="min-w-0">
|
||||
<PanelHeader className="flex items-center gap-[6px]">
|
||||
{title}
|
||||
{help ? <HelpTip text={help} /> : null}
|
||||
</PanelHeader>
|
||||
<div className="flex min-w-0 flex-col gap-3 p-4">{children}</div>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
function SubTitle({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<h3 className="font-display text-[11px] font-extrabold uppercase tracking-wide">{children}</h3>
|
||||
);
|
||||
}
|
||||
|
||||
function RegistrationsSection({ stats }: { stats: EditionStats }) {
|
||||
const points = stats.registrations.by_day;
|
||||
return (
|
||||
<Section title={t('stats.registrations.title')} help={t('stats.registrations.help')}>
|
||||
<CumulativeLineChart
|
||||
points={points}
|
||||
dateLabel={calendarDay}
|
||||
valueLabel={t('stats.registrations.cumulative')}
|
||||
dailyLabel={t('stats.registrations.daily')}
|
||||
/>
|
||||
<TableToggle label={t('stats.showTable')}>
|
||||
<DataTable
|
||||
head={[t('stats.col.date'), t('stats.registrations.daily'), t('stats.registrations.cumulative')]}
|
||||
rows={points
|
||||
.filter((p) => p.count > 0)
|
||||
.map((p) => [calendarDay(p.date), fr(p.count), fr(p.cumulative)])}
|
||||
/>
|
||||
</TableToggle>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
function AnswersSection({ stats }: { stats: EditionStats }) {
|
||||
const a = stats.answers;
|
||||
const fields: Array<[string, number]> = [
|
||||
['email', a.email],
|
||||
['phone', a.phone],
|
||||
['available', a.available],
|
||||
['positionWishes', a.position_wishes],
|
||||
['artistWishes', a.artist_wishes],
|
||||
['companionWishes', a.companion_wishes],
|
||||
['companionNote', a.companion_note],
|
||||
['photo', a.photo],
|
||||
['comment', a.comment],
|
||||
];
|
||||
const rows = fields.map(([key, count]) => ({
|
||||
key,
|
||||
label: t(`stats.answers.${key}`),
|
||||
value: pct(count, a.total),
|
||||
valueLabel: `${pct(count, a.total)} %`,
|
||||
tip: `${fr(count)} / ${fr(a.total)} (${pct(count, a.total)} %)`,
|
||||
}));
|
||||
const artists = [...stats.artist_wishes].sort((x, y) => y.count - x.count);
|
||||
return (
|
||||
<Section title={t('stats.answers.title')} help={t('stats.answers.help')}>
|
||||
<BarList rows={rows} max={100} />
|
||||
<TableToggle label={t('stats.showTable')}>
|
||||
<DataTable
|
||||
head={[t('stats.col.answer'), t('stats.col.volunteers'), t('stats.col.share')]}
|
||||
rows={fields.map(([key, count]) => [t(`stats.answers.${key}`), fr(count), `${pct(count, a.total)} %`])}
|
||||
/>
|
||||
</TableToggle>
|
||||
|
||||
{artists.length > 0 ? (
|
||||
<>
|
||||
<SubTitle>{t('stats.artists.title')}</SubTitle>
|
||||
<BarList
|
||||
rows={artists.map((ar) => ({
|
||||
key: ar.id,
|
||||
label: `${ar.name} · ${shortDayLabel(ar.date)}`,
|
||||
value: ar.count,
|
||||
valueLabel: fr(ar.count),
|
||||
}))}
|
||||
/>
|
||||
<TableToggle label={t('stats.showTable')}>
|
||||
<DataTable
|
||||
head={[t('stats.col.artist'), t('stats.col.day'), t('stats.col.volunteers')]}
|
||||
rows={artists.map((ar) => [ar.name, longDayLabel(ar.date), fr(ar.count)])}
|
||||
/>
|
||||
</TableToggle>
|
||||
</>
|
||||
) : null}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
function PaymentsSection({ stats }: { stats: EditionStats }) {
|
||||
const p = stats.payments;
|
||||
return (
|
||||
<Section title={t('stats.payments.title')} help={t('stats.payments.help')}>
|
||||
<ShareBar
|
||||
segments={[
|
||||
{ label: t('stats.payments.online'), value: p.online, color: SERIES.blue },
|
||||
{ label: t('stats.payments.onSite'), value: p.on_site, color: SERIES.orange },
|
||||
{ label: t('stats.payments.none'), value: p.none, color: SERIES.muted },
|
||||
]}
|
||||
/>
|
||||
|
||||
<SubTitle>{t('stats.payments.byOption')}</SubTitle>
|
||||
{p.by_option.length === 0 ? (
|
||||
<p className="font-mono text-[11px] opacity-60">{t('stats.payments.noOnline')}</p>
|
||||
) : (
|
||||
<DataTable
|
||||
head={[t('stats.col.paymentType'), t('stats.col.volunteers'), t('stats.col.amount')]}
|
||||
rows={[
|
||||
...p.by_option.map((o) => [
|
||||
// « mécénat » seulement si le libellé ne le dit pas déjà.
|
||||
o.mecenat && !foldAccents(o.label).toLowerCase().includes('mecenat')
|
||||
? `${o.label} · ${t('stats.payments.mecenatTag')}`
|
||||
: o.label,
|
||||
fr(o.count),
|
||||
euros(o.amount_total),
|
||||
]),
|
||||
[<b key="t">{t('stats.payments.total')}</b>, <b key="c">{fr(p.online)}</b>, <b key="a">{euros(p.total_collected)}</b>],
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
{p.mecenat_count > 0 ? (
|
||||
<p className="font-mono text-[11px]">
|
||||
{t('stats.payments.mecenat', { count: fr(p.mecenat_count), amount: euros(p.mecenat_total) })}
|
||||
</p>
|
||||
) : null}
|
||||
{p.pending_unfinished > 0 ? (
|
||||
<p className="border-2 border-ink bg-yellow-soft p-[8px] font-mono text-[11px] leading-relaxed">
|
||||
{t('stats.payments.unfinished', { count: fr(p.pending_unfinished) })}
|
||||
</p>
|
||||
) : null}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
function NeedsSection({ stats }: { stats: EditionStats }) {
|
||||
const n = stats.needs;
|
||||
if (n.by_day.length === 0 && n.by_position.every((p) => p.shifts === 0)) {
|
||||
return (
|
||||
<Section title={t('stats.needs.title')}>
|
||||
<p className="font-mono text-[11px] opacity-60">{t('stats.needs.empty')}</p>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
const series = [
|
||||
{ label: t('stats.needs.ideal'), color: SERIES.blue },
|
||||
{ label: t('stats.needs.available'), color: SERIES.orange },
|
||||
{ label: t('stats.needs.assigned'), color: SERIES.aqua },
|
||||
];
|
||||
return (
|
||||
<Section title={t('stats.needs.title')} help={t('stats.needs.help')}>
|
||||
<SubTitle>{t('stats.needs.byDay')}</SubTitle>
|
||||
<Legend items={series} />
|
||||
<GroupedColumns
|
||||
unit={t('stats.unit.hours')}
|
||||
series={series}
|
||||
groups={n.by_day.map((d) => ({
|
||||
key: d.date,
|
||||
label: shortDayLabel(d.date),
|
||||
values: [d.ideal_hours, d.available_hours, d.assigned_hours],
|
||||
}))}
|
||||
/>
|
||||
<TableToggle label={t('stats.showTable')}>
|
||||
<DataTable
|
||||
head={[
|
||||
t('stats.col.day'),
|
||||
t('stats.col.shifts'),
|
||||
t('stats.needs.min'),
|
||||
t('stats.needs.ideal'),
|
||||
t('stats.needs.available'),
|
||||
t('stats.col.availableVolunteers'),
|
||||
t('stats.needs.assigned'),
|
||||
]}
|
||||
rows={n.by_day.map((d) => [
|
||||
longDayLabel(d.date),
|
||||
fr(d.shifts),
|
||||
fr(d.min_hours, 1),
|
||||
fr(d.ideal_hours, 1),
|
||||
fr(d.available_hours, 1),
|
||||
fr(d.available_volunteers),
|
||||
fr(d.assigned_hours, 1),
|
||||
])}
|
||||
/>
|
||||
</TableToggle>
|
||||
|
||||
<SubTitle>{t('stats.needs.byPosition')}</SubTitle>
|
||||
<div className="overflow-x-auto">
|
||||
<DataTable
|
||||
head={[
|
||||
t('stats.col.position'),
|
||||
t('stats.col.shifts'),
|
||||
t('stats.col.minSlots'),
|
||||
t('stats.col.idealSlots'),
|
||||
t('stats.col.filled'),
|
||||
t('stats.col.wishes'),
|
||||
t('stats.col.wishesPerSlot'),
|
||||
]}
|
||||
rows={n.by_position
|
||||
.filter((p) => p.shifts > 0 || p.wishes > 0)
|
||||
.map((p) => [
|
||||
p.name,
|
||||
fr(p.shifts),
|
||||
fr(p.min_slots),
|
||||
fr(p.ideal_slots),
|
||||
<span key="m" className="flex justify-end">
|
||||
<Meter
|
||||
value={p.filled}
|
||||
max={p.ideal_slots}
|
||||
label={`${fr(p.filled)} / ${fr(p.ideal_slots)}`}
|
||||
extra={p.assigned > p.filled ? `+${fr(p.assigned - p.filled)}` : undefined}
|
||||
title={
|
||||
p.assigned > p.filled
|
||||
? t('stats.needs.filledWithExtra', {
|
||||
filled: fr(p.filled),
|
||||
ideal: fr(p.ideal_slots),
|
||||
extra: fr(p.assigned - p.filled),
|
||||
})
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</span>,
|
||||
fr(p.wishes),
|
||||
p.ideal_slots > 0 ? fr(p.wishes / p.ideal_slots, 2) : '—',
|
||||
])}
|
||||
/>
|
||||
</div>
|
||||
<p className="font-mono text-[10.5px] leading-relaxed opacity-70">{t('stats.needs.wishesHint')}</p>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user