diff --git a/frontend/src/pages/DonutPage.vue b/frontend/src/pages/DonutPage.vue index 336c50d..7891af9 100644 --- a/frontend/src/pages/DonutPage.vue +++ b/frontend/src/pages/DonutPage.vue @@ -58,13 +58,14 @@ onMounted(load) // 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_CAT_LABEL = 275 // noms de catégories EN ARC, tout à l'extérieur +const R_PLANET_LABEL = 252 // étiquettes des limites planétaires (entre catégories et ceiling) const R_CEILING_OUTER = 225 const R_CEILING_INNER = 200 -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" +const R_FLOOR_OUTER = 125 +const R_FLOOR_INNER = 102 +const R_SOCIAL_LABEL = 88 // arc de label = 2π·88/12 ≈ 46u +const R_CENTER = 55 /** * Format : chaque entrée est un tableau de string. Un tableau à 1 élément → @@ -233,16 +234,12 @@ const wedgeDividers = computed(() => { }) }) -/** Position du label catégorie (juste sous l'anneau écologique, sur la zone sûre). */ -const categoryLabels = computed(() => { - const n = categories.value.length || 6 - const step = 360 / n - return categories.value.map((cat, i) => { - const center = i * step + step / 2 - const [x, y] = pt(center, (R_CEILING_INNER + R_FLOOR_OUTER) / 2) - return { cat, x, y } - }) -}) +/** Arcs des noms de catégories, tout à l'extérieur du donut, dans la couleur de la catégorie. + * 6 catégories × 60° d'arc chacune ; halfSpan=28° laisse une petite marge avant la suivante. */ +const categoryArcs = computed(() => + arcLabelPaths(categories.value.map(c => [c.name] as Label), R_CAT_LABEL, 'cat', 28), +) +const categoryArcLines = computed(() => categoryArcs.value.flatMap(c => c.lines)) /** Paths d'arc pour les 9 limites planétaires (anneau extérieur). */ const planetaryArcs = computed(() => arcLabelPaths(PLANETARY_BOUNDARIES, R_PLANET_LABEL, 'pb', 18)) @@ -361,15 +358,19 @@ function gotoProject(p: ProjectListRow) {
- + - + + - - + + @@ -423,17 +424,19 @@ function gotoProject(p: ProjectListRow) { /> - + {{ l.cat.name }} + :fill="categories[arc.key]?.color_hex ?? '#111827'" + style="letter-spacing: 0.5px" + > + + {{ arc.lines[0].text }} + +