feat(donut): agrandissement de l'anneau intérieur pour la lisibilité

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) <noreply@anthropic.com>
This commit is contained in:
2026-05-28 22:29:17 +02:00
parent 986241dc85
commit 1d4910a940
+15 -9
View File
@@ -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<DotView[]>(() => {
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<Dimension, [number, number]> = {
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) {
<g>
<text
v-for="s in socialArcs" :key="`sf-text-${s.key}`"
font-size="6" fill="#EA580C" font-weight="600"
font-size="8" fill="#EA580C" font-weight="600"
>
<textPath :href="`#${s.pathId}`" startOffset="50%" text-anchor="middle">
{{ s.label }}