diff --git a/apps/nowcasting-app/components/map/color-guide-bar.tsx b/apps/nowcasting-app/components/map/color-guide-bar.tsx index 868dac95..e586ab36 100644 --- 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 = ({ 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,7 +17,48 @@ const ColorGuideBar: React.FC = ({ 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"; @@ -41,7 +66,7 @@ const ColorGuideBar: React.FC = ({ unit }) => { return (
- {values.map((value, index) => ( + {values?.map((value, index) => (
= ({ 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 = ({ 0, 0, // on value maximum the opacity will be 1 - isNormalized ? 1 : MAX_POWER_GENERATED, + isNormalized ? 1 : maxPower, 1 ];