Performance

Principes d'intégration

• Hauteur automatique : l’iframe s’ajuste à son contenu via postMessage. Indispensable ici, le graphique étant nettement plus haut sur mobile que sur desktop. Le snippet ci-dessous comporte donc deux parties : l’<iframe> et un petit <script> d’écoute à placer sur la même page. L’attribut height n’est que la valeur affichée avant le premier message.
• Zone graphique (hors légende) : la hauteur se règle via le paramètre d’URL ?height= (ex. ?height=400px). Par défaut, la hauteur est de 400px. Sur mobile, lorsque le graphique bascule en barres horizontales, la hauteur est recalculée à partir du nombre d’années : le paramètre est alors ignoré.
• Mobile : en dessous de 600px de large, si le graphique compte 6 années ou plus, les colonnes basculent en barres horizontales — une ligne par année, libellé entier à gauche. Au-delà, les colonnes restent verticales. L’épaisseur des barres et la taille des libellés s’adaptent à la largeur réelle : une seule année ne produit pas une barre géante, douze années ne se collent pas les unes aux autres.
• Tooltip : au survol sur desktop, au tap sur mobile (un tap en dehors du graphique le referme).
• Légende : trois pastilles sous le graphique (taux de distribution, variation du prix de la part, objectif de TD), centrées et réparties sur une ou deux lignes à partir de 640px de large, empilées à gauche en dessous.
• Bandeau : le graphique embarque son titre, la mention « Source Iroko. Données au … » (date déduite du dernier exercice disponible) et le logo du fonds. Les props title et dataDate permettent de les surcharger.
• Taux cible : la ligne pointillée et son étiquette (5,5 % pour Zen, 6,5 % pour Atlas) sont dessinées dans la zone graphique. Cette étiquette ne portant que le nombre, c’est la troisième pastille de légende — « Objectif de TD non garanti » — qui en donne le sens ; son icône d’information affiche la mention complète au survol sur desktop, au tap sur mobile.