diff --git a/apps/nowcasting-app/components/charts/ChartLegend.tsx b/apps/nowcasting-app/components/charts/ChartLegend.tsx index 6edb8824..81756c11 100644 --- a/apps/nowcasting-app/components/charts/ChartLegend.tsx +++ b/apps/nowcasting-app/components/charts/ChartLegend.tsx @@ -5,6 +5,7 @@ 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"; type ChartLegendProps = { className?: string; @@ -14,78 +15,73 @@ export const ChartLegend: FC = ({ className }) => { const [nHourForecast, setNHourForecast] = useGlobalState("nHourForecast"); const fourHoursAgo = getRounded4HoursAgoString(); - const legendItemContainerClasses = `flex flex-initial flex-row lg:flex-col 3xl:flex-row ${ + const legendItemContainerClasses = `flex flex-initial flex-col @sm:gap-1 @6xl:gap-6 @6xl:flex-row ${ className ? ` ${className}` : "" }`; return ( -
-
-
- - -
-
- - {/**/} - {showNhrView && ( +
+
+
+
+ + +
+
- )} + {/**/} + {showNhrView && ( + + )} +
+
+
+
+
+ +
{" "} + hour
+ forecast +
-
-
-
- -
{" "} - hour
- forecast -
-
- - -
- } - position="top" - className={"text-right"} - fullWidth - > - -
); diff --git a/apps/nowcasting-app/components/charts/LegendItem.tsx b/apps/nowcasting-app/components/charts/LegendItem.tsx index 8668010a..a62f5383 100644 --- a/apps/nowcasting-app/components/charts/LegendItem.tsx +++ b/apps/nowcasting-app/components/charts/LegendItem.tsx @@ -24,7 +24,7 @@ const LegendItem: FC<{
-
+
{ Solar PV Forecast -
+
{!solarStatus || solarStatus?.status === "ok" ? null : (

{solarStatus?.message}

diff --git a/apps/nowcasting-app/components/side-layout/expand-button.tsx b/apps/nowcasting-app/components/side-layout/expand-button.tsx index 485c4198..0f034af2 100644 --- a/apps/nowcasting-app/components/side-layout/expand-button.tsx +++ b/apps/nowcasting-app/components/side-layout/expand-button.tsx @@ -5,15 +5,15 @@ type ExpandButtonProps = { isOpen: boolean; onClick: () => void }; const ExpandButton: React.FC = ({ onClick, isOpen }) => { return ( ); diff --git a/apps/nowcasting-app/components/side-layout/index.tsx b/apps/nowcasting-app/components/side-layout/index.tsx index 47e31997..55795ecf 100644 --- a/apps/nowcasting-app/components/side-layout/index.tsx +++ b/apps/nowcasting-app/components/side-layout/index.tsx @@ -1,6 +1,10 @@ -import { FC, ReactNode, useState } from "react"; +import { FC, ReactNode, useEffect, useState } from "react"; import ExpandButton from "./expand-button"; import useGlobalState from "../helpers/globalState"; +import { ChartInfo } from "../../ChartInfo"; +import { InfoIcon } from "../icons/icons"; +import Tooltip, { TooltipPosition } from "../tooltip"; +import { VIEWS } from "../../constant"; type SideLayoutProps = { children: ReactNode; @@ -16,8 +20,20 @@ const SideLayout: FC = ({ bottomPadding = true }) => { const [isOpen, setIsOpen] = useState(false); + const [view] = useGlobalState("view"); // const closedWidth = dashboardModeActive ? "50%" : "44%"; const closedWidth = "50%"; + const [isMobile, setIsMobile] = useState(false); + useEffect(() => { + if (window.innerWidth < 1024) { + setIsOpen(true); + setIsMobile(true); + } + }, []); + let position: TooltipPosition = "top"; + if (isMobile) { + position = isOpen ? "top-left" : "top-middle"; + } return (
= ({ "focus:outline-none h-full text-white justify-between flex flex-col bg-mapbox-black-500 z-20 " } > -
- {children} -
+
{children}
-
+
setIsOpen((o) => !o)} />
+ + {view !== VIEWS.SOLAR_SITES && ( +
+ + +
+ } + position={position} + className={"text-right"} + fullWidth + > + + +
+ )}
); }; diff --git a/apps/nowcasting-app/components/tooltip.tsx b/apps/nowcasting-app/components/tooltip.tsx index e899d6b1..bdfe3535 100644 --- a/apps/nowcasting-app/components/tooltip.tsx +++ b/apps/nowcasting-app/components/tooltip.tsx @@ -1,7 +1,8 @@ +export type TooltipPosition = "left" | "right" | "middle" | "top" | "top-middle" | "top-left"; type TooltipProps = { children: React.ReactNode; tip: string | React.ReactNode; - position?: "left" | "right" | "middle" | "top"; + position?: TooltipPosition; className?: string; fullWidth?: boolean; }; @@ -32,6 +33,15 @@ const Tooltip: React.FC = ({ case "top": containerPositionClass = "bottom-5 right-2"; tipPositionClass = "-right-2 bottom-0"; + break; + case "top-middle": + containerPositionClass = "bottom-6 -left-32 transform translate-x-2"; + tipPositionClass = "-left-1 bottom-0"; + break; + case "top-left": + containerPositionClass = "bottom-8 right-64 transform -translate-x-2"; + tipPositionClass = "-left-1 bottom-0"; + break; } return (
Object.keys(DELTA_BUCKET).filter((k) => isNaN(Number(k))); + +export const NHR_FORECAST_OPTIONS = [1, 2, 4, 8]; diff --git a/apps/nowcasting-app/pages/_document.tsx b/apps/nowcasting-app/pages/_document.tsx index 05c50568..d84ee9de 100644 --- a/apps/nowcasting-app/pages/_document.tsx +++ b/apps/nowcasting-app/pages/_document.tsx @@ -3,7 +3,7 @@ import Document, { Html, Head, Main, NextScript } from "next/document"; class MyDocument extends Document { render() { return ( - + {/*// @ts-ignore*/} @@ -15,7 +15,7 @@ class MyDocument extends Document { - +
diff --git a/apps/nowcasting-app/styles/globals.css b/apps/nowcasting-app/styles/globals.css index d2ffbc2e..2e25745e 100644 --- a/apps/nowcasting-app/styles/globals.css +++ b/apps/nowcasting-app/styles/globals.css @@ -11,6 +11,10 @@ @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-mapbox-black bg-ocf-yellow hover:bg-ocf-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ocf-delta-500; } +.pv-map a.mapboxgl-ctrl-logo, .delta-map a.mapboxgl-ctrl-logo { + margin-left: 0.5rem; +} + .pv-map .mapboxgl-popup-content, .delta-map .mapboxgl-popup-content { background: rgba(0,0,0,0.75); color: white; @@ -81,7 +85,7 @@ height: 100%; padding: 0.25em 0.5em 0.25em 0.5em; background: transparent; - border: 1px solid #caced1; + border: 1px solid #FF9736; border-radius: 0.25rem; cursor: pointer; }