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