Merge pull request #153 from betagouv/1493-ajouter-un-tunnel-de-conve…

…rsion-pour-simulation-recap-a-partir-de-la-db 1493 ajouter un tunnel de conversion pour simulation recap a partir de la db
betagouv · Nov 8, 2023 · bc255b2 · bc255b2
2 parents 3a13a52 + 5282512
commit bc255b2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/pages/funnel.js b/pages/funnel.js
@@ -24,23 +24,30 @@ function Funnel() {
     return <p>Chargement...</p>
   }
 
-  const { visitToRecap, surveyData, accompanimentData } =
+  const { visitToResults, surveyData, accompanimentData, followupData } =
     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 && (
+          <h2>Visites - Page Résultats</h2>
+          {visitToResults && (
             <DefaultFunnelChart
-              data={visitToRecap}
+              data={visitToResults}
               dataTestid="funnel-visits"
             />
           )}
         </div>
 
+        <div className="funnel-chart">
+          <h2>Nombre d'emails récapitulatifs</h2>
+          {followupData && (
+            <DefaultFunnelChart data={followupData} dataTestid="funnel-email" />
+          )}
+        </div>
+
         <div className="funnel-chart">
           <h2>Sondages Envoyés - Répondus</h2>
           {surveyData && <DefaultFunnelChart data={surveyData} />}

diff --git a/public/static/style.css b/public/static/style.css
@@ -416,7 +416,8 @@ table .sortable-asc:after {
 
 .funnel-charts .funnel-chart {
   flex: 1;
-  max-width: calc(100% / 3);
+  max-width: 50%;
+  flex-basis: 50%;
 }
 
 @media screen and (max-width: 1024px) {

diff --git a/services/funnelService.js b/services/funnelService.js
@@ -4,11 +4,15 @@ import configuration from "../next.config.js"
 
 function formatFunnelData(data) {
   return {
-    visitToRecap: [
+    visitToResults: [
       { label: "1ère Page", total: data.firstPageVisits },
       { label: "2ème Page", total: data.secondPageVisits },
       { label: "Page de Résultats", total: data.resultsPageVisits },
     ],
+    followupData: [
+      { label: "avec recontact", total: data.followupWithOptinCount },
+      { label: "sans recontact", total: data.followupWithoutOptinCount },
+    ],
     surveyData: [
       {
         label: "Email de sondage envoyés",