Merge pull request #3448 from Vizzuality/feature/consistent-colours

Standardised extent pallet

Author: edbrett

app/javascript/components/widgets/widgets/land-cover/fao-cover/selectors.js

@@ -20,7 +20,6 @@ export const parseData = createSelector(
       forest_primary,
       forest_regenerated
     } = data;
-    const colorRange = colors.ramp;
     const otherCover =
       extent - (forest_regenerated + forest_primary + planted_forest);
     const nonForest = area_ha - extent;
@@ -29,25 +28,25 @@ export const parseData = createSelector(
         label: 'Naturally Regenerated Forest',
         value: forest_regenerated,
         percentage: forest_regenerated / area_ha * 100,
-        color: colorRange[1]
+        color: colors.naturalForest
       },
       {
         label: 'Primary Forest',
         value: forest_primary || 0,
         percentage: forest_primary / area_ha * 100 || 0,
-        color: colorRange[2]
+        color: colors.primaryForest
       },
       {
         label: 'Planted Forest',
         value: planted_forest || 0,
         percentage: planted_forest / area_ha * 100 || 0,
-        color: colorRange[4]
+        color: colors.plantedForest
       },
       {
         label: 'Other Tree Cover',
         value: otherCover > 0 ? otherCover : 0,
         percentage: otherCover / area_ha * 100,
-        color: colorRange[6]
+        color: colors.otherCover
       },
       {
         label: 'Non-Forest',

app/javascript/components/widgets/widgets/land-cover/intact-tree-cover/selectors.js

@@ -1,6 +1,5 @@
 import { createSelector } from 'reselect';
 import isEmpty from 'lodash/isEmpty';
-import { getColorPalette } from 'utils/data';
 import { format } from 'd3-format';
 
 // get list data
@@ -17,18 +16,17 @@ export const parseData = createSelector(
   (data, settings, colors) => {
     if (isEmpty(data)) return null;
     const { totalArea, totalExtent, extent } = data;
-    const colorRange = getColorPalette(colors.ramp, 2);
     const parsedData = [
       {
         label: 'Intact Forest',
         value: extent,
-        color: colorRange[0],
+        color: colors.intactForest,
         percentage: extent / totalArea * 100
       },
       {
         label: 'Other Tree Cover',
         value: totalExtent - extent,
-        color: colorRange[1],
+        color: colors.otherCover,
         percentage: (totalExtent - extent) / totalArea * 100
       },
       {

app/javascript/components/widgets/widgets/land-cover/primary-forest/selectors.js

@@ -1,6 +1,5 @@
 import { createSelector } from 'reselect';
 import isEmpty from 'lodash/isEmpty';
-import { getColorPalette } from 'utils/data';
 import { format } from 'd3-format';
 
 // get list data
@@ -17,19 +16,18 @@ export const parseData = createSelector(
   (data, settings, colors) => {
     if (isEmpty(data)) return null;
     const { totalArea, totalExtent, extent } = data;
-    const colorRange = getColorPalette(colors.ramp, 2);
     const secondaryExtent = totalExtent - extent < 0 ? 0 : totalExtent - extent;
     const parsedData = [
       {
         label: 'Primary Forest',
         value: extent,
-        color: colorRange[0],
+        color: colors.primaryForest,
         percentage: extent / totalArea * 100
       },
       {
         label: 'Other Tree Cover',
         value: secondaryExtent,
-        color: colorRange[1],
+        color: colors.otherCover,
         percentage: secondaryExtent / totalArea * 100
       },
       {

app/javascript/components/widgets/widgets/land-cover/tree-cover/selectors.js

@@ -1,6 +1,5 @@
 import { createSelector } from 'reselect';
 import isEmpty from 'lodash/isEmpty';
-import { getColorPalette } from 'utils/data';
 import { format } from 'd3-format';
 
 // get list data
@@ -22,12 +21,11 @@ export const parseData = createSelector(
     const hasPlantations =
       (currentLabel !== 'global' && isEmpty(whitelist)) ||
       whitelist.indexOf('plantations') > -1;
-    const colorRange = getColorPalette(colors.ramp, hasPlantations ? 2 : 1);
     const parsedData = [
       {
         label: hasPlantations && !indicator ? 'Natural Forest' : 'Tree cover',
         value: cover - plantations,
-        color: colorRange[0],
+        color: colors.naturalForest,
         percentage: (cover - plantations) / totalArea * 100
       },
       {
@@ -41,7 +39,7 @@ export const parseData = createSelector(
       parsedData.splice(1, 0, {
         label: 'Plantations',
         value: plantations,
-        color: colorRange[1],
+        color: colors.plantedForest,
         percentage: plantations / totalArea * 100
       });
     }

app/javascript/data/colors.json

@@ -1,7 +1,12 @@
 {
   "extent": {
     "main": "#a0c746",
-    "ramp": ["#364a08", "#506917", "#6b8729", "#84a637", "#a0c746", "#b8d86d", "#c7e67c", "#d2f189", "#dff7a6"],
+    "ramp": ["#364a08", "#42590E", "#506917", "#6b8729", "#84a637", "#a0c746", "#b8d86d", "#c7e67c", "#d2f189", "#dff7a6"],
+    "naturalForest": "#506917",
+    "intactForest": "#6b8729",
+    "primaryForest": "#84a637",
+    "plantedForest": "#a0c746",
+    "otherCover": "#c7e67c",
     "nonForest": "#e7e5a4"
   },
   "loss": {