Feat/add chart zoom to quartz energy

.gitignore

@@ -1,2 +1,5 @@
 node_modules
 .turbo
+build/**
+dist/**
+.next/**

apps/nowcasting-app/components/charts/forecast-header/ui.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { theme } from "../../../tailwind.config";
 import { ClockIcon } from "../../icons/icons";
 import ForecastLabel from "../../national_forecast_labels";
@@ -140,6 +139,7 @@ export const NextForecast: React.FC<{ pv: string; tip: string; time: string; col
 };
 
 type ForecastHeaderProps = {
+  children: React.ReactNode;
   forecastNextPV: string;
   forecastPV: string;
   actualPV: string;

apps/nowcasting-app/components/charts/gsp-pv-remix-chart/forecast-header-gsp.tsx

@@ -1,7 +1,7 @@
-import React from "react";
 import { CloseButtonIcon, DownArrow, UpArrow } from "../../icons/icons";
 import { ForecastHeadlineFigure } from "../forecast-header/ui";
 import { DeltaHeaderBlock } from "../delta-view/delta-header-block";
+import React, { FC } from "react";
 
 type ForecastHeaderGSPProps = {
   title: string;
@@ -14,9 +14,10 @@ type ForecastHeaderGSPProps = {
   forecastPV?: string;
   forecastNextTimeOnly?: string;
   forecastNextPV?: string;
+  children?: React.ReactNode;
 };
 
-const ForecastHeaderGSP: React.FC<ForecastHeaderGSPProps> = ({
+const ForecastHeaderGSP: FC<ForecastHeaderGSPProps> = ({
   title,
   deltaView,
   deltaValue,

apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx

@@ -1,4 +1,3 @@
-import { FC } from "react";
 import RemixLine from "../remix-line";
 import useFormatChartData from "../use-format-chart-data";
 import {
@@ -12,6 +11,7 @@ import useGetGspData from "./use-get-gsp-data";
 import useGlobalState, { get30MinNow, getNext30MinSlot } from "../../helpers/globalState";
 import Spinner from "../../icons/spinner";
 import { ForecastValue } from "../../types";
+import React, { FC } from "react";
 
 // We want to have the ymax of the graph to be related to the capacity of the GspPvRemixChart
 // If we use the raw values, the graph looks funny, i.e y major ticks are 0 100 232

apps/nowcasting-app/components/charts/solar-site-view/forecast-header.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { CloseButtonIcon } from "../../icons/icons";
 
 type ForecastHeaderSiteProps = {

apps/nowcasting-app/components/delta-forecast-label.tsx

@@ -1,4 +1,5 @@
 type DeltaForecastLabelProps = {
+  children: React.ReactNode;
   tip: string | React.ReactNode;
   position?: "left" | "right" | "middle";
   className?: string;

apps/nowcasting-app/components/helpers/utils.test.ts

@@ -25,8 +25,8 @@ describe("check getOpacityValueFromPVNormalized with valid values", () => {
 describe("check convertISODateStringToLondonTime", () => {
   test("check convertISODateStringToLondonTime with valid date strings", () => {
     expect(convertISODateStringToLondonTime("2021-01-01T03:00:00.000Z")).toBe("03:00");
-    expect(convertISODateStringToLondonTime("2021-01-01T03:21:00.000")).toBe("03:21");
-    expect(convertISODateStringToLondonTime("2021-01-01T03:50:11")).toBe("03:50");
+    expect(convertISODateStringToLondonTime("2021-01-01T03:21:00.000Z")).toBe("03:21");
+    expect(convertISODateStringToLondonTime("2021-01-01T03:50:11Z")).toBe("03:50");
   });
 
   it("should handle an empty date string", () => {

apps/nowcasting-app/components/icons/logo.tsx

@@ -1,4 +1,6 @@
-export const OCFlogo = () => (
+import { FC } from "react";
+
+export const OCFlogo: FC = () => (
   <a
     className="max-h-full z-20"
     href="https://www.openclimatefix.org/"

apps/nowcasting-app/components/map/types.ts

@@ -12,6 +12,7 @@ export enum SelectedData {
 }
 
 export interface IMap {
+  children: React.ReactNode;
   loadDataOverlay: any;
   controlOverlay: any;
   bearing?: number;

apps/nowcasting-app/components/national_forecast_labels.tsx

@@ -1,4 +1,5 @@
 type ForecastLabelProps = {
+  children: React.ReactNode;
   tip: string | React.ReactNode;
   position?: "left" | "right" | "middle";
   className?: string;

apps/nowcasting-app/components/side-layout/index.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import ExpandButton from "./expand-button";
 import useGlobalState from "../helpers/globalState";
 
 type SideLayoutProps = {
+  children: React.ReactNode;
   className?: string;
   dashboardModeActive?: boolean;
   bottomPadding?: boolean;

apps/nowcasting-app/components/tooltip.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-
 type TooltipProps = {
+  children: React.ReactNode;
   tip: string | React.ReactNode;
   position?: "left" | "right" | "middle" | "top";
   className?: string;

apps/nowcasting-app/package.json

@@ -25,7 +25,7 @@
     "js-cookie": "^3.0.5",
     "mapbox-gl": "^2.8.2",
     "next": "^12.0.7",
-    "openapi-fetch": "^0.7.6",
+    "openapi-fetch": "^0.9.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hooks-global-state": "^1.0.2",
@@ -53,7 +53,8 @@
     "@types/js-cookie": "^3.0.3",
     "@types/leaflet": "^1.7.9",
     "@types/mapbox-gl": "^2.7.2",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18",
+    "@types/react-dom": "^18.2.24",
     "autoprefixer": "^10.4.7",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.5",

apps/quartz-app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/quartz-app/OLDeslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

apps/quartz-app/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/quartz-app/app/globals.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

apps/quartz-app/app/layout.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import Header from "../src/components/layout/Header";
+import Providers from "@/app/providers";
+import { ReactNode } from "react";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Quartz Energy | Rajasthan",
+  description: "Solar and Wind Forecasting Service",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Providers>
+          <Header />
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}