Limites planétaires + dimensions sociales : labels qui épousent vraiment la
courbure de l'anneau au lieu d'être posés en ligne droite tangente. Implémenté
avec SVG <textPath> + un <path> caché par label.
Petit piège : pour qu'un label en bas du donut reste lisible (pas écrit à
l'envers ou de droite à gauche), il faut INVERSER la direction du path selon
la moitié.
Helper arcLabelPaths() :
- Moitié haute (angles ~0°) : path va de θ-δ vers θ+δ, sweep=1
- Moitié basse (angles ~180°) : path va de θ+δ vers θ-δ, sweep=0
→ la direction du chemin au point central du label est toujours "horizontale
à gauche-droite" du point de vue d'un lecteur fixe.
Ajouts :
- 12 dimensions du plancher social Raworth (Alimentation, Santé, Éducation,
Revenu & travail, Eau, Énergie, Liens sociaux, Logement, Égalité de genre,
Équité sociale, Voix politique, Paix & justice) placées en arc entre le
centre et l'anneau intérieur (rayon 67)
- R_CENTER passé de 56 à 50 pour libérer 6 unités au profit des labels
sociaux sans toucher au "LE DONUT / X projets" au centre
- Suppression des textes centrés "PLAFOND ÉCOLOGIQUE" et "PLANCHER SOCIAL"
sur les anneaux (redondants avec les labels qui les détaillent)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Le pattern <RouterLink v-slot="..."><a @click.prevent>...</a></RouterLink>
sans le prop `custom` rend DEUX <a> imbriqués : celui de RouterLink (qui gère
la navigation) + celui du slot. Notre @click.prevent sur le <a> interne
bloquait le clic avant qu'il remonte au <a> externe. Résultat : clic mort.
Fix : ajout du prop `custom` (RouterLink ne rend plus son <a>) +
@click="navigate" (fonction fournie par le v-slot qui fait le router.push
en gérant les modifier keys, le ctrl-clic, etc.).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1. Jitter au survol (bug visible) :
`transform: scale(1.5)` en SVG prend pour origine le (0,0) du viewBox,
pas le centre du <circle>. Le scale "déplaçait" donc le cercle vers le centre
de la viewport → la souris n'était plus dessus → mouseleave → retour →
mouseenter → re-déplacé. Boucle infinie de tremblement.
Fix : classe `.dot-circle` avec
transform-box: fill-box;
transform-origin: center;
Le scale prend désormais pour pivot le centre de la forme. Stable.
2. Couleurs des secteurs thématiques (par la maquette d'origine) :
Réintroduction des wedges colorés dans la zone sûre, opacité 10 % sur
le fill + 20 % sur le stroke. Reste sobre, garde la lisibilité.
3. Limites planétaires (de Kate Raworth) :
Les 9 limites planétaires (Changement climatique, Acidification des
océans, Biodiversité, Eau douce, Cycles N&P, Pollution chimique,
Pollution de l'air, Couche d'ozone, Usage des sols) sont placées en
étiquettes tangentes autour de l'anneau extérieur, avec flip 180° en
moitié basse pour rester lisibles.
Cosmétique :
- viewBox 560×560 (au lieu de 520) pour caser les labels extérieurs
- Labels catégorie déplacés AU MILIEU de leur wedge (sur la zone sûre)
plutôt qu'à l'extérieur (où ils chevauchaient les limites planétaires)
- Séparateurs radiaux passés en blanc pour mieux contraster avec les
wedges colorés
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Donut (DonutPage.vue) — alignement avec la maquette "Capture 2026-05-28 205310" :
- Suppression des secteurs en couleur vive : 6 secteurs séparés par des
lignes radiales en pointillé gris léger
- 2 anneaux gris texturés (pattern diagonal) : "Plafond écologique" (extérieur)
et "Plancher social" (intérieur), avec leurs labels
- Espace sûr cream entre les deux où vivent les projets
- Positionnement des projets :
angle : secteur de la catégorie + jitter stable (hash slug)
rayon : bande définie par la dimension de la catégorie
(social -> 108..140, ecologique -> 160..192, transversal -> 142..158)
puis modulé par progress_percent (plus avancé = plus éloigné du centre)
- Projets archivés rendus en POINTS CREUX (stroke only, sans fill)
- Tooltip survol -> RouterLink cliquable vers la fiche projet
- Légende droite réécrite avec les phrases exactes de la maquette
("L'anneau intérieur représente le plancher social, ..." etc.)
- Liste des catégories par dimension avec compte de projets cliquables
Jeu d'essai (tests/seed-demo.sh) :
- 10 actifs / 6 réalisés / 4 archivés (= 20 projets), réalistes Marseille
- 10 membres (4 collectives/orgs, 4 personnes, 2 collectives + AMU)
- 26 liens project_members, 27 étapes de roadmap (mix done/à faire)
- 6 discussions, 8 ressources, 8 events d'activité antérieurs
- Lit DB_* depuis .env, force --default-character-set=utf8mb4
- TRUNCATE+INSERT idempotent (la table categories est préservée)
- Hors /migrations/ pour ne PAS être appliqué automatiquement par apply.sh
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Le client mysql sous Windows + Git Bash utilise cp850 comme
`character_set_client` par défaut. Quand on applique 002_seed_categories.sql
avec un simple `mysql < ...`, le client réinterprète les bytes UTF-8 du fichier
via cp850 AVANT de les insérer : `é` (0xC3 0xA9) devient `├®` (E2949C C2AE)
stocké en clair dans la base, et apparaît tel quel dans l'API + le SPA.
Le `SET NAMES utf8mb4` côté serveur ne corrige pas ça parce que la conversion
est déjà faite côté client. Il faut le flag `--default-character-set=utf8mb4`
sur la ligne de commande mysql.
- README.md : doc de la commande correcte + commande de vérif HEX
- 002_seed_categories.sql : commentaire d'alerte + SET NAMES utf8mb4 (no-op
côté connexion mais documente l'intention)
Côté prod (apply.sh + docker exec mariadb) le client interne utilise utf8mb4
par défaut, donc pas de souci là-bas.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Arnaud