feat(conservation-builder): Add text on chart

SKY30-504
Vizzuality · Oct 24, 2024 · 0962711 · 0962711
1 parent 1fb8181
commit 0962711
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 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
@@ -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
@@ -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
@@ -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",