Quartz Solar v0.5.2 – Staging

apps/nowcasting-app/components/Toggle.tsx

@@ -0,0 +1,14 @@
+import { FC } from "react";
+
+const Toggle: FC<{
+  onClick: () => void;
+  visible: boolean;
+}> = ({ onClick, visible }) => {
+  return (
+    <label className="inline-flex items-center cursor-pointer px-1 ml-2">
+      <input type="checkbox" checked={visible} onChange={onClick} className={`toggle`}></input>
+    </label>
+  );
+};
+
+export default Toggle;

apps/nowcasting-app/components/charts/ChartLegend.tsx

@@ -1,115 +1,85 @@
 import Tooltip from "../tooltip";
 import { ChartInfo } from "../../ChartInfo";
 import { InfoIcon, LegendLineGraphIcon } from "../icons/icons";
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import useGlobalState from "../helpers/globalState";
-import { getRounded4HoursAgoString } from "../helpers/utils";
-
-const LegendItem: FC<{
-  iconClasses: string;
-  label: string;
-  dashed?: boolean;
-  dataKey: string;
-}> = ({ iconClasses, label, dashed, dataKey }) => {
-  const [visibleLines, setVisibleLines] = useGlobalState("visibleLines");
-  const isVisible = visibleLines.includes(dataKey);
-
-  const toggleLineVisibility = () => {
-    if (isVisible) {
-      setVisibleLines(visibleLines.filter((line) => line !== dataKey));
-    } else {
-      setVisibleLines([...visibleLines, dataKey]);
-    }
-  };
-
-  return (
-    <div className="flex items-center flex-1">
-      <LegendLineGraphIcon className={iconClasses} dashed={dashed} />
-      <button
-        className="inline-flex flex-1 text-left pl-1 max-w-full w-44 dash:w-auto text-xs dash:text-base dash:tracking-wider dash:pb-1"
-        onClick={toggleLineVisibility}
-      >
-        <span
-          className={`block w-auto uppercase pl-1${
-            isVisible ? " font-extrabold dash:font-semibold" : ""
-          }`}
-        >
-          {label}
-        </span>
-      </button>
-    </div>
-  );
-};
+import LegendItem from "./LegendItem";
+import { N_HOUR_FORECAST_OPTIONS } from "../../constant";
 
 type ChartLegendProps = {
   className?: string;
 };
