diff --git a/app/components/form.module.css b/app/components/form.module.css
index a8612d3..72e36e1 100644
--- a/app/components/form.module.css
+++ b/app/components/form.module.css
@@ -3,7 +3,10 @@
overflow: auto;
display: flex;
flex-direction: column;
- padding: 5rem;
+ padding-top: 3rem;
+ padding-left: 5rem;
+ padding-right: 5rem;
+ padding-bottom: 3rem;
gap: 1rem;
}
@@ -147,6 +150,7 @@
border-radius: 10px;
border-color: lightslategray;
padding: 0.1rem;
+ padding-left: .3rem;
}
.settingForm input[type="number"] {
@@ -169,3 +173,11 @@
background-color:forestgreen;
color: white;
}
+
+.formTitle {
+ white-space:nowrap;
+}
+
+.highlightText {
+ display:inline-block;
+}
\ No newline at end of file
diff --git a/app/components/form.tsx b/app/components/form.tsx
index 0085312..e8eb771 100644
--- a/app/components/form.tsx
+++ b/app/components/form.tsx
@@ -38,7 +38,7 @@ export default function Form(props: any) {
keepCrosshair: false,
showTargetDate: false,
showTargetWeek: false,
- formTitle: 'Select a visualization',
+ formTitle:
Select a visualization
,
formGeoString: '',
currentVisMode: null,
})
@@ -63,10 +63,10 @@ export default function Form(props: any) {
}, [inputState])
return (
-
+
- {state.formTitle}
+ {state.formTitle}
{state.formGeoString}
Click on the series to freeze/unfreeze the tooltip. Drag to zoom in.
diff --git a/app/layout.tsx b/app/layout.tsx
index 802ea6a..097fbbd 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,5 @@
import './globals.css'
-import { Roboto } from 'next/font/google'
+import { Barlow, Montserrat, Roboto } from 'next/font/google'
import styles from './layout.module.css';
const roboto = Roboto({
@@ -7,6 +7,11 @@ const roboto = Roboto({
subsets: ['latin'],
})
+const montserrat = Montserrat({
+ weight: ['400', '700'],
+ subsets: ['latin'],
+})
+
export const metadata = {
title: 'Daily Weather History',
description: 'Visualize and compare historical weather data for any geolocation.',
@@ -19,7 +24,7 @@ export default function RootLayout({
}) {
return (
-
+
{children}
diff --git a/app/page.tsx b/app/page.tsx
index f8ce084..cd1286f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,4 @@
-import Form from "./components/form";
import FormComparer from "./components/formComparer";
import Layout from "./layout";
diff --git a/app/shared/openMeteoInterface.tsx b/app/shared/openMeteoInterface.tsx
index 5fdc23d..dc72661 100644
--- a/app/shared/openMeteoInterface.tsx
+++ b/app/shared/openMeteoInterface.tsx
@@ -1,5 +1,5 @@
-import { formState, getWeekNumber, inputState, median, visualizationModes } from "./utils";
-
+import { formState, getWeekNumber, inputState, median, months, myColors, visualizationModes } from "./utils";
+import styles from '../components/form.module.css'
/**
*
* @returns Historical data for the current state of the form
@@ -69,7 +69,16 @@ export async function getOpenMeteoData(inputState: inputState, state: formState,
showTargetWeek: false,
currentVisMode: visualizationModes.Interval,
formGeoString: `for ${msg.latitude.toFixed(2)}˚N ${msg.longitude.toFixed(2)}˚E at ${msg.elevation}m above sea level`,
- formTitle: `Daily Data between ${inputState.startDate} and ${inputState.endDate}.`
+ //formTitle: `Daily Data between ${inputState.startDate} and ${inputState.endDate}.`
+ formTitle: Daily Data between
+
+ {inputState.startDate}
+
and
+
+ {inputState.endDate}
+
.
+
+
})
}
@@ -119,7 +128,20 @@ export async function getDateHistory(inputState: inputState, state: formState, s
showTargetWeek: false,
currentVisMode: visualizationModes.DateHistory,
formGeoString: `for ${msg.latitude.toFixed(2)}˚N ${msg.longitude.toFixed(2)}˚E at ${msg.elevation}m above sea level`,
- formTitle: `History of ${inputState.targetDate.slice(5)} between ${inputState.startDate} and ${inputState.endDate}.`
+ //formTitle: `History of ${inputState.targetDate.slice(5)} between ${inputState.startDate} and ${inputState.endDate}.`
+ formTitle: History of
+
+ {inputState.targetDate.slice(5)}
+
+ between
+
+ {inputState.startDate}
+
and
+
+ {inputState.endDate}
+
.
+
+
})
}
@@ -198,7 +220,20 @@ export async function getWeekHistory(inputState: inputState, state: formState, s
showTargetWeek: true,
currentVisMode: visualizationModes.WeekHistory,
formGeoString: `for ${msg.latitude.toFixed(2)}˚N ${msg.longitude.toFixed(2)}˚E at ${msg.elevation}m above sea level`,
- formTitle: `History of Calender Week ${targetWeek} between ${inputState.startDate} and ${inputState.endDate}.`
+ //formTitle: `History of Calender Week ${targetWeek} between ${inputState.startDate} and ${inputState.endDate}.`
+ formTitle: History of Calender Week
+
+ {targetWeek}
+
+ between
+
+ {inputState.startDate}
+
and
+
+ {inputState.endDate}
+
.
+
+
})
}
@@ -269,7 +304,20 @@ export async function getMonthHistory(inputState: inputState, state: formState,
showTargetWeek: true,
currentVisMode: visualizationModes.MonthHistory,
formGeoString: `for ${msg.latitude.toFixed(2)}˚N ${msg.longitude.toFixed(2)}˚E at ${msg.elevation}m above sea level`,
- formTitle: `History of Month ${inputState.targetDate.slice(5).slice(0, -3)} between ${inputState.startDate} and ${inputState.endDate}.`
+ //formTitle: `History of Month ${months[Number(inputState.targetDate.slice(5).slice(0, -3))]} between ${inputState.startDate} and ${inputState.endDate}.`,
+ formTitle: History of Month
+
+ {months[Number(inputState.targetDate.slice(5).slice(0, -3))]}
+
+ between
+
+ {inputState.startDate}
+
and
+
+ {inputState.endDate}
+
.
+
+
})
}
diff --git a/app/shared/utils.tsx b/app/shared/utils.tsx
index c8193d7..7d5103e 100644
--- a/app/shared/utils.tsx
+++ b/app/shared/utils.tsx
@@ -1,3 +1,5 @@
+import { ReactElement } from "react";
+
/**
* The type we use to mark a data point in a weather data series. x is the date and y a temperature measurement
*/
@@ -29,7 +31,7 @@ export interface formState {
keepCrosshair: boolean,
showTargetDate: boolean,
showTargetWeek: boolean,
- formTitle: string,
+ formTitle: ReactElement,
formGeoString: string,
currentVisMode: visualizationModes | null,
}
@@ -49,6 +51,21 @@ export enum myColors {
IconBlue = "#0070f3"
}
+export enum months {
+ January = 1,
+ Feburary = 2,
+ March = 3,
+ April = 4,
+ May = 5,
+ June = 6,
+ July = 7,
+ August = 8,
+ September = 9,
+ October = 10,
+ November = 11,
+ December = 12,
+}
+
/**
* from https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php
* @param d a Date