Establish bit.dev & test header component

.bitmap

@@ -0,0 +1,61 @@
+/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
+
+/**
+ * The Bitmap file is an auto generated file used by Bit to track all your Bit components. It maps the component to a folder in your file system.
+ * This file should be committed to VCS(version control).
+ * Components are listed using their component ID (https://bit.dev/docs/components/component-id).
+ * If you want to delete components you can use the "bit remove <component-id>" command.
+ * See the docs (https://bit.dev/docs/components/removing-components) for more information, or use "bit remove --help".
+ */
+
+{
+    "config/constants": {
+        "scope": "openclimatefix.nowcasting-ui",
+        "version": "2d85a41a06e6a88a47be7e9f6640e183f544f535",
+        "mainFile": "index.ts",
+        "rootDir": "nowcasting-ui/config/constants"
+    },
+    "helpers/global-state": {
+        "scope": "openclimatefix.nowcasting-ui",
+        "version": "3aa0ba6421560ebc771d20fb81da96890b4afe02",
+        "mainFile": "index.ts",
+        "rootDir": "nowcasting-ui/helpers/global-state"
+    },
+    "helpers/utils": {
+        "scope": "openclimatefix.nowcasting-ui",
+        "version": "5eef1983976f95dfdc73aca5b3dc7f9d388019ed",
+        "mainFile": "index.ts",
+        "rootDir": "nowcasting-ui/helpers/utils"
+    },
+    "icons/icons": {
+        "scope": "openclimatefix.nowcasting-ui",
+        "version": "ea31239d3480642c9ce2dbc77ffe0b5ed1b5ccdb",
+        "mainFile": "index.ts",
+        "rootDir": "nowcasting-ui/icons/icons"
+    },
+    "icons/logo": {
+        "scope": "openclimatefix.nowcasting-ui",
+        "version": "6667cb48e159b21398040cd4170154980398e1a2",
+        "mainFile": "index.ts",
+        "rootDir": "nowcasting-ui/icons/logo"
+    },
+    "layout/header": {
+        "scope": "openclimatefix.nowcasting-ui",
+        "version": "f649ced28a24a78d733ed24d1edad168057e7047",
+        "mainFile": "index.ts",
+        "rootDir": "nowcasting-ui/layout/header"
+    },
+    "misc/chart-info": {
+        "scope": "openclimatefix.nowcasting-ui",
+        "version": "78d53fbf60df1e82c9c0791f572e66fb4ad4e423",
+        "mainFile": "index.ts",
+        "rootDir": "nowcasting-ui/misc/chart-info"
+    },
+    "misc/tooltip": {
+        "scope": "openclimatefix.nowcasting-ui",
+        "version": "b2bc99110a7ea2ff6e0776bac58c72a9b5593080",
+        "mainFile": "index.ts",
+        "rootDir": "nowcasting-ui/misc/tooltip"
+    },
+    "$schema-version": "15.0.0"
+}

components/Layout.tsx

@@ -0,0 +1,13 @@
+import { Tooltip } from '@openclimatefix/nowcasting-ui.misc.tooltip';
+import { FC, PropsWithChildren } from 'react';
+
+const Layout: FC<PropsWithChildren<{}>> = ({ children }) => {
+  return (
+    <>
+        <Tooltip tip="yummy"></Tooltip>
+        <main className="bg-mapbox-black-500 border-red">{children}</main>
+    </>
+  );
+};
+
+export default Layout;

nowcasting-ui/config/constants/constants.tsx

@@ -0,0 +1,18 @@
+export enum VIEWS {
+  FORECAST = "FORECAST",
+  DELTA = "DELTA",
+  SOLAR_SITES = "SOLAR SITES"
+}
+
+export enum DELTA_BUCKET {
+  NEG4 = -80,
+  NEG3 = -60,
+  NEG2 = -40,
+  NEG1 = -20,
+  ZERO = 0,
+  POS1 = 20,
+  POS2 = 40,
+  POS3 = 60,
+  POS4 = 80
+}
+export const getDeltaBucketKeys = () => Object.keys(DELTA_BUCKET).filter((k) => isNaN(Number(k)));

nowcasting-ui/config/constants/index.ts

@@ -0,0 +1 @@
+export { VIEWS, DELTA_BUCKET, getDeltaBucketKeys } from "./constants";

nowcasting-ui/helpers/global-state/global-state.tsx

