scale map legend for zones

openclimatefix · Nov 22, 2024 · 221d5d1 · 221d5d1
1 parent 99b9900
commit 221d5d1
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 24 deletions.
diff --git a/apps/nowcasting-app/components/map/color-guide-bar.tsx b/apps/nowcasting-app/components/map/color-guide-bar.tsx
@@ -1,29 +1,13 @@
 import { useMemo } from "react";
-import { ActiveUnit } from "./types";
+import { ActiveUnit, NationalAggregation } from "./types";
+import useGlobalState from "../helpers/globalState";
 
 type ColorGuideBarProps = { unit: ActiveUnit };
 
 const ColorGuideBar: React.FC<ColorGuideBarProps> = ({ unit }) => {
+  const [nationalAggregationLevel] = useGlobalState("nationalAggregationLevel");
   const values = useMemo(() => {
-    if (unit === ActiveUnit.MW) {
-      return [
-        { value: "0-50", opacity: 3, textColor: "ocf-gray-300" },
-        { value: "50-150", opacity: 20, textColor: "ocf-gray-300" },
-        { value: "150-250", opacity: 40, textColor: "ocf-gray-300" },
-        { value: "250-350", opacity: 60, textColor: "black" },
-        { value: "350-450", opacity: 80, textColor: "black" },
-        { value: "450+", opacity: 100, textColor: "black" }
-      ];
-    } else if (unit === ActiveUnit.capacity) {
-      return [
-        { value: "0-50", opacity: 3, textColor: "ocf-gray-300" },
-        { value: "50-150", opacity: 20, textColor: "ocf-gray-300" },
-        { value: "150-250", opacity: 40, textColor: "ocf-gray-300" },
-        { value: "250-350", opacity: 60, textColor: "black" },
-        { value: "350-450", opacity: 80, textColor: "black" },
-        { value: "450+", opacity: 100, textColor: "black" }
-      ];
-    } else {
+    if (unit === ActiveUnit.percentage) {
       return [
         { value: "0-10", opacity: 3, textColor: "ocf-gray-300" },
         { value: "10-20", opacity: 20, textColor: "ocf-gray-300" },
@@ -33,15 +17,56 @@ const ColorGuideBar: React.FC<ColorGuideBarProps> = ({ unit }) => {
         { value: "70+", opacity: 100, textColor: "black" }
       ];
     }
-  }, [unit]);
+    if (nationalAggregationLevel === NationalAggregation.GSP) {
+      if (unit === ActiveUnit.MW) {
+        return [
+          { value: "0-50", opacity: 3, textColor: "ocf-gray-300" },
+          { value: "50-150", opacity: 20, textColor: "ocf-gray-300" },
+          { value: "150-250", opacity: 40, textColor: "ocf-gray-300" },
+          { value: "250-350", opacity: 60, textColor: "black" },
+          { value: "350-450", opacity: 80, textColor: "black" },
+          { value: "450+", opacity: 100, textColor: "black" }
+        ];
+      } else if (unit === ActiveUnit.capacity) {
+        return [
+          { value: "0-50", opacity: 3, textColor: "ocf-gray-300" },
+          { value: "50-150", opacity: 20, textColor: "ocf-gray-300" },
+          { value: "150-250", opacity: 40, textColor: "ocf-gray-300" },
+          { value: "250-350", opacity: 60, textColor: "black" },
+          { value: "350-450", opacity: 80, textColor: "black" },
+          { value: "450+", opacity: 100, textColor: "black" }
+        ];
+      }
+    } else if (nationalAggregationLevel === NationalAggregation.zone) {
+      if (unit === ActiveUnit.MW) {
+        return [
+          { value: "0-500", opacity: 3, textColor: "ocf-gray-300" },
+          { value: "500-1000", opacity: 20, textColor: "ocf-gray-300" },
+          { value: "1000-1500", opacity: 40, textColor: "ocf-gray-300" },
+          { value: "1500-2000", opacity: 60, textColor: "black" },
+          { value: "2000-2500", opacity: 80, textColor: "black" },
+          { value: "2500+", opacity: 100, textColor: "black" }
+        ];
+      } else if (unit === ActiveUnit.capacity) {
+        return [
+          { value: "0-500", opacity: 3, textColor: "ocf-gray-300" },
+          { value: "500-1000", opacity: 20, textColor: "ocf-gray-300" },
+          { value: "1000-1500", opacity: 40, textColor: "ocf-gray-300" },
+          { value: "1500-2000", opacity: 60, textColor: "black" },
+          { value: "2000-2500", opacity: 80, textColor: "black" },
+          { value: "2500+", opacity: 100, textColor: "black" }
+        ];
+      }
+    }
+  }, [unit, nationalAggregationLevel]);
   let unitText = unit === ActiveUnit.MW ? "MW" : "%";
   if (unit === ActiveUnit.capacity) {
     unitText = "MW";
   }
   return (
     <div className="absolute bg-mapbox-black-700 bottom-12 flex left-0 ml-12 z-20">
       <div className="flex justify-between text-xs h-full text-ocf-black-600 font-bold relative items-end md:text-sm dash:text-xl dash:tracking-wide">
-        {values.map((value, index) => (
+        {values?.map((value, index) => (
           <div
             key={value.value}
             className={`px-3 py-[1px] dash:px-4 dash:py-[2px] bg-ocf-yellow/${

diff --git a/apps/nowcasting-app/components/map/pvLatestMap.tsx b/apps/nowcasting-app/components/map/pvLatestMap.tsx
@@ -2,7 +2,7 @@ import React, { Dispatch, SetStateAction, useEffect, useMemo, useState } from "r
 import mapboxgl, { CircleLayer, Expression } from "mapbox-gl";
 
 import { FailedStateMap, LoadStateMap, Map, MeasuringUnit } from "./";
-import { ActiveUnit, SelectedData } from "./types";
+import { ActiveUnit, NationalAggregation, SelectedData } from "./types";
 import { MAX_POWER_GENERATED, VIEWS } from "../../constant";
 import useGlobalState from "../helpers/globalState";
 import { formatISODateStringHuman } from "../helpers/utils";
@@ -107,6 +107,9 @@ const PvLatestMap: React.FC<PvLatestMapProps> = ({
 
   console.log("## shouldUpdateMap render", shouldUpdateMap);
 
+  const maxPower =
+    nationalAggregationLevel === NationalAggregation.GSP ? MAX_POWER_GENERATED : 2500;
+
   const getFillOpacity = (selectedData: string, isNormalized: boolean): Expression => [
     "interpolate",
     ["linear"],
@@ -115,7 +118,7 @@ const PvLatestMap: React.FC<PvLatestMapProps> = ({
     0,
     0,
     // on value maximum the opacity will be 1
-    isNormalized ? 1 : MAX_POWER_GENERATED,
+    isNormalized ? 1 : maxPower,
     1
   ];