1355 tunnel de conversion de bout en bout juin 2023

[baptou12]

Commencement de la tâche, le front est quasi fait, il manque d'aller chercher la vrai donnée. A priori je vais mettre ça dans aides-jeunes car la connexion à la db pour certaines métriques se trouve là bas.

Preneur de retours UI/UX

Edit: en desktop les chart sont désormais aligné horizontalement :

Warning partiellement obsolète car les nouvelles stats ont été mergé sur le master d'aides-jeunes
⚠️ Pour tester en full local c'est pas évident, mais ça nous montre des lacunes sur l'environnement de dev, il faut :

• avoir la bonne branche pour avoir les stats du funnel (normal) : 1355 tunnel de conversion de bout en bout juin 2023 aides-jeunes#3868
• lancer npm run stats
• modifier (pour l'instant) le fichier backend/dev.ts afin de servir les fichiers statics pour tout les domains :

  app.use(cors());
  app.use(express.static(path.join(__dirname, "../dist")))

(importer cors et path en plus)

• Changer l'url aidesJeunesStatisticsURL dans le fichier next.config.js de mes-aides-analytics

[Shamzic]

Pour tester, j'ai remplacé le fetch ici par un objet en dur car actuellement l'objet renvoyé par https://mes-aides.1jeune1solution.beta.gouv.fr/documents/stats.json n'a pas encore la clef funnel. Tu as testé avec un lien en pré-prod ou objet hébergé ailleurs j'imagine ?

[Shamzic]

On peut se passer de constructeur ici

Suggested change

	constructor(props) {
	super(props)
	this.state = {
	chartsData: null,
	loading: true,
	selectedMonth: null,
	}
	}
	state = {
	chartsData: null,
	loading: true,
	selectedMonth: null,
	}

[Shamzic]

Utilisation de déstructuration possible + coquille "Métriques"

Suggested change

	if (this.state.loading) {
	return <p>Chargement...</p>
	}
	const currentMonthData = this.state.chartsData[this.state.selectedMonth]
	return (
	<>
	<h1 data-testid="title">
	Metriques de parcours {this.state.selectedMonth}
	const { loading, selectedMonth, chartsData } = this.state
	if (loading) {
	return <p>Chargement...</p>
	}
	const currentMonthData = chartsData[selectedMonth]
	return (
	<>
	<h1 data-testid="title">
	Métriques de parcours {selectedMonth}

[Cugniere]

J'aurais tendance à mettre tickRotation à -45 pour que ça soit cohérent avec les autres pages en augmentant la propriété bottom de margin à 150 pour pas que le texte soit coupé :

[Cugniere]

J'ai un bug un peu mystique avec l'affichage de la page du tunnel de conversion qui est dû je pense à la lib qui gère les graphes et leur redimensionnement :

• aller sur la page du tunnel
• redimensionner la page jusqu'au passage en colonne des graphiques (1024px de large)
• re-redimensionner la page à sa largeur d'origine
• les graphes ont gardé leur largeur de 100% et débordent maintenant de la page

Je n'ai plus le bug avec le code suivant :

.funnel-charts {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.funnel-charts .funnel-chart {
  flex: 1;
  max-width: calc(100% / 3);
}

.funnel-charts .funnel-chart h2 {
  min-height: 4rem;
}

@media screen and (max-width: 1024px) {
  .funnel-charts {
    flex-direction: column;
  }
  .funnel-charts .funnel-chart {
    max-width: 100%;
  }
}

• flex-wrap permet de gérer le retour à la ligne des graphes
• max-width permet de faire que les graphes font toujours leur taille maximale autorisée (en plus du flex: 1).

[baptou12]

Je check

[baptou12]

Ok même comportement, je pense que la lib souhaite qu'on explicite les largeur un peu plus pour gérer le redimensionnement. J'ai repris ta solution et j'ai effectivement plus le soucis ! Merci !

[Cugniere]

Ok pour moi, rien à redire de plus

Simon, j'ai fait tes retours, je dismiss pour cause de vacances :-)