feat(tree-cover): add baselineYear dropdown

components/widgets/forest-change/tree-cover-gain/index.js

@@ -33,6 +33,13 @@ export default {
       placeholder: 'All tree cover',
       clearable: true,
     },
+    {
+      key: 'baselineYear',
+      label: 'Baseline Year',
+      type: 'select',
+      placeholder: '2000',
+      clearable: true,
+    },
     {
       key: 'landCategory',
       label: 'Land Category',
@@ -41,7 +48,7 @@ export default {
       clearable: true,
     },
   ],
-  refetchKeys: ['forestType', 'landCategory', 'threshold'],
+  refetchKeys: ['forestType', 'landCategory', 'threshold', 'baselineYear'],
   chartType: 'rankedList',
   colors: 'gain',
   metaKey: 'umd_tree_cover_gain_from_height',
@@ -65,20 +72,21 @@ export default {
   },
   sentences: {
     globalInitial:
-      'From 2000 to 2020, {gain} of tree cover was gained {location}.',
+      'From {baselineYear} to 2020, {gain} of tree cover was gained {location}.',
     globalWithIndicator:
-      'From 2000 to 2020, {gain} of tree cover was gained within {indicator} {location}.',
+      'From {baselineYear} to 2020, {gain} of tree cover was gained within {indicator} {location}.',
     initial:
-      'From 2000 to 2020, {location} gained {gain} of tree cover equal to {gainPercent} of the global total.',
+      'From {baselineYear} to 2020, {location} gained {gain} of tree cover equal to {gainPercent} of the global total.',
     withIndicator:
-      'From 2000 to 2020, {location} gained {gain} of tree cover in {indicator} equal to {gainPercent} of the global total.',
+      'From {baselineYear} to 2020, {location} gained {gain} of tree cover in {indicator} equal to {gainPercent} of the global total.',
     regionInitial:
-      'From 2000 to 2020, {location} gained {gain} of tree cover {indicator} equal to {gainPercent} of all tree cover gain in {parent}.',
+      'From {baselineYear} to 2020, {location} gained {gain} of tree cover {indicator} equal to {gainPercent} of all tree cover gain in {parent}.',
     regionWithIndicator:
-      'From 2000 to 2020, {location} gained {gain} of tree cover in {indicator} equal to {gainPercent} of all tree cover gain in {parent}.',
+      'From {baselineYear} to 2020, {location} gained {gain} of tree cover in {indicator} equal to {gainPercent} of all tree cover gain in {parent}.',
   },
   settings: {
     threshold: 0,
+    baselineYear: 2000,
     unit: 'ha',
     pageSize: 5,
     page: 0,

components/widgets/forest-change/tree-cover-gain/selectors.js

@@ -112,6 +112,7 @@ export const parseSentence = createSelector(
     getSentences,
     getAdminLevel,
     getParentLabel,
+    getSettings,
   ],
   (
     data,
@@ -120,7 +121,8 @@ export const parseSentence = createSelector(
     currentLabel,
     sentences,
     adminLevel,
-    parentLabel
+    parentLabel,
+    settings
   ) => {
     if (
       !data ||
@@ -150,6 +152,7 @@ export const parseSentence = createSelector(
       percent: formatNumber({ num: areaPercent, unit: '%' }),
       gainPercent: formatNumber({ num: gainPercent, unit: '%' }),
       parent: parentLabel || null,
+      baselineYear: settings?.baselineYear || 2000,
     };
 
     let sentence = indicator ? withIndicator : initial;

components/widgets/options.js

@@ -1,5 +1,6 @@
 import forestType from 'data/forest-types';
 import landCategory from 'data/land-categories';
+import baselineYear from 'data/baseline-year';
 import threshold from 'data/thresholds.json';
 import decile from 'data/deciles.json';
 import firesThreshold from 'data/fires-thresholds.json';
@@ -24,6 +25,7 @@ import yearRange from 'data/year-range.json';
 export default {
   forestType: forestType.filter((f) => !f.hidden),
   landCategory: landCategory.filter((l) => !l.hidden),
+  baselineYear,
   threshold,
   decile,
   firesThreshold,

data/baseline-year.js

@@ -0,0 +1,22 @@
+export default [
+  {
+    label: '2000',
+    value: 2000,
+  },
+  {
+    label: '2005',
+    value: 2005,
+  },
+  {
+    label: '2010',
+    value: 2010,
+  },
+  {
+    label: '2015',
+    value: 2015,
+  },
+  {
+    label: '2020',
+    value: 2020,
+  },
+];