-export const ChartLegend: React.FC<ChartLegendProps> = ({ className }) => {
-  const [show4hView] = useGlobalState("show4hView");
+export const ChartLegend: FC<ChartLegendProps> = ({ className }) => {
+  const [showNHourView] = useGlobalState("showNHourView");
+  const [nHourForecast, setNHourForecast] = useGlobalState("nHourForecast");
 
-  const fourHoursAgo = getRounded4HoursAgoString();
-  const legendItemContainerClasses = `flex flex-initial flex-col lg:flex-row 3xl:flex-col justify-between${
+  const legendItemContainerClasses = `flex flex-initial flex-col @sm:gap-1 @6xl:gap-6 @6xl:flex-row ${
     className ? ` ${className}` : ""
   }`;
   return (
-    <div className="absolute bottom-0 left-0 right-0 flex flex-none justify-between align-items:baseline px-4 text-xs tracking-wider text-ocf-gray-300 pt-3 bg-mapbox-black-500 overflow-y-visible">
-      <div className={`flex flex-1 justify-around flex-col 3xl:flex-row pb-3 overflow-x-auto`}>
-        <div className={legendItemContainerClasses}>
-          <LegendItem
-            iconClasses={"text-ocf-black"}
-            dashed
-            label={"PV live initial estimate"}
-            dataKey={`GENERATION`}
-          />
-          <LegendItem
-            iconClasses={"text-ocf-black"}
-            label={"PV live updated"}
-            dataKey={`GENERATION_UPDATED`}
-          />
-        </div>
-        <div className={legendItemContainerClasses}>
-          <LegendItem
-            iconClasses={"text-ocf-yellow"}
-            dashed
-            label={"OCF Forecast"}
-            dataKey={`FORECAST`}
-          />
-          <LegendItem
-            iconClasses={"text-ocf-yellow"}
-            label={"OCF Final Forecast"}
-            dataKey={`PAST_FORECAST`}
-          />
-        </div>
-        {show4hView && (
+    <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`}
+        >
           <div className={legendItemContainerClasses}>
             <LegendItem
-              iconClasses={"text-ocf-orange"}
-              dashed
-              // label={`OCF ${fourHoursAgo} Forecast`}
-              label={`OCF 4hr+ Forecast`}
-              dataKey={`4HR_FORECAST`}
+              iconClasses={"text-ocf-black"}
+              dashStyle={"dashed"}
+              label={"PV live initial estimate"}
+              dataKey={`GENERATION`}
             />
             <LegendItem
-              iconClasses={"text-ocf-orange"}
-              label={"OCF 4hr Forecast"}
-              dataKey={`4HR_PAST_FORECAST`}
+              iconClasses={"text-ocf-black"}
+              label={"PV live updated"}
+              dataKey={`GENERATION_UPDATED`}
             />
           </div>
-        )}
-      </div>
-      <div className="flex-initial flex items-center pb-3">
-        <Tooltip
-          tip={
-            <div className="w-64 rounded-md">
-              <ChartInfo />
-            </div>
-          }
-          position="top"
-          className={"text-right"}
-          fullWidth
-        >
-          <InfoIcon />
-        </Tooltip>
+          <div className={legendItemContainerClasses}>
+            <LegendItem
+              iconClasses={"text-ocf-yellow"}
+              dashStyle={"both"}
+              label={"OCF Latest Forecast"}
+              dataKey={`FORECAST`}
+            />
+            {/*<LegendItem*/}
+            {/*  iconClasses={"text-ocf-yellow"}*/}
+            {/*  label={"OCF Final Forecast"}*/}
+            {/*  dataKey={`PAST_FORECAST`}*/}
+            {/*/>*/}
+            {showNHourView && (
+              <LegendItem
+                iconClasses={"text-ocf-orange"}
+                dashStyle={"both"}
+                label={`OCF ${nHourForecast}hr Forecast`}
+                dataKey={`N_HOUR_FORECAST`}
+              />
+            )}
+          </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}
+                  >
+                    {option}
+                  </option>
+                ))}
+              </select>
+            </div>{" "}
+            hour <br />
+            forecast
+          </div>
+        </div>
       </div>
     </div>
   );

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,18 +63,18 @@ 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 (
     <div
-      className={`absolute -top-4 right-4 flex items-center h-9 ${isLoadingData ? "z-40" : "z-0"}`}
+      className={`absolute -top-4 right-2 flex items-center h-9 ${isLoadingData ? "z-40" : "z-0"}`}
     >
       <div
         className={`chart-data-loading-message flex flex-row relative h-6 cursor-default justify-between items-center rounded-sm bg-mapbox-black  ${
@@ -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];

apps/nowcasting-app/components/charts/LegendItem.tsx

@@ -0,0 +1,44 @@
+import { FC } from "react";
+import useGlobalState from "../helpers/globalState";
+import { LegendLineGraphIcon } from "../icons/icons";
+import Toggle from "../Toggle";
+
+const LegendItem: FC<{
+  iconClasses: string;
+  label: string;
+  dashStyle?: "both" | "dashed" | "solid";
+  dataKey: string;
+}> = ({ iconClasses, label, dashStyle, dataKey }) => {
+  const [visibleLines, setVisibleLines] = useGlobalState("visibleLines");
+  const isVisible = visibleLines.includes(dataKey);
+
+  const toggleLineVisibility = () => {
+    if (isVisible) {
+      setVisibleLines(visibleLines.filter((line) => line !== dataKey));
+    } else {
+      setVisibleLines([...visibleLines, dataKey]);
+    }
+  };
+
+  return (
+    <div className="flex items-center flex-initial">
+      <LegendLineGraphIcon className={iconClasses} dashStyle={dashStyle} />
+      <button
+        className="inline-flex flex-1 text-left pl-1 max-w-full w-auto leading-tight text-2xs @lg:pr-1 @xl:pr-0 @2xl:text-xs dash:text-base dash:tracking-wider dash:pb-1"
+        onClick={toggleLineVisibility}
+      >
+        <span
+          className={`block sometimes-bold w-auto uppercase pl-1${
+            isVisible ? " font-extrabold dash:font-semibold" : " text-ocf-gray-700"
+          }`}
+          title={label}
+        >
+          {label}
+        </span>
+      </button>
+      <Toggle onClick={toggleLineVisibility} visible={isVisible} />
+    </div>
+  );
+};
+
+export default LegendItem;

apps/nowcasting-app/components/charts/delta-view/delta-buckets-ui.tsx

@@ -38,13 +38,13 @@ const BucketItem: React.FC<Bucket> = ({
             flex-col items-center rounded`}
       >
         <button
-          className={`flex flex-col flex-1 w-full h-16 items-center p-1 pt-2 rounded-md justify-center border-2 ${bucketColor} ${
+          className={`flex flex-col flex-1 w-full items-center p-1 rounded-md justify-center border-2 ${bucketColor} ${
             isSelected ? selectedClass : unselectedClass
           }`}
           onClick={toggleBucketSelection}
         >
-          <span className="text-2xl font-semibold">{quantity}</span>
-          <span className="flex text-xs pb-2">
+          <span className="text-xl font-semibold leading-tight">{quantity}</span>
+          <span className="flex text-xs">
             {text === DELTA_BUCKET.ZERO.toString() ? `-/+` : `${text} MW`}
           </span>
         </button>
@@ -86,7 +86,7 @@ const DeltaBuckets: React.FC<{
 
   return (
     <>
-      <div className="flex justify-center mx-3 pb-10 gap-1 lg:gap-3">
+      <div className="sticky top-0 bg-mapbox-black-500 z-10 mx-3 pb-1 flex justify-center gap-1 lg:gap-3">
         {buckets.map((bucket) => {
           return <BucketItem key={`Bucket-${bucket.dataKey}`} {...bucket}></BucketItem>;
         })}