feat: add Typology component

Delapouite commented 5 months ago

Bonjour

Cette PR ajoute le composant de typologie de voies tel qu'illustré dans https://github.com/benoitdemaegdt/voieslyonnaises/issues/225

Quelques exemples :

Voie 6

Voie 10

ThibautChd commented 5 months ago

Waouh super boulot Bruno merci beaucoup :-)

Avant de merger cette PR, on va avoir besoin de renseigner les typologies de tous les tronçons tels qu'ils devraient être en 2026. Je vais voir avec @StephaneColson pour qu'on avance rapidement sur ce sujet.

Pour encore améliorer un chouilla ce composant, je te propose d'améliorer d'un cran la taille de la partie "Distance totale" et de réduire d'un cran la taille de la "Fréquentation max 2030". Enfin, la partie Typologie pourrait être plus lisible avec un encadré bleu LVV aux coins arrondis, avec si possible, le libellé "Typologie 2026" inclus dans cet encadrement. Une illustration ci-dessous.

Ensuite, on pourra en profiter pour ajouter le paramètre typologie à notre tooltip des tronçons :

Enfin, après avoir mergé tout cela, on pourra créer un nouveau menu "Tableau de bord" dans la bannière principale, qui donnera sur un unique écran à la suite l'avancement de l'ensemble du réseau, puis de la Voie Lyonnaise 1, la Voie Lyonnaise 2, etc. Ce sera l'écran qui concentrera toutes nos statistiques sur le réseau. Trop hâte !

StephaneColson commented 5 months ago

Je vais m'y mettre. Ca devrait pouvoir être fini pour la fin de la semaine. Stay tuned!

StephaneColson commented 5 months ago

Salut @Delapouite on se dit avec @ThibautChd qu'il faudrait rajouter le type 'aucun', et donc je crois qu'il faudrait que tu le rajoutes dans ton code...n'est-ce pas ? cc @benoitdemaegdt

Delapouite commented 5 months ago

Salut. Par défaut, si le type n'est pas renseigné ou ne figure pas dans liste suivante, alors ça se rabat sur "Inconnu". Est-ce qu'il existe une nuance avec le "aucun" que tu proposes?

    const names = {
      bidirectionnelle: 'Piste cyclable bidirectionnelle',
      bilaterale: 'Piste cyclable bilatérale',
      'voie-bus': 'Voie bus',
      'voie-bus-elargie': 'Voie bus élargie',
      velorue: 'Vélorue',
      'voie-verte': 'Voie verte',
      'bandes-cyclables': 'Bandes cyclables',
      'zone-de-rencontre': 'Zone de rencontre'
    };

ThibautChd commented 5 months ago

Oui il y a une nuance. "Aucun" est explicite et signifie qu'il n'y a et aura aucun aménagement cyclable sur ce tronçon. "Inconnu" signifie qu'il y a un projet cyclable prévu sur ce tronçon mais que sa typologie n'a pas été rendue publique à ce jour. C'est pour cela qu'il faudrait rajouter le type "Aucun" dans la liste des typologies de Benoit.

StephaneColson commented 5 months ago

Je rajoute le "aucun" dans la liste des typologies avec tous les ajouts de type que je fais sur tous les tronçons. ETA: demain

ThibautChd commented 5 months ago

Encore un grand merci à @StephaneColson qui vient de terminer l'ajout des typologies de la totalité des tronçons. @benoitdemaegdt vient de merger le travail.

On peut donc relancer cette PR en prenant en compte le code initialement proposé par @Delapouite, en regardant si on peut légèrement l'améliorer comme je le proposais la semaine dernière, et en revoyant la tooltip tronçon pour y rajouter cette information. Restera alors à créer la nouvelle page "Tableau de bord" qui regroupera toutes les statistiques de toutes les lignes. Bon courage à toute l'équipe de contributeurs :)

Delapouite commented 5 months ago

Top! Je tacherai de faire les ajustements ce soir.

Delapouite commented 5 months ago

Changements effectués. Voilà ce que ça rend (les chiffres ne sont pas à prendre en compte, il s'agit de ceux avant le travail de Stéphane):

VL10

VL9

ThibautChd commented 5 months ago

Waouh trop bien Bruno ! C'est par-fait :) Je laisse @benoitdemaegdt y jeter un œil mais pour moi le rendu est vraiment top, merci !

benoitdemaegdt commented 5 months ago

Trop trop classe ce composant et cette PR 🙌

2 retours en ayant simplement checkout et testé :

il y a un soucis de calcul qques part.
il y a un soucis de responsive design

je n'aurais pas d'ordi avec moi ce week end, mais je pourrais relire le code la semaine prochaine :)

