Skip to content

Commit 02ea6e8

Browse files
edbrettedbrett
authored
Merge pull request #3392 from Vizzuality/feature/refactor-feedback-updates
Country Page Feedback Updates
2 parents 5d6c432 + 8ce39b3 commit 02ea6e8

File tree

43 files changed

+202
-226
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+202
-226
lines changed

‎app/javascript/components/widgets/manifest.js

+8-11
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import * as treeCoverLocated from './widgets/land-cover/tree-cover-located';
55
import * as intactTreeCover from './widgets/land-cover/intact-tree-cover';
66
import * as primaryForest from './widgets/land-cover/primary-forest';
77
import * as faoCover from './widgets/land-cover/fao-cover';
8+
import * as treeCoverPlantations from './widgets/land-cover/tree-cover-plantations';
9+
import * as rankedPlantations from './widgets/land-cover/ranked-plantations';
810

911
// Forest change
1012
import * as gladAlerts from './widgets/forest-change/glad-alerts';
@@ -19,10 +21,6 @@ import * as treeLoss from './widgets/forest-change/tree-loss';
1921
import * as faoDeforest from './widgets/forest-change/fao-deforest';
2022
import * as faoReforest from './widgets/forest-change/fao-reforest';
2123

22-
// Land use
23-
import * as treeCoverPlantations from './widgets/land-use/tree-cover-plantations';
24-
import * as rankedPlantations from './widgets/land-use/ranked-plantations';
25-
2624
// Conservation
2725
import * as gladBiodiversity from './widgets/conservation/glad-biodiversity';
2826

