Tuiles de chiffres de la base : une seule règle d'alignement (t_0b6c9173) #1741

Merged

hermes-fusion merged 3 commits from hermes/kpi-base into main 2026-10-15 17:50:03 +02:00

Conversation 3 Commits 3 Files changed 13 +640 -19

hermes-bot commented 2026-10-15 16:59:39 +02:00

Collaborator

• Copy link
• Copy Markdown

Ce que la carte change

Une seule règle d'alignement pour toutes les tuiles de chiffres, écrite une fois dans
_tableau/front/src/lib/base/styles.js :

• TUILE_KPI — la tuile : un conteneur (@container), son libellé en haut, le chiffre dessous, tout aligné à
  gauche, jamais plus étroite que la largeur de tuile de la charte ;
• CHIFFRE_KPI — le chiffre : tabulaire (tabular-nums), truncate, il suit la largeur de sa tuile
  (@tuile:) et non celle de la fenêtre ;
• GRILLE_KPI — la rangée : repeat(auto-fit, minmax(var(--container-tuile), 1fr)), autant de tuiles que la
  place le permet, même hauteur sur une rangée.

Compteur prend tuile et abrege (au-delà de 10 000 : « 1,2 M », la valeur exacte espacée restant dans
l'infobulle de la base), Infobulle prend uneLigne (un libellé de tuile) et classe (la typographie du chiffre à
la place de celle de la légende), Tuile porte la règle et une légende tabulaire. La démonstration de la base
applique la règle au lieu de se dimensionner elle-même. La charte et le README de la base sont mis à jour.

La panne mesurée avant (Chromium, vraie build, /processus/?demo)

• « 1 200 000 » dans une tuile de 90 px : 135 px de débordement hors de sa tuile à 1 440 px, 23 px à 375 px ;
• la taille du chiffre suivait la FENÊTRE (text-xl lg:text-display) et non la tuile : la même rangée s'écrivait en
  21 px au téléphone et en 48 px au bureau ;
• hauteurs et bords mêlés dans une même rangée.

Un second défaut a été trouvé pendant la carte et corrigé (second commit) : --container-tuile n'existait que dans
charte-theme.css, sous @theme … reference — un bloc compilé, jamais servi. Le var() de la rangée ne résolvait
rien, minmax() était invalide et la rangée large retombait sur une seule colonne (bords gauches
[264, 264, 264, 264] à 1 440 px), sans débordement ni hauteur différente : invisible pour les premiers contrôles.
Le jeton est désormais aussi dans tableau.css, la feuille que la page charge.

La preuve après

python3 _tableau/test_navigateur_tuiles_kpi.py — Chromium, 1 440 × 900 et 375 × 812, clair et sombre :

fenêtre	rangée	bords gauches	largeurs	hauteur	chiffre	débordement
1 440 px	large (GRILLE_KPI)	264, 554, 844, 1134	4 × 282 px	107 px	48 px	0
1 440 px	serrée (grid-cols-4)	264, 362, 460, 558	4 × 90 px	67,8 px	21 px	0
375 px	large (GRILLE_KPI)	16, 16, 16, 16 (une par ligne)	4 × 343 px	107 px	48 px	0
375 px	serrée (grid-cols-4)	16, 104, 192, 279	4 × 80 px	67,8 px	21 px	0

Le même banc vérifie le survol : le libellé tronqué et le chiffre abrégé (« 1,2 M ») donnent leur texte entier
(« 1 200 000 »), et le chiffre d'une tuile étroite est plus petit que celui d'une tuile large — donc sa taille suit
la tuile, pas la fenêtre.

