From 1d4910a940bda99505d3076b7eb0b23b10543ba9 Mon Sep 17 00:00:00 2001 From: Arnaud Date: Thu, 28 May 2026 22:29:17 +0200 Subject: [PATCH] =?UTF-8?q?feat(donut):=20agrandissement=20de=20l'anneau?= =?UTF-8?q?=20int=C3=A9rieur=20pour=20la=20lisibilit=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Le plancher social et ses 12 dimensions étaient à l'étroit autour de R=67 (anneau intérieur 78..100). Maintenant : - R_SOCIAL_LABEL passe de 67 à 88 -> circonférence du cercle où sont posés les labels = 2π·88 ≈ 553u -> chaque label dispose de ~46u d'arc (contre ~35 avant) - R_FLOOR_INNER passe de 78 à 102 - R_FLOOR_OUTER passe de 100 à 125 -> l'anneau orange du plancher social est visuellement plus présent - R_CENTER passe de 50 à 55 (pour ne pas écraser le "LE DONUT") - Font-size des labels sociaux : 6 → 8 (plus lisible avec l'arc élargi) L'espace sûr (R_FLOOR_OUTER..R_CEILING_INNER) passe de 100u à 75u : les trois bandes de positionnement des projets (social / transversal / écologique) sont recalibrées en conséquence sans chevauchement. Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/src/pages/DonutPage.vue | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/DonutPage.vue b/frontend/src/pages/DonutPage.vue index 0464ea9..59414d0 100644 --- a/frontend/src/pages/DonutPage.vue +++ b/frontend/src/pages/DonutPage.vue @@ -53,13 +53,18 @@ async function load() { onMounted(load) // --- Géométrie (en unités du viewBox) --- +// +// Les anneaux du plancher social et leurs labels ont été agrandis pour rester +// lisibles : circonférence ≈ 2π × R, donc plus R est grand, plus chaque label +// d'arc dispose de place. Le centre et le ring extérieur ne bougent pas, c'est +// uniquement la zone intérieure qui grossit, en mangeant un peu sur l'espace sûr. const R_PLANET_LABEL = 252 // étiquettes des limites planétaires (extérieur) const R_CEILING_OUTER = 225 const R_CEILING_INNER = 200 -const R_FLOOR_OUTER = 100 -const R_FLOOR_INNER = 78 -const R_SOCIAL_LABEL = 67 // étiquettes des dimensions du plancher social (intérieur) -const R_CENTER = 50 +const R_FLOOR_OUTER = 125 // ↑ (était 100) +const R_FLOOR_INNER = 102 // ↑ (était 78) +const R_SOCIAL_LABEL = 88 // ↑ (était 67) — arc de label = 2π·88/12 ≈ 46u +const R_CENTER = 55 // ↑ légèrement pour ne pas écraser "LE DONUT" /** Les 9 limites planétaires de Kate Raworth, placées autour de l'anneau extérieur. */ const PLANETARY_BOUNDARIES = [ @@ -221,11 +226,12 @@ const dots = computed(() => { const n = categories.value.length const step = 360 / n - // Bands selon la dimension (intérieur/extérieur/milieu). + // Bands selon la dimension (zone sûre = R_FLOOR_OUTER..R_CEILING_INNER, soit 75u de large). + // Recalibrées pour le nouveau dimensionnement (floor agrandi). const BANDS: Record = { - social: [R_FLOOR_OUTER + 8, R_FLOOR_OUTER + 40], // 108..140 - ecologique: [R_CEILING_INNER - 40, R_CEILING_INNER - 8], // 160..192 - transversal: [R_FLOOR_OUTER + 42, R_CEILING_INNER - 42], // 142..158 + social: [R_FLOOR_OUTER + 5, R_FLOOR_OUTER + 23], // 130..148 (proche du plancher) + transversal: [R_FLOOR_OUTER + 26, R_CEILING_INNER - 26], // 151..174 (au milieu) + ecologique: [R_CEILING_INNER - 23, R_CEILING_INNER - 5], // 177..195 (proche du plafond) } // Groupage par catégorie pour répartir angulairement. @@ -389,7 +395,7 @@ function gotoProject(p: ProjectListRow) { {{ s.label }}