Merge pull request #3406 from Vizzuality/fix/gain-located-nan

Fixes parent/child issue leading to NaN returning

app/javascript/components/widgets/selectors.js

@@ -22,6 +22,9 @@ const getCategory = state => state.category || null;
 const getLocation = state => state.payload || null;
 const getIndicatorWhitelist = state => state.indicatorWhitelist || null;
 const getWidgetQuery = state => state.activeWidget || null;
+const getCountries = state => state.countries || null;
+const getRegions = state => state.regions || null;
+const getSubRegions = state => state.subRegions || null;
 
 const options = {
   indicators,
@@ -60,17 +63,62 @@ export const getOptions = () => {
   return optionsMeta;
 };
 
-// get lists selected
 export const getAdminSelected = createSelector(
-  [getAdminLevel, getAdminKey, getCountryData, getLocation],
-  (adminLevel, adminKey, locations, location) => {
-    const current = locations[adminKey].find(
-      i => i.value === location[adminLevel]
-    );
+  [
+    getCountries,
+    getRegions,
+    getSubRegions,
+    getLocation,
+    getAdminKey,
+    getAdminLevel
+  ],
+  (countries, regions, subRegions, location, adminKey, adminLevel) => {
+    const country =
+      (countries && countries.find(i => i.value === location.country)) || null;
+    const region =
+      (regions && regions.find(i => i.value === location.region)) || null;
+    const subRegion =
+      (subRegions && subRegions.find(i => i.value === location.subRegion)) ||
+      null;
+    const type = {
+      label: location.type || 'global',
+      value: location.type || 'global'
+    };
+
+    let current = type;
+    let parentLevel = null;
+    let parentKey = null;
+    let childLevel = null;
+    let childKey = null;
+    if (location.subRegion) {
+      current = subRegion;
+      parentKey = 'regions';
+      parentLevel = 'region';
+    } else if (location.region) {
+      current = region;
+      parentKey = 'countries';
+      parentLevel = 'country';
+      childKey = 'subRegions';
+      childLevel = 'subRegion';
+    } else if (location.country) {
+      current = country;
+      parentKey = 'global';
+      childKey = 'regions';
+      childLevel = 'region';
+    }
+
     return {
+      type,
+      country,
+      region,
+      subRegion,
       ...current,
       adminKey,
-      adminLevel
+      adminLevel,
+      parentKey,
+      parentLevel,
+      childKey,
+      childLevel
     };
   }
 );

app/javascript/components/widgets/widgets.js

@@ -44,7 +44,7 @@ const mapStateToProps = (
       ? regionWhitelist
       : countryWhitelist
   };
-  const currentLocation = getAdminSelected({ countryData, payload });
+  const currentLocation = getAdminSelected({ ...countryData, payload });
 
   return {
     loading,
@@ -53,6 +53,7 @@ const mapStateToProps = (
     adminKey: getAdminKey({ payload }),
     currentLocation,
     currentLabel: currentLocation && currentLocation.label,
+    ...currentLocation,
     ...widgetData,
     ...whitelists,
     ...countryData,

app/javascript/components/widgets/widgets/forest-change/tree-cover-gain/initial-state.js

@@ -27,7 +27,11 @@ export default {
       initial:
         'From 2001 to 2012, {location} gained {gain} of tree cover {indicator}, equivalent to a {percent} increase since {extentYear} and {globalPercent} of global tree cover gain.',
       withIndicator:
-        'From 2001 to 2012, {location} gained {gain} of tree cover in {indicator}, equivalent to a {percent} increase since {extentYear} and {globalPercentage} of global tree cover gain within {indicator_alt}.'
+        'From 2001 to 2012, {location} gained {gain} of tree cover in {indicator}, equivalent to a {percent} increase since {extentYear} and {globalPercent} of global tree cover gain.',
+      regionInitial:
+        'From 2001 to 2012, {location} gained {gain} of tree cover {indicator}, equivalent to a {percent} increase since {extentYear} and {globalPercent} of all tree cover gain in {parent}.',
+      regionWithIndicator:
+        'From 2001 to 2012, {location} gained {gain} of tree cover in {indicator}, equivalent to a {percent} increase since {extentYear} and {globalPercent} of all tree cover gain in {parent}.'
     }
   },
   settings: {

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

@@ -9,11 +9,14 @@ import { format } from 'd3-format';
 const getData = state => state.data || null;
 const getSettings = state => state.settings || null;
 const getLocation = state => state.payload || null;
-const getLocationsMeta = state => state[state.adminKey] || null;
+const getLocationsMeta = state =>
+  state[state.adminKey] || state[state.countries] || null;
 const getColors = state => state.colors || null;
 const getIndicator = state => state.indicator || null;
 const getCurrentLocation = state => state.currentLocation || null;
+const getAdminLevel = state => state.adminLevel || null;
 const getSentences = state => state.config.sentences || null;
+const getParentLocation = state => state[state.parentLevel] || null;
 
 export const getSortedData = createSelector(
   [getData, getSettings],
@@ -79,29 +82,50 @@ export const parseData = createSelector(
 );
 
 export const getSentence = createSelector(
-  [getSortedData, getSettings, getIndicator, getCurrentLocation, getSentences],
-  (data, settings, indicator, currentLocation, sentences) => {
+  [
+    getSortedData,
+    getSettings,
+    getIndicator,
+    getCurrentLocation,
+    getSentences,
+    getParentLocation,
+    getAdminLevel
+  ],
+  (
+    data,
+    settings,
+    indicator,
+    currentLocation,
+    sentences,
+    parent,
+    adminLevel
+  ) => {
     if (!data || !data.length) return null;
-    const { initial, withIndicator } = sentences;
+    const {
+      initial,
+      withIndicator,
+      regionInitial,
+      regionWithIndicator
+    } = sentences;
     const locationData =
       currentLocation && data.find(l => l.id === currentLocation.value);
     const gain = locationData && locationData.gain;
     const globalPercent = gain ? 100 * gain / sumBy(data, 'gain') : 0;
     const areaPercent = (locationData && locationData.percentage) || 0;
-    const indicatorName = indicator ? indicator.label : 'region-wide';
 
     const params = {
       location: currentLocation && currentLocation.label,
       gain: `${format('.3s')(gain)}ha`,
-      indicator: indicatorName.toLowerCase(),
-      indicator_alt: indicatorName.toLowerCase(),
+      indicator: (indicator && indicator.label.toLowerCase()) || 'region-wide',
       percent: areaPercent >= 0.1 ? `${format('.1f')(areaPercent)}%` : '<0.1%',
       globalPercent:
         globalPercent >= 0.1 ? `${format('.1f')(globalPercent)}%` : '<0.1%',
-      extentYear: settings.extentYear
+      extentYear: settings.extentYear,
+      parent: parent && parent.label
     };
 
-    const sentence = indicator ? withIndicator : initial;
+    let sentence = indicator ? withIndicator : initial;
+    if (adminLevel === 'region' || adminLevel === 'subRegion') { sentence = indicator ? regionWithIndicator : regionInitial; }
 
     return {
       sentence,