map: updates palette colour

Vizzuality · Oct 16, 2023 · fcb479c · fcb479c
1 parent 0c7a2f9
commit fcb479c
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 83 deletions.
diff --git a/app/hooks/features/index.ts b/app/hooks/features/index.ts
@@ -297,9 +297,9 @@ export function useSelectedFeatures(
         }
 
         const color =
-          features.length > COLORS['features-preview'].ramp.length
-            ? chroma.scale(COLORS['features-preview'].ramp).colors(features.length)[index]
-            : COLORS['features-preview'].ramp[index];
+          features.length > COLORS.features.ramp.length
+            ? chroma.scale(COLORS.features.ramp).colors(features.length)[index]
+            : COLORS.features.ramp[index];
 
         return {
           ...d,

diff --git a/app/hooks/map/constants.tsx b/app/hooks/map/constants.tsx
@@ -16,59 +16,34 @@ import SQUARE_SVG from 'svgs/map/square.svg?sprite';
 import { UseLegend } from './types';
 
 export const COLORS = {
-  primary: '#00BFFF',
-  'features-preview': {
-    default: '#FFCC00',
-    hover: '#FF9900',
-    ramp: [
-      '#4b5eef',
-      '#f15100',
-      '#31a904',
-      '#2c18bd',
-      '#bf3220',
-      '#9d2e38',
-      '#e5e001',
-      '#f15100',
-      '#f4af00',
-      '#218134',
-      '#775b32',
-      '#cb9c00',
-      '#294635',
-      '#ba5da9',
-      '#5c3b85',
-      '#de4210',
-    ],
-  },
-  wdpa: '#12EC80',
-  'wdpa-preview': '#00f',
-  features: '#6F53F7',
+  primary: '#01768F',
+  wdpa: '#5156CB',
+  'wdpa-preview': '#01768F',
   highlightFeatures: '#BE6BFF',
-  abundance: {
-    default: '#FFF',
+  features: {
+    default: '#24242D',
     ramp: [
-      '#4b5eef',
-      '#f15100',
-      '#31a904',
-      '#2c18bd',
-      '#bf3220',
-      '#9d2e38',
-      '#e5e001',
-      '#f15100',
-      '#f4af00',
-      '#218134',
-      '#775b32',
-      '#cb9c00',
-      '#294635',
-      '#ba5da9',
-      '#5c3b85',
-      '#de4210',
+      '#66C379',
+      '#3C8BC4',
+      '#8B91EC',
+      '#E98842',
+      '#51A1B2',
+      '#CFD897',
+      '#BE6BFF',
+      '#B0A6CC',
+      '#71AADF',
+      '#E896BE',
+      '#C48259',
+      '#E9AB42',
+      '#B059B8',
     ],
   },
-  include: '#03E7D1',
-  exclude: '#FF472E',
-  available: '#FFCA42',
-  cost: ['#3C1002', '#FF440A'],
-  frequency: ['#0C2C32', '#006D83', '#008B8C', '#0BC6C2'],
+  include: '#66F39F',
+  exclude: '#FF6847',
+  available: '#F1B61E',
+  cost: ['#292F4D', '#732669', '#DE7239', '#FAFCA8'],
+  frequency: ['#292F4D', '#4D5784', '#99D693', '#FFFFC6'],
+  solution: '#9FD1F7',
   compare: {
     '#1F1F1F': ['00'],
     '#0F0559': ['01', '10', '11'],
@@ -287,9 +262,9 @@ export const LEGEND_LAYERS = {
       },
       items: items.map((item, i) => {
         const COLOR =
-          items.length > COLORS['features-preview'].ramp.length
-            ? chroma.scale(COLORS['features-preview'].ramp).colors(items.length)[i]
-            : COLORS['features-preview'].ramp[i];
+          items.length > COLORS.features.ramp.length
+            ? chroma.scale(COLORS.features.ramp).colors(items.length)[i]
+            : COLORS.features.ramp[i];
 
         return {
           value: item.name,
@@ -351,7 +326,7 @@ export const LEGEND_LAYERS = {
       },
       items: [
         {
-          color: COLORS.abundance.default,
+          color: COLORS.features.default,
           value: `${amountRange.min === amountRange.max ? 0 : amountRange.min}`,
         },
         {
@@ -385,6 +360,14 @@ export const LEGEND_LAYERS = {
         },
         {
           color: COLORS.cost[1],
+          value: null,
+        },
+        {
+          color: COLORS.cost[2],
+          value: null,
+        },
+        {
+          color: COLORS.cost[3],
           value: `${max}`,
         },
       ],
@@ -522,7 +505,7 @@ export const LEGEND_LAYERS = {
       <Icon
         icon={HEXAGON_SVG}
         className="mt-0.5 h-3.5 w-3.5 stroke-current stroke-2"
-        style={{ color: COLORS.primary }}
+        style={{ color: COLORS.solution }}
       />
     ),
     settingsManager: {

diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts
@@ -403,11 +403,11 @@ export function useTargetedPreviewLayers({
       const ID = splitted ? parentId : id;
 
       const COLOR =
-        selectedFeatures.length > COLORS['features-preview'].ramp.length
-          ? chroma.scale(COLORS['features-preview'].ramp).colors(selectedFeatures.length)[
+        selectedFeatures.length > COLORS.features.ramp.length
+          ? chroma.scale(COLORS.features.ramp).colors(selectedFeatures.length)[
               selectedFeatures.length - 1 - index
             ]
-          : COLORS['features-preview'].ramp[selectedFeatures.length - 1 - index];
+          : COLORS.features.ramp[selectedFeatures.length - 1 - index];
 
       return {
         id: `feature-${id}-targeted-preview-layer-${cache}`,
@@ -770,8 +770,12 @@ export function usePUGridLayer({
                       ['get', 'costValue'],
                       cost.min === cost.max ? 0 : cost.min,
                       COLORS.cost[0],
-                      cost.max,
+                      cost.max * 0.33,
                       COLORS.cost[1],
+                      cost.max * 0.66,
+                      COLORS.cost[2],
+                      cost.max,
+                      COLORS.cost[3],
                     ],
                     'fill-opacity': 0.75 * CostOpacity,
                   },
@@ -902,7 +906,7 @@ export function usePUGridLayer({
                   },
                   filter: ['all', ['in', `-${runId}-`, ['get', 'valuePosition']]],
                   paint: {
-                    'fill-color': COLORS.primary,
+                    'fill-color': COLORS.solution,
                     'fill-opacity': 0.75 * SolutionOpacity,
                   },
                 },

diff --git a/app/layout/project/sidebar/project/inventory-panel/features/index.tsx b/app/layout/project/sidebar/project/inventory-panel/features/index.tsx
@@ -57,9 +57,9 @@ const InventoryPanelFeatures = ({ noData: noDataMessage }: { noData: string }):
       select: ({ data }) => {
         return data?.map((feature, index) => {
           const color =
-            data.length > COLORS['features-preview'].ramp.length
-              ? chroma.scale(COLORS['features-preview'].ramp).colors(data.length)[index]
-              : COLORS['features-preview'].ramp[index];
+            data.length > COLORS.features.ramp.length
+              ? chroma.scale(COLORS.features.ramp).colors(data.length)[index]
+              : COLORS.features.ramp[index];
 
           return {
             id: feature.id,

diff --git a/...layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx b/...layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx
@@ -186,13 +186,13 @@ export const ActionsSummary = ({
           <span className="flex flex-1 items-center space-x-2">
             <Icon
               icon={HEXAGON_SVG}
-              className="h-5 w-5 fill-none stroke-current stroke-[1.5px] text-green-400"
+              className="h-5 w-5 fill-none stroke-current stroke-[1.5px] text-[#66F39F]"
             />
             <span className="text-sm text-white">Included areas</span>
           </span>
           <span
             className={cn('flex flex-1 items-center justify-center text-sm text-white', {
-              'text-green-400': puAction === 'include',
+              'text-[#66F39F]': puAction === 'include',
             })}
           >
             {puTmpIncludedValue.length + puIncludedValue.length} PU
@@ -225,13 +225,13 @@ export const ActionsSummary = ({
           <span className="flex flex-1 items-center space-x-2">
             <Icon
               icon={HEXAGON_SVG}
-              className="h-5 w-5 fill-none stroke-current stroke-[1.5px] text-red-700"
+              className="h-5 w-5 fill-none stroke-current stroke-[1.5px] text-[#FF6847]"
             />
             <span className="text-sm text-white">Excluded areas</span>
           </span>
           <span
             className={cn('flex flex-1 items-center justify-center text-sm text-white', {
-              'text-red-700': puAction === 'exclude',
+              'text-[#FF6847]': puAction === 'exclude',
             })}
           >
             {puTmpExcludedValue.length + puExcludedValue.length} PU
@@ -264,13 +264,13 @@ export const ActionsSummary = ({
           <span className="flex flex-1 items-center space-x-2">
             <Icon
               icon={HEXAGON_SVG}
-              className="h-5 w-5 fill-none stroke-current stroke-[1.5px] text-yellow-400"
+              className="h-5 w-5 fill-none stroke-current stroke-[1.5px] text-[#F1B61E]"
             />
             <span className="text-sm text-white">Available areas</span>
           </span>
           <span
             className={cn('flex flex-1 items-center justify-center text-sm text-white', {
-              'text-yellow-400': puAction === 'available',
+              'text-[#F1B61E]': puAction === 'available',
             })}
           >
             {puTmpAvailableValue.length + puAvailableValue.length} PU

diff --git a/app/layout/projects/show/map/legend/hooks/index.ts b/app/layout/projects/show/map/legend/hooks/index.ts
@@ -115,9 +115,9 @@ export const useFeatureAbundanceLegend = () => {
     projectFeaturesQuery.data?.map(
       ({ id, featureClassName, amountRange = { min: 5000, max: 100000 } }, index) => {
         const color =
-          totalItems > COLORS['features-preview'].ramp.length
-            ? chroma.scale(COLORS['features-preview'].ramp).colors(totalItems)[index]
-            : COLORS['features-preview'].ramp[index];
+          totalItems > COLORS.features.ramp.length
+            ? chroma.scale(COLORS.features.ramp).colors(totalItems)[index]
+            : COLORS.features.ramp[index];
 
         return {
           id,
@@ -166,9 +166,9 @@ export const useFeaturesLegend = () => {
   const items =
     projectFeaturesQuery.data?.map(({ id, featureClassName }, index) => {
       const color =
-        totalItems > COLORS['features-preview'].ramp.length
-          ? chroma.scale(COLORS['features-preview'].ramp).colors(totalItems)[index]
-          : COLORS['features-preview'].ramp[index];
+        totalItems > COLORS.features.ramp.length
+          ? chroma.scale(COLORS.features.ramp).colors(totalItems)[index]
+          : COLORS.features.ramp[index];
 
       return {
         id,

diff --git a/app/layout/scenarios/edit/map/legend/hooks/index.ts b/app/layout/scenarios/edit/map/legend/hooks/index.ts
@@ -135,9 +135,9 @@ export const useFeatureAbundanceLegend = () => {
   const items =
     features?.map(({ id, name, amountRange = { min: 5000, max: 100000 } }, index) => {
       const color =
-        totalItems > COLORS['features-preview'].ramp.length
-          ? chroma.scale(COLORS['features-preview'].ramp).colors(totalItems)[index]
-          : COLORS['features-preview'].ramp[index];
+        totalItems > COLORS.features.ramp.length
+          ? chroma.scale(COLORS.features.ramp).colors(totalItems)[index]
+          : COLORS.features.ramp[index];
 
       return {
         id,
@@ -183,9 +183,9 @@ export const useFeaturesLegend = () => {
   const items =
     features?.map(({ id, name }, index) => {
       const color =
-        totalItems > COLORS['features-preview'].ramp.length
-          ? chroma.scale(COLORS['features-preview'].ramp).colors(totalItems)[index]
-          : COLORS['features-preview'].ramp[index];
+        totalItems > COLORS.features.ramp.length
+          ? chroma.scale(COLORS.features.ramp).colors(totalItems)[index]
+          : COLORS.features.ramp[index];
 
       return {
         id,