Dividendes

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, et sa hauteur changeant aussi d’une année à l’autre. 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=300px). Par défaut, la hauteur est de 300px. Sur mobile, lorsque le graphique bascule en barres horizontales, la hauteur est recalculée à partir du nombre de mois : le paramètre est alors ignoré.
• Mobile : en dessous de 600px de large, si l’année affichée compte 6 mois ou plus, les colonnes basculent en barres horizontales — une ligne par mois, 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 : un seul mois ne produit pas une barre géante, douze mois ne se collent pas les uns aux autres.
• Mois affichés : seuls les mois effectivement renseignés sont tracés. L’année en cours affiche donc une colonne qui grandit au fil des versements, au lieu d’une colonne écrasée contre onze emplacements vides.
• Tooltip : au survol sur desktop, au tap sur mobile (un tap en dehors du graphique le referme).
• Légende : deux pastilles sous le graphique, chacune accompagnée d’une icône d’information qui affiche la définition au survol ou au tap. Centrées sur une ligne à 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 mois renseigné) et le logo du fonds. Les props title et dataDate permettent de les surcharger.
• Sélecteur d’année : affiché au-dessus du graphique dès que plusieurs années sont disponibles, masqué s’il n’y en a qu’une. L’échelle verticale est recalculée pour l’année affichée, sur des paliers ronds (0,5 € / 1 € / 2 €).