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