feat: Not analyzed data color

jst-seminar-rostlab-tum · Dec 13, 2024 · 667ec9d · 667ec9d
1 parent ab7e186
commit 667ec9d
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 20 deletions.
diff --git 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
     <div className="relative flex flex-col items-end w-full md:w-96 px-4 py-3">
       {hasNotAnalyzedPoint && (
         <div className="flex items-center gap-x-2 mb-4">
-          <span
-            className="w-3 h-3 rounded-full"
-            style={{ backgroundColor: `hsl(var(--nextui-nutritionNotAnalyzed))` }}
-          />
-          <span className="text-xs font-medium">Not Analyzed</span>
+          <span className="w-3 h-3 rounded-full" style={{ backgroundColor: `hsl(var(--nextui-notAnalyzed))` }} />
+          <span className="text-xs font-medium">{NutritionData.NOT_ANALYZED_DATA}</span>
         </div>
       )}
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,20 +34,20 @@ export default class NutritionStateChoroplethOperations {
 
     return {
       fillColor: this.nutritionFillColor(value),
-      color: '#000',
+      color: 'hsl(var(--nextui-countryBorders))',
       weight: 1,
-      fillOpacity: 0.6,
+      fillOpacity: 1,
     };
   }
 
   public static addHoverEffect(layer: LayerWithFeature): void {
     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
@@ -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
@@ -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