feat(indicator/biodiversity): Create popup content for biodiversity indicators

[david-bretaud-dev]

Issue

#54

Goals

• PoC to define popup content with React code.
• Define reusable elements for indicator context, as we are going to have different popups/graphs for different indicators but with a consistent UI or pattern
• PoC for internationalization of units in a convenient way
• Finally, I had in mind that this indicator/biodiversity component is not necessarily to be used in a popup, meaning that the content should be agnostic from the container

Rendering Flow:

1. Properties parsed by coordo and provided to the renderCallback
2. these raw data are fed to a formatted function that handles null/undefined/ 2 digits max and appends units (with translations)
3. These formatted data are provided to as hook that declares the structure
4. the structure is read by a React component that will render the right items (divider, title, sections, ...) based on the config

=> Adopted a declarative approach to ensure consistency and reduce JSX configuration and boilerplate

Remarks

• Took some liberty to customize the scrollbar in the popup (editable with css variable ofc), I find it nicer
• A bit of uncertainty on where to put the bg color/ width limitation. Possible to do it either on the BiodiversityIndicator container or directly the popup.
• The Radar graph is nice (from shadcn) but the labels for some items are cropped (same issue as on the shadcn examples), I don't think there is an easy solution to bypass this limitation.

Demo

Enregistrement.de.l.ecran.2026-03-07.001040.mp4

[david-bretaud-dev]

This needs dataforgoodfr/Coordonnees#38 to be merged

Explains 1 of the CI failure