Skip to content

Commit b943d9d

Browse files
authored
Merge pull request #3342 from Vizzuality/feature/tree-cover-loss-ranked-widget
Feature: tree cover loss in admin0
2 parents 6ecd34f + 9b0115c commit b943d9d

21 files changed

+763
-5
lines changed

app/javascript/components/dropdown/components/item.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ Item.propTypes = {
9191
optionsAction: PropTypes.func,
9292
optionsActionKey: PropTypes.string,
9393
activeValue: PropTypes.object,
94-
activeLabel: PropTypes.string
94+
activeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
9595
};
9696

9797
export default Item;

app/javascript/components/dropdown/components/menu.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const Menu = props => {
4848
Menu.propTypes = {
4949
isOpen: PropTypes.bool,
5050
activeValue: PropTypes.object,
51-
activeLabel: PropTypes.string,
51+
activeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
5252
items: PropTypes.array,
5353
showGroup: PropTypes.string,
5454
getItemProps: PropTypes.func,

app/javascript/components/dropdown/components/selector.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ Selector.propTypes = {
6262
onSelectorClick: PropTypes.func,
6363
clearable: PropTypes.bool,
6464
activeValue: PropTypes.object,
65-
activeLabel: PropTypes.string,
65+
activeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
6666
searchable: PropTypes.bool,
6767
inputProps: PropTypes.func,
6868
handleClearSelection: PropTypes.func,

app/javascript/components/dropdown/dropdown-component.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ Dropdown.propTypes = {
155155
checkModalClosing: PropTypes.func,
156156
items: PropTypes.array,
157157
activeValue: PropTypes.object,
158-
activeLabel: PropTypes.string,
158+
activeLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
159159
highlightedIndex: PropTypes.number
160160
};
161161

app/javascript/pages/country/data/widgets-config.json

+59-1
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,34 @@
226226
"type": "gain",
227227
"metaKey": "widget_tree_cover_gain",
228228
"layers": ["forestgain"],
229+
"sortOrder": {
230+
"summary": 6,
231+
"forest-change": 4
232+
}
233+
},
234+
"settings": {
235+
"indicator": "gadm28",
236+
"threshold": 30,
237+
"unit": "ha",
238+
"extentYear": 2010,
239+
"layers": ["forestgain"]
240+
},
241+
"enabled": true
242+
},
243+
"lossRanked": {
244+
"title": "Tree cover loss",
245+
"config": {
246+
"size": "small",
247+
"indicators": ["gadm28", "primary_forest", "ifl_2013", "wdpa", "primary_forest__wdpa",
248+
"mining", "ifl_2013__wdpa", "primary_forest__mining", "ifl_2013__mining",
249+
"plantations", "plantations__mining"],
250+
"units": ["ha", "%"],
251+
"categories": ["summary", "forest-change"],
252+
"admins": ["country"],
253+
"selectors": ["indicators", "thresholds", "extentYears", "units", "startYears", "endYears"],
254+
"type": "loss",
255+
"metaKey": "widget_tree_cover_loss",
256+
"layers": ["loss"],
229257
"sortOrder": {
230258
"summary": 5,
231259
"forest-change": 3
@@ -234,9 +262,39 @@
234262
"settings": {
235263
"indicator": "gadm28",
236264
"threshold": 30,
265+
"startYear": 2001,
266+
"endYear": 2016,
237267
"unit": "ha",
238268
"extentYear": 2010,
239-
"layers": ["forestgain"]
269+
"layers": ["loss"]
270+
},
271+
"enabled": true
272+
},
273+
"treeCoverRanked": {
274+
"title": "Tree cover extent",
275+
"config": {
276+
"size": "small",
277+
"indicators": ["gadm28", "primary_forest", "ifl_2013", "wdpa", "primary_forest__wdpa",
278+
"mining", "ifl_2013__wdpa", "primary_forest__mining", "ifl_2013__mining",
279+
"plantations", "plantations__mining"],
280+
"units": ["ha", "%"],
281+
"categories": ["summary", "land-cover"],
282+
"admins": ["country"],
283+
"selectors": ["indicators", "thresholds", "extentYears", "units"],
284+
"type": "extent",
285+
"metaKey": "widget_tree_cover",
286+
"layers": ["forest2000", "forest2010"],
287+
"sortOrder": {
288+
"summary": 1,
289+
"land-cover": 1
290+
}
291+
},
292+
"settings": {
293+
"indicator": "gadm28",
294+
"threshold": 30,
295+
"unit": "ha",
296+
"extentYear": 2010,
297+
"layers": ["forest2010"]
240298
},
241299
"enabled": true
242300
},

app/javascript/pages/country/reducers.js

+4
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ import * as widgetTreeLocatedComponent from 'pages/country/widget/widgets/widget
2727
import * as widgetGainLocatedComponent from 'pages/country/widget/widgets/widget-gain-located';
2828
import * as widgetLossLocatedComponent from 'pages/country/widget/widgets/widget-loss-located';
2929
import * as widgetTreeLossComponent from 'pages/country/widget/widgets/widget-tree-loss';
30+
import * as widgetLossRankedComponent from 'pages/country/widget/widgets/widget-loss-ranked';
31+
import * as widgetTreeCoverRankedComponent from 'pages/country/widget/widgets/widget-tree-cover-ranked';
3032
import * as widgetTreeLossPlantationsComponent from 'pages/country/widget/widgets/widget-tree-loss-plantations';
3133
import * as widgetFAOCoverComponent from 'pages/country/widget/widgets/widget-fao-cover';
3234
import * as widgetFAOReforestationComponent from 'pages/country/widget/widgets/widget-fao-reforestation';
@@ -61,6 +63,8 @@ const componentsReducers = {
6163
widgetGainLocated: handleActions(widgetGainLocatedComponent),
6264
widgetLossLocated: handleActions(widgetLossLocatedComponent),
6365
widgetTreeLoss: handleActions(widgetTreeLossComponent),
66+
widgetLossRanked: handleActions(widgetLossRankedComponent),
67+
widgetTreeCoverRanked: handleActions(widgetTreeCoverRankedComponent),
6468
widgetTreeLossPlantations: handleActions(widgetTreeLossPlantationsComponent),
6569
widgetFAOCover: handleActions(widgetFAOCoverComponent),
6670
widgetFAOReforestation: handleActions(widgetFAOReforestationComponent),

app/javascript/pages/country/widget/widget-actions.js

+4
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import * as primaryTreeCoverActions from 'pages/country/widget/widgets/widget-pr
1414
import * as treeLocatedActions from 'pages/country/widget/widgets/widget-tree-located/widget-tree-located-actions';
1515
import * as gainLocatedActions from 'pages/country/widget/widgets/widget-gain-located/widget-gain-located-actions';
1616
import * as lossLocatedActions from 'pages/country/widget/widgets/widget-loss-located/widget-loss-located-actions';
17+
import * as lossRankedActions from 'pages/country/widget/widgets/widget-loss-ranked/widget-loss-ranked-actions';
18+
import * as treeCoverRankedActions from 'pages/country/widget/widgets/widget-tree-cover-ranked/widget-tree-cover-ranked-actions';
1719
import * as treeGainActions from 'pages/country/widget/widgets/widget-tree-gain/widget-tree-gain-actions';
1820
import * as FAOReforestationActions from 'pages/country/widget/widgets/widget-fao-reforestation/widget-fao-reforestation-actions';
1921
import * as FAODeforestationActions from 'pages/country/widget/widgets/widget-fao-deforestation/widget-fao-deforestation-actions';
@@ -36,6 +38,8 @@ const widgetActions = {
3638
...treeLocatedActions.default,
3739
...gainLocatedActions.default,
3840
...lossLocatedActions.default,
41+
...lossRankedActions.default,
42+
...treeCoverRankedActions.default,
3943
...treeGainActions.default,
4044
...FAOReforestationActions.default,
4145
...FAODeforestationActions.default,

app/javascript/pages/country/widget/widget-component.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import WidgetPrimaryTreeCover from 'pages/country/widget/widgets/widget-primary-
1717
import WidgetTreeLocated from 'pages/country/widget/widgets/widget-tree-located';
1818
import WidgetGainLocated from 'pages/country/widget/widgets/widget-gain-located';
1919
import WidgetLossLocated from 'pages/country/widget/widgets/widget-loss-located';
20+
import WidgetLossRanked from 'pages/country/widget/widgets/widget-loss-ranked';
21+
import WidgetTreeCoverRanked from 'pages/country/widget/widgets/widget-tree-cover-ranked';
2022
import WidgetTreeLoss from 'pages/country/widget/widgets/widget-tree-loss';
2123
import WidgetTreeLossPlantations from 'pages/country/widget/widgets/widget-tree-loss-plantations';
2224
import WidgetTreeGain from 'pages/country/widget/widgets/widget-tree-gain';
@@ -43,6 +45,8 @@ const widgets = {
4345
WidgetTreeLocated,
4446
WidgetGainLocated,
4547
WidgetLossLocated,
48+
WidgetLossRanked,
49+
WidgetTreeCoverRanked,
4650
WidgetTreeLoss,
4751
WidgetTreeLossPlantations,
4852
WidgetFaoCover,
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { createAction } from 'redux-actions';
2+
import { createThunkAction } from 'utils/redux';
3+
import axios from 'axios';
4+
5+
import { fetchLossRanked, fetchExtentRanked } from 'services/forest-data';
6+
7+
const setLossRankedLoading = createAction('setLossRankedLoading');
8+
const setLossRankedData = createAction('setLossRankedData');
9+
const setLossRankedSettings = createAction('setLossRankedSettings');
10+
11+
const getLossRanked = createThunkAction(
12+
'getLossRanked',
13+
params => (dispatch, state) => {
14+
if (!state().widgetLossRanked.loading) {
15+
dispatch(setLossRankedLoading({ loading: true, error: false }));
16+
axios
17+
.all([fetchLossRanked({ ...params }), fetchExtentRanked({ ...params })])
18+
.then(
19+
axios.spread((lossResponse, extentResponse) => {
20+
const { data } = lossResponse.data;
21+
let mappedData = [];
22+
if (data && data.length) {
23+
mappedData = data.map(item => {
24+
const loss = item.loss || 0;
25+
return {
26+
...item,
27+
loss
28+
};
29+
});
30+
}
31+
dispatch(
32+
setLossRankedData({
33+
loss: mappedData,
34+
extent: extentResponse.data.data
35+
})
36+
);
37+
})
38+
)
39+
.catch(error => {
40+
console.info(error);
41+
dispatch(setLossRankedLoading({ loading: false, error: true }));
42+
});
43+
}
44+
}
45+
);
46+
47+
export default {
48+
setLossRankedLoading,
49+
setLossRankedData,
50+
setLossRankedSettings,
51+
getLossRanked
52+
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React, { PureComponent } from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import WidgetDynamicSentence from 'pages/country/widget/components/widget-dynamic-sentence';
5+
import WidgetNumberedList from 'pages/country/widget/components/widget-numbered-list';
6+
7+
import './widget-loss-ranked-styles.scss';
8+
9+
class WidgetLossRanked extends PureComponent {
10+
render() {
11+
const { data, sentence, settings, embed } = this.props;
12+
13+
return (
14+
<div className="c-widget-loss-ranked">
15+
{data && (
16+
<div className="loss-data">
17+
{sentence && <WidgetDynamicSentence sentence={sentence} />}
18+
<WidgetNumberedList
19+
className="ranking-list"
20+
data={data}
21+
settings={settings}
22+
linksExt={embed}
23+
/>
24+
</div>
25+
)}
26+
</div>
27+
);
28+
}
29+
}
30+
31+
WidgetLossRanked.propTypes = {
32+
data: PropTypes.array,
33+
settings: PropTypes.object.isRequired,
34+
sentence: PropTypes.string,
35+
embed: PropTypes.bool
36+
};
37+
38+
export default WidgetLossRanked;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import WIDGETS_CONFIG from 'pages/country/data/widgets-config.json';
2+
3+
export const initialState = {
4+
loading: false,
5+
error: false,
6+
data: {
7+
loss: []
8+
},
9+
...WIDGETS_CONFIG.lossRanked
10+
};
11+
12+
const setLossRankedLoading = (state, { payload }) => ({
13+
...state,
14+
...payload
15+
});
16+
17+
const setLossRankedData = (state, { payload }) => ({
18+
...state,
19+
loading: false,
20+
data: {
21+
...payload
22+
}
23+
});
24+
25+
const setLossRankedSettings = (state, { payload }) => ({
26+
...state,
27+
settings: {
28+
...state.settings,
29+
...payload
30+
}
31+
});
32+
33+
export default {
34+
setLossRankedLoading,
35+
setLossRankedData,
36+
setLossRankedSettings
37+
};

0 commit comments

Comments
 (0)