ThibautChd commented 5 months ago

Je profite de ce retour de Benoit pour faire quelques remarques mineures sur la forme. Ca aidera à avoir un fonctionnement responsive compatible.

Par cohérence avec les autres éléments du tableau de bord :

réduire d'un cran la typo et la taille du rectangle "Typologie 2026"
mettre la typo des différentes typologie à la même taille que celle utilisée pour les libellés "Réalisé", "En travaux", "Prévu"

Delapouite commented 5 months ago

Merci pour les retours.

Concernant les chiffres erronés, cela était du au fait que j'avais laissé une limite temporaire se focalisant sur les sections "done". Désormais elles sont toutes prises en compte.

Coté responsive, j'ai fait en sorte que le component se comporte au mieux en petite taille. J'ai du faire deux concessions:

l'expression Piste cyclable bidirectionnelle étant pas mal longue, cela conduit à devoir baisser d'une taille la police pour les petits écrans si on veut que ça rentre.
pour les petits pourcentages (1%, 2% voire 3%) la barre devient minuscule. J'ai tenté de ne pas la faire descendre sous une largeur minimale (genre 4px), mais ça rend pas vraiment mieux donc j'ai conservé la "taille réelle", partant du principe que le nombre au bout de la ligne était suffisant pour comprendre la donnée.
la taille du rectangle "Typologie 2026" a été réduit.

En reprenant la VL12, cela donne maintenant:

Desktop

Mobile type iPhone 11

ThibautChd commented 5 months ago

Top Bruno ça m'a l'air nickel. Je te propose qu'on laisse Benoit y jeter un œil à son retour lundi avant de merger. Encore merci pour le travail :-)

En attendant, si tu t'ennuies ce week-end, tu peux commencer à travailler sur la page "Tableau de bord" qui regroupe les statistiques de tout le réseau (comme sur la page d'accueil), puis de chaque ligne les unes à la suite des autres. Extrait illustré avec VL9 puis VL10 : Restera à trouver un séparateur sympa entre chaque ligne, comme une ligne horizontale centrée en rose ou bleu LVV, ou bien un fond coloré clair qui alterne avec le blanc comme sur ma maquette initiale dans l'Issue #225, ou bien encore une barre verticale de la couleur de la ligne sur le côté gauche. A tester pour voir.

Il sera aussi intéressant de revenir sur la PR #325 pour avoir la possibilité d'afficher ou masquer les différents typologies de VL depuis la légende, en affichant seulement les pistes cyclables bidirectionnelles du réseau par exemple. Par défaut, toutes les typologies seraient sélectionnées.

benoitdemaegdt commented 4 months ago

sur la home, ça va rendre ça. Quid de trier de la plus longue barre (en haut) vers la plus petite barre (en bas) ?

Capture d’écran 2024-04-23 à 11 33 46

benoitdemaegdt commented 4 months ago

Que pensez vous de limiter la largeur aussi ? Un peu plus propre je pense ? Capture d’écran 2024-04-23 à 11 35 27

ThibautChd commented 4 months ago

Tu as raison @benoitdemaegdt ! A trier de la plus longue barre à la plus petite barre. Pour la largeur, une plus petite comme sur ton deuxième exemple est effectivement plus propre. Faisons comme cela :) Je suggère aussi de masquer les types qui sont à 0% pour éviter la confusion de penser qu'il n'y en a pas du tout (alors qu'en fait c'est juste l'arrondi qui donne zéro).

benoitdemaegdt commented 4 months ago

Nouveau rendu @ThibautChd

page d'accueil

dans la page des VL

benoitdemaegdt commented 4 months ago

À mon avis, il ne reste plus qu'à faire un "health check".

C'est à dire reprendre au moins 2 VL et refaire le calcul à la main pour vérifier que l'algo retourne bien ce qu'il faut.

ThibautChd commented 4 months ago

OK je veux bien m'en occuper @benoitdemaegdt ! Ci-dessus c'est les stats de la VL6 c'est ça ? Tu peux me donner un aperçu des chiffres pour la VL2 par exemple ?

benoitdemaegdt commented 4 months ago

VL6

VL2

VL12

ThibautChd commented 4 months ago

L'ensemble de mes vérifications sont concluantes. Je retombe exactement sur tes chiffres :-)

benoitdemaegdt commented 4 months ago

Dans ce cas, let's merge this one !

Encore bravo pour tout ce travail @Delapouite et @ThibautChd . C'est très stylé comme composant ! 👏 Rarement une PR sur cyclopolis aura été aussi commentée 🤣

benoitdemaegdt / voieslyonnaises

feat: add Typology component #329