Merge pull request #3396 from Vizzuality/feature/global-dashboard-wid…

…gets Updates tree-cover and ifl-cover widgets
wri · May 8, 2018 · c234d90 · c234d90
2 parents 0268377 + 531be23
commit c234d90
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 35 deletions.
diff --git a/app/javascript/components/widgets/components/widget-header/widget-header-component.js b/app/javascript/components/widgets/components/widget-header/widget-header-component.js
@@ -50,7 +50,7 @@ class WidgetHeader extends PureComponent {
     return (
       <div className="c-widget-header">
         <div className="title">{`${title} in ${
-          currentLocation ? currentLocation.label : ''
+          currentLocation.label ? currentLocation.label : 'Global'
         }`}</div>
         <div className="options">
           {!embed &&

diff --git a/app/javascript/components/widgets/widgets/land-cover/fao-cover/initial-state.js b/app/javascript/components/widgets/widgets/land-cover/fao-cover/initial-state.js
@@ -3,7 +3,7 @@ export const initialState = {
   config: {
     size: 'small',
     categories: ['land-cover'],
-    admins: ['country'],
+    admins: ['global', 'country'],
     type: 'fao',
     metaKey: 'widget_forest_cover_fao',
     sortOrder: {

diff --git a/app/javascript/components/widgets/widgets/land-cover/intact-tree-cover/initial-state.js b/app/javascript/components/widgets/widgets/land-cover/intact-tree-cover/initial-state.js
@@ -9,7 +9,7 @@ export default {
       'ifl_2013__landmark'
     ],
     categories: ['land-cover'],
-    admins: ['country', 'region', 'subRegion'],
+    admins: ['global', 'country', 'region', 'subRegion'],
     selectors: ['indicators', 'thresholds'],
     type: 'extent',
     metaKey: 'widget_ifl',
@@ -18,10 +18,13 @@ export default {
       landCover: 3
     },
     sentences: {
-      initial:
-        'As of 2013, {percentage} of {location} total tree cover was {intact}.',
+      globalInitial:
+        'As of 2013, {percentage} of {location} tree cover is {intact}.',
+      globalWithIndicator:
+        'As of 2013, {percentage} of {location} tree cover within {indicator} is {intact}.',
+      initial: 'In {location}, {percentage} of tree cover is {intact}.',
       withIndicator:
-        'As of 2013, {percentage} of {location} total tree cover was {intact} within {indicator}.'
+        'Within {indicator} in {location}, {percentage} of tree cover is {intact}.'
     }
   },
   settings: {

diff --git a/app/javascript/components/widgets/widgets/land-cover/intact-tree-cover/selectors.js b/app/javascript/components/widgets/widgets/land-cover/intact-tree-cover/selectors.js
@@ -14,11 +14,13 @@ const getSentences = state => state.config && state.config.sentences;
 
 // get lists selected
 export const parseData = createSelector(
-  [getData, getSettings, getIndicatorWhitelist, getColors],
-  (data, settings, whitelist, colors) => {
-    if (isEmpty(data) || isEmpty(whitelist)) return null;
-    const { totalArea, totalExtent, extent } = data;
-    const colorRange = getColorPalette(colors.ramp, 2);
+  [getData, getSettings, getIndicatorWhitelist, getColors, getCurrentLocation],
+  (data, settings, whitelist, colors, currentLabel) => {
+    if (isEmpty(data)) return null;
+    const { totalArea, totalExtent, extent, plantations } = data;
+    const hasPlantations =
+      !currentLabel || Object.keys(whitelist).indexOf('plantations') > -1;
+    const colorRange = getColorPalette(colors.ramp, hasPlantations ? 3 : 2);
     const parsedData = [
       {
         label: 'Intact Forest',
@@ -39,15 +41,28 @@ export const parseData = createSelector(
         percentage: (totalArea - totalExtent) / totalArea * 100
       }
     ];
+    if (currentLabel && hasPlantations) {
+      parsedData.splice(2, 0, {
+        label: 'Plantations',
+        value: plantations,
+        color: colorRange[2],
+        percentage: plantations / totalArea * 100
+      });
+    }
     return parsedData;
   }
 );
 
 export const getSentence = createSelector(
   [parseData, getSettings, getCurrentLocation, getIndicator, getSentences],
   (parsedData, settings, currentLabel, indicator, sentences) => {
-    if (!parsedData || !currentLabel || !indicator) return null;
-    const { initial, withIndicator } = sentences;
+    if (!parsedData || !indicator) return null;
+    const {
+      initial,
+      withIndicator,
+      globalInitial,
+      globalWithIndicator
+    } = sentences;
     const totalExtent = parsedData
       .filter(d => d.label !== 'Non-Forest')
       .map(d => d.value)
@@ -69,7 +84,7 @@ export const getSentence = createSelector(
     }
 
     const params = {
-      location: `${currentLabel}'s`,
+      location: currentLabel || 'global',
       indicator: indicatorLabel,
       percentage:
         intactPercentage < 0.1
@@ -78,8 +93,12 @@ export const getSentence = createSelector(
       intact: 'intact forest'
     };
 
-    const sentence = indicator.value === 'ifl_2013' ? initial : withIndicator;
+    let sentence = indicator.value === 'ifl_2013' ? initial : withIndicator;
 
+    if (!currentLabel) {
+      sentence =
+        indicator.value === 'ifl_2013' ? globalInitial : globalWithIndicator;
+    }
     return {
       sentence,
       params

diff --git a/app/javascript/components/widgets/widgets/land-cover/tree-cover-located/initial-state.js b/app/javascript/components/widgets/widgets/land-cover/tree-cover-located/initial-state.js
@@ -24,7 +24,7 @@ export default {
     ],
     units: ['ha', '%'],
     categories: ['summary', 'land-cover'],
-    admins: ['country', 'region'],
+    admins: ['global', 'country', 'region'],
     selectors: ['indicators', 'thresholds', 'units', 'extentYears'],
     locationCheck: true,
     type: 'extent',
@@ -35,6 +35,7 @@ export default {
       landCover: 2
     },
     sentences: {
+      global: '',
       initial:
         'In {location}, {count} regions represent {percentage} of all tree cover. This region has the largest tree cover at {extent} compared to an average of {averageExtent}.',
       hasIndicator:

diff --git a/app/javascript/components/widgets/widgets/land-cover/tree-cover/initial-state.js b/app/javascript/components/widgets/widgets/land-cover/tree-cover/initial-state.js
@@ -4,7 +4,7 @@ export default {
     size: 'small',
     indicators: ['gadm28', 'mining', 'landmark', 'wdpa'],
     categories: ['summary', 'land-cover'],
-    admins: ['country', 'region', 'subRegion'],
+    admins: ['global', 'country', 'region', 'subRegion'],
     selectors: ['indicators', 'thresholds'],
     type: 'extent',
     metaKey: 'widget_tree_cover',
@@ -14,8 +14,11 @@ export default {
       landCover: 1
     },
     sentences: {
-      initial:
-        'As of {year}, {location} had {value} of tree cover, representing {percentage} of the total land area.',
+      globalInitial:
+        'As of {year}, there was {value} of {location} tree cover.',
+      globalWithIndicator:
+        'As of {year}, there was {value} of {location} tree cover within {indicator}.',
+      initial: 'As of {year}, {location} had {value} of tree cover.',
       withIndicator:
         'As of {year}, {location} had {percentage} tree cover within {indicator}.'
     }

diff --git a/app/javascript/components/widgets/widgets/land-cover/tree-cover/selectors.js b/app/javascript/components/widgets/widgets/land-cover/tree-cover/selectors.js
@@ -14,12 +14,13 @@ const getSentences = state => state.config && state.config.sentences;
 
 // get lists selected
 export const parseData = createSelector(
-  [getData, getSettings, getWhitelists, getColors],
-  (data, settings, whitelist, colors) => {
-    if (isEmpty(data) || isEmpty(whitelist)) return null;
+  [getData, getSettings, getWhitelists, getColors, getCurrentLocation],
+  (data, settings, whitelist, colors, currentLabel) => {
+    if (isEmpty(data)) return null;
     const { totalArea, cover, plantations } = data;
     const { indicator } = settings;
-    const hasPlantations = Object.keys(whitelist).indexOf('plantations') > -1;
+    const hasPlantations =
+      !currentLabel || Object.keys(whitelist).indexOf('plantations') > -1;
     const colorRange = getColorPalette(colors.ramp, hasPlantations ? 2 : 1);
     const parsedData = [
       {
@@ -54,20 +55,25 @@ export const getSentence = createSelector(
   [getData, getSettings, getCurrentLocation, getIndicator, getSentences],
   (data, settings, currentLabel, indicator, sentences) => {
     if (!data || !sentences) return null;
-    const { initial, withIndicator } = sentences;
+    const {
+      initial,
+      withIndicator,
+      globalInitial,
+      globalWithIndicator
+    } = sentences;
     const percentCover = 100 * data.cover / data.totalArea;
     const params = {
       year: settings.extentYear,
-      location: currentLabel,
+      location: currentLabel || 'global',
       indicator: indicator && indicator.label,
       percentage:
         percentCover >= 0.1 ? `${format('.1f')(percentCover)}%` : '<0.1%',
       value: `${format('.3s')(data.cover)}ha`
     };
-
-    return {
-      sentence: indicator ? withIndicator : initial,
-      params
-    };
+    let sentence = indicator ? withIndicator : initial;
+    if (!currentLabel) {
+      sentence = indicator ? globalWithIndicator : globalInitial;
+    }
+    return { sentence, params };
   }
 );
diff --git a/app/javascript/pages/dashboards/page/page-selectors.js b/app/javascript/pages/dashboards/page/page-selectors.js
@@ -1,5 +1,4 @@
 import { createSelector } from 'reselect';
-import compact from 'lodash/compact';
 import qs from 'query-string';
 
 // get list data
@@ -15,17 +14,16 @@ export const getLinks = createSelector(
   [getCategories, getCategory, getLocation, getQuery],
   (categories, activeCategory, location, query) =>
     categories.map(category => {
-      const locationUrl = compact(
-        Object.keys(location).map(key => location[key])
-      ).join('/');
       const newQuery = {
         ...query,
         category: category.value,
         widget: undefined
       };
       return {
         label: category.label,
-        path: `/dashboards/${locationUrl}?${qs.stringify(newQuery)}`,
+        path: `${window.location.pathname}${newQuery ? '?' : ''}${qs.stringify(
+          newQuery
+        )}`,
         active: activeCategory === category.value
       };
     })