From fcb479c2ccad4615ec3a6fd70f604f679a9731e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?= Date: Mon, 16 Oct 2023 12:04:04 +0200 Subject: [PATCH] map: updates palette colour --- app/hooks/features/index.ts | 6 +- app/hooks/map/constants.tsx | 91 ++++++++----------- app/hooks/map/index.ts | 14 ++- .../inventory-panel/features/index.tsx | 6 +- .../actions-summary/index.tsx | 12 +-- .../projects/show/map/legend/hooks/index.ts | 12 +-- .../scenarios/edit/map/legend/hooks/index.ts | 12 +-- 7 files changed, 70 insertions(+), 83 deletions(-) diff --git a/app/hooks/features/index.ts b/app/hooks/features/index.ts index a91829a9b5..79189fc9b2 100644 --- 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 index a2b5382519..4307006051 100644 --- 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 = { ), settingsManager: { diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts index dd01084a89..43cdf91af3 100644 --- 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 index c1973c35cc..39bf7ba76e 100644 --- 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/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx index 69b2e56e24..0798f41b99 100644 --- a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx +++ b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary/index.tsx @@ -186,13 +186,13 @@ export const ActionsSummary = ({ Included areas {puTmpIncludedValue.length + puIncludedValue.length} PU @@ -225,13 +225,13 @@ export const ActionsSummary = ({ Excluded areas {puTmpExcludedValue.length + puExcludedValue.length} PU @@ -264,13 +264,13 @@ export const ActionsSummary = ({ Available areas {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 index 2ef3feab85..afbcd23d4c 100644 --- 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 index a8f25064b0..9dd8f00a59 100644 --- 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,