diff --git a/app/javascript/components/widgets/components/widget/widget.js b/app/javascript/components/widgets/components/widget/widget.js index 9fd9e8a2d3..d57abbf0bc 100644 --- a/app/javascript/components/widgets/components/widget/widget.js +++ b/app/javascript/components/widgets/components/widget/widget.js @@ -99,6 +99,7 @@ class WidgetContainer extends PureComponent { !isEqual(settings.threshold, this.props.settings.threshold) || !isEqual(settings.indicator, this.props.settings.indicator) || !isEqual(settings.extentYear, this.props.settings.extentYear) || + !isEqual(settings.period, this.props.settings.period) || !isEqual(settings.type, this.props.settings.type)) ) { getWidgetData({ diff --git a/app/javascript/components/widgets/widgets/forest-change/fao-deforest/initial-state.js b/app/javascript/components/widgets/widgets/forest-change/fao-deforest/initial-state.js index 85fefca3b5..a02d9fbecf 100644 --- a/app/javascript/components/widgets/widgets/forest-change/fao-deforest/initial-state.js +++ b/app/javascript/components/widgets/widgets/forest-change/fao-deforest/initial-state.js @@ -3,7 +3,7 @@ export const initialState = { config: { size: 'small', categories: ['forest-change'], - admins: ['country'], + admins: ['global', 'country'], selectors: ['periods'], type: 'fao', metaKey: 'widget_deforestation_fao', @@ -12,6 +12,10 @@ export const initialState = { }, colors: 'loss', sentences: { + globalInitial: + 'According to the FAO, the {location} rate of deforestation in {year} was {rate}.', + globalHuman: + 'According to the FAO, the {location} rate of deforestation in {year} was {rate}, of which {human} was due to human activity.', initial: 'According to the FAO the rate of deforestation in {location} was {rate}, in {year}.', humanDeforest: diff --git a/app/javascript/components/widgets/widgets/forest-change/fao-deforest/selectors.js b/app/javascript/components/widgets/widgets/forest-change/fao-deforest/selectors.js index 094f68bde0..3c0fe1ea9f 100644 --- a/app/javascript/components/widgets/widgets/forest-change/fao-deforest/selectors.js +++ b/app/javascript/components/widgets/widgets/forest-change/fao-deforest/selectors.js @@ -1,5 +1,6 @@ import { createSelector } from 'reselect'; import findIndex from 'lodash/findIndex'; +import sumBy from 'lodash/sumBy'; import { format } from 'd3-format'; const getData = state => state.data || null; @@ -49,18 +50,29 @@ export const getSentence = createSelector( ], (data, location, currentLabel, settings, period, sentences) => { if (!data || !data.fao) return ''; - const { initial, noDeforest, humanDeforest } = sentences; + const { + initial, + noDeforest, + humanDeforest, + globalInitial, + globalHuman + } = sentences; const topFao = data.fao.filter(d => d.year === settings.period); const { deforest, humdef } = topFao[0]; + const totalDeforest = sumBy(data.rank, 'deforest'); + + let sentence = humdef ? humanDeforest : initial; + if (currentLabel === 'global') { + sentence = humdef ? globalHuman : globalInitial; + } else if (!deforest) sentence = noDeforest; - let sentence = noDeforest; - if (deforest) { - sentence = humdef ? humanDeforest : initial; - } const params = { location: currentLabel, year: period && period.label, - rate: `${format('.3s')(deforest)}ha/yr`, + rate: + currentLabel === 'global' + ? `${format('.3s')(totalDeforest)}ha/yr` + : `${format('.3s')(deforest)}ha/yr`, human: `${format('.3s')(humdef)}ha/yr` }; diff --git a/app/javascript/components/widgets/widgets/forest-change/fao-reforest/actions.js b/app/javascript/components/widgets/widgets/forest-change/fao-reforest/actions.js index bd35a33950..2fb67a0436 100644 --- a/app/javascript/components/widgets/widgets/forest-change/fao-reforest/actions.js +++ b/app/javascript/components/widgets/widgets/forest-change/fao-reforest/actions.js @@ -1,14 +1,16 @@ import { getFAOExtent } from 'services/forest-data'; -export const getData = ({ params, dispatch, setWidgetData, widget, state }) => { +export const getData = ({ params, dispatch, setWidgetData, widget }) => { getFAOExtent({ ...params }) .then(response => { const data = response.data.rows; - const hasCountryData = - (data.length && - data.find(d => d.iso === state().location.payload.country)) || - null; - dispatch(setWidgetData({ data: hasCountryData ? data : {}, widget })); + const hasCountryData = (data.length && data.find(d => d.iso)) || null; + dispatch( + setWidgetData({ + data: hasCountryData ? data : {}, + widget + }) + ); }) .catch(error => { dispatch(setWidgetData({ widget, error: true })); diff --git a/app/javascript/components/widgets/widgets/forest-change/fao-reforest/initial-state.js b/app/javascript/components/widgets/widgets/forest-change/fao-reforest/initial-state.js index 87f8feccc5..fd90b23bef 100644 --- a/app/javascript/components/widgets/widgets/forest-change/fao-reforest/initial-state.js +++ b/app/javascript/components/widgets/widgets/forest-change/fao-reforest/initial-state.js @@ -3,7 +3,7 @@ export const initialState = { config: { size: 'small', categories: ['forest-change'], - admins: ['country'], + admins: ['global', 'country'], selectors: ['periods'], type: 'fao', metaKey: 'widget_rate_of_restoration_fao', @@ -12,9 +12,11 @@ export const initialState = { }, colors: 'gain', sentences: { + globalInitial: + 'According to the FAO, the {location} rate of reforestation in {year} was {rate}.', initial: - 'According to the FAO the rate of deforestation in {location} was {rate}, in {year}', - noReforest: 'No deforestation data in {location}.' + 'According to the FAO the rate of reforestation in {location} was {rate}, in {year}', + noReforest: 'No reforestation data in {location}.' } }, settings: { diff --git a/app/javascript/components/widgets/widgets/forest-change/fao-reforest/selectors.js b/app/javascript/components/widgets/widgets/forest-change/fao-reforest/selectors.js index cbaf8ab131..59a24cdaeb 100644 --- a/app/javascript/components/widgets/widgets/forest-change/fao-reforest/selectors.js +++ b/app/javascript/components/widgets/widgets/forest-change/fao-reforest/selectors.js @@ -7,6 +7,7 @@ import { format } from 'd3-format'; const getData = state => state.data || null; const getLocation = state => state.payload || null; const getColors = state => state.colors || null; +const getCurrentLocation = state => state.currentLabel || null; const getSettings = state => state.settings || null; const getPeriod = state => state.period || null; const getSentences = state => state.config && state.config.sentences; @@ -46,18 +47,37 @@ export const parseData = createSelector( ); export const getSentence = createSelector( - [parseData, getLocation, getSettings, getPeriod, getSentences], - (data, location, settings, period, sentences) => { + [ + getSortedData, + parseData, + getLocation, + getSettings, + getPeriod, + getSentences, + getCurrentLocation + ], + (sortedData, data, location, settings, period, sentences, currentLabel) => { if (!data || !data.length) return null; - const { initial, noReforest } = sentences; + const { initial, noReforest, globalInitial } = sentences; const countryData = data.find(d => location.country === d.iso) || null; - const sentence = countryData.value > 0 ? initial : noReforest; + let globalRate = 0; + Object.keys(sortedData).forEach(k => { + globalRate += sortedData[k].rate; + }); + + let sentence = globalInitial; + if (currentLabel !== 'global') { + sentence = countryData.value > 0 ? initial : noReforest; + } const params = { - location: countryData.label, + location: currentLabel, year: period && period.label, - rate: `${format('.3s')(countryData.value)}ha/yr` + rate: + currentLabel === 'global' + ? `${format('.3s')(globalRate)}ha/yr` + : `${format('.3s')(countryData.value)}ha/yr` }; return { diff --git a/app/javascript/services/forest-data.js b/app/javascript/services/forest-data.js index b1c0d77bc3..0a6df6be16 100644 --- a/app/javascript/services/forest-data.js +++ b/app/javascript/services/forest-data.js @@ -32,7 +32,7 @@ const SQL_QUERIES = { faoExtent: 'SELECT country AS iso, name, year, reforest * 1000 AS rate, forest*1000 AS extent FROM table_1_forest_area_and_characteristics as fao WHERE fao.year = {period} AND reforest > 0 ORDER BY rate DESC', faoDeforest: - "SELECT fao.country, fao.name, fao.deforest * 1000 AS deforest, fao.humdef, fao.year FROM table_1_forest_area_and_characteristics as fao WHERE fao.country = '{country}'", + 'SELECT fao.country, fao.name, fao.deforest * 1000 AS deforest, fao.humdef, fao.year FROM table_1_forest_area_and_characteristics as fao {location}', faoDeforestRank: 'WITH mytable AS (SELECT fao.country as iso, fao.name, fao.deforest * 1000 AS deforest, fao.humdef FROM table_1_forest_area_and_characteristics as fao WHERE fao.year = {year} AND deforest is not null), rank AS (SELECT deforest, iso, name from mytable ORDER BY mytable.deforest DESC) SELECT row_number() over () as rank, iso, name, deforest from rank', faoEcoLive: @@ -201,8 +201,8 @@ export const getFAOExtent = ({ period }) => { export const getFAODeforest = ({ country }) => { const url = `${CARTO_REQUEST_URL}${SQL_QUERIES.faoDeforest}`.replace( - '{country}', - country + '{location}', + country ? `WHERE fao.country = '${country}'` : '' ); return axios.get(url); };