Merge pull request #539 from openclimatefix/development

PR comment fixes for Quartz Solar v0.5.2
openclimatefix · Sep 10, 2024 · ea9051a · ea9051a
2 parents 84644c3 + dcce10c
commit ea9051a
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 49 deletions.
diff --git a/apps/nowcasting-app/components/charts/ChartLegend.tsx b/apps/nowcasting-app/components/charts/ChartLegend.tsx
@@ -13,14 +13,18 @@ export const ChartLegend: FC<ChartLegendProps> = ({ className }) => {
   const [showNHourView] = useGlobalState("showNHourView");
   const [nHourForecast, setNHourForecast] = useGlobalState("nHourForecast");
 
-  const legendItemContainerClasses = `flex flex-initial flex-col @sm:gap-1 @6xl:gap-6 @6xl:flex-row ${
-    className ? ` ${className}` : ""
-  }`;
+  const legendItemContainerClasses = `flex flex-initial  ${
+    showNHourView
+      ? "flex-col @sm:gap-1 @6xl:gap-6 @6xl:flex-row"
+      : "flex-col @md:gap-1 @3xl:gap-12 @3xl:flex-row"
+  }${className ? ` ${className}` : ""}`;
   return (
     <div className="@container flex flex-initial">
       <div className="flex flex-1 flex-col justify-between align-items:baseline px-4 text-xs tracking-wider text-ocf-gray-300 py-3 gap-3 bg-mapbox-black-500 overflow-y-visible @sm:flex-row @xl:gap-6">
         <div
-          className={`flex flex-initial pr-2 justify-between flex-col overflow-x-auto @sm:gap-1 @md:pr-0 @md:flex-col @md:gap-1 @lg:flex-row @lg:gap-8 @3xl:gap-12 @6xl:gap-6`}
+          className={`flex flex-initial pr-2 justify-between flex-col overflow-x-auto ${
+            showNHourView ? "@sm:gap-1" : ""
+          } @md:pr-0 @md:flex-col @md:gap-1 @lg:flex-row @lg:gap-8`}
         >
           <div className={legendItemContainerClasses}>
             <LegendItem
@@ -57,29 +61,33 @@ export const ChartLegend: FC<ChartLegendProps> = ({ className }) => {
             )}
           </div>
         </div>
-        <div className="flex flex-1 w-full justify-end items-end gap-3 pr-3 @md:flex-col @lg:gap-4 @2xl:flex-row @3xl:gap-12">
-          <div className="flex">
-            <div className="h-8 w-10 mr-2 custom-select bg-mapbox-black-600 rounded-md">
-              <select
-                value={nHourForecast}
-                onChange={(e) => setNHourForecast(Number(e.target.value))}
-                className="text-sm px-2 py-0 rounded-md"
-              >
-                {N_HOUR_FORECAST_OPTIONS.map((option) => (
-                  <option
-                    key={`N-hour-select-option-${option}`}
-                    className="text-black bg-white"
-                    value={option}
+        {showNHourView && (
+          <div className="flex flex-1 w-full justify-end items-end gap-3 pr-3 @md:flex-col @lg:gap-4 @2xl:flex-row @3xl:gap-12">
+            <div className="flex">
+              <>
+                <div className="h-8 w-10 mr-2 custom-select bg-mapbox-black-600 rounded-md">
+                  <select
+                    value={nHourForecast}
+                    onChange={(e) => setNHourForecast(Number(e.target.value))}
+                    className="text-sm px-2 py-0 rounded-md"
                   >
-                    {option}
-                  </option>
-                ))}
-              </select>
-            </div>{" "}
-            hour <br />
-            forecast
+                    {N_HOUR_FORECAST_OPTIONS.map((option) => (
+                      <option
+                        key={`N-hour-select-option-${option}`}
+                        className="text-black bg-white"
+                        value={option}
+                      >
+                        {option}
+                      </option>
+                    ))}
+                  </select>
+                </div>{" "}
+                hour <br />
+                forecast
+              </>
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );

diff --git a/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/forecast-header-gsp.tsx b/apps/nowcasting-app/components/charts/gsp-pv-remix-chart/forecast-header-gsp.tsx
@@ -31,7 +31,7 @@ const ForecastHeaderGSP: FC<ForecastHeaderGSPProps> = ({
   const height = title.length < 12 ? "dash:h-[4.25rem]" : "dash:h-[5.5rem]";
   return (
     <div className={`flex content-between bg-ocf-gray-800 h-12 mb-4 ${height}`}>
-      <div className="dash:text-3xl dash:3xl:text-4xl text-white lg:text-xl md:text-lg text-lg font-black m-auto ml-5 flex justify-evenly">
+      <div className="dash:xl:text-2xl dash:2xl:text-3xl dash:3xl:text-4xl text-white lg:text-xl md:text-lg text-lg font-black m-auto ml-5 flex justify-evenly">
         {title}
       </div>
       <div className="flex justify-between items-center flex-2 my-2 dash:3xl:my-3 px-2 2xl:px-4 3xl:px-6">

diff --git a/apps/nowcasting-app/components/helpers/cookieStorage.ts b/apps/nowcasting-app/components/helpers/cookieStorage.ts
@@ -1,7 +1,7 @@
 import Cookies from "js-cookie";
 export enum CookieStorageKeys {
   "DASHBOARD_MODE" = "dashboardMode",
-  "FOUR_HOUR_VIEW" = "fourHourView",
+  "N_HOUR_VIEW" = "NHourView",
   "VISIBLE_LINES" = "visibleLines"
 }
 
@@ -18,9 +18,12 @@ export const setSettingInCookieStorage = <T>(key: string, value: T) => {
   Cookies.set(key, JSON.stringify(value));
 };
 
-export const getBooleanSettingFromLocalStorage = (key: string): boolean => {
+export const getBooleanSettingFromCookieStorage = (
+  key: string,
+  defaultBool: boolean = false
+): boolean => {
   const item = getSettingFromCookieStorage<boolean>(key);
-  if (item === null) return false;
+  if (item === null) return defaultBool;
 
   return item;
 };

diff --git a/apps/nowcasting-app/components/helpers/globalState.tsx b/apps/nowcasting-app/components/helpers/globalState.tsx
@@ -4,7 +4,7 @@ import mapboxgl from "mapbox-gl";
 import { enableNHourView } from "./utils";
 import {
   getArraySettingFromCookieStorage,
-  getBooleanSettingFromLocalStorage,
+  getBooleanSettingFromCookieStorage,
   CookieStorageKeys
 } from "./cookieStorage";
 import { NationalEndpointStates, LoadingState, SitesEndpointStates } from "../types";
@@ -105,10 +105,8 @@ export const { useGlobalState, getGlobalState, setGlobalState } =
     showSiteCount: undefined,
     aggregationLevel: AGGREGATION_LEVELS.REGION,
     sortBy: SORT_BY.CAPACITY,
-    showNHourView:
-      (enableNHourView && getBooleanSettingFromLocalStorage(CookieStorageKeys.FOUR_HOUR_VIEW)) ||
-      true,
-    dashboardMode: getBooleanSettingFromLocalStorage(CookieStorageKeys.DASHBOARD_MODE),
+    showNHourView: false,
+    dashboardMode: getBooleanSettingFromCookieStorage(CookieStorageKeys.DASHBOARD_MODE),
     loadingState: {
       initialLoadComplete: false,
       showMessage: false,

diff --git a/apps/nowcasting-app/components/layout/header/profile-dropdown.tsx b/apps/nowcasting-app/components/layout/header/profile-dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React, { Fragment, useEffect } from "react";
 import { Menu, Transition } from "@headlessui/react";
 import { useUser } from "@auth0/nextjs-auth0";
 import pkg from "../../../package.json";
@@ -8,24 +8,40 @@ import Tooltip from "../../tooltip";
 import useGlobalState from "../../helpers/globalState";
 import { ChartInfo } from "../../../ChartInfo";
 import { Checkmark, ExternalLinkIcon } from "../../icons/icons";
-import { CookieStorageKeys, setBooleanSettingInLocalStorage } from "../../helpers/cookieStorage";
+import {
+  CookieStorageKeys,
+  getBooleanSettingFromCookieStorage,
+  setBooleanSettingInLocalStorage
+} from "../../helpers/cookieStorage";
 const { version } = pkg;
 
 interface IProfileDropDown {}
 
 const ProfileDropDown = ({}: IProfileDropDown) => {
   const { user } = useUser();
-  const [show4hView, setShow4hView] = useGlobalState("showNHourView");
+  const [showNHourView, setShowNHourView] = useGlobalState("showNHourView");
   const [dashboardMode, setDashboardMode] = useGlobalState("dashboardMode");
   const toggleDashboardMode = () => {
     setDashboardMode(!dashboardMode);
     setBooleanSettingInLocalStorage(CookieStorageKeys.DASHBOARD_MODE, !dashboardMode);
   };
   const toggle4hView = () => {
-    setShow4hView(!show4hView);
-    setBooleanSettingInLocalStorage(CookieStorageKeys.FOUR_HOUR_VIEW, !show4hView);
+    setShowNHourView(!showNHourView);
+    setBooleanSettingInLocalStorage(CookieStorageKeys.N_HOUR_VIEW, !showNHourView);
   };
-  console.log("dashboardMode", dashboardMode);
+  // Check cookies for the N-hour view setting and update the state if it's different
+  // Doing this here on client-side because the user's cookies are not available on the server,
+  // and React doesn't like it when the state is updated during hydration between server and client.
+  useEffect(() => {
+    // Also default to true if no cookie is set
+    const showNHourViewLocal = getBooleanSettingFromCookieStorage(
+      CookieStorageKeys.N_HOUR_VIEW,
+      true
+    );
+    if (showNHourViewLocal !== showNHourView) {
+      setShowNHourView(showNHourViewLocal);
+    }
+  }, []);
 
   return (
     <Menu as="div" className="relative z-20 ml-3">
@@ -54,7 +70,7 @@ const ProfileDropDown = ({}: IProfileDropDown) => {
                     "flex items-end justify-end px-4 py-2 text-sm text-gray-700 relative"
                   )}
                 >
-                  {show4hView && (
+                  {showNHourView && (
                     <span className="flex items-center">
                       <Checkmark />
                     </span>

diff --git a/apps/nowcasting-app/components/map/pvLatestMap.tsx b/apps/nowcasting-app/components/map/pvLatestMap.tsx
@@ -131,12 +131,16 @@ const PvLatestMap: React.FC<PvLatestMapProps> = ({
   }, []);
 
   const nationalCapacityMW = useMemo(() => {
-    return (
-      (combinedData.allGspSystemData?.reduce(
-        (acc, gsp) => acc + (gsp.installedCapacityMw || 0),
-        0
-      ) || 0) / 1000
-    );
+    if (!combinedData.allGspSystemData) return 0;
+
+    let totalCapacityMW = 0;
+    combinedData.allGspSystemData.forEach((gsp) => {
+      // Skip the national capacity
+      if (gsp.gspId === 0) return;
+
+      totalCapacityMW += gsp.installedCapacityMw || 0;
+    });
+    return totalCapacityMW;
   }, [combinedData.allGspSystemData]);
 
   const addOrUpdateMapData = (map: mapboxgl.Map) => {
@@ -217,7 +221,8 @@ const PvLatestMap: React.FC<PvLatestMapProps> = ({
             // Map in Capacity mode
             actualValue =
               (
-                Number(properties?.[SelectedData.installedCapacityMw] || 0) / nationalCapacityMW
+                (Number(properties?.[SelectedData.installedCapacityMw] || 0) / nationalCapacityMW) *
+                100
               ).toFixed(1) || "-";
             forecastValue = "-";
             unit = "MW";

diff --git a/apps/nowcasting-app/pages/index.tsx b/apps/nowcasting-app/pages/index.tsx
@@ -320,7 +320,7 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
     isValidating: allGspActualHistoricValidating,
     error: allGspActualHistoricError
   } = useLoadDataFromApi<components["schemas"]["GSPYieldGroupByDatetime"][]>(
-    `${API_PREFIX}/solar/GB/gsp/pvlive/all?regime=in-day&compact=true&end_datetime_utc=${encodeURIComponent(
+    `${API_PREFIX}/solar/GB/gsp/pvlive/all?compact=true&end_datetime_utc=${encodeURIComponent(
       `${actualsLastFetch30MinISO.slice(0, 19)}+00:00`
     )}`,
     {