From 7098aac259661b58162f8e01848afbc525d81af4 Mon Sep 17 00:00:00 2001
From: braddf <bradbdf@gmail.com>
Date: Wed, 4 Sep 2024 16:51:16 +0100
Subject: [PATCH] Refactor all 4hr refs to N Hour

---
 .../components/charts/ChartLegend.tsx         | 14 +++----
 .../charts/DataLoadingChartStatus.tsx         | 12 +++---
 .../charts/delta-view/delta-view-chart.tsx    | 19 ++++------
 .../charts/gsp-pv-remix-chart/index.tsx       |  7 ++--
 .../gsp-pv-remix-chart/use-get-gsp-data.ts    | 13 +++----
 .../components/charts/pv-remix-chart.tsx      |  8 ++--
 .../components/charts/remix-line.tsx          | 38 +++++++++----------
 .../solar-site-view/solar-site-chart.tsx      | 18 ---------
 .../charts/use-format-chart-data-sites.tsx    |  8 ++--
 .../charts/use-format-chart-data.tsx          |  8 ++--
 .../components/helpers/globalState.tsx        | 11 +++---
 .../components/helpers/utils.ts               | 14 +++----
 .../components/hooks/useLoadDataFromApi.tsx   |  4 +-
 .../layout/header/profile-dropdown.tsx        |  6 +--
 .../components/map/deltaMap.tsx               |  2 +-
 apps/nowcasting-app/components/types.d.ts     | 10 ++---
 apps/nowcasting-app/constant.ts               |  2 +-
 .../nowcasting-app/cypress/e2e/pvLatest.cy.js |  6 +--
 apps/nowcasting-app/package.json              |  2 +-
 apps/nowcasting-app/pages/index.tsx           | 33 ++++++++--------
 20 files changed, 103 insertions(+), 132 deletions(-)

diff --git a/apps/nowcasting-app/components/charts/ChartLegend.tsx b/apps/nowcasting-app/components/charts/ChartLegend.tsx
index 81756c11..aad4cad8 100644
--- a/apps/nowcasting-app/components/charts/ChartLegend.tsx
+++ b/apps/nowcasting-app/components/charts/ChartLegend.tsx
@@ -3,18 +3,16 @@ import { ChartInfo } from "../../ChartInfo";
 import { InfoIcon, LegendLineGraphIcon } from "../icons/icons";
 import { FC, useEffect } from "react";
 import useGlobalState from "../helpers/globalState";
-import { getRounded4HoursAgoString } from "../helpers/utils";
 import LegendItem from "./LegendItem";
