Merge pull request #313 from Vizzuality/SKY30-459-fe-modify-target-wi…

…dget-to-include-country-level-target-details Update the target on the conservation widget
Vizzuality · Oct 9, 2024 · 7d5b2b1 · 7d5b2b1
2 parents 5d99474 + 3ff92dd
commit 7d5b2b1
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 13 deletions.
diff --git a/cms/config/sync/admin-role.strapi-super-admin.json b/cms/config/sync/admin-role.strapi-super-admin.json
@@ -1071,7 +1071,9 @@
           "total_terrestrial_area",
           "terrestrial_bounds",
           "name_es",
-          "name_fr"
+          "name_fr",
+          "marine_target",
+          "marine_target_year"
         ]
       },
       "conditions": [],
@@ -1102,7 +1104,9 @@
           "total_terrestrial_area",
           "terrestrial_bounds",
           "name_es",
-          "name_fr"
+          "name_fr",
+          "marine_target",
+          "marine_target_year"
         ]
       },
       "conditions": [],
@@ -1126,7 +1130,9 @@
           "total_terrestrial_area",
           "terrestrial_bounds",
           "name_es",
-          "name_fr"
+          "name_fr",
+          "marine_target",
+          "marine_target_year"
         ]
       },
       "conditions": [],
@@ -2176,4 +2182,4 @@
       "actionParameters": {}
     }
   ]
-}
+}
diff --git a/...ore-store.plugin_content_manager_configuration_content_types##api##location.location.json b/...ore-store.plugin_content_manager_configuration_content_types##api##location.location.json
@@ -221,6 +221,34 @@
           "sortable": true
         }
       },
+      "marine_target": {
+        "edit": {
+          "label": "marine_target",
+          "description": "",
+          "placeholder": "",
+          "visible": true,
+          "editable": true
+        },
+        "list": {
+          "label": "marine_target",
+          "searchable": true,
+          "sortable": true
+        }
+      },
+      "marine_target_year": {
+        "edit": {
+          "label": "marine_target_year",
+          "description": "",
+          "placeholder": "",
+          "visible": true,
+          "editable": true
+        },
+        "list": {
+          "label": "marine_target_year",
+          "searchable": true,
+          "sortable": true
+        }
+      },
       "createdAt": {
         "edit": {
           "label": "createdAt",
@@ -355,6 +383,16 @@
             "name": "total_terrestrial_area",
             "size": 4
           }
+        ],
+        [
+          {
+            "name": "marine_target",
+            "size": 4
+          },
+          {
+            "name": "marine_target_year",
+            "size": 4
+          }
         ]
       ],
       "list": [

diff --git a/cms/src/api/location/content-types/location/schema.json b/cms/src/api/location/content-types/location/schema.json
@@ -93,6 +93,14 @@
     "name_fr": {
       "type": "string",
       "required": true
+    },
+    "marine_target": {
+      "type": "integer",
+      "min": 0,
+      "max": 100
+    },
+    "marine_target_year": {
+      "type": "integer"
     }
   }
 }
