Titres tronqués dans les diagrammes

[OmbelineChidaine]

Certains titres trop longs sont visuellement tronqués dans les diagrammes (et dans l'export en PNG), est-ce qu'il serait possible d'avoir les titres complets sans limite de caractères ?

[OmbelineChidaine]

[aschlegle]

Corrigé sur main (commit dcc649c).

Faute de capture, j'ai traité les trois textes qui pouvaient encore être coupés après le correctif du 29/07 (#106, #101, #87).

1. Étiquettes d'axes des radars — c'est le cas de la capture de #106, qui n'était pas réglé. Ces noms d'indicateurs sont écrits sur une seule ligne dans la marge entre le radar et le bord du canvas : les plus longs (« Connaissance des actions mises en place », « Connaissance des espèces emblématiques ») en sortaient et étaient coupés net. Ils sont désormais repliés sur plusieurs lignes, ce qui conduit Chart.js à rétrécir le radar pour leur faire place. Plus aucune limite de longueur.

2. Titres de graphiques — leur découpage comptait les caractères, sans connaître ni la largeur du canvas ni celle des lettres : sur un cadre étroit (les barres et le camembert sont côte à côte, chacun sur la moitié de la largeur), un titre censé tenir dépassait quand même et Chart.js le rognait. Il est maintenant refait avant chaque mise en page, en mesurant réellement le texte : le titre reste entier quelles que soient sa longueur et la taille du cadre, y compris après redimensionnement de la fenêtre.

3. Titre « Catégorie : … » des graphiques AFOM — il ne passait pas du tout par le découpage. « Catégorie : Animation, pédagogie, tourisme et sensibilisation » était donc rogné. Corrigé.

4. Légendes des camemberts — celles-ci restent limitées, et c'est une contrainte de Chart.js : une entrée de légende est dessinée sur une seule ligne, elle ne peut pas être repliée comme un titre. La seule marge de manœuvre est la taille de police, réduite de 12 à 11 px, ce qui fait passer la limite de 38 à 48 caractères — une dizaine de caractères gagnés par entrée. Le libellé complet reste lisible dans l'infobulle au survol. Pour l'afficher intégralement il faudrait sortir la légende du canvas, mais elle disparaîtrait alors du PNG exporté ; à voir dans #101 si le besoin est là.

Vérifié sur des rendus hors application aux dimensions réelles de la plateforme, avec les libellés de la capture de #106 : les étiquettes coupées de part et d'autre du radar sont désormais entières, et le titre long tient dans un cadre de 330 px.

Un test unitaire couvre le découpage de repli (frontend/src/app/utils/options-graphiques.spec.ts, 12 tests OK) ; le rendu reste à valider à l'œil, les étapes sont notées dans TESTS.md.

À part, pour #101 : en affichant côte à côte les deux graphiques, le camembert descend à environ 350 px de large sur un écran étroit, et Chart.js n'y dessine plus qu'une entrée de légende sur trois — les autres sont rejetées hors du canvas. Le comportement est antérieur à cette correction et n'en dépend pas, mais il mérite d'être regardé.

[aschlegle]

Correction reprise après tes captures, qui sont arrivées pendant que je travaillais — elles entourent toutes les entrées de légende des camemberts, tronquées par des « … ». Mon commentaire précédent annonçait qu'on ne pouvait pas faire mieux qu'en repousser la limite : c'est faux, on peut supprimer la troncature. C'est fait, commit 90b621a (le commit dcc649c cité plus haut n'existe plus, il a été remplacé).

Légendes des camemberts. La légende native de Chart.js écrit chaque entrée sur une seule ligne : un libellé de réponse plus large que le cadre en sortait, et la troncature à 38 caractères était le seul garde-fou. Elle est remplacée par une légende maison qui réserve sous le graphique la hauteur nécessaire et y écrit chaque entrée repliée sur autant de lignes qu'il faut. Plus aucune limite de caractères. Tout reste dessiné dans le canvas : le PNG exporté montre exactement ce qui est à l'écran.

Vérifié aux dimensions réelles de la plateforme avec les libellés de tes captures : à 350 px de large (deux graphiques côte à côte sur un écran étroit), « Ne connaît aucun des documents qui lui sont proposés » s'affiche en entier ; les libellés les plus longs de la question « nature des liens » se replient sur deux lignes, et le camembert rétrécit d'autant.

Une contrepartie à signaler : cette légende n'est plus cliquable, alors que celle de Chart.js permettait de masquer une part d'un clic. Les répartitions ne s'y prêtaient de toute façon pas — masquer une part fausse les proportions lues. Dis-moi si ce clic te servait.

Trois autres textes coupés, corrigés dans le même commit :

• étiquettes d'axes des radars (le cas de la capture de Problème longueur titres graphiques #106, qui n'était pas réglé) : les noms d'indicateurs, écrits dans la marge entre le radar et le bord du cadre, sont désormais repliés sur plusieurs lignes et le radar rétrécit pour leur faire place ;
• titres de graphiques : leur découpage comptait les caractères sans connaître la largeur du cadre, un titre censé tenir dépassait donc quand même sur un cadre étroit. Il est maintenant mesuré sur la largeur réellement disponible, et refait à chaque redimensionnement de la fenêtre ;
• titre « Catégorie : … » des graphiques AFOM : il ne passait par aucun découpage, « Catégorie : Animation, pédagogie, tourisme et sensibilisation » était rogné.

Tests unitaires sur le découpage (frontend/src/app/utils/options-graphiques.spec.ts, 12 tests OK) ; le rendu reste à valider à l'œil, étapes dans TESTS.md.