feat(fao-cover): Update FAO cover widget (FLAG-924)

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

@@ -11,7 +11,7 @@ export default {
   widget: 'faoCover',
   title: {
     initial: 'FAO forest cover in {location}',
-    global: 'Global FAO forest cover'
+    global: 'Global FAO forest cover',
   },
   chartType: 'pieChart',
   categories: ['land-cover'],
@@ -21,47 +21,66 @@ export default {
   dataType: 'fao',
   metaKey: 'widget_forest_cover_fao',
   sortOrder: {
-    landCover: 5
+    landCover: 5,
   },
   settings: {
-    unit: 'ha'
+    unit: 'ha',
+    faoYear: 2020,
   },
+  refetchKeys: ['faoYear'],
   sentences: {
     globalInitial:
-      'FAO data from 2015 shows that there are {extent} of forest {location}, with primary forest occupying {primaryPercent} of the world.',
+      'According to the FAO, in {year}, {percent} ({amountInHectares}) of the globe was covered by forest. Of this, {primaryPercent}, was primary forest.',
+    // globalInitial:
+    //  'FAO data from 2015 shows that there are {extent} of forest {location}, with primary forest occupying {primaryPercent} of the world.',
     globalNoPrimary:
       'FAO data from 2015 shows that there are {extent} of forest {location}, which occupies {primaryPercent} of the world.',
     initial:
-      'FAO data from 2015 shows that {location} contains {extent} of forest, with primary forest occupying {primaryPercent} of the country.',
+      'According to the FAO, in {year}, {percent} ({amountInHectares}) of {country} was covered by forest. Of this, {primaryPercent}, was primary forest.',
+    // initial:
+    //  'FAO data from 2015 shows that {location} contains {extent} of forest, with primary forest occupying {primaryPercent} of the country.',
     noPrimary:
-      'FAO data from 2015 shows that {location} contains {extent} of forest, which occupies {primaryPercent} of the country.'
+      'FAO data from 2015 shows that {location} contains {extent} of forest, which occupies {primaryPercent} of the country.',
   },
-  getData: params =>
-    all([getFAOExtent({ ...params }), getRanking({ ...params })]).then(
+  getSettingsConfig: () => {
+    return [
+      {
+        key: 'faoYear',
+        label: 'Period',
+        type: 'select',
+        clearable: false,
+        border: true,
+      },
+    ];
+  },
+  getData: (params) => {
+    return all([getFAOExtent({ ...params }), getRanking({ ...params })]).then(
       spread((getFAOResponse, getRankingResponse) => {
         let data = {};
         const fao = getFAOResponse.data.rows;
         const ranking = getRankingResponse.data.rows;
+
         if (fao.length && ranking.length) {
-          const faoTotal = fao.map(f => ({
-            ...f,
-            area_ha: parseFloat(f.area_ha.replace(',', '')) * 1000
-          }));
-          let faoData = faoTotal[0];
+          let faoData = fao[0];
+
           if (fao.length > 1) {
             faoData = {};
-            Object.keys(omit(faoTotal[0], ['iso', 'name'])).forEach(k => {
-              faoData[k] = sumBy(faoTotal, k) || 0;
+            Object.keys(omit(fao[0], ['iso', 'country'])).forEach((k) => {
+              faoData[k] = sumBy(fao, k) || 0;
             });
           }
+
           data = {
             ...faoData,
-            rank: ranking[0].rank || 0
+            rank: ranking[0].rank || 0,
           };
         }
         return data;
       })
-    ),
-  getDataURL: ({ params }) => [getFAOExtent({ ...params, download: true })],
-  getWidgetProps
+    );
+  },
+  getDataURL: async (params) => [
+    await getFAOExtent({ ...params, download: true }),
+  ],
+  getWidgetProps,
 };

components/widgets/land-cover/fao-cover/selectors.js

@@ -8,6 +8,7 @@ const getLocationName = (state) => state.locationLabel;
 const getColors = (state) => state.colors;
 const getSentences = (state) => state.sentences;
 const getTitle = (state) => state.title;
+const getSettings = (state) => state.settings;
 
 // get lists selected
 export const parseData = createSelector(
@@ -60,19 +61,29 @@ export const parseData = createSelector(
 );
 
 export const parseSentence = createSelector(
-  [getData, getLocationName, getSentences],
-  (data, locationName, sentences) => {
+  [getData, getLocationName, getSentences, getSettings],
+  (data, locationName, sentences, settings) => {
     if (isEmpty(data)) return null;
     const { initial, noPrimary, globalInitial, globalNoPrimary } = sentences;
-    const { area_ha, extent, forest_primary } = data;
+    const { area_ha, extent, forest_primary, planted_forest } = data;
+    const { faoYear } = settings;
     const primaryPercent =
       forest_primary > 0
         ? (forest_primary / area_ha) * 100
         : (extent / area_ha) * 100;
+    const percent = (planted_forest / area_ha) * 100;
     const params = {
       location: locationName === 'global' ? 'globally' : locationName,
       extent: formatNumber({ num: extent, unit: 'ha', spaceUnit: true }),
       primaryPercent: formatNumber({ num: primaryPercent, unit: '%' }),
+      year: faoYear,
+      percent: formatNumber({ num: percent, unit: '%' }),
+      amountInHectares: formatNumber({
+        num: area_ha,
+        unit: 'ha',
+        spaceUnit: true,
+      }),
+      country: locationName,
     };
     let sentence = forest_primary > 0 ? initial : noPrimary;
     if (locationName === 'global') {

components/widgets/options.js

@@ -18,13 +18,15 @@ import confidence from 'data/confidence.json';
 import bioTypes from 'data/biodiversity-int.json';
 import ifl from 'data/ifl.json';
 import source from 'data/sources.json';
+import faoYear from 'data/fao-cover-years.json';
 
 export default {
   forestType: forestType.filter((f) => !f.hidden),
   landCategory: landCategory.filter((l) => !l.hidden),
   threshold,
   decile,
   firesThreshold,
+  faoYear,
   unit,
   gasesIncluded,
   period,

data/fao-cover-years.json

@@ -0,0 +1,18 @@
+[
+  {
+    "label": "2000",
+    "value": 2000
+  },
+  {
+    "label": "2010",
+    "value": 2010
+  },
+  {
+    "label": "2015",
+    "value": 2015
+  },
+  {
+    "label": "2020",
+    "value": 2020
+  }
+]

services/forest-data.js

@@ -1,12 +1,13 @@
-import { cartoRequest } from 'utils/request';
+import { cartoRequest, dataRequest } from 'utils/request';
+import { PROXIES } from 'utils/proxies';
 
 import globalLandCoverCategories from 'data/global-land-cover-categories.json';
 
 import { CARTO_API } from 'utils/apis';
 
 const NEW_SQL_QUERIES = {
   faoExtent:
-    'SELECT country AS iso, name, plantfor * 1000 AS planted_forest__ha, primfor * 1000 AS primary_forest__ha, natregfor * 1000 AS regenerated_forest__ha, forest * 1000 AS fao_treecover__ha, totarea as area_ha FROM table_1_forest_area_and_characteristics WHERE {location} AND year = 2015',
+    'SELECT iso, country, "planted forest (ha)" AS planted_forest__ha, "primary (ha)" AS primary_forest__ha, "naturally regenerating forest (ha)" AS regenerated_forest__ha, "forest (ha)" AS fao_treecover__ha, "total land area (ha)" as area_ha FROM data WHERE {location} AND year = {year}',
   faoReforest:
     'SELECT country AS iso, name, year, reforest * 1000 AS reforestation__rate, forest*1000 AS fao_treecover_reforest__ha FROM table_1_forest_area_and_characteristics as fao WHERE fao.year = {period} AND reforest > 0 ORDER BY reforestation__rate DESC',
   faoDeforest:
@@ -44,23 +45,28 @@ const getLocationQuery = (adm0, adm1, adm2) =>
     adm2 ? ` AND adm2 = ${adm2}` : ''
   }`;
 
-export const getFAOExtent = ({ adm0, download }) => {
-  const url = `/sql?q=${NEW_SQL_QUERIES.faoExtent}`.replace(
-    '{location}',
-    adm0 ? `country = '${adm0}'` : '1 = 1'
-  );
+export const getFAOExtent = async ({ adm0, faoYear = 2020, download }) => {
+  const target = download ? 'download/csv' : 'query/json';
+
+  const url =
+    `/dataset/fao_forest_extent/v2020/${target}?sql=${NEW_SQL_QUERIES.faoExtent}`
+      .replace(/{location}/g, adm0 ? `iso = '${adm0}'` : '1 = 1')
+      .replace(/{year}/g, faoYear);
 
   if (download) {
     return {
       name: 'fao_treecover_extent__ha',
-      url: `${CARTO_API}${url}&format=csv`,
+      url: new URL(
+        `${window.location.origin}${PROXIES.DATA_API}${url}`
+      ).toString(),
     };
   }
 
-  return cartoRequest.get(url).then((response) => ({
-    ...response,
+  const response = await dataRequest.get(url);
+
+  const widgetData = {
     data: {
-      rows: response.data.rows.map((o) => {
+      rows: response.data.map((o) => {
         // delete old key, replace it with new
         // delete Object.assign(o, {[newKey]: o[oldKey] })[oldKey]
         delete Object.assign(o, { planted_forest: o.planted_forest__ha })
@@ -75,7 +81,9 @@ export const getFAOExtent = ({ adm0, download }) => {
         return o;
       }),
     },
-  }));
+  };
+
+  return widgetData;
 };
 
 export const getFAOReforest = ({ period, download }) => {