add national aggregation level

apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx

@@ -26,11 +26,11 @@ import { getTicks } from "../../helpers/chartUtils";
 const Y_MAX_TICKS = [
   1, 2, 3, 4, 5, 6, 9, 10, 12, 15, 18, 20, 25, 30, 40, 45, 50, 60, 75, 80, 90, 100, 150, 200, 250,
   300, 350, 400, 450, 500, 600, 700, 800, 900, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000,
-  6000, 7000, 8000, 9000, 10000
+  6000, 7000, 8000, 9000, 10000, 12000, 14000, 15000, 16000, 18000, 20000
 ];
 
 const GspPvRemixChart: FC<{
-  gspId: number;
+  gspId: number | string;
   selectedTime: string;
   close: () => void;
   setTimeOfInterest: (t: string) => void;
@@ -126,8 +126,11 @@ const GspPvRemixChart: FC<{
   let yMax = gspInstalledCapacity || 100;
   yMax = getRoundedTickBoundary(yMax, Y_MAX_TICKS);
 
-  const title =
-    nationalAggregationLevel === NationalAggregation.GSP ? gspName || "" : String(gspId);
+  let title = nationalAggregationLevel === NationalAggregation.GSP ? gspName || "" : String(gspId);
+
+  if (nationalAggregationLevel === NationalAggregation.national) {
+    title = "National GSP Sum";
+  }
 
   return (
     <>

apps/nowcasting-app/components/charts/gsp-pv-remix-chart/use-get-gsp-data.ts

@@ -2,6 +2,7 @@ import { API_PREFIX, getAllForecastUrl } from "../../../constant";
 import { FcAllResData, ForecastData, GspEntities, PvRealData } from "../../types";
 import dnoGspGroupings from "../../../data/dno_gsp_groupings.json";
 import ngGspZoneGroupings from "../../../data/ng_gsp_zone_groupings.json";
+import nationalGspZone from "../../../data/national_gsp_zone.json";
 import useGlobalState from "../../helpers/globalState";
 import { useLoadDataFromApi } from "../../hooks/useLoadDataFromApi";
 import { NationalAggregation } from "../../map/types";
@@ -52,9 +53,11 @@ const useGetGspData = (gspId: number | string) => {
   const [nHourForecast] = useGlobalState("nHourForecast");
   const [nationalAggregationLevel] = useGlobalState("nationalAggregationLevel");
   let errors: Error[] = [];
-  let isZoneAggregation = [NationalAggregation.DNO, NationalAggregation.zone].includes(
-    nationalAggregationLevel
-  );
+  let isZoneAggregation = [
+    NationalAggregation.DNO,
+    NationalAggregation.zone,
+    NationalAggregation.national
+  ].includes(nationalAggregationLevel);
 
   let gspIds: number[] = typeof gspId === "number" ? [gspId] : [];
   if (nationalAggregationLevel === NationalAggregation.DNO) {
@@ -64,6 +67,9 @@ const useGetGspData = (gspId: number | string) => {
   if (nationalAggregationLevel === NationalAggregation.zone) {
     gspIds = ngGspZoneGroupings[gspId as keyof typeof ngGspZoneGroupings] || [];
   }
+  if (nationalAggregationLevel === NationalAggregation.national) {
+    gspIds = nationalGspZone[gspId as keyof typeof nationalGspZone] || [];
+  }
 
   // TODO add check for gspIds before making the api call
   const { data: pvRealDataInRaw, error: pvRealInDayError } = useLoadDataFromApi<

apps/nowcasting-app/components/charts/pv-remix-chart.tsx

@@ -36,6 +36,7 @@ const PvRemixChart: FC<{
     nationalNHourData,
     allGspForecastData,
     allGspRealData,
+    allGspSystemData,
     gspDeltas
   } = combinedData;
   const {
@@ -104,6 +105,7 @@ const PvRemixChart: FC<{
               timeOfInterest={selectedTime}
               setTimeOfInterest={setSelectedTime}
               data={chartData}
+              // yMax={allGspSystemData?.[0].installedCapacityMw || MAX_NATIONAL_GENERATION_MW}
               yMax={MAX_NATIONAL_GENERATION_MW}
               visibleLines={visibleLines}
             />

apps/nowcasting-app/components/helpers/data.ts

@@ -3,8 +3,10 @@ import { CombinedData, GspDeltaValue, GspZoneGroupings, MapFeatureObject } from
 import { Feature, FeatureCollection, GeoJsonProperties, Geometry, Position } from "geojson";
 import gspShapeData from "../../data/gsp_regions_20220314.json";
 import dnoShapeData from "../../data/dno_regions_lat_long_converted.json";
+import nationalShapeData from "../../data/national_gsp_shape.json";
 import ngGSPZoneGroupings from "../../data/ng_gsp_zone_groupings.json";
 import dnoGspGroupings from "../../data/dno_gsp_groupings.json";
+import nationalGspZone from "../../data/national_gsp_zone.json";
 import ngZones from "../../data/ng_zones.json";
 import { formatISODateString, getOpacityValueFromPVNormalized, getRoundedPv } from "./utils";
 import { get30MinNow } from "./globalState";
@@ -244,15 +246,26 @@ export const generateGeoJsonForecastData: (
     );
   } else if (aggregation === NationalAggregation.DNO) {
     console.log("aggregating to DNO");
+    const dnoShapeJson = dnoShapeData as FeatureCollection;
     features = mapZoneFeatures(
-      dnoShapeData.features as Feature<Geometry, GeoJsonProperties>[],
+      dnoShapeJson.features as Feature<Geometry, GeoJsonProperties>[],
       dnoGspGroupings,
       combinedData,
       gspForecastsDataByTimestamp,
       targetTime,
       undefined,
       "LongName"
     );
+  } else if (aggregation === NationalAggregation.national) {
+    console.log("aggregating to national");
+    const nationalShapeJson = nationalShapeData as FeatureCollection;
+    features = mapZoneFeatures(
+      nationalShapeJson.features as Feature<Geometry, GeoJsonProperties>[],
+      nationalGspZone,
+      combinedData,
+      gspForecastsDataByTimestamp,
+      targetTime
+    );
   }
   const forecastGeoJson = {
     type: "FeatureCollection" as "FeatureCollection",

apps/nowcasting-app/components/helpers/globalState.tsx

@@ -53,7 +53,7 @@ export type GlobalStateType = {
   selectedISOTime: string;
   timeNow: string;
   intervals: any[];
-  clickedGspId?: number;
+  clickedGspId?: number | string;
   clickedSiteGroupId?: string;
   forecastCreationTime?: string;
   view: VIEWS;

apps/nowcasting-app/components/map/measuringUnit.tsx

@@ -110,6 +110,14 @@ const MeasuringUnit = ({
             text={"DNO"}
             value={NationalAggregation.DNO}
           />
+          <MapUIButton<NationalAggregation>
+            id={"GroupButtonZones"}
+            active={nationalAggregation === NationalAggregation.national}
+            isLoading={isLoading}
+            onToggle={onToggleAggregation}
+            text={"National"}
+            value={NationalAggregation.national}
+          />
         </div>
       </div>
     </>

apps/nowcasting-app/components/map/types.ts

@@ -9,7 +9,8 @@ export enum ActiveUnit {
 export enum NationalAggregation {
   GSP = "GSP",
   zone = "Zone",
-  DNO = "DNO"
+  DNO = "DNO",
+  national = "National"
 }
 
 export enum SelectedData {