From 373c315dc1de222d50a1d70020d265dbd05cac4b Mon Sep 17 00:00:00 2001
From: baptou12 <baptou12@gmail.com>
Date: Mon, 27 Nov 2023 13:59:31 +0100
Subject: [PATCH] feat: add legend to followup chart

---
 components/defaultFunnelChart.js | 14 +++++++++++++-
 pages/funnel.js                  |  6 +++++-
 services/funnelService.js        |  8 ++++----
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/components/defaultFunnelChart.js b/components/defaultFunnelChart.js
index f2404e5..bfc4bc0 100644
--- a/components/defaultFunnelChart.js
+++ b/components/defaultFunnelChart.js
@@ -14,7 +14,7 @@ function findKeysFromData(data) {
   }, [])
 }
 
-export const DefaultFunnelChart = ({ data, dataTestid }) => {
+export const DefaultFunnelChart = ({ data, dataTestid, showLegend }) => {
   const keys = findKeysFromData(data)
 
   return (
@@ -23,6 +23,18 @@ export const DefaultFunnelChart = ({ data, dataTestid }) => {
         data={data}
         indexBy={xAxisKey}
         keys={keys}
+        legends={
+          showLegend
+            ? [
+                {
+                  dataFrom: "keys",
+                  anchor: "top-left",
+                  direction: "column",
+                  itemHeight: 20,
+                },
+              ]
+            : []
+        }
         groupMode="grouped"
         margin={{ top: 15, right: 10, bottom: 150, left: 60 }}
         padding={0.1}
diff --git a/pages/funnel.js b/pages/funnel.js
index 087b966..0906ce8 100644
--- a/pages/funnel.js
+++ b/pages/funnel.js
@@ -44,7 +44,11 @@ function Funnel() {
         <div className="funnel-chart">
           <h2>Nombre d'emails et/ou sms récapitulatifs</h2>
           {followupData && (
-            <DefaultFunnelChart data={followupData} dataTestid="funnel-email" />
+            <DefaultFunnelChart
+              data={followupData}
+              dataTestid="funnel-email"
+              showLegend
+            />
           )}
         </div>
 
diff --git a/services/funnelService.js b/services/funnelService.js
index d30779f..658099a 100644
--- a/services/funnelService.js
+++ b/services/funnelService.js
@@ -12,14 +12,14 @@ function formatFunnelData(data) {
     followupData: [
       {
         label: "avec recontact",
-        Sms: data.followupWithOptinCountSms,
-        Email: data.followupWithOptinCountEmail,
+        "Sms uniq.": data.followupWithOptinCountSms,
+        "Email uniq.": data.followupWithOptinCountEmail,
         "Email et Sms": data.followupWithOptinCountEmailAndSms,
       },
       {
         label: "sans recontact",
-        Sms: data.followupWithoutOptinCountSms,
-        Email: data.followupWithoutOptinCountEmail,
+        "Sms uniq.": data.followupWithoutOptinCountSms,
+        "Email uniq.": data.followupWithoutOptinCountEmail,
         "Email et Sms": data.followupWithoutOptinCountEmailAndSms,
       },
     ],