@@ -42,7 +40,9 @@ export {
4240
primaryForest,
4341
treeCoverLocated,
4442
faoCover,
45-
// // forest change
43+
treeCoverPlantations,
44+
rankedPlantations,
45+
// forest change
4646
gladAlerts,
4747
gladRanked,
4848
fires,
@@ -54,15 +54,12 @@ export {
5454
treeLoss,
5555
faoDeforest,
5656
faoReforest,
57-
// // land use
58-
treeCoverPlantations,
59-
rankedPlantations,
60-
// // conservation
57+
// conservation
6158
gladBiodiversity,
62-
// // people
59+
// people
6360
economicImpact,
6461
forestryEmployment,
65-
// // climate
62+
// climate
6663
emissions,
6764
emissionsDeforestation
6865
};

‎app/javascript/components/widgets/widgets/climate/emissions-deforestation/initial-state.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ export default {
2121
colors: 'emissions',
2222
sentences: {
2323
initial:
24-
'Between {startYear} and {endYear}, {value} of {type} was released into the atmosphere as a result of forest loss.',
24+
'Between {startYear} and {endYear}, {value} of {type} was released into the atmosphere as a result of tree cover loss in {location}.',
2525
containsIndicator:
26-
'Between {startYear} and {endYear}, {value} of {type} was released into the atmosphere as a result of forest loss in {indicatorText}.'
26+
'Between {startYear} and {endYear}, {value} of {type} was released into the atmosphere as a result of tree cover loss within {indicatorText} in {location}.'
2727
}
2828
},
2929
settings: {

‎app/javascript/components/widgets/widgets/climate/emissions-deforestation/selectors.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { getColorPalette } from 'utils/data';
88
const getData = state => (state.data && state.data.loss) || null;
99
const getSettings = state => state.settings || null;
1010
const getIndicator = state => state.indicator || null;
11+
const getCurrentLabel = state => state.currentLabel || null;
1112
const getColors = state => state.colors || null;
1213
const getSentences = state => state.config && state.config.sentences;
1314

@@ -60,8 +61,8 @@ export const parseConfig = createSelector(
6061
);
6162

6263
export const getSentence = createSelector(
63-
[parseData, getSettings, getIndicator, getSentences],
64-
(data, settings, indicator, sentences) => {
64+
[parseData, getSettings, getIndicator, getSentences, getCurrentLabel],
65+
(data, settings, indicator, sentences, currentLabel) => {
6566
if (!data || isEmpty(data)) return null;
6667
const { initial, containsIndicator } = sentences;
6768
const { startYear, endYear, unit } = settings;
@@ -72,13 +73,14 @@ export const getSentence = createSelector(
7273
let indicatorText = '';
7374
if (indicator && indicator.value === 'mining') {
7475
indicatorText = ` ${indicator.label.toLowerCase()} regions`;
75-
} else if (indicator && indicator.value !== 'gadm28') {
76+
} else if (indicator) {
7677
indicatorText = ` ${indicator.label.toLowerCase()}`;
7778
}
7879

7980
const params = {
8081
type: emissionType,
8182
value: `${format('.3s')(totalEmissions)}t`,
83+
location: currentLabel,
8284
startYear,
8385
endYear,
8486
indicatorText

‎app/javascript/components/widgets/widgets/climate/emissions/initial-state.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ export default {
88
type: 'loss',
99
colors: 'emissions',
1010
sentences: {
11-
initial:
12-
'In {location}, land-use change and forestry combined with agriculture contributed {value} of emissions emissions from {startYear}-{endYear}, {percentage} of {location_alt} total over this period.'
11+
positive:
12+
'In {location}, the land-use change and forestry sector is a {type} of CO\u2082, emitting an average of {value} of emissions from {startYear} to {endYear}. This represents {percentage} of {location_alt} total greenhouse gas emissions over the same period.',
13+
negative:
14+
'In {location}, the land-use change and forestry sector is a {type} of CO\u2082, sequestering an average of {value} of emissions from {startYear} to {endYear}. This represents an offset of {percentage} of {location_alt} total greenhouse gas emissions over the same period.'
1315
}
1416
},
1517
enabled: true

‎app/javascript/components/widgets/widgets/climate/emissions/selectors.js

+16-6
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export const getSentence = createSelector(
109109
[getSortedData, getCurrentLocation, getSentences],
110110
(sortedData, currentLabel, sentences) => {
111111
if (!sortedData || !sortedData.data.length) return '';
112-
const { initial } = sentences;
112+
const { positive, negative } = sentences;
113113
const { data, total } = sortedData;
114114
const emissionsCount = data.reduce((accumulator, item) => {
115115
const accumulatorCount =
@@ -128,16 +128,26 @@ export const getSentence = createSelector(
128128
(typeof accumulator !== 'object' ? accumulator : accumulator.value) +
129129
item.value
130130
);
131+
const startYear = data[0].emissions[0].year;
132+
const endYear = data[0].emissions[data[0].emissions.length - 1].year;
131133
const emissionFraction = emissionsCount / totalEmissionsCount * 100;
132134
const params = {
133135
location: currentLabel,
134136
location_alt: `${currentLabel}'s`,
135137
percentage:
136-
emissionFraction < 0.1 ? '0.1%' : `${format('.1f')(emissionFraction)}%`,
137-
value: `${format('.3s')(emissionsCount)}tCO₂e`,
138-
startYear: data[0].emissions[0].year,
139-
endYear: data[0].emissions[data[0].emissions.length - 1].year
138+
Math.abs(emissionFraction) < 0.1
139+
? '<0.1%'
140+
: `${format('.1f')(Math.abs(emissionFraction))}%`,
141+
value: `${format('.3s')(
142+
Math.abs(emissionsCount / (endYear - startYear))
143+
)}tCO₂e/yr`,
144+
startYear,
145+
endYear,
146+
type: emissionsCount >= 0 ? 'net source' : 'net sink'
140147
};
141-
return { sentence: initial, params };
148+
149+
const sentence = emissionsCount >= 0 ? positive : negative;
150+
151+
return { sentence, params };
142152
}
143153
);

‎app/javascript/components/widgets/widgets/forest-change/fao-deforest/initial-state.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ export const initialState = {
88
type: 'fao',
99
metaKey: 'widget_deforestation_fao',
1010
sortOrder: {
11-
forestChange: 7
11+
forestChange: 3
1212
},
1313
colors: 'loss',
1414
sentences: {
15-
initial: 'In {year}, the rate of deforestation in {location} was {rate}.',
15+
initial:
16+
'According to the FAO the rate of deforestation in {location} was {rate}, in {year}.',
1617
humanDeforest:
17-
'In {year}, the rate of deforestation in {location} was {rate}, of which {human} was due to human activity.',
18+
'According to the FAO the rate of deforestation in {location} was {rate} in {year}, of which {human} was due to human activity.',
1819
noDeforest: 'No deforestation data in {location}.'
1920
}
2021
},

‎app/javascript/components/widgets/widgets/forest-change/fao-reforest/initial-state.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@ export const initialState = {
88
type: 'fao',
99
metaKey: 'widget_rate_of_restoration_fao',
1010
sortOrder: {
11-
forestChange: 6
11+
forestChange: 4
1212
},
1313
colors: 'gain',
1414
sentences: {
15-
initial: 'In {year}, the rate of deforestation in {location} was {rate}.',
15+
initial:
16+
'According to the FAO the rate of deforestation in {location} was {rate}, in {year}',
1617
noReforest: 'No deforestation data in {location}.'
1718
}
1819
},

‎app/javascript/components/widgets/widgets/forest-change/fires/initial-state.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,12 @@ export default {
77
metaKey: 'widget_fire_alert_location',
88
layers: ['viirs_fires_alerts'],
99
type: 'fires',
10+
sortOrder: {
11+
summary: 7,
12+
forestChange: 9
13+
},
1014
sentences: {
11-
initial:
12-
'In {location} there were {count} active fires detected in the last 7 days.'
15+
initial: '{count} active fires detected in {location} in the last 7 days.'
1316
}
1417
},
1518
settings: {

‎app/javascript/components/widgets/widgets/forest-change/glad-alerts/initial-state.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default {
3535
layers: ['umd_as_it_happens'],
3636
sortOrder: {
3737
summary: 6,
38-
forestChange: 4
38+
forestChange: 7
3939
},
4040
sentences: {
4141
initial:

‎app/javascript/components/widgets/widgets/forest-change/glad-ranked/initial-state.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default {
2-
title: 'Deforestation Alerts',
2+
title: 'Location of deforestation Alerts',
33
config: {
44
size: 'small',
55
indicators: [
@@ -44,17 +44,17 @@ export default {
4444
layers: ['umd_as_it_happens'],
4545
sortOrder: {
4646
summary: 6,
47-
forestChange: 4
47+
forestChange: 8
4848
},
4949
sentences: {
5050
initial:
51-
'In the last {timeframe}, {count} GLAD alerts were detected in {indicator} in {location}, which affected an area of approximately {area}.'
51+
'In the last {timeframe}, {count} GLAD alerts were detected in {indicator} in {location}, which affected an area of approximately {area}. The top {topRegions} regions accounted for {topPercent} of all GLAD alerts.'
5252
}
5353
},
5454
settings: {
5555
indicator: 'gadm28',
5656
threshold: 30,
57-
extentYear: 2000,
57+
extentYear: 2010,
5858
unit: 'ha',
5959
weeks: 4,
6060
pageSize: 5,

‎app/javascript/components/widgets/widgets/forest-change/glad-ranked/selectors.js

+18-1
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,13 @@ export const parseData = createSelector(
6161
const counts = sumBy(regionData, 'count');
6262
const countsAreaPerc =
6363
countsArea && regionExtent ? countsArea / regionExtent.extent * 100 : 0;
64+
const countsPerHa =
65+
counts && regionExtent ? counts / regionExtent.extent : 0;
6466
return {
6567
id: k,
6668
color: colors.main,
6769
percentage: countsAreaPerc,
70+
countsPerHa,
6871
count: counts,
6972
area: countsArea,
7073
value: settings.unit === 'ha' ? countsArea : countsAreaPerc,
@@ -91,11 +94,25 @@ export const getSentence = createSelector(
9194
(data, settings, options, location, indicator, currentLabel, sentences) => {
9295
if (!data || !options || !currentLabel) return '';
9396
const { initial } = sentences;
97+
const totalCount = sumBy(data, 'count');
98+
let percentileCount = 0;
99+
let percentileLength = 0;
100+
101+
while (
102+
(percentileLength < data.length && percentileCount / totalCount < 0.5) ||
103+
(percentileLength < 10 && data.length > 10)
104+
) {
105+
percentileCount += data[percentileLength].count;
106+
percentileLength += 1;
107+
}
108+
const topCount = percentileCount / totalCount * 100;
94109
const params = {
95110
timeframe: options.weeks.find(w => w.value === settings.weeks).label,
96111
count: format(',')(sumBy(data, 'count')),
97112
area: `${format('.2s')(sumBy(data, 'area'))}ha`,
98-
location: `${currentLabel}`,
113+
topPercent: `${format('.2s')(topCount)}%`,
114+
topRegions: percentileLength,
115+
location: currentLabel,
99116
indicator: `${indicator ? `${indicator.label} in ` : ''}`
100117
};
101118
return { sentence: initial, params };

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

+9-12
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ export default {
55
indicators: [
66
'gadm28',
77
'wdpa',
8-
'primary_forest',
98
'plantations',
10-
'ifl_2013',
119
'landmark',
12-
'mining'
10+
'mining',
11+
'kba',
12+
'aze',
13+
'tcl'
1314
],
1415
units: ['ha', '%'],
1516
categories: ['summary', 'forest-change'],
@@ -19,23 +20,19 @@ export default {
1920
metaKey: 'widget_tree_cover_gain',
2021
layers: ['forestgain'],
2122
sortOrder: {
22-
summary: 6,
23-
'forest-change': 4
23+
summary: 3,
24+
forestChange: 6
2425
},
2526
sentences: {
2627
initial:
27-
'From 2001 to 2012, {location} gained {gain} of tree cover {region}.',
28-
withGain:
29-
'From 2001 to 2012, {location} gained {gain} of tree cover {region}, equivalent to a {percentage} increase relative to {extentYear} tree cover extent.',
28+
'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.',
3029
withIndicator:
31-
'From 2001 to 2012, {location} gained {gain} of tree cover in {region}.',
32-
withGainAndIndicator:
33-
'From 2001 to 2012, {location} gained {gain} of tree cover in {region}, equivalent to a {percentage} increase relative to {extentYear} tree cover extent.'
30+
'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}.'
3431
}
3532
},
3633
settings: {
3734
indicator: 'gadm28',
38-
threshold: 30,
35+
threshold: 50,
3936
unit: 'ha',
4037
extentYear: 2010,
4138
layers: ['forestgain']

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

+11-13
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { createSelector } from 'reselect';
22
import uniqBy from 'lodash/uniqBy';
3+
import sumBy from 'lodash/sumBy';
34
import findIndex from 'lodash/findIndex';
45
import { sortByKey } from 'utils/data';
56
import { format } from 'd3-format';
@@ -80,30 +81,27 @@ export const parseData = createSelector(
8081
export const getSentence = createSelector(
8182
[getSortedData, getSettings, getIndicator, getCurrentLocation, getSentences],
8283
(data, settings, indicator, currentLocation, sentences) => {
83-
if (!data || !data.length || !currentLocation) return null;
84-
const {
85-
initial,
86-
withGain,
87-
withIndicator,
88-
withGainAndIndicator
89-
} = sentences;
84+
if (!data || !data.length) return null;
85+
const { initial, withIndicator } = sentences;
9086
const locationData =
9187
currentLocation && data.find(l => l.id === currentLocation.value);
9288
const gain = locationData && locationData.gain;
89+
const globalPercent = gain ? 100 * gain / sumBy(data, 'gain') : 0;
9390
const areaPercent = (locationData && locationData.percentage) || 0;
91+
const indicatorName = indicator ? indicator.label : 'region-wide';
9492

9593
const params = {
9694
location: currentLocation && currentLocation.label,
9795
gain: `${format('.3s')(gain)}ha`,
98-
region: indicator ? indicator.label : 'region-wide',
99-
percentage: `${format('.1f')(areaPercent)}%`,
96+
indicator: indicatorName.toLowerCase(),
97+
indicator_alt: indicatorName.toLowerCase(),
98+
percent: areaPercent >= 0.1 ? `${format('.1f')(areaPercent)}%` : '<0.1%',
99+
globalPercent:
100+
globalPercent >= 0.1 ? `${format('.1f')(globalPercent)}%` : '<0.1%',
100101
extentYear: settings.extentYear
101102
};
102103

103-
let sentence = gain ? withGain : initial;
104-
if (indicator) {
105-
sentence = gain ? withGainAndIndicator : withIndicator;
106-
}
104+
const sentence = indicator ? withIndicator : initial;
107105

108106
return {
109107
sentence,

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default {
2-
title: 'Where did tree cover gain occur',
2+
title: 'Location of tree cover gain in',
33
config: {
44
size: 'small',
55
indicators: [
@@ -31,17 +31,17 @@ export default {
3131
layers: ['forestgain'],
3232
metaKey: 'widget_tree_cover_gain_location',
3333
sortOrder: {
34-
'forest-change': 100
34+
forestChange: 5
3535
},
3636
sentences: {
3737
initial:
38-
'In {location}, the top {percentileLength} regions were responsible for {topGain} of all tree cover gain. {region} had the largest tree cover gain at {value} compared to an average of {average}.',
38+
'In {location}, the top {percentileLength} regions were responsible for {topGain} of all tree cover gain. {region} had the most tree cover gain at {value} compared to an average of {average}.',
3939
withIndicator:
40-
'For {indicator} in {location}, the top {percentileLength} regions were responsible for {topGain} of all tree cover gain. {region} had the largest tree cover gain at {value} compared to an average of {average}.',
40+
'For {indicator} in {location}, the top {percentileLength} regions were responsible for {topGain} of all tree cover gain. {region} had the most tree cover gain at {value} compared to an average of {average}.',
4141
initialPercent:
42-
'In {location}, the top {percentileLength} regions were responsible for {topGain} of all tree cover gain. {region} had the largest relative tree cover gain at {value} compared to an average of {average}.',
42+
'In {location}, the top {percentileLength} regions were responsible for {topGain} of all tree cover gain. {region} had the most relative tree cover gain at {value} compared to an average of {average}.',
4343
withIndicatorPercent:
44-
'For {indicator} in {location}, the top {percentileLength} regions were responsible for {topGain} of all tree cover gain. {region} had the largest relative tree cover gain at {value} compared to an average of {average}.'
44+
'For {indicator} in {location}, the top {percentileLength} regions were responsible for {topGain} of all tree cover gain. {region} had the most relative tree cover gain at {value} compared to an average of {average}.'
4545
}
4646
},
4747
settings: {

0 commit comments

Comments
 (0)