From 0962711b92ad9e28cd2f951f0644f098154c648e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Thu, 24 Oct 2024 16:55:26 +0200
Subject: [PATCH] feat(conservation-builder): Add text on chart

SKY30-504
---
 .../stacked-horizontal-bar-chart/index.tsx    | 23 +++++++++++++------
 .../panels/modelling/widget/index.tsx         |  2 ++
 frontend/translations/en.json                 |  3 ++-
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/charts/stacked-horizontal-bar-chart/index.tsx b/frontend/src/components/charts/stacked-horizontal-bar-chart/index.tsx
index cc741fae..c969fbe6 100644
--- a/frontend/src/components/charts/stacked-horizontal-bar-chart/index.tsx
+++ b/frontend/src/components/charts/stacked-horizontal-bar-chart/index.tsx
@@ -11,6 +11,7 @@ type StackedHorizontalBarChartProps = {
   className: string;
   title?: string;
   info?: string;
+  customArea: number;
   totalProtectedArea: number;
   totalArea: number;
   highlightedPercentage: number;
@@ -28,6 +29,7 @@ const StackedHorizontalBarChart: FCWithMessages<StackedHorizontalBarChartProps>
   data,
   title,
   info,
+  customArea,
   totalProtectedArea,
   totalArea,
   highlightedPercentage,
@@ -43,17 +45,24 @@ const StackedHorizontalBarChart: FCWithMessages<StackedHorizontalBarChartProps>
         {formatPercentage(locale, highlightedPercentage, { displayPercentageSign: false })}
         <span className="pb-1.5 pl-1 text-xs">%</span>
       </div>
-      <div className="flex justify-between text-xs">
+      <div className="flex items-start justify-between text-xs">
         <span className="flex items-center">
           {title && title}
           {info && <TooltipButton text={info} />}
         </span>
-        <span className="text-right">
-          {t('marine-protected-area', {
-            protectedArea: formatKM(locale, totalProtectedArea),
-            totalArea: formatKM(locale, totalArea),
-          })}
-        </span>
+        <div>
+          <div className="text-right">
+            {t('marine-protected-area', {
+              protectedArea: formatKM(locale, totalProtectedArea),
+              totalArea: formatKM(locale, totalArea),
+            })}
+          </div>
+          <div className="text-right">
+            {t('new-added-area', {
+              area: formatKM(locale, customArea),
+            })}
+          </div>
+        </div>
       </div>
       <div className="relative my-2 flex h-3.5">
         <span className="absolute top-1/2 h-px w-full border-b border-dashed border-black"></span>
diff --git a/frontend/src/containers/map/sidebar/main-panel/panels/modelling/widget/index.tsx b/frontend/src/containers/map/sidebar/main-panel/panels/modelling/widget/index.tsx
index 008772d6..f64f7325 100644
--- a/frontend/src/containers/map/sidebar/main-panel/panels/modelling/widget/index.tsx
+++ b/frontend/src/containers/map/sidebar/main-panel/panels/modelling/widget/index.tsx
@@ -335,6 +335,7 @@ const ModellingWidget: FCWithMessages = () => {
               <StackedHorizontalBarChart
                 key={contribution?.location?.code}
                 title={locationName}
+                customArea={contribution?.totalCustomArea}
                 totalProtectedArea={contribution?.totalProtectedArea}
                 totalArea={contribution?.totalArea}
                 highlightedPercentage={contribution?.totalPercentage}
@@ -365,6 +366,7 @@ const ModellingWidget: FCWithMessages = () => {
           </div>
           <StackedHorizontalBarChart
             title={t('global')}
+            customArea={globalProtectionStatsData?.totalCustomAreas}
             totalProtectedArea={globalProtectionStatsData?.totalProtectedArea}
             totalArea={globalProtectionStatsData?.totalArea}
             highlightedPercentage={globalProtectionStatsData?.totalPercentage}
diff --git a/frontend/translations/en.json b/frontend/translations/en.json
index fb589055..aad5a3a9 100644
--- a/frontend/translations/en.json
+++ b/frontend/translations/en.json
@@ -361,7 +361,8 @@
     "chart-stacked-horizontal-bar": {
       "marine-protected-area": "{protectedArea} km² out of {totalArea} km²",
       "30%-target": "30% target",
-      "percentage": "{percentage}%"
+      "percentage": "{percentage}%",
+      "new-added-area": "{area} km² of new added area"
     },
     "tooltip-button": {
       "info": "Info",