diff --git a/src/components/Legend/GradientLegend.tsx b/src/components/Legend/GradientLegend.tsx index b7f9e7d5..30799b47 100644 --- a/src/components/Legend/GradientLegend.tsx +++ b/src/components/Legend/GradientLegend.tsx @@ -1,5 +1,6 @@ import clsx from 'clsx'; +import { NutritionData } from '@/domain/enums/NutritionData'; import { ColorsData } from '@/domain/props/ColorsData'; import GradientLegendProps from '@/domain/props/GradientLegendProps'; @@ -19,11 +20,8 @@ export default function GradientLegend({ colorsData, startLabel, endLabel, hasNo
{hasNotAnalyzedPoint && (
- - Not Analyzed + + {NutritionData.NOT_ANALYZED_DATA}
)} diff --git a/src/domain/constant/legend/mapLegendData.tsx b/src/domain/constant/legend/mapLegendData.tsx index 6dff0678..190dea82 100644 --- a/src/domain/constant/legend/mapLegendData.tsx +++ b/src/domain/constant/legend/mapLegendData.tsx @@ -106,6 +106,7 @@ export function mapLegendData( case GlobalInsight.FOOD: legendData.push({ title: 'Prevalence of insufficient food consumption', + hasNotAnalyzedPoint: true, colorsData: [ { color: 'fcsGradient1', title: 'Very Low', value: '0-5%' }, { color: 'fcsGradient2', title: 'Low', value: '5-10%' }, @@ -307,6 +308,7 @@ export function mapLegendData( { label: IpcPhases.PHASE_3, color: 'ipcPhase3' }, { label: IpcPhases.PHASE_4, color: 'ipcPhase4' }, { label: IpcPhases.PHASE_5, color: 'ipcPhase5' }, + { label: NutritionData.NOT_ANALYZED_DATA, color: 'notAnalyzed' }, ], }); } @@ -360,12 +362,13 @@ export function mapLegendData( records: [ { label: NutritionData.ACTUAL_DATA, color: 'nutritionActual' }, { label: NutritionData.PREDICTED_DATA, color: 'nutritionPredicted' }, - { label: NutritionData.NOT_ANALYZED_DATA, color: 'nutritionNotAnalyzed' }, + { label: NutritionData.NOT_ANALYZED_DATA, color: 'notAnalyzed' }, ], }); } else { legendData.push({ title: 'Risk of Inadequate Micronutrient Intake', + hasNotAnalyzedPoint: true, colorsData: [ { color: 'ipcGradient1', title: 'Lowest', value: '0-19%' }, { color: 'ipcGradient2', title: 'Low', value: '20-39%' }, diff --git a/src/domain/enums/NutritionData.ts b/src/domain/enums/NutritionData.ts index 41e50622..d5df0c25 100644 --- a/src/domain/enums/NutritionData.ts +++ b/src/domain/enums/NutritionData.ts @@ -1,5 +1,5 @@ export enum NutritionData { ACTUAL_DATA = 'Actual Data', PREDICTED_DATA = 'Predicted Data', - NOT_ANALYZED_DATA = 'Not analyzed Data', + NOT_ANALYZED_DATA = 'Not Analyzed Data', } diff --git a/src/operations/map/FcsCountryChoroplethOperations.tsx b/src/operations/map/FcsCountryChoroplethOperations.tsx index 6fa81171..1306750b 100644 --- a/src/operations/map/FcsCountryChoroplethOperations.tsx +++ b/src/operations/map/FcsCountryChoroplethOperations.tsx @@ -7,7 +7,7 @@ import FcsRegionTooltip from '@/components/Map/FcsRegionTooltip'; export class FcsCountryChoroplethOperations { static fcsFill(fcs?: number): string { - if (fcs === undefined) return 'hsl(var(--nextui-countriesBase))'; + if (fcs === undefined) return 'hsl(var(--nextui-notAnalyzed), 0.6)'; if (fcs <= 0.05) return '#29563A'; if (fcs <= 0.1) return '#73B358'; if (fcs <= 0.2) return '#CBCC58'; @@ -21,7 +21,7 @@ export class FcsCountryChoroplethOperations { fillColor: FcsCountryChoroplethOperations.fcsFill(feature?.properties?.fcs?.score), color: 'hsl(var(--nextui-countryBorders))', weight: 1, - fillOpacity: 0.6, + fillOpacity: 1, }; } @@ -40,7 +40,7 @@ export class FcsCountryChoroplethOperations { if (hoveredRegionFeature) { const pathLayer = layer as L.Path; pathLayer.setStyle({ - fillOpacity: 0.8, + fillOpacity: 0.6, }); const tooltipContainer = document.createElement('div'); @@ -58,7 +58,7 @@ export class FcsCountryChoroplethOperations { const pathLayer = layer as L.Path; pathLayer.setStyle({ - fillOpacity: 0.6, + fillOpacity: 1, }); pathLayer.closeTooltip(); }); diff --git a/src/operations/map/IpcChoroplethOperations.tsx b/src/operations/map/IpcChoroplethOperations.tsx index 9a0025bb..d33718be 100644 --- a/src/operations/map/IpcChoroplethOperations.tsx +++ b/src/operations/map/IpcChoroplethOperations.tsx @@ -44,14 +44,14 @@ export class IpcChoroplethOperations { }); static fillCountryIpc = (phase: number) => { - if (phase === null) return 'RGBA(58, 66, 68, 0.7)'; + if (phase === null) return 'hsl(var(--nextui-notAnalyzed), 0.6)'; if (phase === 1) return '#D1FAD1'; if (phase === 2) return '#FAE834'; if (phase === 3) return '#E88519'; if (phase === 4) return '#CD1919'; if (phase === 5) return '#731919'; if (phase === 6) return '#353F42'; - return 'RGBA(58, 66, 68, 0.7)'; + return 'hsl(var(--nextui-notAnalyzed), 0.6)'; }; static generateColorMap = (ipcData: CountryIpcData[], mapData: CountryMapDataWrapper) => { diff --git a/src/operations/map/NutritionStateChoroplethOperations.tsx b/src/operations/map/NutritionStateChoroplethOperations.tsx index 7b34d87a..9459bb7f 100644 --- a/src/operations/map/NutritionStateChoroplethOperations.tsx +++ b/src/operations/map/NutritionStateChoroplethOperations.tsx @@ -19,7 +19,7 @@ export default class NutritionStateChoroplethOperations { }; public static nutritionFillColor(value: number | null): string { - if (!value) return 'none'; + if (!value) return 'hsl(var(--nextui-notAnalyzed), 0.6)'; if (value <= 19) return '#fff3f3'; if (value <= 39) return '#fcd0ce'; if (value <= 59) return '#f88884'; @@ -34,9 +34,9 @@ export default class NutritionStateChoroplethOperations { return { fillColor: this.nutritionFillColor(value), - color: '#000', + color: 'hsl(var(--nextui-countryBorders))', weight: 1, - fillOpacity: 0.6, + fillOpacity: 1, }; } @@ -44,10 +44,10 @@ export default class NutritionStateChoroplethOperations { const pathLayer = layer as L.Path; pathLayer.on({ mouseover: () => { - pathLayer.setStyle({ fillOpacity: 1 }); + pathLayer.setStyle({ fillOpacity: 0.6 }); }, mouseout: () => { - pathLayer.setStyle({ fillOpacity: 0.6 }); + pathLayer.setStyle({ fillOpacity: 1 }); }, }); } diff --git a/src/styles/globals.css b/src/styles/globals.css index 38d903ab..3cbd943c 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -2,6 +2,10 @@ @tailwind components; @tailwind utilities; +:root { + --nextui-notAnalyzed: 0, 0%, 55%; +} + @layer base { .text-content { @apply max-w-screen-lg mx-auto; diff --git a/tailwind.config.js b/tailwind.config.js index 4f24a79b..2a965fdc 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -216,7 +216,8 @@ const config = { //nutrition points nutritionActual: '#FFB74D', nutritionPredicted: '#E3F2FD', - nutritionNotAnalyzed: '#D2D1D1', + + notAnalyzed: '#8C8C8C', //animation nutritionAnimation: '#F7B750', @@ -276,7 +277,6 @@ const config = { fatalityAlert: '#742280', climateWetAlert: '#4295D3', climateDryAlert: '#B95926', - nutritionNotAnalyzed: '#A69F9F', fcsAnimation: '#014a5e', // charts