Merge branch 'develop' into feat/tree-cover-gain-FLAG-1018

components/charts/components/pie-chart-legend/component.jsx

@@ -31,17 +31,20 @@ class PieChartLegend extends PureComponent {
       >
         <ul className={cx({ simple, sizeClass })}>
           {data.map((item, index) => {
+            const PLACEHOLDER = new RegExp(`\\bPLACEHOLDER\\b`, 'g');
+            const label = item.label.replace(PLACEHOLDER, `and`);
             const value = `${formatNumber({
               num: item[config.key],
               unit: item.unit ? item.unit : config.unit,
               spaceUnit: item.unit !== '%' && config.unit !== 'countsK',
             })}`;
+
             return (
               <li className="legend-item" key={index.toString()}>
                 <div className="legend-title">
                   <span style={{ backgroundColor: item.color }}>{}</span>
                   <p>
-                    {item.label}
+                    {label}
                     {sizeClass === 'x-small' && `- ${value}`}
                   </p>
                 </div>

components/charts/horizontal-bar-chart/custom-tick-component.jsx

@@ -22,19 +22,13 @@ const CustomTick = ({ x, y, index, yAxisDotFill, data, settings }) => {
       <text x="8" y="-16" textAnchor="start" fontSize="12px" fill="#555555">
         {extLink ? (
           <a href={path.href} target="_blank" rel="noopener noreferrer">
-            {region}
-            {' '}
-            -
-            {formatNumber({ num: total, unit: '%' })}
+            {region}: {formatNumber({ num: total, unit: '%' })}
             {index === 0 ? ' are plantations' : ''}
           </a>
         ) : (
           <Link {...path}>
             <a>
-              {region}
-              {' '}
-              -
-              {formatNumber({ num: total, unit: '%' })}
+              {region}: {formatNumber({ num: total, unit: '%' })}
               {index === 0 ? ' are plantations' : ''}
             </a>
           </Link>

components/map-menu/sections.js

@@ -107,7 +107,7 @@ export const datasetsSections = compact([
     subCategories: [
       {
         slug: 'deforestationAlerts',
-        title: 'Deforestation Alerts',
+        title: 'Disturbance Alerts',
       },
       {
         slug: 'fireAlerts',

components/widgets/climate/emissions-deforestation-drivers/selectors.js

@@ -162,6 +162,21 @@ export const parseConfig = createSelector(
         .reverse()
     );
 
+    const forestryIndex = tooltip.findIndex(
+      (element) => element.key === 'class_Forestry'
+    );
+    const agricultureIndex = tooltip.findIndex(
+      (element) => element.key === 'class_Shifting agriculture'
+    );
+
+    const rearrengedTooltips = [...tooltip];
+
+    delete rearrengedTooltips[forestryIndex];
+    delete rearrengedTooltips[agricultureIndex];
+
+    rearrengedTooltips.splice(2, 0, tooltip[forestryIndex]);
+    rearrengedTooltips.splice(3, 0, tooltip[agricultureIndex]);
+
     // Example on how to add columns & titles to the Chart Legend
     // See: https://gfw.atlassian.net/browse/FLAG-1145
     // const chartLegend = {
@@ -180,9 +195,11 @@ export const parseConfig = createSelector(
     //   ],
     // };
 
-    const insertIndex = findIndex(tooltip, { key: 'class_Urbanization' });
+    const insertIndex = findIndex(rearrengedTooltips, {
+      key: 'class_Urbanization',
+    });
     if (insertIndex > -1) {
-      tooltip.splice(insertIndex, 0, {
+      rearrengedTooltips.splice(insertIndex, 0, {
         key: 'break',
         label: 'Drivers of permanent deforestation:',
       });
@@ -199,7 +216,7 @@ export const parseConfig = createSelector(
       unitFormat: (value) =>
         formatNumber({ num: value, specialSpecifier: '.2s', spaceUnit: true }),
       unit: 'tCO2e',
-      tooltip,
+      tooltip: rearrengedTooltips,
       // chartLegend,
     };
   }

components/widgets/forest-change/tree-loss-plantations/selectors.js

@@ -54,7 +54,8 @@ export const parseData = createSelector(
             areaLoss: summedPlatationsLoss || 0,
             totalLoss: totalLossForYear.area || 0,
             outsideCo2Loss:
-              totalLossByYear[d.year][0].emissions - summedPlatationsEmissions,
+              totalLossByYear[d.year]?.[0]?.emissions -
+              summedPlatationsEmissions,
             co2Loss: summedPlatationsEmissions || 0,
           };
           return returnData;

components/widgets/land-cover/ranked-plantations/index.js

@@ -55,11 +55,15 @@ export default {
   },
   getData: (params) =>
     all([
-      getExtentGrouped(params),
+      getExtentGrouped({
+        ...params,
+        version: 'v20240815',
+      }),
       getAreaIntersectionGrouped({
         ...params,
         forestType: 'plantations',
         summary: true,
+        version: 'v20240815',
       }),
     ]).then(
       spread((extentGrouped, plantationsExtentResponse) => {
@@ -78,12 +82,17 @@ export default {
       })
     ),
   getDataURL: (params) => [
-    getExtentGrouped({ ...params, download: true }),
+    getExtentGrouped({
+      ...params,
+      download: true,
+      version: 'v20240815',
+    }),
     getAreaIntersectionGrouped({
       ...params,
       forestType: 'plantations',
       download: true,
       summary: true,
+      version: 'v20240815',
     }),
   ],
   getWidgetProps,

components/widgets/land-cover/ranked-plantations/selectors.js

@@ -52,11 +52,14 @@ export const parseData = createSelector(
       const totalArea = regionExtent && regionExtent.total_area;
       plantationKeys.forEach((key) => {
         const labelFromKey =
-          regionGroup && regionGroup.find((p) => p.plantations === key);
+          regionGroup &&
+          regionGroup.find(
+            (p) => p.plantations.toLowerCase() === key.toLowerCase()
+          );
         const pExtent = labelFromKey && labelFromKey.intersection_area;
         const pPercentage = (pExtent / totalRegionPlantations) * 100;
-        yKeys[key] = pPercentage || 0;
-        yKeys[`${key} label`] = key;
+        yKeys[key.toLowerCase()] = pPercentage || 0;
+        yKeys[`${key.toLowerCase()} label`] = key.toLowerCase();
       });
 
       return {
@@ -83,12 +86,12 @@ export const parseConfig = createSelector(
       colors: colorsByType,
       unit: '%',
       xKey: 'region',
-      yKeys: dataKeys,
+      yKeys: dataKeys.map((item) => item.toLowerCase()),
       yAxisDotFill: '#d4d4d4',
       tooltip: dataKeys.map((item) => ({
-        key: item,
+        key: item.toLowerCase(),
         label: item,
-        color: colorsByType[item],
+        color: colorsByType[item.toLowerCase()],
         unitFormat: (value) => formatNumber({ num: value, unit: '%' }),
       })),
     };

components/widgets/land-cover/tree-cover-plantations/index.js

@@ -43,12 +43,8 @@ export default {
     extentYear: 2010,
   },
   sentences: {
-    initialSpecies:
-      'In {location}, {firstSpecies} and {secondSpecies} represent the largest plantation area by {type}, spanning {extent} and {percent} of land area.',
-    singleSpecies:
-      'In {location}, {firstSpecies} represent the largest plantation area by {type}, spanning {extent} and {percent} of land area.',
-    initialTypes:
-      'In {location}, the largest plantation area by type is {topType}, spanning {extent} and {percent} of land area.',
+    initial:
+      'In {location}, the largest type of plantation area is {topType}, spanning {extent} and {percent} of land area.',
   },
   whitelists: {
     indicators: ['plantations'],

components/widgets/land-cover/tree-cover-plantations/selectors.js

@@ -3,11 +3,9 @@ import isEmpty from 'lodash/isEmpty';
 import sumBy from 'lodash/sumBy';
 import sortBy from 'lodash/sortBy';
 import { formatNumber } from 'utils/format';
-import endsWith from 'lodash/endsWith';
 
 // get list data
 const getData = (state) => state.data;
-const getSettings = (state) => state.settings;
 const getLocatonName = (state) => state.locationLabel;
 const getColors = (state) => state.colors;
 const getSentences = (state) => state.sentences;
@@ -29,7 +27,7 @@ export const parseData = createSelector(
         .map((d) => ({
           label: d.plantations,
           value: d.intersection_area,
-          color: allColors[d.plantations],
+          color: allColors[d.plantations.toLowerCase()],
           percentage: (d.intersection_area / totalPlantations) * 100,
         })),
       'value'
@@ -38,30 +36,21 @@ export const parseData = createSelector(
 );
 
 export const parseSentence = createSelector(
-  [getData, parseData, getSettings, getLocatonName, getSentences],
-  (rawData, data, settings, locationName, sentences) => {
+  [getData, parseData, getLocatonName, getSentences],
+  (rawData, data, locationName, sentences) => {
     if (isEmpty(data) || !sentences) return null;
-    const { initialSpecies, singleSpecies, initialTypes } = sentences;
-    const top =
-      settings.type === 'bound2' ? data.slice(0, 2) : data.slice(0, 1);
+
+    const { initial } = sentences;
+    const top = data.slice(0, 1);
     const areaPerc = (100 * (sumBy(top, 'value') || 0)) / rawData.totalArea;
     const topExtent = sumBy(top, 'value') || 0;
-    const otherExtent = sumBy(data.slice(2), 'value') || 0;
     const params = {
       location: locationName,
-      firstSpecies: top[0].label.toLowerCase(),
-      secondSpecies: top.length > 1 && top[1].label.toLowerCase(),
-      type: settings.type === 'bound2' ? 'species' : 'type',
       extent: formatNumber({ num: topExtent, unit: 'ha', spaceUnit: true }),
-      other: formatNumber({ num: otherExtent, unit: 'ha', spaceUnit: true }),
-      count: data.length - top.length,
-      topType: `${top[0].label}${endsWith(top[0].label, 's') ? '' : 's'}`,
+      topType: top[0].label.toLowerCase(),
       percent: formatNumber({ num: areaPerc, unit: '%' }),
     };
-    const sentence =
-      settings.type === 'bound1'
-        ? initialTypes
-        : `${top.length > 1 ? initialSpecies : singleSpecies}`;
+    const sentence = initial;
 
     return {
       sentence,

components/widgets/land-cover/tree-cover/index.js

@@ -24,9 +24,8 @@ import getWidgetProps from './selectors';
 export default {
   widget: 'treeCover',
   title: {
-    default: 'Tree Cover by type in {location}',
-    global: 'Global tree cover by type',
-    withPlantations: 'Forest cover by type in {location}',
+    default: 'Tree Cover in {location}',
+    global: 'Global tree cover',
   },
   alerts: [
     {
@@ -47,29 +46,29 @@ export default {
     default: {
       global: {
         treeCover:
-          'As of {year}, {percentage} of {location} land cover was {threshold} tree cover.',
+          'As of {year}, {percentage} of {location} land cover was <strong>tree cover</strong> with {threshold} canopy density.',
         tropicalTreeCover:
-          'As of {year}, {percentage} of {location} land cover was {threshold} tropical tree cover.',
+          'As of {year}, {percentage} of {location} land cover was <strong>tropical tree cover</strong> with {threshold} canopy density.',
       },
       region: {
         treeCover:
-          'As of {year}, {percentage} of {location} land cover was {threshold} tree cover.',
+          'As of {year}, {percentage} of {location} land cover was <strong>tree cover</strong> with {threshold} canopy density.',
         tropicalTreeCover:
-          'As of {year}, {percentage} of {location} land cover was {threshold} tropical tree cover.',
+          'As of {year}, {percentage} of {location} land cover was <strong>tropical tree cover</strong> with {threshold} canopy density.',
       },
     },
     withIndicator: {
       global: {
         treeCover:
-          'As of {year}, {percentage} of {location} land cover in {indicator} was {threshold} tree cover.',
+          'As of {year}, {percentage} of {location} land cover in {indicator} was <strong>tree cover</strong> with {threshold} canopy density.',
         tropicalTreeCover:
-          'As of {year}, {percentage} of {location} land cover in {indicator} was {threshold} tropical tree cover.',
+          'As of {year}, {percentage} of {location} land cover in {indicator} was <strong>tropical tree cover</strong> with {threshold} canopy density.',
       },
       region: {
         treeCover:
-          'As of {year}, {percentage} of {indicator} in {location} was {threshold} tree cover.',
+          'As of {year}, {percentage} of {indicator} in {location} was <strong>tree cover</strong> with {threshold} canopy density.',
         tropicalTreeCover:
-          'As of {year}, {percentage} of {indicator} in {location} was {threshold} tropical tree cover.',
+          'As of {year}, {percentage} of {indicator} in {location} was <strong>tropical tree cover</strong> with {threshold} canopy density.',
       },
     },
   },
@@ -107,9 +106,15 @@ export default {
   ],
   sortOrder: {
     summary: 4,
-    landCover: 1,
+    landCover: 1.5,
   },
-  refetchKeys: ['threshold', 'decile', 'extentYear', 'landCategory'],
+  refetchKeys: [
+    'threshold',
+    'decile',
+    'extentYear',
+    'landCategory',
+    'forestType',
+  ],
   pendingKeys: ['threshold', 'decile', 'extentYear'],
   settings: {
     threshold: 30,
@@ -140,6 +145,14 @@ export default {
         clearable: true,
         border: true,
       },
+      {
+        key: 'forestType',
+        whitelist: ['plantations'],
+        label: 'Forest Type',
+        type: 'select',
+        placeholder: 'All tree cover',
+        clearable: true,
+      },
       {
         key: isTropicalTreeCover ? 'decile' : 'threshold',
         label: 'Tree cover',