1492 utiliser exclusivement des donnees matomo

.nvmrc

@@ -0,0 +1 @@
+v20.9.0

cypress/e2e/funnel.cy.js

@@ -19,6 +19,8 @@ describe("Funnel Page", () => {
 
   it("displays funnel results chart", () => {
     cy.get(".responsive-chart").should("be.visible")
-    cy.checkGraph("funnel-visits", "Visites", "125821")
+    cy.checkGraph("funnel-visits", "1ère Page", "127857")
+    cy.checkGraph("funnel-visits", "2ème Page", "102925")
+    cy.checkGraph("funnel-visits", "Page de Résultats", "76436")
   })
 })

cypress/fixtures/aidesJeunesStatistics.json

@@ -108,8 +108,9 @@
   },
   "funnel": {
     "2023-06": {
-      "visits": 125821,
-      "nbUniqVisitors": 97525,
+      "firstPageVisits": 127857,
+      "secondPageVisits": 102925,
+      "resultsPageVisits": 76436,
       "simulationCount": 25,
       "followupWithOptinCount": 16,
       "followupWithoutOptinCount": 0,

pages/funnel.js

@@ -1,73 +1,58 @@
-import { Component } from "react"
+import React, { useState, useEffect } from "react"
 
 import { fetchFunnelData } from "../services/funnelService.js"
 import { DefaultFunnelChart } from "../components/defaultFunnelChart.js"
 
-class Funnel extends Component {
-  state = {
-    chartsData: null,
-    loading: true,
-    selectedMonth: null,
-  }
-
-  async componentDidMount() {
-    await this.fetchData()
-  }
-
-  async fetchData() {
-    const { availableMonths, chartsData } = await fetchFunnelData()
-
-    const selectedMonth = availableMonths[0]
-
-    this.setState({
-      chartsData,
-      selectedMonth,
-      loading: false,
-    })
-  }
-
-  render() {
-    const { loading, selectedMonth, chartsData } = this.state
-
-    if (loading) {
-      return <p>Chargement...</p>
+function Funnel() {
+  const [chartsData, setChartsData] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [selectedMonth, setSelectedMonth] = useState(null)
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const { availableMonths, chartsData } = await fetchFunnelData()
+      const selectedMonth = availableMonths[0]
+      setChartsData(chartsData)
+      setSelectedMonth(selectedMonth)
+      setLoading(false)
     }
 
-    const { visitToRecap, surveyData, accompanimentData } =
-      chartsData[selectedMonth]
-
-    return (
-      <>
-        <h1 data-testid="title">Metriques de parcours {selectedMonth}</h1>
+    fetchData()
+  }, [])
 
-        <>
-          <div className="funnel-charts">
-            <div className="funnel-chart">
-              <h2>Visites - Emails Récapitulatifs</h2>
-              {visitToRecap && (
-                <DefaultFunnelChart
-                  data={visitToRecap}
-                  dataTestid="funnel-visits"
-                />
-              )}
-            </div>
-
-            <div className="funnel-chart">
-              <h2>Sondages Envoyés - Répondus</h2>
-              {surveyData && <DefaultFunnelChart data={surveyData} />}
-            </div>
-
-            <div className="funnel-chart">
-              <h2>Accompagnement</h2>
-              {accompanimentData && (
-                <DefaultFunnelChart data={accompanimentData} />
-              )}
-            </div>
-          </div>
-        </>
-      </>
-    )
+  if (loading) {
+    return <p>Chargement...</p>
   }
+
+  const { visitToRecap, surveyData, accompanimentData } =
+    chartsData[selectedMonth]
+
+  return (
+    <>
+      <h1 data-testid="title">Metriques de parcours {selectedMonth}</h1>
+      <div className="funnel-charts">
+        <div className="funnel-chart">
+          <h2>Visites - Emails Récapitulatifs</h2>
+          {visitToRecap && (
+            <DefaultFunnelChart
+              data={visitToRecap}
+              dataTestid="funnel-visits"
+            />
+          )}
+        </div>
+
+        <div className="funnel-chart">
+          <h2>Sondages Envoyés - Répondus</h2>
+          {surveyData && <DefaultFunnelChart data={surveyData} />}
+        </div>
+
+        <div className="funnel-chart">
+          <h2>Accompagnement</h2>
+          {accompanimentData && <DefaultFunnelChart data={accompanimentData} />}
+        </div>
+      </div>
+    </>
+  )
 }
 
 export default Funnel

services/funnelService.js

@@ -5,14 +5,9 @@ import configuration from "../next.config.js"
 function formatFunnelData(data) {
   return {
     visitToRecap: [
-      { label: "Visites", total: data.visits },
-      { label: "Visites Uniques", total: data.nbUniqVisitors },
-      { label: "Simulations terminées", total: data.simulationCount },
-      {
-        label: "Emails de recap envoyés",
-        "Avec recontact": data.followupWithOptinCount,
-        "Sans recontact": data.followupWithoutOptinCount,
-      },
+      { label: "1ère Page", total: data.firstPageVisits },
+      { label: "2ème Page", total: data.secondPageVisits },
+      { label: "Page de Résultats", total: data.resultsPageVisits },
     ],
     surveyData: [
       {