@@ -0,0 +1,45 @@
+import { createGlobalState } from "react-hooks-global-state";
+import { getDeltaBucketKeys } from "@openclimatefix/nowcasting-ui.config.constants";
+
+export function get30MinNow(offsetMinutes = 0) {
+  // this is a function to get the date of now, but rounded up to the closest 30 minutes
+  const date = new Date();
+
+  let minutes = date.getMinutes();
+  if (offsetMinutes !== 0) {
+    minutes += offsetMinutes;
+    date.setMinutes(minutes);
+  }
+  if (minutes <= 30) {
+    date.setHours(date.getHours());
+    date.setMinutes(30, 0, 0); // Resets also seconds and milliseconds
+  } else {
+    date.setHours(date.getHours() + 1);
+    date.setMinutes(0, 0, 0); // Resets also seconds and milliseconds
+  }
+  return date.toISOString();
+}
+
+type GlobalStateType = {
+  selectedISOTime?: string;
+  timeNow: string;
+  clickedGspId?: number;
+  forecastCreationTime?: string;
+  visibleLines: string[];
+  selectedBuckets: string[];
+  show4hView?: boolean;
+};
+
+export const { useGlobalState } = createGlobalState<GlobalStateType>({
+  selectedISOTime: get30MinNow(),
+  timeNow: get30MinNow(),
+  clickedGspId: undefined,
+  forecastCreationTime: undefined,
+  visibleLines: ["GENERATION", "GENERATION_UPDATED", "FORECAST", "PAST_FORECAST"],
+  selectedBuckets: getDeltaBucketKeys().filter((key: string) => key !== "ZERO"),
+  show4hView:
+    process.env.NODE_ENV === "development" ||
+    // Also hide on Staging/Preview deployments for now, only show on dev by default.
+    // (!!process.env.VERCEL_ENV && process.env.VERCEL_ENV !== "production") ||
+    false
+});

nowcasting-ui/helpers/global-state/index.ts

@@ -0,0 +1 @@
+export { useGlobalState } from "./global-state";

nowcasting-ui/helpers/utils/index.ts

@@ -0,0 +1,2 @@
+export { classNames, formatISODateStringHumanNumbersOnly } from "./utils";
+export type { UtilsProps } from "./utils";

nowcasting-ui/helpers/utils/utils.tsx

@@ -0,0 +1,26 @@
+import React, { ReactNode } from "react";
+
+export type UtilsProps = {
+  /**
+   * a node to be rendered in the special component.
+   */
+  children?: ReactNode;
+};
+
+export const classNames = (...classes: string[]) => {
+  return classes.filter(Boolean).join(" ");
+};
+
+export const formatISODateStringHumanNumbersOnly = (date: string) => {
+  // Change date to nice human-readable format.
+  // Note that this converts the string to Europe London Time
+  // timezone and seconds are removed
+
+  const d = new Date(date);
+
+  const date_london = d.toLocaleDateString("en-GB", { timeZone: "Europe/London" });
+  const date_london_time = d.toLocaleTimeString("en-GB", { timeZone: "Europe/London" }).slice(0, 5);
+
+  // further formatting could be done to make it yyyy/mm/dd HH:MM
+  return `${date_london} ${date_london_time}`;
+};

nowcasting-ui/icons/icons/icons.composition.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import {
+  ExternalLinkIcon,
+  LegendLineGraphIcon,
+  CloseButtonIcon,
+  ClockIcon,
+  InfoIcon,
+  UpArrow,
+  DownArrow
+} from "./icons";
+
+export const BasicIcons = () => {
+  return (
+    <div>
+      <ExternalLinkIcon />
+      <LegendLineGraphIcon />
+      <CloseButtonIcon />
+      <ClockIcon />
+      <InfoIcon />
+      <UpArrow />
+      <DownArrow />
+    </div>
+  );
+};

