Page "Graphiques" : Choix multiple de zones géographiques
Contexte
La page Graphiques (également appelée "Fiche pays") n'existait pas dans le prototype R Shiny. En utilisant cette nouvelle page, telle qu'elle est proposée actuellement, l'AFD a eu l'idée et fait la suggestion de pouvoir afficher plusieurs pays sur un même graphique.
Besoin
Dans la page Graphiques, permettre de sélectionner plusieurs zones géographiques à la fois (pays, DR, Afrique entière) pour afficher autant de courbes que de zones choisies sur les diagrammes d’indicateur. La courbe correspondant à chaque zone sera affichée dans une couleur différente et précisée dans une légende affichée sur la même page
Environnement de travail
- toutafrique-api : branche
refactor-endpoints
- toutafrique-data-processing : branche
refactor-territories-info
et faire tournerprocess-indicators.py
(~3 minutes) - toutafrique-frontend : branche
14-multiple-graphs
Tâches
-
Permettre de sélectionner plusieurs zones sur la page "Graphiques". -
Afficher une courbe par zone géographique sur chaque graphique, de couleur différente pour chaque zone. -
Afficher une légende au-dessous du titre et avant la 1ère catégorie pour savoir quelle couleur correspond à quel pays. Cf section "Légende" ci-dessous. -
Lorsqu'aucun indicateur est sélectionné, utiliser _
à la place des indicateurs pour "boucher" l'URL (/charts/_/ZAF
), même chose pour aucun pays. Dans le cas où il n'y a aucun indicateur, aucun pays, ou aucun des deux, il faut juste afficher la sidebar, la navbar, et le bouton "Zones géographiques", avec un "call to action" de type "Veuillez sélectionner un pays et un indicateur." -
Permettre de sélectionner la zone géographique "Tout Afrique" (correspondant au continent africain, code AF
) depuis la modal box -
Limiter à 3 le nombre de zones affichés dans le titre -
Gérer erreur quand de nombreuses zones sont sélectionnées. (voir #48 (closed)) - à tester après mise en prod API v2 -
Régler bug modbar non affichée si indicateur pyramide des ages est séléctionné -
Régler bug de mauvaise URL générée pour chaque pays de la carte (type /charts/pibs/DZA
)
À améliorer sur Plotly :
-
déplacer la légende au-dessous de préférence pour réserver la pleine largeur au graphique -
toujours afficher la légende même s'il n'y a qu'une seule ligne -
tenter de réduire les marges, mais attention à celle de gauche, si les nombres de l'axe Y sont longs, que ça ne dépasse pas => Cf https://plotly.com/python/setting-graph-size/#automatically-adjust-margins -
tenter de rétablir la barre d'outils (appelée "modebar" par Plotly) en haut sur une ligne, sinon la cacher -
gérer les valeurs manquantes (NA) en traçant une ligne entre les points isolés, cf https://plotly.com/javascript/line-charts/#connect-gaps-between-data
Légende
- Reprendre l'UX de la légende de la carte avec des petits carrés de couleur.
- Utiliser des color palettes de d3 (en choisir une qui ait un nombre suffisant de couleurs)
- Optionnel : avoir des couleurs stables (pendant la session de navigation), càd toujours les mêmes pour chaque zone. Pour cela on pourrait trier les noms des zones par ordre alphabétique et prendre la couleur par position dans la palette.
UX
Dans un second temps, envisager de remplacer la modal de sélection par un svelte-select avec des "chips"... Auquel cas le titre de la page serait "Graphiques".