diff --git a/components/charts/components/pie-chart-legend/component.jsx b/components/charts/components/pie-chart-legend/component.jsx index 39be8f4752..0810ee12b1 100644 --- a/components/charts/components/pie-chart-legend/component.jsx +++ b/components/charts/components/pie-chart-legend/component.jsx @@ -3,19 +3,10 @@ import PropTypes from 'prop-types'; import { formatNumber } from 'utils/format'; import cx from 'classnames'; -import groupBy from 'lodash/groupBy'; - class PieChartLegend extends PureComponent { render() { - const { - data, - chartSettings = {}, - config, - className, - simple, - onMap, - } = this.props; - const { size, legend, groupedLegends } = chartSettings; + const { data, chartSettings = {}, config, className, simple } = this.props; + const { size, legend } = chartSettings; const sizeClass = (() => { if (size) return size; @@ -33,61 +24,6 @@ class PieChartLegend extends PureComponent { })}`?.length > 9 ); - if (groupedLegends) { - const groupedItems = groupBy(data, 'category'); - - return ( -
- {Object.entries(groupedItems).map(([category, categoryItems]) => ( -
-

{category}

- -
- ))} -
- ); - } - return (
)} -
+
diff --git a/components/widget/components/widget-pie-chart-legend/styles.scss b/components/widget/components/widget-pie-chart-legend/styles.scss index b190a59ee1..66da13325c 100644 --- a/components/widget/components/widget-pie-chart-legend/styles.scss +++ b/components/widget/components/widget-pie-chart-legend/styles.scss @@ -6,10 +6,6 @@ flex-direction: row; justify-content: space-between; gap: 4%; - - &-grouped { - flex-direction: column-reverse; - } } .cover-legend { diff --git a/components/widgets/forest-change/_tree-loss-drivers/index.js b/components/widgets/forest-change/_tree-loss-drivers/index.js index 0a1e39943b..8baad7d6fc 100644 --- a/components/widgets/forest-change/_tree-loss-drivers/index.js +++ b/components/widgets/forest-change/_tree-loss-drivers/index.js @@ -20,6 +20,25 @@ export default { }, types: ['global', 'country'], admins: ['global', 'adm0'], + alerts: { + default: [ + { + id: 'tree-loss-drivers-alert-1', + text: `The methods behind this data have changed over time. Be cautious comparing old and new, data especially before/after 2015. [Read more here](https://www.globalforestwatch.org/blog/data-and-research/tree-cover-loss-satellite-data-trend-analysis/).`, + icon: 'warning', + visible: ['global', 'country', 'geostore', 'aoi', 'wdpa', 'use'], + }, + ], + indonesia: [ + { + id: 'tree-loss-drivers-indonesia-alert-1', + text: `Indonesia’s rates of deforestation have slowed significantly in recent years (2016-2021), largely due to reductions in commodity-driven expansion. Much of the primary forest loss from commodity-driven deforestation in Indonesia according to the GFW data actually took place in areas legally classified as secondary forests, not primary forests. Please note that ground verification is recommended before any hard conclusions are drawn about the type of forest affected, or cause of loss, in specific patches of loss on the GFW map.`, + icon: 'warning', + visible: ['global', 'country', 'geostore', 'aoi', 'wdpa', 'use'], + areaWhitelist: ['IDN'], + }, + ], + }, categories: ['summary', 'forest-change'], subcategories: ['forest-loss'], large: true, @@ -81,21 +100,27 @@ export default { return { ...((dashboard || embed) && { size: 'small', + legend: { + style: { + display: 'flex', + justifyContent: 'center', + paddingLeft: '8%', + }, + }, chart: { style: { display: 'flex', height: 'auto', alignItems: 'center', + paddingRight: '14%', }, }, }), - groupedLegends: true, }; }, getData: (params) => getTreeCoverLossByDriverType(params).then((response) => { const { data } = (response && response.data) || {}; - return data; }), getDataURL: (params) => [ diff --git a/components/widgets/forest-change/_tree-loss-drivers/selectors.js b/components/widgets/forest-change/_tree-loss-drivers/selectors.js index 204d53e7a3..0c5efb19bb 100644 --- a/components/widgets/forest-change/_tree-loss-drivers/selectors.js +++ b/components/widgets/forest-change/_tree-loss-drivers/selectors.js @@ -9,26 +9,12 @@ const getColors = (state) => state.colors; const getSettings = (state) => state.settings; const getTitle = (state) => state.title; const getSentences = (state) => state.sentences; +const getCaution = (state) => state.caution; const getLocationLabel = (state) => state.locationLabel; +const getAdm0 = (state) => state.adm0; const getSortedCategories = () => tscLossCategories.sort((a, b) => (a.position > b.position ? 1 : -1)); -const groupedLegends = { - 'commodity driven deforestation': 'Drivers of temporary deforestation', - forestry: 'Drivers of temporary deforestation', - 'forest management': 'Drivers of temporary deforestation', - 'shifting cultivation': 'Drivers of temporary deforestation', - 'shifting agriculture': 'Drivers of temporary deforestation', - wildfire: 'Drivers of temporary deforestation', - 'other natural disasters': 'Drivers of temporary deforestation', - 'hard commodities': 'Drivers of permanent deforestation', - 'Drivers of permanent deforestation agriculture': - 'Drivers of permanent deforestation', - 'settlements and infrastructure': 'Drivers of permanent deforestation', - urbanization: 'Drivers of permanent deforestation', - unknown: 'Drivers of permanent deforestation', -}; - export const getPermanentCategories = createSelector( [getSortedCategories], (sortedCategories) => @@ -61,7 +47,6 @@ export const parseData = createSelector( return { label: driver_type, value: loss_area_ha, - category: groupedLegends[driver_type.toLowerCase()], color: categoryColors[driver_type], percentage: (loss_area_ha * 100) / totalLoss, }; @@ -127,8 +112,14 @@ export const parseSentence = createSelector( } ); +export const parseCaution = createSelector( + [getCaution, getAdm0], + (caution, adm0) => (adm0 === 'IDN' ? caution.indonesia : caution.default) +); + export default createStructuredSelector({ data: parseData, title: parseTitle, sentence: parseSentence, + caution: parseCaution, });