nowcasting-ui/icons/icons/icons.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+
+type LegendLineGraphIconProps = {
+  className?: string;
+  dashed?: boolean;
+};
+
+type IconProps = {
+  className?: string;
+};
+
+type InfoIconProps = {
+  className?: string;
+};
+
+export const LegendLineGraphIcon: React.FC<LegendLineGraphIconProps> = ({
+  className,
+  dashed = false
+}) => (
+  <svg
+    className={className}
+    width="24"
+    height="22"
+    viewBox="0 0 24 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3 19C7 19 12 16 12.5 11C13 6 17 3 21 3"
+      strokeWidth={2}
+      stroke="currentColor"
+      strokeDasharray={dashed ? "3 3" : "0"}
+    />
+  </svg>
+);
+
+export const CloseButtonIcon: React.FC<IconProps> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    width="2rem"
+    height="2rem"
+    viewBox="0 0 24 24"
+  >
+    <path
+      strokeWidth={0.5}
+      d="M20.030 5.030l-1.061-1.061-6.97 6.97-6.97-6.97-1.061 1.061 6.97 6.97-6.97 6.97 1.061 1.061 6.97-6.97 6.97 6.97 1.061-1.061-6.97-6.97 6.97-6.97z"
+      fill="white"
+    />
+  </svg>
+);
+
+export const ClockIcon: React.FC<IconProps> = ({ className }) => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7 12.3743C9.96813 12.3743 12.3743 9.96813 12.3743 7C12.3743 4.03187 9.96813 1.62573 7 1.62573C4.03187 1.62573 1.62573 4.03187 1.62573 7C1.62573 9.96813 4.03187 12.3743 7 12.3743Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7 3.77545V7.00001L9.14971 8.07487"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const InfoIcon: React.FC<InfoIconProps> = ({ className }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white">
+    <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.033 16.01c.564-1.789 1.632-3.932 1.821-4.474.273-.787-.211-1.136-1.74.209l-.34-.64c1.744-1.897 5.335-2.326 4.113.613-.763 1.835-1.309 3.074-1.621 4.03-.455 1.393.694.828 1.819-.211.153.25.203.331.356.619-2.498 2.378-5.271 2.588-4.408-.146zm4.742-8.169c-.532.453-1.32.443-1.761-.022-.441-.465-.367-1.208.164-1.661.532-.453 1.32-.442 1.761.022.439.466.367 1.209-.164 1.661z" />
+  </svg>
+);
+
+export const ExternalLinkIcon: React.FC<IconProps> = ({ className }) => (
+  <svg
+    className={className}
+    width="8"
+    height="8"
+    viewBox="0 0 8 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_166_5158)">
+      <path
+        d="M6 4.33333V6.33333C6 6.51014 5.92976 6.67971 5.80474 6.80474C5.67971 6.92976 5.51014 7 5.33333 7H1.66667C1.48986 7 1.32029 6.92976 1.19526 6.80474C1.07024 6.67971 1 6.51014 1 6.33333V2.66667C1 2.48986 1.07024 2.32029 1.19526 2.19526C1.32029 2.07024 1.48986 2 1.66667 2H3.66667"
+        stroke="currentColor"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 1H7V3"
+        stroke="currentColor"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.3335 4.66667L7.00016 1"
+        stroke="currentColor"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_166_5158">
+        <rect width="8" height="8" fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+// icons for the delta view
+
+type DeltaIconProps = {
+  className?: string;
+};
+
+export const UpArrow: React.FC<DeltaIconProps> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="22"
+    id="triangle-up"
+    viewBox="0 0 32 32"
+    width="22"
+  >
+    <path d="M4 24 H28 L16 6 z" />
+  </svg>
+);
+
+export const DownArrow: React.FC<DeltaIconProps> = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="22"
+    id="triangle-down"
+    viewBox="0 0 32 32"
+    width="22"
+  >
+    <path d="M4 8 H28 L16 26 z" />
+  </svg>
+);

nowcasting-ui/icons/icons/index.ts

@@ -0,0 +1,9 @@
+export {
+  ExternalLinkIcon,
+  LegendLineGraphIcon,
+  CloseButtonIcon,
+  ClockIcon,
+  InfoIcon,
+  UpArrow,
+  DownArrow
+} from "./icons";

nowcasting-ui/icons/logo/index.ts

@@ -0,0 +1 @@
+export { OCFlogo } from "./logo";

nowcasting-ui/icons/logo/logo.composition.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { OCFlogo } from "./logo";
+
+export const BasicLogo = () => {
+  return <OCFlogo />;
+};

nowcasting-ui/icons/logo/logo.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+export const OCFlogo = () => (
+  <a
+    className="max-h-full z-20"
+    href="https://www.openclimatefix.org/"
+    target="_blank"
+    rel="noreferrer"
+  >
+    <img src="/OCF_icon_wht.svg" alt="ofc" width={40} />
+  </a>
+);

nowcasting-ui/layout/header/header.composition.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Header } from "./header";
+import { VIEWS } from "@openclimatefix/nowcasting-ui.config.constants";
+
+export const BasicHeader = () => {
+  const [view, setView] = React.useState(VIEWS.FORECAST);
+  return <Header version={"0.0.1"} setView={setView} view={view} />;
+};