diff --git a/cms/types/generated/contentTypes.d.ts b/cms/types/generated/contentTypes.d.ts
@@ -1587,6 +1587,12 @@ export interface ApiLocationLocation extends Schema.CollectionType {
     terrestrial_bounds: Attribute.JSON;
     name_es: Attribute.String & Attribute.Required;
     name_fr: Attribute.String & Attribute.Required;
+    marine_target: Attribute.Integer &
+      Attribute.SetMinMax<{
+        min: 0;
+        max: 100;
+      }>;
+    marine_target_year: Attribute.Integer;
     createdAt: Attribute.DateTime;
     updatedAt: Attribute.DateTime;
     createdBy: Attribute.Relation<

diff --git a/frontend/src/components/charts/conservation-chart/index.tsx b/frontend/src/components/charts/conservation-chart/index.tsx
@@ -28,6 +28,9 @@ import ChartTooltip from './tooltip';
 type ConservationChartProps = {
   className?: string;
   displayTarget?: boolean;
+  target?: number;
+  targetYear?: number;
+  tooltipSlug: string;
   data: {
     year?: number;
     percentage: number;
@@ -44,6 +47,9 @@ const MAX_NUM_YEARS = 20;
 const ConservationChart: FCWithMessages<ConservationChartProps> = ({
   className,
   displayTarget = true,
+  target = 30,
+  targetYear = 2030,
+  tooltipSlug,
   data,
 }) => {
   const t = useTranslations('components.chart-conservation');
@@ -134,7 +140,7 @@ const ConservationChart: FCWithMessages<ConservationChartProps> = ({
     {
       locale,
       filters: {
-        slug: '30x30-target',
+        slug: tooltipSlug,
       },
     },
     {
@@ -182,23 +188,27 @@ const ConservationChart: FCWithMessages<ConservationChartProps> = ({
           {displayTarget && (
             <ReferenceLine
               xAxisId={1}
-              y={30}
+              y={target}
               label={(props) => {
                 const { viewBox } = props;
                 return (
                   <g>
                     <text {...viewBox} x={viewBox.x + 5} y={viewBox.y - 2}>
-                      {t('30x30-target')}
+                      {t.rich('percentage-target', { target })}
                     </text>
                     <foreignObject
                       {...viewBox}
-                      x={viewBox.x + t('30x30-target').length * 7.5}
+                      x={
+                        viewBox.x + (t.rich('percentage-target', { target }) as string).length * 7.5
+                      }
                       y={viewBox.y - 17}
                       width="160"
                       height="160"
                     >
                       <TooltipButton
-                        text={dataInfo?.attributes.content}
+                        text={dataInfo?.attributes.content
+                          .replace('{target}', `${target}`)
+                          .replace('{target_year}', `${targetYear}`)}
                         className="mt-1 hover:bg-transparent"
                       />
                     </foreignObject>

diff --git a/...rc/containers/map/sidebar/main-panel/panels/details/widgets/marine-conservation/index.tsx b/...rc/containers/map/sidebar/main-panel/panels/details/widgets/marine-conservation/index.tsx
@@ -36,7 +36,7 @@ const MarineConservationWidget: FCWithMessages<MarineConservationWidgetProps> =
       // @ts-ignore
       populate: {
         location: {
-          fields: ['code', 'total_marine_area'],
+          fields: ['code', 'total_marine_area', 'marine_target', 'marine_target_year'],
         },
         environment: {
           fields: ['slug'],
@@ -126,6 +126,8 @@ const MarineConservationWidget: FCWithMessages<MarineConservationWidgetProps> =
       protectedPercentage: percentageFormatted,
       protectedArea: protectedAreaFormatted,
       totalArea: totalAreaFormatted,
+      target: location.marine_target,
+      targetYear: location.marine_target_year,
     };
   }, [locale, location, aggregatedData]);
 
@@ -182,8 +184,11 @@ const MarineConservationWidget: FCWithMessages<MarineConservationWidgetProps> =
       )}
       <ConservationChart
         className="-ml-8 aspect-[16/10]"
-        displayTarget={location?.code === 'GLOB'}
+        tooltipSlug="30x30-marine-target"
         data={chartData}
+        displayTarget={!!stats?.target}
+        target={stats?.target ?? undefined}
+        targetYear={stats?.targetYear ?? undefined}
       />
       {tab !== 'marine' && (
         <Button

diff --git a/...ntainers/map/sidebar/main-panel/panels/details/widgets/terrestrial-conservation/index.tsx b/...ntainers/map/sidebar/main-panel/panels/details/widgets/terrestrial-conservation/index.tsx
@@ -184,6 +184,7 @@ const TerrestrialConservationWidget: FCWithMessages<TerrestrialConservationWidge
       )}
       <ConservationChart
         className="-ml-8 aspect-[16/10]"
+        tooltipSlug="30x30-terrestrial-target"
         displayTarget={location?.code === 'GLOB'}
         data={chartData}
       />

diff --git a/frontend/src/types/generated/strapi.schemas.ts b/frontend/src/types/generated/strapi.schemas.ts
@@ -1866,6 +1866,8 @@ export type ProtectionCoverageStatLocationDataAttributes = {
   terrestrial_bounds?: unknown;
   name_es?: string;
   name_fr?: string;
+  marine_target?: number;
+  marine_target_year?: number;
   createdAt?: string;
   updatedAt?: string;
   createdBy?: ProtectionCoverageStatLocationDataAttributesCreatedBy;
@@ -2820,6 +2822,8 @@ export type PaChildrenDataItemAttributesLocationDataAttributes = {
   terrestrial_bounds?: unknown;
   name_es?: string;
   name_fr?: string;
+  marine_target?: number;
+  marine_target_year?: number;
   createdAt?: string;
   updatedAt?: string;
   createdBy?: PaChildrenDataItemAttributesLocationDataAttributesCreatedBy;
@@ -3643,6 +3647,8 @@ export type MpaaProtectionLevelStatLocationDataAttributes = {
   terrestrial_bounds?: unknown;
   name_es?: string;
   name_fr?: string;
+  marine_target?: number;
+  marine_target_year?: number;
   createdAt?: string;
   updatedAt?: string;
   createdBy?: MpaaProtectionLevelStatLocationDataAttributesCreatedBy;
@@ -5139,6 +5145,8 @@ export interface Location {
   terrestrial_bounds?: unknown;
   name_es: string;
   name_fr: string;
+  marine_target?: number;
+  marine_target_year?: number;
   createdAt?: string;
   updatedAt?: string;
   createdBy?: LocationCreatedBy;
@@ -5236,6 +5244,8 @@ export type LocationGroupsDataItemAttributes = {
   terrestrial_bounds?: unknown;
   name_es?: string;
   name_fr?: string;
+  marine_target?: number;
+  marine_target_year?: number;
   createdAt?: string;
   updatedAt?: string;
   createdBy?: LocationGroupsDataItemAttributesCreatedBy;
@@ -6582,6 +6592,8 @@ export type HabitatStatLocationDataAttributes = {
   terrestrial_bounds?: unknown;
   name_es?: string;
   name_fr?: string;
+  marine_target?: number;
+  marine_target_year?: number;
   createdAt?: string;
   updatedAt?: string;
   createdBy?: HabitatStatLocationDataAttributesCreatedBy;
@@ -7589,6 +7601,8 @@ export type FishingProtectionLevelStatLocationDataAttributes = {
   terrestrial_bounds?: unknown;
   name_es?: string;
   name_fr?: string;
+  marine_target?: number;
+  marine_target_year?: number;
   createdAt?: string;
   updatedAt?: string;
   createdBy?: FishingProtectionLevelStatLocationDataAttributesCreatedBy;

diff --git a/frontend/translations/en.json b/frontend/translations/en.json
@@ -339,12 +339,12 @@
       "not-visible-due-to-error": "The current widget is not visible due to an error"
     },
     "chart-conservation": {
-      "30x30-target": "30x30 Target",
       "year-value": "Year: {value}",
       "coverage-value": "Coverage: {percentage}",
       "historical-trend": "Historical Trend",
       "future-projection": "Future Projection",
-      "historical": "Historical"
+      "historical": "Historical",
+      "percentage-target": "{target}% target"
     },
     "chart-horizontal-bar": {
       "marine-protected-percentage": "{percentage}<b>%</b>",