Gardes de source : front/tests/tuiles-kpi.test.js (12 cas : la règle, le jeton dans la feuille servie, les
fonctions d'abréviation, le rendu du chiffre) ; npx vitest run : 47 fichiers, 406 tests passés ;
python3 test_charte_ui.py : OK (257 classes au socle, 0 locale, aucune couleur en dur) ; les bancs voisins
(test_charte_svelte.py, test_charte_mise_en_page.py, test_charte_title.py, test_onglets_doublons.py,
test_verifier_onglets.py, test_navigateur_barre_bas.py) passent.

Ce qui n'est pas mesuré

• Le clic tactile sur un libellé tronqué (comportement existant de la base, non modifié par cette carte).
• Les onglets eux-mêmes : la règle est démontrée par Demo.svelte, leur reprise se fait carte par carte.
• La rangée de CarteMaintenant (les quatre chiffres de la carte) n'est pas concernée : composant non touché.

## Ce que la carte change Une seule règle d'alignement pour toutes les tuiles de chiffres, écrite une fois dans `_tableau/front/src/lib/base/styles.js` : - `TUILE_KPI` — la tuile : un conteneur (`@container`), son libellé en haut, le chiffre dessous, tout aligné à gauche, jamais plus étroite que la largeur de tuile de la charte ; - `CHIFFRE_KPI` — le chiffre : tabulaire (`tabular-nums`), `truncate`, il suit la largeur de **sa tuile** (`@tuile:`) et non celle de la fenêtre ; - `GRILLE_KPI` — la rangée : `repeat(auto-fit, minmax(var(--container-tuile), 1fr))`, autant de tuiles que la place le permet, même hauteur sur une rangée. `Compteur` prend `tuile` et `abrege` (au-delà de 10 000 : « 1,2 M », la valeur exacte espacée restant dans l'infobulle de la base), `Infobulle` prend `uneLigne` (un libellé de tuile) et `classe` (la typographie du chiffre à la place de celle de la légende), `Tuile` porte la règle et une légende tabulaire. La démonstration de la base applique la règle au lieu de se dimensionner elle-même. La charte et le README de la base sont mis à jour. ## La panne mesurée avant (Chromium, vraie build, `/processus/?demo`) - « 1 200 000 » dans une tuile de 90 px : **135 px de débordement** hors de sa tuile à 1 440 px, **23 px** à 375 px ; - la taille du chiffre suivait la FENÊTRE (`text-xl lg:text-display`) et non la tuile : la même rangée s'écrivait en **21 px** au téléphone et en **48 px** au bureau ; - hauteurs et bords mêlés dans une même rangée. Un second défaut a été trouvé pendant la carte et corrigé (second commit) : `--container-tuile` n'existait que dans `charte-theme.css`, sous `@theme … reference` — un bloc compilé, jamais servi. Le `var()` de la rangée ne résolvait rien, `minmax()` était invalide et la rangée large retombait sur **une seule colonne** (bords gauches `[264, 264, 264, 264]` à 1 440 px), sans débordement ni hauteur différente : invisible pour les premiers contrôles. Le jeton est désormais aussi dans `tableau.css`, la feuille que la page charge. ## La preuve après `python3 _tableau/test_navigateur_tuiles_kpi.py` — Chromium, 1 440 × 900 et 375 × 812, clair et sombre : | fenêtre | rangée | bords gauches | largeurs | hauteur | chiffre | débordement | |---|---|---|---|---|---|---| | 1 440 px | large (`GRILLE_KPI`) | 264, 554, 844, 1134 | 4 × 282 px | 107 px | 48 px | 0 | | 1 440 px | serrée (`grid-cols-4`) | 264, 362, 460, 558 | 4 × 90 px | 67,8 px | 21 px | 0 | | 375 px | large (`GRILLE_KPI`) | 16, 16, 16, 16 (une par ligne) | 4 × 343 px | 107 px | 48 px | 0 | | 375 px | serrée (`grid-cols-4`) | 16, 104, 192, 279 | 4 × 80 px | 67,8 px | 21 px | 0 | Le même banc vérifie le survol : le libellé tronqué et le chiffre abrégé (« 1,2 M ») donnent leur texte entier (« 1 200 000 »), et le chiffre d'une tuile étroite est plus petit que celui d'une tuile large — donc sa taille suit la tuile, pas la fenêtre. Gardes de source : `front/tests/tuiles-kpi.test.js` (12 cas : la règle, le jeton dans la feuille servie, les fonctions d'abréviation, le rendu du chiffre) ; `npx vitest run` : 47 fichiers, **406 tests passés** ; `python3 test_charte_ui.py` : **OK** (257 classes au socle, 0 locale, aucune couleur en dur) ; les bancs voisins (`test_charte_svelte.py`, `test_charte_mise_en_page.py`, `test_charte_title.py`, `test_onglets_doublons.py`, `test_verifier_onglets.py`, `test_navigateur_barre_bas.py`) passent. ## Ce qui n'est pas mesuré - Le clic tactile sur un libellé tronqué (comportement existant de la base, non modifié par cette carte). - Les onglets eux-mêmes : la règle est démontrée par `Demo.svelte`, leur reprise se fait carte par carte. - La rangée de `CarteMaintenant` (les quatre chiffres de la carte) n'est pas concernée : composant non touché.

hermes-bot added 2 commits 2026-10-15 16:59:39 +02:00

Les tuiles de chiffres de la base : une seule règle d'alignement (t_0b6c9173) ... b44e2ac295

Cause, mesurée dans Chromium sur la vraie build (`/processus/?demo`) : dans une
rangée de quatre tuiles de 90 px, « 1 200 000 » porté par `text-xl lg:text-display`
sortait de 135 px hors de sa tuile à 1 440 px de large, et de 23 px à 375 px ; la
taille du chiffre suivait la largeur de la FENÊTRE et non celle de sa tuile, si
bien que la même rangée s'écrivait en 21 px au téléphone et en 48 px au bureau,
hauteurs et bords mêlés.

Remède : la règle est écrite une fois, dans `lib/base/styles.js` —
`TUILE_KPI` (la tuile est un conteneur `@container`, son libellé en haut, le
chiffre dessous, tout aligné à gauche), `CHIFFRE_KPI` (chiffres tabulaires, jamais
plus large que sa tuile : il suit `@tuile:` = `--container-tuile` = 192 px) et
`GRILLE_KPI` (`repeat(auto-fit, minmax(var(--container-tuile), 1fr))`, la même
hauteur sur la rangée). `Compteur` gagne `tuile` et `abrege` (au-delà de 10 000 :
« 1,2 M », la valeur exacte espacée restant dans l'infobulle), `Infobulle` gagne
`uneLigne` et `classe` (la typographie de l'appelant à la place de celle de la
légende), `Tuile` porte la règle et une légende tabulaire. La démonstration de la
base applique la règle au lieu de se dimensionner elle-même.

Preuve : `_tableau/test_navigateur_tuiles_kpi.py` (Chromium, 1 440 x 900 et
375 x 812, clair et sombre : aucun débordement, même hauteur, même bord, le chiffre
d'une tuile étroite plus petit, le texte entier au survol) ;
`front/tests/tuiles-kpi.test.js` (11 cas) ; `npx vitest run` (406 cas) ; le garde
`test_charte_ui.py` et les bancs voisins passent.

Rangée de tuiles : le jeton de largeur manquait dans la feuille servie ... 27a06abd13

Cause, mesurée dans Chromium sur la démonstration : `GRILLE_KPI` porte
`repeat(auto-fit, minmax(var(--container-tuile), 1fr))`, mais `--container-tuile`
n'était posé que dans `charte-theme.css`, sous `@theme ... reference` : Tailwind
compile ce bloc (la variante `@tuile:` en sort), il n'est jamais servi. Le `var()`
ne résolvait donc rien, `minmax()` était invalide, `grid-template-columns` restait
à sa valeur initiale et la rangée large retombait sur une seule colonne — bords
gauches [264, 264, 264, 264] à 1 440 px, quatre tuiles empilées, mêmes hauteurs et
aucun débordement : invisible pour les premiers contrôles du banc.

Remède : le jeton est posé aussi dans `tableau.css`, la feuille que la page charge,
à côté des autres jetons. Le banc calcule maintenant le nombre de lignes attendu
(`auto-fit` : autant de tuiles de 192 px + 8 px de pas que la largeur le permet,
mesurée par la rangée elle-même) et le compare à ce que Chromium a rendu ; la garde
de source exige la déclaration dans `tableau.css`, ancrée en début de ligne pour
qu'un jeton commenté ne la satisfasse pas.

Preuve. Essai rouge, jeton retiré :
  rangée large : les tuiles ne sont pas côte à côte, elles sont empilées (bords gauches [264, 264, 264, 264])
  rangée large : les tuiles ne sont pas sur la même ligne (hauts [1178.5, 1293.5, 1408.4, 1523.4])
Jeton remis : `test_navigateur_tuiles_kpi.py` OK — quatre tuiles de 282 px côte à
côte (bords 264, 554, 844, 1134) à 1 440 px, le chiffre à 48 px ; au téléphone une
colonne de 343 px (une seule tuile de 192 px tient par ligne), le chiffre à 48 px
dans la tuile large et à 21 px dans les tuiles de 80 px de la rangée serrée.
`front/tests/tuiles-kpi.test.js` : jeton commenté → rouge, ligne réelle → vert.

hermes-fusion added the

ci-rouge

label 2026-10-15 17:05:02 +02:00

hermes-fusion commented 2026-10-15 17:05:02 +02:00

Collaborator

• Copy link
• Copy Markdown

fusion-auto : pas de fusion, la CI est rouge (Rust, Front Svelte). Le chef de l'atelier renvoie la carte à l'agent ; l'étiquette tombera d'elle-même une fois corrigé.

`fusion-auto` : pas de fusion, la CI est rouge (Rust, Front Svelte). Le chef de l'atelier renvoie la carte à l'agent ; l'étiquette tombera d'elle-même une fois corrigé.

hermes-bot added 1 commit 2026-10-15 17:20:31 +02:00

Un chiffre de tuile n'est pas une légende : les écarts d'homogénéité ... 5ab6f67b6c

Cause : `Infobulle` laissait l'appelant lui donner la typographie du chiffre
(`classe`). Le relevé lisait donc sous le même type `infobulle` une légende de
12 px et un chiffre de 48 px — deux écarts nouveaux (fontSize, color, mesurés
sur la démonstration) — et le déclencheur, bouton d'action d'un type que le
relevé ne connaissait pas, un troisième.

Remède : `Infobulle` prend `chiffre` (le déclencheur porte un chiffre de tuile :
règle des chiffres et `data-base="compteur"`, type déclaré au registre, distinct
d'`infobulle` et connu des types d'action) ; la démonstration ne s'habille plus
localement (le garde d'habillage refusait `bg-muted` et `rounded-lg`).

Mesuré : `homogeneite.py --sans-captures` → 4 écarts connus, 0 nouveaux, 0
captures changées ; `garde-habillage.py` → 18 admises, 0 refus ;
`test_homogeneite.py` → code 0 ; `npx vitest run` → 47 fichiers, 408 tests.

hermes-fusion removed the

ci-rouge

label 2026-10-15 17:25:02 +02:00

hermes-bot force-pushed hermes/kpi-base from 5ab6f67b6c to 4cfe110563 2026-10-15 17:34:57 +02:00 Compare

hermes-bot commented 2026-10-15 17:36:06 +02:00

Author

Collaborator

• Copy link
• Copy Markdown

Preuves, arbre rebasé sur main (4cfe1105) — la CI du run 646 était rouge, celle du run 659 est verte.

Cause du rouge (run 646, les deux jobs) : sous le type infobulle, homogeneite.py lisait une légende de 12 px et un chiffre de 48 px (2 écarts nouveaux : fontSize, color), plus un bouton d'action dont le relevé ignorait le type. Journal du job injoignable d'ici (routes de journal en 404) : reproduit en local avec les mêmes bancs que le workflow.

Remède : Infobulle prend chiffre (déclencheur compteur, règle des chiffres) au lieu du classe imposé par l'appelant ; la démonstration ne s'habille plus localement ; compteur entre au registre d'homogénéité et aux types d'action du relevé.

• homogeneite.py --sans-captures : « 4 écarts connus, 0 nouveaux, 0 résolus » → code 0 (avant : 2 nouveaux).
• garde_fous.py : code 1, 4 écarts, les mêmes dans un arbre propre de origin/main → aucun ajouté.
• npx vitest run : 46 fichiers, 408 tests. npx vite build : code 0, dist/app.js 158 756 o, dist/index.html 1 881 o.
• famille charte (6 bancs) : code 0. garde-habillage.py : 0 refus.
• banc de rendu test_navigateur_tuiles_kpi.py (Chromium) : tuile 90 px → chiffre 21 px, tuile 282 px → chiffre 48 px ; aucun débordement ; quatre tuiles de même hauteur, quatre chiffres au même bord gauche.
• CI : run 659 (5ab6f67, contenu identique avant rebasage) → les deux jobs verts, homogeneite.py avec captures compris.
• Captures : bureau 1440 et téléphone 375, clair et sombre, sur la carte t_0b6c9173.

Non mesuré : le journal des jobs 646 (404), la CI du commit rebasé (en cours), les pages du tableau hors démonstration (carte B).

**Preuves, arbre rebasé sur `main` (`4cfe1105`) — la CI du run 646 était rouge, celle du run 659 est verte.** Cause du rouge (run 646, les deux jobs) : sous le type `infobulle`, `homogeneite.py` lisait une légende de 12 px et un chiffre de 48 px (2 écarts nouveaux : `fontSize`, `color`), plus un bouton d'action dont le relevé ignorait le type. Journal du job injoignable d'ici (routes de journal en 404) : reproduit en local avec les mêmes bancs que le workflow. Remède : `Infobulle` prend `chiffre` (déclencheur `compteur`, règle des chiffres) au lieu du `classe` imposé par l'appelant ; la démonstration ne s'habille plus localement ; `compteur` entre au registre d'homogénéité et aux types d'action du relevé. - `homogeneite.py --sans-captures` : « 4 écarts connus, 0 nouveaux, 0 résolus » → code 0 (avant : 2 nouveaux). - `garde_fous.py` : code 1, 4 écarts, les **mêmes** dans un arbre propre de `origin/main` → aucun ajouté. - `npx vitest run` : 46 fichiers, 408 tests. `npx vite build` : code 0, `dist/app.js` 158 756 o, `dist/index.html` 1 881 o. - famille charte (6 bancs) : code 0. `garde-habillage.py` : 0 refus. - banc de rendu `test_navigateur_tuiles_kpi.py` (Chromium) : tuile 90 px → chiffre 21 px, tuile 282 px → chiffre 48 px ; aucun débordement ; quatre tuiles de même hauteur, quatre chiffres au même bord gauche. - CI : run 659 (`5ab6f67`, contenu identique avant rebasage) → les deux jobs verts, `homogeneite.py` **avec** captures compris. - Captures : bureau 1440 et téléphone 375, clair et sombre, sur la carte t_0b6c9173. Non mesuré : le journal des jobs 646 (404), la CI du commit rebasé (en cours), les pages du tableau hors démonstration (carte B).

hermes-fusion merged commit 4731705385 into main 2026-10-15 17:50:03 +02:00

hermes-fusion deleted branch hermes/kpi-base 2026-10-15 17:50:03 +02:00

hermes-fusion commented 2026-10-15 17:50:03 +02:00

Collaborator

• Copy link
• Copy Markdown

Fusionnée automatiquement par fusion-auto (forge) : CI verte, sans conflit.

Fusionnée automatiquement par `fusion-auto` (forge) : CI verte, sans conflit.

hermes-fusion referenced this pull request from a commit 2026-10-15 17:50:04 +02:00

Merge pull request 'Tuiles de chiffres de la base : une seule règle d'alignement (t_0b6c9173)' (#1741) from hermes/kpi-base into main

hermes-bot referenced this pull request 2026-10-15 18:48:53 +02:00

Les chiffres de KPI : la fiche de réseau passe à la tuile de la base, et la garde côté source #1748

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

ci-rouge

La CI de la PR est rouge : pas de fusion automatique

  

conflit

La PR est en conflit avec main : à rebaser

  

operateur

Cas sensible : seul l operateur fusionne

  

relu

Relue et validée par le relecteur de l atelier Hermes : la fusion automatique peut la prendre

No labels

ci-rouge

conflit

operateur

relu

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

foXaCe/studio!1741

No description provided.