-import { NHR_FORECAST_OPTIONS } from "../../constant";
+import { N_HOUR_FORECAST_OPTIONS } from "../../constant";
 
 type ChartLegendProps = {
   className?: string;
 };
 export const ChartLegend: FC<ChartLegendProps> = ({ className }) => {
-  const [showNhrView] = useGlobalState("show4hView");
+  const [showNHourView] = useGlobalState("showNHourView");
   const [nHourForecast, setNHourForecast] = useGlobalState("nHourForecast");
 
-  const fourHoursAgo = getRounded4HoursAgoString();
   const legendItemContainerClasses = `flex flex-initial flex-col @sm:gap-1 @6xl:gap-6 @6xl:flex-row ${
     className ? ` ${className}` : ""
   }`;
@@ -49,12 +47,12 @@ export const ChartLegend: FC<ChartLegendProps> = ({ className }) => {
             {/*  label={"OCF Final Forecast"}*/}
             {/*  dataKey={`PAST_FORECAST`}*/}
             {/*/>*/}
-            {showNhrView && (
+            {showNHourView && (
               <LegendItem
                 iconClasses={"text-ocf-orange"}
                 dashStyle={"both"}
                 label={`OCF ${nHourForecast}hr Forecast`}
-                dataKey={`NHR_FORECAST`}
+                dataKey={`N_HOUR_FORECAST`}
               />
             )}
           </div>
@@ -67,9 +65,9 @@ export const ChartLegend: FC<ChartLegendProps> = ({ className }) => {
                 onChange={(e) => setNHourForecast(Number(e.target.value))}
                 className="text-sm px-2 py-0 rounded-md"
               >
-                {NHR_FORECAST_OPTIONS.map((option) => (
+                {N_HOUR_FORECAST_OPTIONS.map((option) => (
                   <option
-                    key={`NHr-select-option-${option}`}
+                    key={`N-hour-select-option-${option}`}
                     className="text-black bg-white"
                     value={option}
                   >
diff --git a/apps/nowcasting-app/components/charts/DataLoadingChartStatus.tsx b/apps/nowcasting-app/components/charts/DataLoadingChartStatus.tsx
index 49eb8f3a..4cce6719 100644
--- a/apps/nowcasting-app/components/charts/DataLoadingChartStatus.tsx
+++ b/apps/nowcasting-app/components/charts/DataLoadingChartStatus.tsx
@@ -31,7 +31,7 @@ const DataLoadingChartStatus = <
   const isLoadingData =
     !loadingState.initialLoadComplete ||
     (loadingState.showMessage && !!loadingState.message.length);
-  const [show4hView] = useGlobalState("show4hView");
+  const [showNHourView] = useGlobalState("showNHourView");
 
   if (!loadingState || !loadingState.endpointStates || !loadingState.endpointStates.type)
     return null;
@@ -42,7 +42,7 @@ const DataLoadingChartStatus = <
         isLoadingData={isLoadingData}
         message={loadingState.message}
         endpointStates={loadingState.endpointStates}
-        show4hView={show4hView}
+        showNHourView={showNHourView}
       />
     );
   } else if (isEndpointStateType<SitesEndpointStates>(loadingState.endpointStates, "sites")) {
@@ -51,7 +51,7 @@ const DataLoadingChartStatus = <
         message={loadingState.message}
         endpointStates={loadingState.endpointStates}
         isLoadingData={isLoadingData}
-        show4hView={show4hView}
+        showNHourView={showNHourView}
       />
     );
   }
@@ -63,13 +63,13 @@ type EndpointStatusListProps<K> = {
   isLoadingData: boolean;
   message: string;
   endpointStates: K;
-  show4hView: boolean | undefined;
+  showNHourView: boolean | undefined;
 };
 const EndpointStatusList = <K extends NationalEndpointStates | SitesEndpointStates>({
   isLoadingData,
   message,
   endpointStates,
-  show4hView = false
+  showNHourView = false
 }: EndpointStatusListProps<K>) => {
   const endpointsArray = Array.from(Object.entries(endpointStates));
   return (
@@ -92,7 +92,7 @@ const EndpointStatusList = <K extends NationalEndpointStates | SitesEndpointStat
             {!!endpointsArray.length &&
               endpointsArray.map(([key, val]) => {
                 if (!endpointStates) return null;
-                if (key === "national4Hour" && !show4hView) return null;
+                if (key === "nationalNHour" && !showNHourView) return null;
                 // Filter out "type" key with string state value
                 if (typeof val === "string") return null;
                 const state = endpointStates[key as keyof typeof endpointStates];
diff --git a/apps/nowcasting-app/components/charts/delta-view/delta-view-chart.tsx b/apps/nowcasting-app/components/charts/delta-view/delta-view-chart.tsx
index ea2a78eb..268b7779 100644
--- a/apps/nowcasting-app/components/charts/delta-view/delta-view-chart.tsx
+++ b/apps/nowcasting-app/components/charts/delta-view/delta-view-chart.tsx
@@ -4,11 +4,7 @@ import { DELTA_BUCKET, MAX_NATIONAL_GENERATION_MW } from "../../../constant";
 import ForecastHeader from "../forecast-header";
 import useGlobalState, { get30MinSlot } from "../../helpers/globalState";
 import useFormatChartData from "../use-format-chart-data";
-import {
-  convertToLocaleDateString,
-  formatISODateString,
-  getRounded4HoursAgoString
-} from "../../helpers/utils";
+import { convertToLocaleDateString, formatISODateString } from "../../helpers/utils";
 import GspPvRemixChart from "../gsp-pv-remix-chart";
 import { useStopAndResetTime } from "../../hooks/use-and-update-selected-time";
 import Spinner from "../../icons/spinner";
@@ -254,7 +250,7 @@ type DeltaChartProps = {
 };
 const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErrors }) => {
   // const [view] = useGlobalState("view");
-  const [show4hView] = useGlobalState("show4hView");
+  const [show4hView] = useGlobalState("showNHourView");
   const [clickedGspId, setClickedGspId] = useGlobalState("clickedGspId");
   const [visibleLines] = useGlobalState("visibleLines");
   const [globalZoomArea] = useGlobalState("globalZoomArea");
@@ -278,7 +274,7 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
     nationalForecastData,
     pvRealDayInData,
     pvRealDayAfterData,
-    national4HourData,
+    nationalNHourData,
     allGspForecastData,
     allGspRealData,
     gspDeltas
@@ -287,7 +283,7 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
     nationalForecastError,
     pvRealDayInError,
     pvRealDayAfterError,
-    national4HourError,
+    nationalNHourError,
     allGspForecastError
   } = combinedErrors;
 
@@ -303,14 +299,14 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
 
   const chartData = useFormatChartData({
     forecastData: nationalForecastData,
-    fourHourData: national4HourData,
+    fourHourData: nationalNHourData,
     pvRealDayInData,
     pvRealDayAfterData,
     timeTrigger: selectedTime,
     delta: true
   });
 
-  // While 4-hour is not available, we default to the latest interval with an Initial Estimate
+  // While N-hour is not available, we default to the latest interval with an Initial Estimate
   // useEffect(() => {
   //   if (selectedISOTime === get30MinNow() && view === VIEWS.DELTA) {
   //     setSelectedISOTime(get30MinNow(-60));
@@ -321,7 +317,7 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
     nationalForecastError ||
     pvRealDayInError ||
     pvRealDayAfterError ||
-    national4HourError ||
+    nationalNHourError ||
     allGspForecastError
   )
     return <div className={`h-full flex ${className}`}>Failed to load data.</div>;
@@ -337,7 +333,6 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
     stopTime();
     setSelectedISOTime(time + ":00.000Z");
   };
-  const fourHoursAgo = getRounded4HoursAgoString();
 
   return (
     <>
diff --git a/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx b/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx
index b19e11fa..7e13c448 100644
--- a/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx
+++ b/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx
@@ -39,21 +39,20 @@ const GspPvRemixChart: FC<{
   visibleLines,
   deltaView = false
 }) => {
-  //when adding 4hour forecast data back in, add gsp4HourData to list in line 27
   const {
     errors,
     pvRealDataAfter,
     pvRealDataIn,
     gspLocationInfo,
     gspForecastDataOneGSP,
-    gsp4HourData
+    gspNHourData
   } = useGetGspData(gspId);
   // const gspData = fcAll?.forecasts.find((fc) => fc.location.gspId === gspId);
   const gspInstalledCapacity = gspLocationInfo?.[0]?.installedCapacityMw;
   const gspName = gspLocationInfo?.[0]?.regionName;
   const chartData = useFormatChartData({
     forecastData: gspForecastDataOneGSP,
-    fourHourData: gsp4HourData,
+    fourHourData: gspNHourData,
     pvRealDayInData: pvRealDataIn,
     pvRealDayAfterData: pvRealDataAfter,
     timeTrigger: selectedTime,
@@ -71,7 +70,7 @@ const GspPvRemixChart: FC<{
   const pvPercentage = (forecastAtSelectedTime.expectedPowerGenerationNormalized || 0) * 100;
 
   const fourHourForecastAtSelectedTime: ForecastValue =
-    gsp4HourData?.find((fc) => formatISODateString(fc?.targetTime) === now30min) ||
+    gspNHourData?.find((fc) => formatISODateString(fc?.targetTime) === now30min) ||
     ({} as ForecastValue);
 
   //
diff --git a/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/use-get-gsp-data.ts b/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/use-get-gsp-data.ts
index 18f1d5d8..18a271d9 100644
--- a/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/use-get-gsp-data.ts
+++ b/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/use-get-gsp-data.ts
@@ -4,7 +4,7 @@ import useGlobalState from "../../helpers/globalState";
 import { useLoadDataFromApi } from "../../hooks/useLoadDataFromApi";
 
 const useGetGspData = (gspId: number) => {
-  const [show4hView] = useGlobalState("show4hView");
+  const [show4hView] = useGlobalState("showNHourView");
   const [nHourForecast] = useGlobalState("nHourForecast");
 
   const { data: pvRealDataIn, error: pvRealInDat } = useLoadDataFromApi<PvRealData>(
@@ -26,11 +26,10 @@ const useGetGspData = (gspId: number) => {
     `${API_PREFIX}/system/GB/gsp/?gsp_id=${gspId}`
   );
 
-  const { data: gsp4HourData, error: pv4HourError } = useLoadDataFromApi<ForecastData>(
+  const nMinuteForecast = nHourForecast * 60;
+  const { data: gspNHourData, error: pvNHourError } = useLoadDataFromApi<ForecastData>(
     show4hView
-      ? `${API_PREFIX}/solar/GB/gsp/${gspId}/forecast?forecast_horizon_minutes=${
-          nHourForecast * 60
-        }&historic=true&only_forecast_values=true`
+      ? `${API_PREFIX}/solar/GB/gsp/${gspId}/forecast?forecast_horizon_minutes=${nMinuteForecast}&historic=true&only_forecast_values=true`
       : null
   );
 
@@ -40,9 +39,9 @@ const useGetGspData = (gspId: number) => {
       pvRealDayAfter,
       gspForecastDataOneGSPError,
       gspLocationError,
-      pv4HourError
+      pvNHourError
     ].filter((e) => !!e),
-    gsp4HourData,
+    gspNHourData: gspNHourData,
     pvRealDataIn,
     pvRealDataAfter,
     gspForecastDataOneGSP,
diff --git a/apps/nowcasting-app/components/charts/pv-remix-chart.tsx b/apps/nowcasting-app/components/charts/pv-remix-chart.tsx
index 5ce56eb0..7e03f524 100644
--- a/apps/nowcasting-app/components/charts/pv-remix-chart.tsx
+++ b/apps/nowcasting-app/components/charts/pv-remix-chart.tsx
@@ -33,7 +33,7 @@ const PvRemixChart: FC<{
     nationalForecastData,
     pvRealDayInData,
     pvRealDayAfterData,
-    national4HourData,
+    nationalNHourData,
     allGspForecastData,
     allGspRealData,
     gspDeltas
@@ -42,7 +42,7 @@ const PvRemixChart: FC<{
     nationalForecastError,
     pvRealDayInError,
     pvRealDayAfterError,
-    national4HourError,
+    nationalNHourError,
     allGspForecastError
   } = combinedErrors;
 
@@ -60,7 +60,7 @@ const PvRemixChart: FC<{
   const chartData = useFormatChartData({
     forecastData: nationalForecastData,
     probabilisticRangeData: nationalForecastData,
-    fourHourData: national4HourData,
+    fourHourData: nationalNHourData,
     pvRealDayInData,
     pvRealDayAfterData,
     timeTrigger: selectedTime
@@ -70,7 +70,7 @@ const PvRemixChart: FC<{
     nationalForecastError ||
     pvRealDayInError ||
     pvRealDayAfterError ||
-    national4HourError ||
+    nationalNHourError ||
     allGspForecastError
   )
     return <div className={`${className}`}>failed to load</div>;
diff --git a/apps/nowcasting-app/components/charts/remix-line.tsx b/apps/nowcasting-app/components/charts/remix-line.tsx
index a66d2bcc..3544436e 100644
--- a/apps/nowcasting-app/components/charts/remix-line.tsx
+++ b/apps/nowcasting-app/components/charts/remix-line.tsx
@@ -18,7 +18,6 @@ import {
   convertToLocaleDateString,
   dateToLondonDateTimeString,
   formatISODateStringHumanNumbersOnly,
-  getRounded4HoursAgoString,
   dateToLondonDateTimeOnlyString,
   getRoundedTickBoundary,
   prettyPrintChartAxisLabelDate,
@@ -42,8 +41,8 @@ export type ChartData = {
   GENERATION?: number;
   FORECAST?: number;
   PAST_FORECAST?: number;
-  NHR_FORECAST?: number;
-  NHR_PAST_FORECAST?: number;
+  N_HOUR_FORECAST?: number;
+  N_HOUR_PAST_FORECAST?: number;
   DELTA?: number;
   DELTA_BUCKET?: DELTA_BUCKET;
   PROBABILISTIC_UPPER_BOUND?: number;
@@ -58,10 +57,9 @@ const toolTiplabels: Record<string, string> = {
   PROBABILISTIC_UPPER_BOUND: "OCF 90%",
   FORECAST: "OCF Forecast",
   PAST_FORECAST: "OCF Forecast",
-  // "4HR_FORECAST": `OCF ${getRounded4HoursAgoString()} Forecast`,
   PROBABILISTIC_LOWER_BOUND: "OCF 10%",
-  NHR_FORECAST: `OCF Nhr Forecast`,
-  NHR_PAST_FORECAST: "OCF Nhr Forecast",
+  N_HOUR_FORECAST: `OCF N-hour Forecast`,
+  N_HOUR_PAST_FORECAST: "OCF N-hour Forecast",
   DELTA: "Delta"
 };
 
@@ -70,8 +68,8 @@ const toolTipColors: Record<string, string> = {
   GENERATION: "white",
   FORECAST: yellow,
   PAST_FORECAST: yellow,
-  NHR_FORECAST: orange,
-  NHR_PAST_FORECAST: orange,
+  N_HOUR_FORECAST: orange,
+  N_HOUR_PAST_FORECAST: orange,
   DELTA: deltaPos,
   PROBABILISTIC_UPPER_BOUND: yellow,
   PROBABILISTIC_LOWER_BOUND: yellow
@@ -148,7 +146,7 @@ const RemixLine: React.FC<RemixLineProps> = ({
 }) => {
   // Set the y max. If national then set to 12000, for gsp plot use 'auto'
   const preppedData = data.sort((a, b) => a.formattedDate.localeCompare(b.formattedDate));
-  const [showNhrView] = useGlobalState("show4hView");
+  const [showNHourView] = useGlobalState("showNHourView");
   const [view] = useGlobalState("view");
   const [largeScreenMode] = useGlobalState("dashboardMode");
   const currentTime = getNext30MinSlot(new Date()).toISOString().slice(0, 16);
@@ -516,11 +514,11 @@ const RemixLine: React.FC<RemixLineProps> = ({
                 barSize={3}
               />
             )}
-            {showNhrView && (
+            {showNHourView && (
               <>
                 <Line
                   type="monotone"
-                  dataKey="NHR_FORECAST"
+                  dataKey="N_HOUR_FORECAST"
                   dot={false}
                   yAxisId={"y-axis"}
                   xAxisId={"x-axis"}
@@ -528,19 +526,19 @@ const RemixLine: React.FC<RemixLineProps> = ({
                   strokeDashoffset={3}
                   stroke={orange} // blue
                   strokeWidth={largeScreenMode ? 4 : 2}
-                  hide={!visibleLines.includes("NHR_FORECAST")}
+                  hide={!visibleLines.includes("N_HOUR_FORECAST")}
                   isAnimationActive={false}
                 />
                 <Line
                   type="monotone"
-                  dataKey="NHR_PAST_FORECAST"
+                  dataKey="N_HOUR_PAST_FORECAST"
                   dot={false}
                   yAxisId={"y-axis"}
                   xAxisId={"x-axis"}
                   // strokeDasharray="10 10"
                   stroke={orange} // blue
                   strokeWidth={largeScreenMode ? 4 : 2}
-                  hide={!visibleLines.includes("NHR_FORECAST")}
+                  hide={!visibleLines.includes("N_HOUR_FORECAST")}
                   isAnimationActive={false}
                 />
               </>
@@ -643,8 +641,8 @@ const RemixLine: React.FC<RemixLineProps> = ({
                         if (deltaView && key === "GENERATION" && data["GENERATION_UPDATED"] >= 0)
                           return null;
                         if (
-                          key.includes("NHR") &&
-                          (!showNhrView || !visibleLines.some((key) => key.includes("NHR")))
+                          key.includes("N_HOUR") &&
+                          (!showNHourView || !visibleLines.some((key) => key.includes("N_HOUR")))
                         )
                           return null;
                         if (key.includes("PROBABILISTIC") && Math.round(value * 100) < 0)
@@ -670,13 +668,13 @@ const RemixLine: React.FC<RemixLineProps> = ({
                           : toolTipColors[key];
                         const computedValue =
                           key === "DELTA" &&
-                          !showNhrView &&
+                          !showNHourView &&
                           `${data["formattedDate"]}:00.000Z` >= currentTime
                             ? "-"
                             : prettyPrintYNumberWithCommas(String(value), 1);
                         let title = toolTiplabels[key];
-                        if (key.includes("NHR")) {
-                          title = title.replace("Nhr", `${nHourForecast}hr`);
+                        if (key.includes("N_HOUR")) {
+                          title = title.replace("N-hour", `${nHourForecast}-hour`);
                         }
 
                         return (
@@ -684,7 +682,7 @@ const RemixLine: React.FC<RemixLineProps> = ({
                             <div className={`flex justify-between ${textClass} ${pvLiveTextClass}`}>
                               <div>{title}:</div>
                               <div className={`font-sans ml-7`}>
-                                {(showNhrView || key !== "DELTA") && sign}
+                                {(showNHourView || key !== "DELTA") && sign}
                                 {computedValue}{" "}
                               </div>
                             </div>
diff --git a/apps/nowcasting-app/components/charts/solar-site-view/solar-site-chart.tsx b/apps/nowcasting-app/components/charts/solar-site-view/solar-site-chart.tsx
index 51d43331..25f40f85 100644
--- a/apps/nowcasting-app/components/charts/solar-site-view/solar-site-chart.tsx
+++ b/apps/nowcasting-app/components/charts/solar-site-view/solar-site-chart.tsx
@@ -5,7 +5,6 @@ import useGlobalState from "../../helpers/globalState";
 import {
   convertISODateStringToLondonTime,
   formatISODateString,
-  getRounded4HoursAgoString,
   getRoundedTickBoundary
 } from "../../helpers/utils";
 import { useStopAndResetTime } from "../../hooks/use-and-update-selected-time";
@@ -34,7 +33,6 @@ const SolarSiteChart: FC<{
   date?: string;
   className?: string;
 }> = ({ combinedSitesData, aggregatedSitesData, className }) => {
-  const [show4hView] = useGlobalState("show4hView");
   const [clickedGspId, setClickedGspId] = useGlobalState("clickedGspId");
   const [clickedSiteGroupId, setClickedSiteGroupId] = useGlobalState("clickedSiteGroupId");
   const [visibleLines] = useGlobalState("visibleLines");
@@ -237,7 +235,6 @@ const SolarSiteChart: FC<{
     stopTime();
     setSelectedISOTime(time);
   };
-  const fourHoursAgo = getRounded4HoursAgoString();
   return (
     <div className={`flex flex-col flex-1 ${className || ""}`}>
       <div className="flex-1 flex flex-col">
@@ -366,21 +363,6 @@ const SolarSiteChart: FC<{
             dataKey={`FORECAST`}
           />
         </div>
-        {/* {show4hView && (
-            <div className={legendItemContainerClasses}>
-              <LegendItem
-                iconClasses={"text-ocf-orange"}
-                dashed
-                label={`OCF ${fourHoursAgo} Forecast`}
-                dataKey={`4HR_FORECAST`}
-              />
-              <LegendItem
-                iconClasses={"text-ocf-orange"}
-                label={"OCF 4hr Forecast"}
-                dataKey={`4HR_PAST_FORECAST`}
-              />
-            </div>
-          )} */}
 
         <div className="flex-initial flex self-center items-start">
           <Tooltip
diff --git a/apps/nowcasting-app/components/charts/use-format-chart-data-sites.tsx b/apps/nowcasting-app/components/charts/use-format-chart-data-sites.tsx
index 7ab829c1..94b1c615 100644
--- a/apps/nowcasting-app/components/charts/use-format-chart-data-sites.tsx
+++ b/apps/nowcasting-app/components/charts/use-format-chart-data-sites.tsx
@@ -13,8 +13,8 @@ const getForecastChartData = (
 ) => {
   if (!fr) return {};
 
-  const futureKey = forecast_horizon === 240 ? "4HR_FORECAST" : "FORECAST";
-  const pastKey = forecast_horizon === 240 ? "4HR_PAST_FORECAST" : "PAST_FORECAST";
+  const futureKey = forecast_horizon === 240 ? "N_HOUR_FORECAST" : "FORECAST";
+  const pastKey = forecast_horizon === 240 ? "N_HOUR_PAST_FORECAST" : "PAST_FORECAST";
   const generation =
     fr.expected_generation_kw > 20 ? fr.expected_generation_kw / 7000 : fr.expected_generation_kw;
 
@@ -38,8 +38,8 @@ const getForecastChartData = (
 //     } else if (datum.GENERATION !== undefined) {
 //       return Number(datum.GENERATION) - Number(datum.PAST_FORECAST);
 //     }
-//   } else if (datum.FORECAST !== undefined && datum["4HR_FORECAST"] !== undefined) {
-//     return Number(datum.FORECAST) - Number(datum["4HR_FORECAST"]);
+//   } else if (datum.FORECAST !== undefined && datum["N_HOUR_FORECAST"] !== undefined) {
+//     return Number(datum.FORECAST) - Number(datum["N_HOUR_FORECAST"]);
 //   }
 //   return 0;
 // };
diff --git a/apps/nowcasting-app/components/charts/use-format-chart-data.tsx b/apps/nowcasting-app/components/charts/use-format-chart-data.tsx
index 0f336ad1..a6e15340 100644
--- a/apps/nowcasting-app/components/charts/use-format-chart-data.tsx
+++ b/apps/nowcasting-app/components/charts/use-format-chart-data.tsx
@@ -16,8 +16,8 @@ const getForecastChartData = (
 ) => {
   if (!fr) return {};
 
-  const futureKey = forecast_horizon ? "NHR_FORECAST" : "FORECAST";
-  const pastKey = forecast_horizon ? "NHR_PAST_FORECAST" : "PAST_FORECAST";
+  const futureKey = forecast_horizon ? "N_HOUR_FORECAST" : "FORECAST";
+  const pastKey = forecast_horizon ? "N_HOUR_PAST_FORECAST" : "PAST_FORECAST";
 
   if (new Date(fr.targetTime).getTime() > new Date(timeNow + ":00.000Z").getTime())
     return {
@@ -39,8 +39,8 @@ const getDelta: (datum: ChartData) => number = (datum) => {
     } else if (datum.GENERATION !== undefined) {
       return Number(datum.GENERATION) - Number(datum.PAST_FORECAST);
     }
-  } else if (datum.FORECAST !== undefined && datum["NHR_FORECAST"] !== undefined) {
-    return Number(datum.FORECAST) - Number(datum["NHR_FORECAST"]);
+  } else if (datum.FORECAST !== undefined && datum["N_HOUR_FORECAST"] !== undefined) {
+    return Number(datum.FORECAST) - Number(datum["N_HOUR_FORECAST"]);
   }
   return 0;
 };
diff --git a/apps/nowcasting-app/components/helpers/globalState.tsx b/apps/nowcasting-app/components/helpers/globalState.tsx
index e98ebe68..4fee3e81 100644
--- a/apps/nowcasting-app/components/helpers/globalState.tsx
+++ b/apps/nowcasting-app/components/helpers/globalState.tsx
@@ -1,7 +1,7 @@
 import { createGlobalState } from "react-hooks-global-state";
 import { getDeltaBucketKeys, AGGREGATION_LEVELS, VIEWS, SORT_BY } from "../../constant";
 import mapboxgl from "mapbox-gl";
-import { enable4hView } from "./utils";
+import { enableNHourView } from "./utils";
 import {
   getArraySettingFromCookieStorage,
   getBooleanSettingFromLocalStorage,
@@ -66,7 +66,7 @@ export type GlobalStateType = {
   lat: number;
   zoom: number;
   showSiteCount?: boolean;
-  show4hView?: boolean;
+  showNHourView?: boolean;
   dashboardMode: boolean;
   sortBy: SORT_BY;
   autoZoom: boolean;
@@ -91,7 +91,7 @@ export const { useGlobalState, getGlobalState, setGlobalState } =
       "GENERATION",
       "GENERATION_UPDATED",
       "FORECAST",
-      "NHR_FORECAST"
+      "N_HOUR_FORECAST"
     ],
     selectedBuckets: getDeltaBucketKeys().filter((key) => key !== "ZERO"),
     maps: [],
@@ -105,8 +105,9 @@ export const { useGlobalState, getGlobalState, setGlobalState } =
     showSiteCount: undefined,
     aggregationLevel: AGGREGATION_LEVELS.REGION,
     sortBy: SORT_BY.CAPACITY,
-    show4hView:
-      (enable4hView && getBooleanSettingFromLocalStorage(CookieStorageKeys.FOUR_HOUR_VIEW)) || true,
+    showNHourView:
+      (enableNHourView && getBooleanSettingFromLocalStorage(CookieStorageKeys.FOUR_HOUR_VIEW)) ||
+      true,
     dashboardMode: getBooleanSettingFromLocalStorage(CookieStorageKeys.DASHBOARD_MODE),
     loadingState: {
       initialLoadComplete: false,
diff --git a/apps/nowcasting-app/components/helpers/utils.ts b/apps/nowcasting-app/components/helpers/utils.ts
index 82f173fd..7954456b 100644
--- a/apps/nowcasting-app/components/helpers/utils.ts
+++ b/apps/nowcasting-app/components/helpers/utils.ts
@@ -24,7 +24,7 @@ import { PathsWithMethod } from "openapi-typescript-helpers";
 
 export const isProduction = process.env.NEXT_PUBLIC_IS_PRODUCTION === "true";
 
-export const enable4hView = process.env.NEXT_PUBLIC_4H_VIEW === "true";
+export const enableNHourView = process.env.NEXT_PUBLIC_4H_VIEW === "true";
 
 export const allForecastsAccessor = (d: any) => d.forecastValues;
 const forecastAccessor0 = (d: any) => d.forecastValues[0].expectedPowerGenerationMegawatts;
@@ -52,7 +52,7 @@ export const getLoadingState = (
   combinedData: CombinedData
 ): LoadingState<NationalEndpointStates> => {
   let initialLoadComplete = Object.entries(combinedLoading).every(
-    ([key, loading]) => key === "national4HourLoading" || !loading
+    ([key, loading]) => key === "nationalNHourLoading" || !loading
   );
   let showMessage = !initialLoadComplete;
   let message = "Loading initial data";
@@ -73,7 +73,7 @@ export const getLoadingState = (
         : `Loading latest ${NationalEndpointLabel.pvRealDayAfter}`;
       showMessage = true;
     }
-    if (combinedValidating.national4HourValidating) {
+    if (combinedValidating.nationalNHourValidating) {
       message = showMessage
         ? "Loading latest data"
         : `Loading latest ${NationalEndpointLabel.nationalNHour}`;
@@ -113,10 +113,10 @@ export const getLoadingState = (
       hasData: !!combinedData.pvRealDayAfterData
     },
     nationalNHour: {
-      loading: combinedLoading.national4HourLoading,
-      validating: combinedValidating.national4HourValidating,
-      error: combinedErrors.national4HourError,
-      hasData: !!combinedData.national4HourData
+      loading: combinedLoading.nationalNHourLoading,
+      validating: combinedValidating.nationalNHourValidating,
+      error: combinedErrors.nationalNHourError,
+      hasData: !!combinedData.nationalNHourData
     },
     allGspForecast: {
       loading: combinedLoading.allGspForecastLoading,
diff --git a/apps/nowcasting-app/components/hooks/useLoadDataFromApi.tsx b/apps/nowcasting-app/components/hooks/useLoadDataFromApi.tsx
index 4c04b912..0c2e2849 100644
--- a/apps/nowcasting-app/components/hooks/useLoadDataFromApi.tsx
+++ b/apps/nowcasting-app/components/hooks/useLoadDataFromApi.tsx
@@ -5,7 +5,7 @@ import {
   ForecastData,
   GspAllForecastData,
   GspEntities,
-  National4HourData,
+  NationalNHourData,
   PvRealData,
   SitesPvActual,
   SitesPvForecast,
@@ -24,7 +24,7 @@ const t2min = 1000 * 60 * 2;
 type APIResponseType =
   | ForecastData
   | PvRealData
-  | National4HourData
+  | NationalNHourData
   | GspAllForecastData
   | GspEntities
   | AllGspRealData
diff --git a/apps/nowcasting-app/components/layout/header/profile-dropdown.tsx b/apps/nowcasting-app/components/layout/header/profile-dropdown.tsx
index e692049d..0a2c6847 100644
--- a/apps/nowcasting-app/components/layout/header/profile-dropdown.tsx
+++ b/apps/nowcasting-app/components/layout/header/profile-dropdown.tsx
@@ -15,7 +15,7 @@ interface IProfileDropDown {}
 
 const ProfileDropDown = ({}: IProfileDropDown) => {
   const { user } = useUser();
-  const [show4hView, setShow4hView] = useGlobalState("show4hView");
+  const [show4hView, setShow4hView] = useGlobalState("showNHourView");
   const [dashboardMode, setDashboardMode] = useGlobalState("dashboardMode");
   const toggleDashboardMode = () => {
     setDashboardMode(!dashboardMode);
@@ -60,11 +60,11 @@ const ProfileDropDown = ({}: IProfileDropDown) => {
                     </span>
                   )}
                   <button
-                    id={"UserMenu-4hViewBtn"}
+                    id={"UserMenu-NhViewBtn"}
                     onClick={toggle4hView}
                     className="ml-1 text-sm  font-medium text-ocf-black-600"
                   >
-                    {`4-hour forecast`}
+                    {`N-hour forecast`}
                   </button>
                 </div>
               )}
diff --git a/apps/nowcasting-app/components/map/deltaMap.tsx b/apps/nowcasting-app/components/map/deltaMap.tsx
index 77a40828..556fe3d3 100644
--- a/apps/nowcasting-app/components/map/deltaMap.tsx
+++ b/apps/nowcasting-app/components/map/deltaMap.tsx
@@ -17,7 +17,7 @@ import {
   ForecastValue,
   GspAllForecastData,
   GspDeltaValue,
-  National4HourData,
+  NationalNHourData,
   PvRealData
 } from "../types";
 import { theme } from "../../tailwind.config";
diff --git a/apps/nowcasting-app/components/types.d.ts b/apps/nowcasting-app/components/types.d.ts
index 34ef0166..bd91a7b1 100644
--- a/apps/nowcasting-app/components/types.d.ts
+++ b/apps/nowcasting-app/components/types.d.ts
@@ -81,13 +81,13 @@ type PvRealData = {
   datetimeUtc: string;
   solarGenerationKw: number;
 }[];
-type National4HourData = ForecastValue[];
+type NationalNHourData = ForecastValue[];
 type AllGspRealData = GspRealData[];
 type CombinedData = {
   nationalForecastData: ForecastData | undefined;
   pvRealDayInData: PvRealData | undefined;
   pvRealDayAfterData: PvRealData | undefined;
-  national4HourData: National4HourData | undefined;
+  nationalNHourData: NationalNHourData | undefined;
   allGspSystemData: components["schemas"]["Location"][] | undefined;
   // TODO: slight mashup of custom and generated types atm,
   //  ideally should be able to use just the generated for API typings
@@ -102,7 +102,7 @@ type CombinedLoading = {
   nationalForecastLoading: boolean;
   pvRealDayInLoading: boolean;
   pvRealDayAfterLoading: boolean;
-  national4HourLoading: boolean;
+  nationalNHourLoading: boolean;
   allGspSystemLoading: boolean;
   allGspForecastLoading: boolean;
   allGspRealLoading: boolean;
@@ -111,7 +111,7 @@ type CombinedValidating = {
   nationalForecastValidating: boolean;
   pvRealDayInValidating: boolean;
   pvRealDayAfterValidating: boolean;
-  national4HourValidating: boolean;
+  nationalNHourValidating: boolean;
   allGspSystemValidating: boolean;
   allGspForecastValidating: boolean;
   allGspRealValidating: boolean;
@@ -120,7 +120,7 @@ type CombinedErrors = {
   nationalForecastError: any;
   pvRealDayInError: any;
   pvRealDayAfterError: any;
-  national4HourError: any;
+  nationalNHourError: any;
   allGspSystemError: any;
   allGspForecastError: any;
   allGspRealError: any;
diff --git a/apps/nowcasting-app/constant.ts b/apps/nowcasting-app/constant.ts
index 7bb45ce3..647dd8da 100644
--- a/apps/nowcasting-app/constant.ts
+++ b/apps/nowcasting-app/constant.ts
@@ -113,4 +113,4 @@ export enum DELTA_BUCKET {
 }
 export const getDeltaBucketKeys = () => Object.keys(DELTA_BUCKET).filter((k) => isNaN(Number(k)));
 
-export const NHR_FORECAST_OPTIONS = [1, 2, 4, 8];
+export const N_HOUR_FORECAST_OPTIONS = [1, 2, 4, 8];
diff --git a/apps/nowcasting-app/cypress/e2e/pvLatest.cy.js b/apps/nowcasting-app/cypress/e2e/pvLatest.cy.js
index 98d8769f..54be736e 100644
--- a/apps/nowcasting-app/cypress/e2e/pvLatest.cy.js
+++ b/apps/nowcasting-app/cypress/e2e/pvLatest.cy.js
@@ -41,9 +41,9 @@ describe("Load the page", () => {
     cy.get("header #UserMenu-4hViewBtn").should("not.exist");
     cy.get("header button").contains("Open user menu").should("exist");
     cy.get("header button").contains("Open user menu").parent().click();
-    cy.get("header #UserMenu-4hViewBtn").should("exist");
-    cy.get("header #UserMenu-4hViewBtn").should("be.visible");
-    cy.get("header #UserMenu-4hViewBtn").should("contain", "4-hour forecast");
+    cy.get("header #UserMenu-NhViewBtn").should("exist");
+    cy.get("header #UserMenu-NhViewBtn").should("be.visible");
+    cy.get("header #UserMenu-NhViewBtn").should("contain", "N-hour forecast");
     cy.get("header #UserMenu-DashboardModeBtn").should("contain", "Dashboard mode");
     cy.get("header #UserMenu-DocumentationBtn").should("contain", "Documentation");
     cy.get("header #UserMenu-ContactBtn").should("contain", "Contact");
diff --git a/apps/nowcasting-app/package.json b/apps/nowcasting-app/package.json
index befb1c4f..b1de0328 100644
--- a/apps/nowcasting-app/package.json
+++ b/apps/nowcasting-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openclimatefix/nowcasting-app",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3002",
diff --git a/apps/nowcasting-app/pages/index.tsx b/apps/nowcasting-app/pages/index.tsx
index 405a0bd7..ea249ca7 100644
--- a/apps/nowcasting-app/pages/index.tsx
+++ b/apps/nowcasting-app/pages/index.tsx
@@ -20,7 +20,7 @@ import {
   CombinedValidating,
   ForecastData,
   GspAllForecastData,
-  National4HourData,
+  NationalNHourData,
   PvRealData,
   SitePvActual,
   SitePvForecast,
@@ -57,7 +57,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
   useAndUpdateSelectedTime();
   const [view, setView] = useGlobalState("view");
   const [activeUnit, setActiveUnit] = useState<ActiveUnit>(ActiveUnit.MW);
-  const [show4hView] = useGlobalState("show4hView");
+  const [showNHourView] = useGlobalState("showNHourView");
   const [selectedISOTime] = useGlobalState("selectedISOTime");
   const selectedTime = formatISODateString(selectedISOTime || new Date().toISOString());
   const [timeNow] = useGlobalState("timeNow");
@@ -171,16 +171,15 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
     isValidating: pvRealDayAfterValidating,
     error: pvRealDayAfterError
   } = useLoadDataFromApi<PvRealData>(`${API_PREFIX}/solar/GB/national/pvlive?regime=day-after`);
+  const nMinuteForecast = nHourForecast * 60;
   const {
-    data: national4HourData,
-    isLoading: national4HourLoading,
-    isValidating: national4HourValidating,
-    error: national4HourError
-  } = useLoadDataFromApi<National4HourData>(
-    show4hView
-      ? `${API_PREFIX}/solar/GB/national/forecast?forecast_horizon_minutes=${
-          nHourForecast * 60
-        }&historic=true&only_forecast_values=true`
+    data: nationalNHourData,
+    isLoading: nationalNHourLoading,
+    isValidating: nationalNHourValidating,
+    error: nationalNHourError
+  } = useLoadDataFromApi<NationalNHourData>(
+    showNHourView
+      ? `${API_PREFIX}/solar/GB/national/forecast?forecast_horizon_minutes=${nMinuteForecast}&historic=true&only_forecast_values=true`
       : null
   );
   const {
@@ -439,7 +438,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
     nationalForecastData,
     pvRealDayInData,
     pvRealDayAfterData,
-    national4HourData,
+    nationalNHourData,
     allGspSystemData,
     allGspForecastData,
     allGspRealData,
@@ -450,7 +449,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
       nationalForecastLoading,
       pvRealDayInLoading,
       pvRealDayAfterLoading,
-      national4HourLoading,
+      nationalNHourLoading: nationalNHourLoading,
       allGspSystemLoading,
       allGspForecastLoading,
       allGspRealLoading
@@ -459,7 +458,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
       nationalForecastLoading,
       pvRealDayInLoading,
       pvRealDayAfterLoading,
-      national4HourLoading,
+      nationalNHourLoading,
       allGspSystemLoading,
       allGspForecastLoading,
       allGspRealLoading
@@ -470,7 +469,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
       nationalForecastValidating,
       pvRealDayInValidating,
       pvRealDayAfterValidating,
-      national4HourValidating,
+      nationalNHourValidating,
       allGspSystemValidating,
       allGspForecastValidating,
       allGspRealValidating: allGspActualValidating
@@ -479,7 +478,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
       nationalForecastValidating,
       pvRealDayInValidating,
       pvRealDayAfterValidating,
-      national4HourValidating,
+      nationalNHourValidating,
       allGspSystemValidating,
       allGspForecastValidating,
       allGspActualValidating
@@ -489,7 +488,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
     nationalForecastError,
     pvRealDayInError,
     pvRealDayAfterError,
-    national4HourError,
+    nationalNHourError,
     allGspSystemError,
     allGspForecastError,
     allGspRealError: allGspActualError