Feature/whrc biomass widget (simple sentence)

app/javascript/components/numbered-list/numbered-list-component.jsx

@@ -38,7 +38,10 @@ class NumberedList extends PureComponent {
                     <div className="item-name">{item.label}</div>
                   </div>
                   <div className="item-value">
-                    {formatNumber({ num: item.value, unit })}
+                    {formatNumber({
+                      num: item.value,
+                      unit: item.unit ? item.unit : unit
+                    })}
                   </div>
                 </div>
               );

app/javascript/components/widgets/components/widget/component.jsx

@@ -38,7 +38,8 @@ class Widget extends PureComponent {
         {loading && <Loader className="widget-loader" />}
         {!loading &&
           !error &&
-          !hasData && (
+          !hasData &&
+          Component && (
             <NoContent message={`No data in selection for ${locationName}`} />
           )}
         {!loading &&
@@ -56,7 +57,8 @@ class Widget extends PureComponent {
             />
           )}
         {!error &&
-          hasData && (
+          hasData &&
+          Component && (
             <Component
               widget={widget}
               data={data}

app/javascript/components/widgets/components/widget/components/widget-header/components/widget-settings/widget-settings-component.jsx

@@ -16,17 +16,17 @@ class WidgetSettings extends PureComponent {
     });
   }
 
-  getUnit = (units, widget, settings, onSettingsChange) => {
-    if (units.length <= 1) return null;
-    if (units.length === 2) {
+  getUnitVariable = (items, widget, settings, onSettingsChange, type) => {
+    if (items.length <= 1) return null;
+    if (items.length === 2) {
       return (
         <Switch
           theme="theme-switch-light"
-          label="UNIT"
-          value={settings.unit}
-          options={units}
+          label={type === 'unit' ? 'UNIT' : 'VARIABLE'}
+          value={settings[type]}
+          options={items}
           onChange={option =>
-            onSettingsChange({ value: { unit: option }, widget })
+            onSettingsChange({ value: { [type]: option }, widget })
           }
         />
       );
@@ -35,11 +35,11 @@ class WidgetSettings extends PureComponent {
     return (
       <Dropdown
         theme="theme-select-light"
-        label="UNIT"
-        value={settings.unit}
-        options={units}
+        label={type === 'unit' ? 'UNIT' : 'VARIABLE'}
+        value={settings[type]}
+        options={items}
         onChange={option =>
-          onSettingsChange({ value: { unit: option.value }, widget })
+          onSettingsChange({ value: { [type]: option.value }, widget })
         }
       />
     );
@@ -118,6 +118,7 @@ class WidgetSettings extends PureComponent {
     } = this.props;
     const {
       units,
+      variables,
       forestTypes,
       landCategories,
       periods,
@@ -133,6 +134,7 @@ class WidgetSettings extends PureComponent {
     } = this.props.options;
     const hasExtraOptions =
       units ||
+      variables ||
       periods ||
       years ||
       startYears ||
@@ -284,7 +286,22 @@ class WidgetSettings extends PureComponent {
                 settings,
                 onSettingsChange
               )}
-            {units && this.getUnit(units, widget, settings, onSettingsChange)}
+            {units &&
+              this.getUnitVariable(
+                units,
+                widget,
+                settings,
+                onSettingsChange,
+                'unit'
+              )}
+            {variables &&
+              this.getUnitVariable(
+                variables,
+                widget,
+                settings,
+                onSettingsChange,
+                'variable'
+              )}
             {periods && (
               <Dropdown
                 theme="theme-select-light"

app/javascript/components/widgets/manifest.js

@@ -27,6 +27,7 @@ import * as treeCoverLocated from './widgets/land-cover/tree-cover-located';
 // Climate
 import * as emissions from './widgets/climate/emissions';
 import * as emissionsDeforestation from './widgets/climate/emissions-deforestation';
+import * as woodyBiomass from './widgets/climate/whrc-biomass/';
 import * as emissionsPlantations from './widgets/climate/emissions-plantations';
 import * as futureCarbonGains from './widgets/climate/future-carbon-gains';
 
@@ -65,6 +66,7 @@ export default {
   // climate
   emissions,
   emissionsDeforestation,
+  woodyBiomass,
   emissionsPlantations,
   futureCarbonGains,
   // biodiversity

app/javascript/components/widgets/options.js

@@ -2,6 +2,7 @@ import forestTypes from 'data/forest-types.json';
 import landCategories from 'data/land-categories.json';
 import thresholds from 'data/thresholds.json';
 import units from 'data/units.json';
+import variables from 'data/variables.json';
 import periods from 'data/periods.json';
 import extentYears from 'data/extent-years.json';
 import tscDriverGroups from 'data/tsc-loss-groups.json';
@@ -19,5 +20,6 @@ export default {
   tscDriverGroups,
   types,
   weeks,
-  datasets
+  datasets,
+  variables
 };

app/javascript/components/widgets/selectors.js

@@ -113,6 +113,24 @@ export const getChildLocationData = createSelector(
   }
 );
 
+export const getLocationDict = createSelector(
+  [getLocationData, selectLocation],
+  (locationData, location) => {
+    let values;
+    if (location.adm2) values = locationData.adm2;
+    else if (location.adm1) values = locationData.adm1;
+    else values = locationData.adm0;
+
+    return values.reduce(
+      (dict, next) => ({
+        ...dict,
+        [next.value]: next.label
+      }),
+      {}
+    );
+  }
+);
+
 export const getLocationObject = createSelector(
   [getActiveLocationData, selectLocation],
   (adms, location) => {
@@ -298,6 +316,7 @@ export const getWidgetsProps = createStructuredSelector({
   locationData: getActiveLocationData,
   locationObject: getLocationObject,
   locationName: getLocationName,
+  locationDict: getLocationDict,
   childLocationData: getChildLocationData,
   noWidgetsMessage: getNoWidgetsMessage,
   isTropical: isTropicalLocation

app/javascript/components/widgets/widgets/climate/whrc-biomass/actions.js

@@ -0,0 +1,4 @@
+import { getBiomassRanking } from 'services/climate';
+
+export default ({ params }) =>
+  getBiomassRanking({ ...params }).then(res => res.data && res.data.rows);

app/javascript/components/widgets/widgets/climate/whrc-biomass/config.js

@@ -0,0 +1,26 @@
+export default {
+  widget: 'whrc-biomass',
+  title: 'Biomass density in {location}',
+  categories: ['climate'],
+  types: ['global', 'country'],
+  admins: ['global', 'adm0', 'adm1', 'adm2'],
+  options: {
+    variables: ['totalbiomass', 'biomassdensity']
+  },
+  colors: 'climate',
+  dataType: 'loss',
+  metaKey: 'aboveground_biomass',
+  layers: ['f10bded4-94e2-40b6-8602-ae5bdfc07c08'],
+  sortOrder: {
+    summary: 0,
+    forestChange: 0
+  },
+  sentences: {
+    initial:
+      'In 2000, {location} had a biomass density of {biomassDensity}, and a total biomass of {totalBiomass}.',
+    totalbiomass:
+      'Around {value} of the world’s {label} is contained in the top 5 countries.',
+    biomassdensity:
+      'The average {label} of the world’s top 5 countries is {value}.'
+  }
+};

app/javascript/components/widgets/widgets/climate/whrc-biomass/index.js

@@ -0,0 +1,7 @@
+import Component from 'components/widgets/components/widget-numbered-list';
+import getData from './actions';
+import getProps from './selectors';
+import config from './config';
+import settings from './settings';
+
+export { Component, getData, getProps, config, settings };

app/javascript/components/widgets/widgets/climate/whrc-biomass/selectors.js

@@ -0,0 +1,145 @@
+import { createSelector, createStructuredSelector } from 'reselect';
+import isEmpty from 'lodash/isEmpty';
+import findIndex from 'lodash/findIndex';
+import { formatNumber } from 'utils/format';
+import { sortByKey } from 'utils/data';
+
+// get list data
+const getData = state => state.data && state.data;
+const getLocationName = state => state.locationName || null;
+const getLocation = state => state.allLocation || null;
+const getLocationDict = state => state.locationDict || null;
+const getLocationObject = state => state.locationObject || null;
+const getSentences = state => state.config && state.config.sentences;
+const getColors = state => state.colors || null;
+const getSettings = state => state.settings || null;
+
+const getSortedData = createSelector(
+  [getData, getSettings],
+  (data, settings) => {
+    if (isEmpty(data)) return null;
+    return sortByKey(data, settings.variable).reverse();
+  }
+);
+
+export const parseData = createSelector(
+  [
+    getSortedData,
+    getColors,
+    getLocation,
+    getLocationDict,
+    getLocationObject,
+    getSettings
+  ],
+  (data, colors, location, locationsDict, locationObj, settings) => {
+    if (isEmpty(data)) return null;
+
+    let dataTrimmed = data.map((d, i) => ({
+      ...d,
+      rank: i + 1
+    }));
+
+    let key;
+    if (data[0].admin_2) key = 'admin_2';
+    else if (data[0].admin_1) key = 'admin_1';
+    else key = 'iso';
+
+    if (location.payload.adm0) {
+      const locationIndex = findIndex(data, d => d[key] === locationObj.value);
+      if (locationIndex === -1) return null;
+
+      let trimStart = locationIndex - 2;
+      let trimEnd = locationIndex + 3;
+      if (locationIndex < 2) {
+        trimStart = 0;
+        trimEnd = 5;
+      }
+      if (locationIndex > data.length - 3) {
+        trimStart = data.length - 5;
+        trimEnd = data.length;
+      }
+      dataTrimmed = dataTrimmed.slice(trimStart, trimEnd);
+    }
+    const { query, type } = location;
+
+    return dataTrimmed.map((d, i) => ({
+      ...d,
+      label: locationsDict[d[key]],
+      color: colors.density,
+      key: `${d.iso}-${i}`,
+      path: {
+        type,
+        payload: { type: 'country', adm0: d.iso },
+        query
+      },
+      value: d[settings.variable],
+      unit: settings.variable === 'totalbiomass' ? 't' : 't/ha'
+    }));
+  }
+);
+
+export const parseSentence = createSelector(
+  [getData, getLocationName, getSentences, getLocationDict, getSettings],
+  (data, location, sentences, locationsDict, settings) => {
+    if (!sentences || isEmpty(data)) return null;
+
+    if (location === 'global') {
+      const sorted = sortByKey(data, [settings.variable]).reverse();
+
+      let biomTop5 = 0;
+      let densTop5 = 0;
+      const biomTotal = sorted.reduce((acc, next, i) => {
+        if (i < 5) {
+          biomTop5 += next.totalbiomass;
+          densTop5 += next.biomassdensity;
+        }
+        return acc + next.totalbiomass;
+      }, 0);
+
+      const percent = biomTop5 / biomTotal * 100;
+      const avgBiomDensity = densTop5 / 5;
+
+      const value =
+        settings.variable === 'totalbiomass'
+          ? formatNumber({ num: percent, unit: '%' })
+          : formatNumber({ num: avgBiomDensity, unit: 't/ha' });
+
+      const labels = {
+        biomassdensity: 'biomass density',
+        totalbiomass: 'total biomass'
+      };
+
+      return {
+        sentence: sentences[settings.variable],
+        params: {
+          label: labels[settings.variable],
+          value
+        }
+      };
+    }
+    const iso = Object.keys(locationsDict).find(
+      key => locationsDict[key] === location
+    );
+    const region = data.find(item => {
+      if (item.admin_2) return String(item.admin_2) === iso;
+      else if (item.admin_1) return String(item.admin_1) === iso;
+      return item.iso === iso;
+    });
+    if (!region) return null;
+
+    const { biomassdensity, totalbiomass } = region;
+    return {
+      sentence: sentences.initial,
+      params: {
+        location,
+        biomassDensity: formatNumber({ num: biomassdensity, unit: 't/ha' }),
+        totalBiomass: formatNumber({ num: totalbiomass, unit: 't' })
+      }
+    };
+  }
+);
+
+export default createStructuredSelector({
+  data: parseData,
+  sentence: parseSentence
+});

app/javascript/components/widgets/widgets/climate/whrc-biomass/settings.js

@@ -0,0 +1,10 @@
+export default {
+  threshold: 30,
+  startYear: 2001,
+  endYear: 2017,
+  extentYear: 2000,
+  layers: ['loss'],
+  pageSize: 5,
+  page: 0,
+  variable: 'totalbiomass'
+};

app/javascript/data/colors.json

@@ -27,7 +27,8 @@
     "noGain": "#e7e5a4"
   },
   "climate": {
-    "ramp": ["#EDD093", "#BFBC35", "#007F53", "#123A33"],
+    "ramp": [ "#EDD093", "#BFBC35", "#007F53", "#123A33"],
+    "density": "#895122",
     "loss": {
       "main": "#DF511E",
       "secondary": "#F9A000"

app/javascript/data/variables.json

@@ -0,0 +1,9 @@
+[
+  {
+    "label": "Total",
+    "value": "totalbiomass"
+  },{
+    "label": "Density",
+    "value": "biomassdensity"
+  }
+]