fix chart resizing issues

openclimatefix · Aug 7, 2024 · 5f189da · 5f189da
1 parent bd3f0e1
commit 5f189da
Show file tree

Hide file tree

Showing 9 changed files with 572 additions and 542 deletions.
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
@@ -2,10 +2,10 @@ import { Dispatch, FC, SetStateAction, useEffect, useMemo } from "react";
 import RemixLine from "../remix-line";
 import { DELTA_BUCKET, MAX_NATIONAL_GENERATION_MW } from "../../../constant";
 import ForecastHeader from "../forecast-header";
-import useGlobalState, { get30MinNow, getNext30MinSlot } from "../../helpers/globalState";
+import useGlobalState, { get30MinSlot } from "../../helpers/globalState";
 import useFormatChartData from "../use-format-chart-data";
 import {
-  convertISODateStringToLondonTime,
+  convertToLocaleDateString,
   formatISODateString,
   getRounded4HoursAgoString
 } from "../../helpers/utils";
@@ -273,10 +273,10 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
   const [loadingState] = useGlobalState("loadingState");
   const { stopTime, resetTime } = useStopAndResetTime();
   const selectedTime = formatISODateString(selectedISOTime || new Date().toISOString());
-  const selectedTimeHalfHourSlot = getNext30MinSlot(new Date(selectedTime));
-  const halfHourAgoDate = new Date(timeNow).setMinutes(new Date(timeNow).getMinutes() - 30);
-  const halfHourAgo = `${formatISODateString(new Date(halfHourAgoDate).toISOString())}:00Z`;
-  const hasGspPvInitialForSelectedTime = !!combinedData.pvRealDayInData?.find(
+  const selectedTimeHalfHourSlot = get30MinSlot(new Date(convertToLocaleDateString(selectedTime)));
+  // const halfHourAgoDate = new Date(timeNow).setMinutes(new Date(timeNow).getMinutes() - 30);
+  // const halfHourAgo = `${formatISODateString(new Date(halfHourAgoDate).toISOString())}:00Z`;
+  const hasGspPvInitialForSelectedTime = combinedData.pvRealDayInData?.find(
     (d) =>
       d.datetimeUtc.slice(0, 16) ===
       `${formatISODateString(selectedTimeHalfHourSlot.toISOString())}`
@@ -346,11 +346,10 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
     setSelectedISOTime(time + ":00.000Z");
   };
   const fourHoursAgo = getRounded4HoursAgoString();
-  const legendItemContainerClasses = "flex flex-initial flex-col xl:flex-col justify-between";
 
   return (
-    <div className={`flex flex-col flex-1 mb-1 ${className || ""}`}>
-      <div className="flex-auto flex flex-col mb-7">
+    <>
+      <div className={`flex flex-col flex-auto ${className || ""}`}>
         <ForecastHeader
           pvForecastData={nationalForecastData}
           pvLiveData={pvRealDayInData}
@@ -371,7 +370,7 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
           />
         </div>
         {clickedGspId && (
-          <div className="flex-1 flex flex-col relative min-h-[30vh] h-auto">
+          <div className="flex-1 flex flex-col relative dash:h-auto">
             <GspPvRemixChart
               close={() => {
                 setClickedGspId(undefined);
@@ -389,9 +388,9 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
         <div>
           <DeltaBuckets bucketSelection={selectedBuckets} gspDeltas={gspDeltas} />
         </div>
-        <div className="flex flex-initial justify-between mb-15">
+        <div className="flex flex-1 justify-between p-4">
           {!hasGspPvInitialForSelectedTime && (
-            <div className="flex flex-1 mb-16 px-4 justify-center items-center text-center text-ocf-gray-600 w-full">
+            <div className="flex flex-1 p-4 font-thin tracking-wide border border-dashed border-ocf-gray-600 rounded-md justify-center items-center text-center text-ocf-gray-600 w-full">
               [ Delta values not available until PV Live output available ]
             </div>
           )}
@@ -403,8 +402,8 @@ const DeltaChart: FC<DeltaChartProps> = ({ className, combinedData, combinedErro
           )}
         </div>
       </div>
-      <ChartLegend />
-    </div>
+      {!className?.includes("hidden") && <ChartLegend />}
+    </>
   );
 };
 

diff --git a/apps/nowcasting-app/components/charts/forecast-header/ui.tsx b/apps/nowcasting-app/components/charts/forecast-header/ui.tsx
@@ -164,7 +164,10 @@ const ForecastHeaderUI: React.FC<ForecastHeaderProps> = ({
   forecastNextTimeOnly
 }) => {
   return (
-    <div data-test="national-chart-header" className="flex content-between bg-ocf-gray-800 h-auto">
+    <div
+      data-test="national-chart-header"
+      className="flex flex-initial content-between bg-ocf-gray-800 h-auto mb-4"
+    >
       <div className="text-white dash:3xl:text-5xl dash:2xl:text-4xl dash:xl:text-3xl dash:tracking-wide lg:text-2xl md:text-lg text-base font-black m-auto ml-5 flex justify-evenly">
         National
       </div>

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
@@ -141,7 +141,7 @@ const GspPvRemixChart: FC<{
           <span className="text-xs dash:text-2xl text-ocf-gray-300"> MW</span>
         </ForecastHeaderGSP>
       </div>
-      <div className="flex-1 relative min-h-[30vh] max-h-[40vh] h-auto">
+      <div className="flex-1 relative">
         {dataMissing && (
           <div className="h-full absolute flex pb-7 items-center justify-center inset-0 z-30">
             <Spinner />

diff --git a/apps/nowcasting-app/components/charts/pv-remix-chart.tsx b/apps/nowcasting-app/components/charts/pv-remix-chart.tsx
@@ -81,35 +81,36 @@ const PvRemixChart: FC<{
   };
 
   return (
-    <div className={`flex flex-col flex-1 mb-1 ${className || ""}`}>
-      <div className="flex flex-col flex-auto">
-        <ForecastHeader
-          pvForecastData={nationalForecastData || []}
-          pvLiveData={pvRealDayInData || []}
-          deltaView={false}
-        ></ForecastHeader>
-
-        <div className="flex-1 relative h-60 dash:h-auto mt-4">
+    <>
+      <div className={`flex flex-col flex-auto ${className || ""}`}>
+        <div className="flex flex-col flex-1 dash:h-auto">
+          <ForecastHeader
+            pvForecastData={nationalForecastData || []}
+            pvLiveData={pvRealDayInData || []}
+            deltaView={false}
+          ></ForecastHeader>
           {(!nationalForecastData || !pvRealDayInData || !pvRealDayAfterData) && (
             <div
               className={`h-full absolute flex pb-7 items-center justify-center inset-0 z-30 ${className}`}
             >
               <Spinner></Spinner>
             </div>
           )}
-          <DataLoadingChartStatus loadingState={loadingState} />
-          <RemixLine
-            resetTime={resetTime}
-            timeNow={formatISODateString(timeNow)}
-            timeOfInterest={selectedTime}
-            setTimeOfInterest={setSelectedTime}
-            data={chartData}
-            yMax={MAX_NATIONAL_GENERATION_MW}
-            visibleLines={visibleLines}
-          />
+          <div className="flex-1 relative">
+            <DataLoadingChartStatus loadingState={loadingState} />
+            <RemixLine
+              resetTime={resetTime}
+              timeNow={formatISODateString(timeNow)}
+              timeOfInterest={selectedTime}
+              setTimeOfInterest={setSelectedTime}
+              data={chartData}
+              yMax={MAX_NATIONAL_GENERATION_MW}
+              visibleLines={visibleLines}
+            />
+          </div>
         </div>
         {clickedGspId && (
-          <div className="flex-1 flex flex-col relative h-60 dash:h-auto">
+          <div className="flex-1 flex flex-col relative dash:h-auto">
             <GspPvRemixChart
               close={() => {
                 setClickedGspId(undefined);
@@ -124,8 +125,8 @@ const PvRemixChart: FC<{
           </div>
         )}
       </div>
-      <ChartLegend />
-    </div>
+      {!className?.includes("hidden") && <ChartLegend />}
+    </>
   );
 };