Merge pull request #1594 from Vizzuality/MRXN23-523-fe-id-26-2-minor

[MRXN23-523]: represents cost surfaces with flat ranges with basic colors
Vizzuality · Nov 22, 2023 · 801e74e · 801e74e · vercel · Nov 22, 2023
2 parents cd2d950 + 609d4f3
commit 801e74e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 21 deletions.
diff --git a/app/hooks/map/constants.tsx b/app/hooks/map/constants.tsx
@@ -354,28 +354,53 @@ export const LEGEND_LAYERS = {
   }) => {
     const { items, onChangeVisibility } = options;
 
-    return items?.map(({ id, name, min = 1, max = 100 }) => ({
-      id,
-      name,
-      type: 'gradient' as LegendItemType,
-      settingsManager: {
-        opacity: true,
-        visibility: true,
-      },
-      items: [
-        {
-          color: COLORS.cost[0],
-          value: `${min === max ? 0 : min}`,
+    return items?.map(({ id, name, min = 1, max = 100 }) => {
+      // ? if the cost surface has a flat range, a gradient makes no sense
+      if (min === max) {
+        return {
+          id,
+          name,
+          type: 'basic' as LegendItemType,
+          icon: (
+            <FaSquare
+              className="h-3 w-3"
+              style={{ color: COLORS.cost[1], minWidth: 12, minHeight: 12 }}
+            />
+          ),
+          items: [],
+          settingsManager: {
+            opacity: true,
+            visibility: true,
+          },
+          onChangeVisibility: () => {
+            onChangeVisibility?.(id);
+          },
+        };
+      }
+
+      return {
+        id,
+        name,
+        type: 'gradient' as LegendItemType,
+        settingsManager: {
+          opacity: true,
+          visibility: true,
         },
-        {
-          color: COLORS.cost[1],
-          value: `${max}`,
+        items: [
+          {
+            color: COLORS.cost[0],
+            value: min,
+          },
+          {
+            color: COLORS.cost[1],
+            value: `${max}`,
+          },
+        ],
+        onChangeVisibility: () => {
+          onChangeVisibility?.(id);
         },
-      ],
-      onChangeVisibility: () => {
-        onChangeVisibility?.(id);
-      },
-    }));
+      };
+    });
   },
   'lock-available': (options) => {
     const { puAvailableValue, onChangeVisibility } = options;

diff --git a/app/hooks/map/index.ts b/app/hooks/map/index.ts
@@ -217,7 +217,7 @@ export function useCostSurfaceLayer({
                 layerSettings.max,
                 COLORS.cost[1],
               ],
-              'fill-opacity': 0.75 * (layerSettings.opacity || 1),
+              'fill-opacity': 0.75 * (layerSettings.opacity ?? 1),
             },
           },
         ],