initial commit
This commit is contained in:
terraputix
@@ -0,0 +1,97 @@
|
||||
<script lang="ts">
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
import { page } from '$app/state';
|
||||
|
||||
import { geoLocationNameToRoute } from '$lib/utils/meteo';
|
||||
|
||||
import Button from '$lib/components/ui/button/button.svelte';
|
||||
import { storedLocation } from '$lib/stores/settings';
|
||||
|
||||
let location = get(storedLocation);
|
||||
const locationRoute = geoLocationNameToRoute(location.name);
|
||||
|
||||
interface Props {
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { children }: Props = $props();
|
||||
|
||||
const links = [
|
||||
{
|
||||
title: 'Weather Forecast',
|
||||
url: '/en/weather',
|
||||
children: [
|
||||
{
|
||||
title: 'Week Prediction',
|
||||
url:
|
||||
'/en/weather/week/' +
|
||||
(location.population
|
||||
? location.population > 543000
|
||||
? locationRoute
|
||||
: locationRoute + '_' + location.id
|
||||
: locationRoute + '_' + location.id)
|
||||
},
|
||||
{ title: 'Model Comparison', url: '/en/weather/compare' },
|
||||
{ title: '14 Day Weather', url: '/en/weather/14-day' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
let selectedPath = $derived.by(() => {
|
||||
for (const link of links) {
|
||||
if (link.children) {
|
||||
for (const l of link.children) {
|
||||
if (page.url.pathname.includes(l.url) || page.url.pathname.includes(l.url + '/')) {
|
||||
return l;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (page.url.pathname === link.url || page.url.pathname === link.url + '/') {
|
||||
return link;
|
||||
}
|
||||
}
|
||||
return {};
|
||||
});
|
||||
|
||||
let mobileNavOpened = $state(false);
|
||||
</script>
|
||||
|
||||
<div class="mb-12 flex flex-col md:mb-24 md:flex-row">
|
||||
<aside class="w-full md:w-1/6 md:max-w-[400px] md:min-w-[230px]">
|
||||
<nav class="sticky top-0 flex flex-col p-6 pb-3 md:pr-3 md:pb-6">
|
||||
<Button
|
||||
variant="outline"
|
||||
class="flex justify-start p-3 md:hidden"
|
||||
onclick={() => {
|
||||
mobileNavOpened = !mobileNavOpened;
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
class="lucide lucide-chevrons-up-down mr-2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="m7 15 5 5 5-5" />
|
||||
<path d="m7 9 5-5 5 5" />
|
||||
</svg><b>{selectedPath.title}</b>
|
||||
</Button>
|
||||
|
||||
<ul
|
||||
class={`list-unstyled overflow-hidden duration-500 ${mobileNavOpened ? 'mt-2 max-h-[968px] md:max-h-[unset]' : 'max-h-0 md:max-h-[unset] '}`}
|
||||
></ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<div
|
||||
class="lg:max-w-unset flex flex-1 flex-col p-6 pt-0 md:max-w-[calc(100%-230px)] md:pt-6 md:pl-3"
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
import { storedLocation } from '$lib/stores/settings';
|
||||
|
||||
import type { LayoutLoad } from './$types';
|
||||
|
||||
const location = get(storedLocation);
|
||||
|
||||
export const load: LayoutLoad = async () => {
|
||||
return {
|
||||
heroTitle: `Weather ${location.name}`,
|
||||
heroDescription: location.admin1 ?? '' + ' ' + location.country,
|
||||
heroImage: '/images/backgrounds/partly_cloudy.webp',
|
||||
heroHeight: 400,
|
||||
heroPrimaryButtonPath: null,
|
||||
heroPrimaryButtonText: null,
|
||||
heroSecondaryButtonPath: null,
|
||||
heroSecondaryButtonText: null
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,703 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import { fetchWeatherApi } from 'openmeteo';
|
||||
|
||||
import { type GeoLocation, storedLocation } from '$lib/stores/settings';
|
||||
import { urlHashStore } from '$lib/stores/url-hash-store';
|
||||
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import * as Select from '$lib/components/ui/select';
|
||||
|
||||
import LocationSearch from '$lib/components/location/location-search.svelte';
|
||||
|
||||
import cloudCover from './canvas/cloud-cover';
|
||||
import daylight from './canvas/daylight';
|
||||
import precip from './canvas/precip';
|
||||
import raster from './canvas/raster';
|
||||
import tempGradient from './canvas/temp-gradient';
|
||||
import { defaultParameters, models } from './options';
|
||||
import { getColor } from './utils/colors';
|
||||
import weatherCodes from './utils/weather-codes';
|
||||
|
||||
const params = urlHashStore({
|
||||
latitude: [$storedLocation.latitude],
|
||||
longitude: [$storedLocation.longitude],
|
||||
models: 'best_match',
|
||||
...defaultParameters
|
||||
});
|
||||
|
||||
let location = $state($storedLocation);
|
||||
storedLocation.subscribe((value) => {
|
||||
location = value;
|
||||
});
|
||||
|
||||
let diffTemp: number | undefined = $state();
|
||||
let maxTemp: number | undefined = $state();
|
||||
|
||||
let weatherCodesHourly: Float32Array | null | undefined = $state();
|
||||
let canvasElement: HTMLCanvasElement | null | undefined = $state();
|
||||
|
||||
const today = new Date();
|
||||
let selectedDay = $state(new Date());
|
||||
let selectedDayIndex = $state(1);
|
||||
|
||||
let entries = $state(0);
|
||||
|
||||
let weather = $derived(
|
||||
(async (location: GeoLocation) => {
|
||||
const reqParams = {
|
||||
latitude: location.latitude,
|
||||
longitude: location.longitude,
|
||||
elevation: location.elevation,
|
||||
// timezone: location.timezone, ???
|
||||
models: [$params.models],
|
||||
hourly: [
|
||||
'precipitation',
|
||||
'precipitation_probability',
|
||||
'temperature_2m',
|
||||
'weather_code',
|
||||
'windspeed_10m',
|
||||
'winddirection_10m',
|
||||
'cloud_cover',
|
||||
'relative_humidity_2m'
|
||||
].join(','),
|
||||
forecast_days: 6,
|
||||
past_days: 1,
|
||||
temperature_unit: $params.temperature_unit,
|
||||
wind_speed_unit: $params.wind_speed_unit,
|
||||
precipitation_unit: $params.precipitation_unit
|
||||
};
|
||||
const url = 'https://api.open-meteo.com/v1/forecast';
|
||||
const responses = await fetchWeatherApi(url, reqParams);
|
||||
const response = responses[0];
|
||||
const utcOffsetSeconds = response.utcOffsetSeconds();
|
||||
const daily = response.daily()!;
|
||||
const hourly = response.hourly()!;
|
||||
|
||||
weatherCodesHourly = hourly.variables(3)?.valuesArray();
|
||||
|
||||
let hourlyTime = [
|
||||
...Array((Number(hourly.timeEnd()) - Number(hourly.time())) / hourly.interval())
|
||||
].map(
|
||||
(_, i) =>
|
||||
new Date((Number(hourly.time()) + i * hourly.interval() + utcOffsetSeconds) * 1000)
|
||||
);
|
||||
const hourlyTemps = hourly.variables(2)?.valuesArray();
|
||||
const hourlyCloudCover = hourly.variables(6)?.valuesArray();
|
||||
const hourlyPrecip = hourly.variables(0)?.valuesArray();
|
||||
const indexes = [];
|
||||
for (const [index, _] of hourlyTemps.entries()) {
|
||||
indexes.push(index);
|
||||
}
|
||||
|
||||
const maxX = 10000;
|
||||
const maxY = 500;
|
||||
const deltaX = 10000 / hourly.variables(0)?.valuesArray()?.length;
|
||||
|
||||
const ctx = canvasElement?.getContext('2d');
|
||||
if (ctx) {
|
||||
ctx.clearRect(0, 0, maxX, maxY);
|
||||
|
||||
const minTemp = Math.min(
|
||||
...hourly
|
||||
.variables(2)
|
||||
?.valuesArray()
|
||||
.filter((t) => !isNaN(t))
|
||||
);
|
||||
maxTemp = Math.max(
|
||||
...hourly
|
||||
.variables(2)
|
||||
?.valuesArray()
|
||||
.filter((t) => !isNaN(t))
|
||||
);
|
||||
diffTemp = maxTemp - minTemp;
|
||||
|
||||
const config: ConfigInterface = {
|
||||
maxX: maxX,
|
||||
maxY: maxY,
|
||||
deltaX: deltaX,
|
||||
minTemp: minTemp,
|
||||
maxTemp: maxTemp,
|
||||
diffTemp: diffTemp
|
||||
};
|
||||
|
||||
// create canvas
|
||||
daylight(ctx, config, hourlyTime);
|
||||
raster(ctx, config, hourlyTime, today, canvasElement);
|
||||
tempGradient(ctx, config, hourlyTemps, $params.temperature_unit);
|
||||
cloudCover(ctx, config, hourlyCloudCover, canvasElement);
|
||||
precip(ctx, config, hourlyPrecip, canvasElement);
|
||||
}
|
||||
|
||||
return {
|
||||
entries: [
|
||||
{
|
||||
id: 0,
|
||||
name: 'temperature_2m',
|
||||
title: 'Temperature',
|
||||
values: hourly
|
||||
.variables(2)
|
||||
?.valuesArray()
|
||||
?.map((t) => t.toFixed(1))
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 'precipitation',
|
||||
title: 'Precipitation',
|
||||
values: hourly
|
||||
.variables(0)
|
||||
?.valuesArray()
|
||||
?.map((p) => p.toFixed(1))
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'precipitation_probability',
|
||||
title: 'Precip Prob.',
|
||||
values: hourly
|
||||
.variables(1)
|
||||
?.valuesArray()
|
||||
?.map((p) => p.toFixed(0))
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'windspeed_10m',
|
||||
title: 'Wind',
|
||||
values: hourly
|
||||
.variables(4)
|
||||
?.valuesArray()
|
||||
?.map((p) => p.toFixed(0))
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'relative_humidity_2m',
|
||||
title: 'Rel. Hum.',
|
||||
values: hourly
|
||||
.variables(7)
|
||||
?.valuesArray()
|
||||
?.map((p) => p.toFixed(0))
|
||||
}
|
||||
],
|
||||
entriesLength: hourly.variables(0)?.valuesArray()?.length,
|
||||
hourlyTime: hourlyTime,
|
||||
windDirections: hourly.variables(5)?.valuesArray(),
|
||||
indexes: indexes
|
||||
};
|
||||
})(location)
|
||||
);
|
||||
|
||||
let weatherDaily = $derived(
|
||||
(async (location: GeoLocation) => {
|
||||
const reqParams = {
|
||||
latitude: location.latitude,
|
||||
longitude: location.longitude,
|
||||
elevation: location.elevation,
|
||||
// timezone: location.timezone, ???
|
||||
models: [$params.models],
|
||||
daily: [
|
||||
'weather_code',
|
||||
'temperature_2m_max',
|
||||
'temperature_2m_min',
|
||||
'sunrise',
|
||||
'sunset',
|
||||
'sunshine_duration',
|
||||
'precipitation_sum',
|
||||
'windspeed_10m_max',
|
||||
'windgusts_10m_max',
|
||||
'winddirection_10m_dominant'
|
||||
].join(','),
|
||||
forecast_days: 6,
|
||||
past_days: 1,
|
||||
temperature_unit: $params.temperature_unit,
|
||||
wind_speed_unit: $params.wind_speed_unit,
|
||||
precipitation_unit: $params.precipitation_unit
|
||||
};
|
||||
const url = 'https://api.open-meteo.com/v1/forecast';
|
||||
const responses = await fetchWeatherApi(url, reqParams);
|
||||
const response = responses[0];
|
||||
const utcOffsetSeconds = response.utcOffsetSeconds();
|
||||
const daily = response.daily()!;
|
||||
|
||||
return {
|
||||
daily: {
|
||||
time: [...Array((Number(daily.timeEnd()) - Number(daily.time())) / daily.interval())].map(
|
||||
(_, i) =>
|
||||
new Date((Number(daily.time()) + i * daily.interval() + utcOffsetSeconds) * 1000)
|
||||
),
|
||||
weather_code: daily.variables(0)!,
|
||||
temperature_2m_max: daily.variables(1)!,
|
||||
temperature_2m_min: daily.variables(2)!,
|
||||
sunrise: daily.variables(3)!,
|
||||
sunset: daily.variables(4)!,
|
||||
sunshine_duration: daily.variables(5)!,
|
||||
precipitation_sum: daily.variables(6)!,
|
||||
windspeed_10m_max: daily.variables(7)!,
|
||||
windgusts_10m_max: daily.variables(8)!,
|
||||
winddirection_10m_dominant: daily.variables(9)!
|
||||
}
|
||||
};
|
||||
})(location)
|
||||
);
|
||||
|
||||
let winddir = true;
|
||||
entries = 6;
|
||||
|
||||
let scrollDiv: HTMLElement = $state();
|
||||
let tableCells;
|
||||
|
||||
const switchDay = (date: Date, index: number) => {
|
||||
selectedDay = date;
|
||||
|
||||
tableCells = document.querySelectorAll('td.time');
|
||||
|
||||
for (let tableCell of tableCells) {
|
||||
if (Number(tableCell.dataset['date']) === selectedDay.getDate()) {
|
||||
scrollDiv.scrollTo({ left: tableCell.offsetLeft - 110, behavior: 'smooth' });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
selectedDayIndex = index;
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
setTimeout(() => {
|
||||
tableCells = document.querySelectorAll('td.time');
|
||||
for (let tableCell of tableCells) {
|
||||
if (Number(tableCell.dataset['date']) === selectedDay.getDate()) {
|
||||
scrollDiv.scrollTo({ left: tableCell.offsetLeft - 110 });
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, 150);
|
||||
|
||||
document.onkeydown = (e) => {
|
||||
if (!scrollDiv === document.activeElement || !scrollDiv.contains(document.activeElement)) {
|
||||
if (e.key === 'ArrowLeft') {
|
||||
if (selectedDay.getDate() >= today.getDate()) {
|
||||
let newDate = new Date();
|
||||
newDate.setDate(selectedDay.getDate() - 1);
|
||||
switchDay(newDate);
|
||||
}
|
||||
}
|
||||
if (e.key === 'ArrowRight') {
|
||||
if (selectedDay.getDate() <= today.getDate() + 4) {
|
||||
let newDate = new Date();
|
||||
newDate.setDate(selectedDay.getDate() + 1);
|
||||
switchDay(newDate);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
let modelSelected = $derived(models.find((mo) => String(mo.value) === $params.models));
|
||||
// let modelSelectedValue = $derived($params.models[0]);
|
||||
//
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Weather | Open-Meteo.com</title>
|
||||
<link rel="canonical" href="https://open-meteo.com/en/weather" />
|
||||
<meta name="description" content="segseg" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="">
|
||||
<div class="weather-content" style="min-height: 50vh">
|
||||
<div
|
||||
in:fade
|
||||
out:fade
|
||||
style="min-height: 256px"
|
||||
class="weather-week gap-md-2 mb-4 flex flex-col md:flex-row"
|
||||
>
|
||||
{#await weatherDaily then wd}
|
||||
{#each wd.daily.time as time, index (index)}
|
||||
{@const selected = time.getDate() === selectedDay.getDate()}
|
||||
{#if !isNaN(wd.daily.temperature_2m_max.values(index).toFixed(1))}
|
||||
<button
|
||||
style="transition: 300ms; min-width: 13%; {selected ? 'transform: scale(1.025)' : ''}"
|
||||
class="cursor-pointer"
|
||||
onclick={() => {
|
||||
switchDay(time, index);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="gap-md-1 flex flex-row items-center justify-center rounded-xl p-1 md:flex-col md:justify-center md:p-3 {selected
|
||||
? 'bg-accent'
|
||||
: ''}"
|
||||
>
|
||||
<div class="weather-week-date">
|
||||
<b>{time.getDate()} - {time.getMonth() + 1}</b>
|
||||
</div>
|
||||
|
||||
<div
|
||||
data-text={time.toLocaleDateString('en-GB', { weekday: 'long' })}
|
||||
class="grow-text relative mx-auto inline-flex flex-col {selected
|
||||
? 'font-bold'
|
||||
: ''}"
|
||||
>
|
||||
{time.toLocaleDateString('en-GB', { weekday: 'long' })}
|
||||
</div>
|
||||
|
||||
<div class="weather-week-icon pe-none py-2">
|
||||
<svg class="fill-foreground" width="60px" height="60px">
|
||||
<use
|
||||
xlink:href="/images/weather-icons/wi-day-{weatherCodes[
|
||||
wd.daily.weather_code.values(index)
|
||||
]}.svg#Layer_1"
|
||||
></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="weather-temp-max flex min-w-[65px] justify-center rounded-t p-1 text-sm"
|
||||
style={`background-color: ${getColor(wd.daily.temperature_2m_max.values(index).toFixed(0), $params.temperature_unit)}; color: ${wd.daily.temperature_2m_min.values(index) < ($params.temperature_unit === 'celsius' ? 4 : 7) || wd.daily.temperature_2m_min.values(index) >= ($params.temperature_unit === 'celsius' ? 30 : 104) ? 'white' : 'black'}`}
|
||||
>
|
||||
{wd.daily.temperature_2m_max.values(index).toFixed(1)}
|
||||
{$params.temperature_unit === 'celsius' ? '°C' : '°F'}
|
||||
</div>
|
||||
<div
|
||||
class="weather-temp-min flex min-w-[65px] justify-center rounded-b p-1 text-sm"
|
||||
style={`background: ${getColor(wd.daily.temperature_2m_min.values(index).toFixed(0), $params.temperature_unit)}; color: ${wd.daily.temperature_2m_min.values(index) < ($params.temperature_unit === 'celsius' ? 4 : 7) || wd.daily.temperature_2m_min.values(index) >= ($params.temperature_unit === 'celsius' ? 30 : 104) ? 'white' : 'black'}`}
|
||||
>
|
||||
{wd.daily.temperature_2m_min.values(index).toFixed(1)}
|
||||
{$params.temperature_unit === 'celsius' ? '°C' : '°F'}
|
||||
</div>
|
||||
<div class="mt-2 flex items-center justify-center gap-1">
|
||||
<div class="relative flex h-6 w-6 items-center justify-center">
|
||||
<div class="absolute">
|
||||
<svg class="fill-foreground" width="26px" height="26px">
|
||||
<use
|
||||
class="stroke-2"
|
||||
xlink:href="/images/weather-icons/wi-day-sunny.svg#Layer_1"
|
||||
></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{Number(wd.daily.sunshine_duration.values(index) / 3600).toFixed(0)}h
|
||||
</div>
|
||||
<div class="mt-1 flex items-center justify-center">
|
||||
<div class="relative flex h-6 w-6 items-center justify-center">
|
||||
<div class="absolute">
|
||||
<svg class="fill-foreground" width="28px" height="28px">
|
||||
<use
|
||||
class="stroke-2"
|
||||
xlink:href="/images/weather-icons/wi-raindrop.svg#Layer_1"
|
||||
></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{Number(wd.daily.precipitation_sum.values(index)).toFixed(
|
||||
1
|
||||
)}{$params.precipitation_unit === 'mm' ? 'mm' : "'"}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
{:catch error}
|
||||
<p style="color: red">{error.message}</p>
|
||||
{/await}
|
||||
</div>
|
||||
<div class="ml-22 md:ml-0">
|
||||
<h3 class="text-xl font-bold">
|
||||
{selectedDay.toLocaleDateString('en-GB', { weekday: 'long' })}
|
||||
<small>
|
||||
{selectedDay.getDate() === new Date(today.getTime() - 24 * 60 * 60 * 1000).getDate()
|
||||
? ' (Yesterday)'
|
||||
: ''}
|
||||
{selectedDay.getDate() === today.getDate() ? ' (Today)' : ''}
|
||||
{selectedDay.getDate() === new Date(today.getTime() + 24 * 60 * 60 * 1000).getDate()
|
||||
? ' (Tomorrow)'
|
||||
: ''}
|
||||
</small>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
bind:this={scrollDiv}
|
||||
style=" height: {218 + entries * 27.5}px; "
|
||||
class="w-ful relative -mx-5 overflow-x-scroll overflow-y-hidden md:-ml-[110px]"
|
||||
>
|
||||
<canvas
|
||||
bind:this={canvasElement}
|
||||
id="weather_week_canvas"
|
||||
class="border border-border"
|
||||
style="margin-top: 24px; margin-left: 110px; width: 5000px; height: 200px; "
|
||||
height="500px"
|
||||
width="10000px"
|
||||
></canvas>
|
||||
<table in:fade class="absolute bottom-0 border-b border-border">
|
||||
<caption style="display:none"> Weather Week {location.name} </caption>
|
||||
<tbody>
|
||||
{#await weather then weather}
|
||||
<tr>
|
||||
<th
|
||||
scope="row"
|
||||
class="time"
|
||||
style="color: transparent; padding-left: 4px; background: transparent; left: 0px; min-width: 110px; max-width: 110px; position: sticky;"
|
||||
>Time</th
|
||||
>
|
||||
{#each weather.indexes as index, j (j)}
|
||||
<td
|
||||
class="time {weather.hourlyTime[index].getDate() === today.getDate() &&
|
||||
weather.hourlyTime[index].getHours() === today.getHours()
|
||||
? 'now'
|
||||
: ''}"
|
||||
data-date={weather.hourlyTime[index].getDate()}
|
||||
data-time={weather.hourlyTime[index].getHours() + ':00'}
|
||||
style="font-size: 11px; position: absolute; bottom: {188 +
|
||||
27 * entries}px; left:{111 +
|
||||
(5000 / weather.entriesLength) * index}px; min-width: {5000 /
|
||||
weather.entriesLength}px; max-width: {5000 / weather.entriesLength}px;"
|
||||
>{weather.hourlyTime[index].getHours() < 10 ? '0' : ''}{weather.hourlyTime[
|
||||
index
|
||||
].getHours()}</td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
<!-- icons -->
|
||||
<tr>
|
||||
<th
|
||||
scope="row"
|
||||
style="color: transparent; padding-left: 4px; background: transparent; left: 0px; min-width: 110px; max-width: 110px; position: sticky;"
|
||||
>Icons</th
|
||||
>
|
||||
{#each weather.indexes as index, j (j)}
|
||||
{@const now =
|
||||
weather.hourlyTime[index].getDate() === today.getDate() &&
|
||||
weather.hourlyTime[index].getHours() === today.getHours()}
|
||||
<td
|
||||
style="position: absolute; bottom: {27.5 * entries -
|
||||
24 +
|
||||
0.8 * 200 -
|
||||
0.54 *
|
||||
200 *
|
||||
((maxTemp - weather.entries[0].values[index]) / diffTemp)}px; left:{116 +
|
||||
(5000 / weather.entriesLength) * index}px; min-width: {5000 /
|
||||
weather.entriesLength}px; max-width: {5000 / weather.entriesLength}px;"
|
||||
><svg class="fill-foreground {now ? 'scale-125' : ''}" width="20px" height="20px">
|
||||
<use
|
||||
class="stroke-2"
|
||||
xlink:href="/images/weather-icons/wi-{weather.hourlyTime[index].getHours() >
|
||||
6 && weather.hourlyTime[index].getHours() < 21
|
||||
? 'day'
|
||||
: 'night'}-{weatherCodes[weatherCodesHourly[index]]}.svg#Layer_1"
|
||||
></use>
|
||||
</svg></td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
|
||||
<!-- min / max -->
|
||||
<tr>
|
||||
<th
|
||||
scope="row"
|
||||
style="color: transparent; padding-left: 4px; background: transparent; left: 0px; min-width: 110px; max-width: 110px; position: sticky;"
|
||||
>Temp graph</th
|
||||
>
|
||||
{#each weather.indexes as index, j (j)}
|
||||
{@const temp = weather.entries[0].values[index]}
|
||||
|
||||
{#if !isNaN(temp)}
|
||||
<td
|
||||
class={weather.hourlyTime[index].getDate() === today.getDate() &&
|
||||
weather.hourlyTime[index].getHours() === today.getHours()
|
||||
? 'now'
|
||||
: ''}
|
||||
style="position: absolute; bottom: {27.5 * entries -
|
||||
49 +
|
||||
0.8 * 200 -
|
||||
0.55 * 200 * ((maxTemp - temp) / diffTemp)}px; left:{111 +
|
||||
(5000 / weather.entriesLength) * index}px; min-width: {5000 /
|
||||
weather.entriesLength}px; max-width: {5000 / weather.entriesLength}px;"
|
||||
>{temp.toFixed(0)}</td
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
</tr>
|
||||
{#each weather.entries as entry, i (i)}
|
||||
<tr class="border-t border-border">
|
||||
<th
|
||||
scope="row"
|
||||
class="bg-background text-left"
|
||||
style="left: 0px; min-width: 110px; max-width: 110px; position: sticky;"
|
||||
>{entry.title}</th
|
||||
>
|
||||
|
||||
{#each weather.indexes as index, j (j)}
|
||||
{#if !isNaN(entry.values[index])}
|
||||
<td
|
||||
class="border-r border-border {weather.hourlyTime[index].getDate() ===
|
||||
today.getDate() && weather.hourlyTime[index].getHours() === today.getHours()
|
||||
? 'now'
|
||||
: ''}"
|
||||
style="min-width: {5000 / weather.entriesLength}px; max-width: {5000 /
|
||||
weather.entriesLength}px;
|
||||
{entry.name === 'temperature_2m'
|
||||
? 'background: ' +
|
||||
getColor(
|
||||
weather.entries[0].values[index].toFixed(0),
|
||||
$params.temperature_unit
|
||||
)
|
||||
: ''};
|
||||
{entry.name === 'temperature_2m'
|
||||
? 'color: ' +
|
||||
(weather.entries[0].values[index] <
|
||||
($params.temperature_unit === 'celsius' ? -13 : 7) ||
|
||||
weather.entries[0].values[index] >=
|
||||
($params.temperature_unit === 'celsius' ? 40 : 104)
|
||||
? 'white'
|
||||
: 'black')
|
||||
: ''};
|
||||
{entry.name === 'precipitation_probability'
|
||||
? 'background: rgba(0, 0, 230,' +
|
||||
weather.entries[2].values[index] / 120 +
|
||||
')'
|
||||
: ''};
|
||||
{entry.name === 'precipitation_probability'
|
||||
? 'color: ' +
|
||||
(weather.entries[2].values[index] > 50
|
||||
? 'white'
|
||||
: 'hsl(var(--foreground)')
|
||||
: ''};
|
||||
{entry.name === 'relative_humidity_2m'
|
||||
? 'background: rgba(0, 240, 240,' +
|
||||
weather.entries[4].values[index] ** 3.8 / 10 ** 8.2 +
|
||||
')'
|
||||
: ''};"
|
||||
>{entry.name === 'precipitation' || entry.name === 'temperature_2m'
|
||||
? entry.values[index].toFixed(1)
|
||||
: entry.values[index]}</td
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
{#if winddir}
|
||||
<!-- winddir -->
|
||||
<tr class="border-t border-border">
|
||||
<th
|
||||
scope="row"
|
||||
class="bg-background text-left"
|
||||
style="z-index: 20; left: 0px; min-width: 110px; max-width: 110px; position: sticky;"
|
||||
>Wind Dir.</th
|
||||
>
|
||||
{#each weather.indexes as index, j (j)}
|
||||
{#if !isNaN(weather.windDirections[index])}
|
||||
<td
|
||||
class="border-r border-border {weather.hourlyTime[index].getDate() ===
|
||||
today.getDate() && weather.hourlyTime[index].getHours() === today.getHours()
|
||||
? 'now'
|
||||
: ''}"
|
||||
style="transform: rotate({weather.windDirections[
|
||||
index
|
||||
]}deg);min-width: {5000 / weather.entriesLength}px; max-width: {5000 /
|
||||
weather.entriesLength}px;"
|
||||
><svg class="fill-foreground" width="25px" height="25px">
|
||||
<use xlink:href="/images/weather-icons/wi-direction-down.svg#Layer_1"></use>
|
||||
</svg></td
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
</tr>
|
||||
{/if}
|
||||
{/await}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{#await weatherDaily then wd}
|
||||
{@const sunrise = new Date(Number(wd.daily.sunrise.valuesInt64(selectedDayIndex)) * 1000)}
|
||||
{@const sunset = new Date(Number(wd.daily.sunset.valuesInt64(selectedDayIndex)) * 1000)}
|
||||
<div class="mt-6">
|
||||
<div class="flex items-center gap-1">
|
||||
<svg class="fill-foreground" width="28px" height="28px">
|
||||
<use class="stroke-2" xlink:href="/images/weather-icons/wi-sunrise.svg#Layer_1"></use>
|
||||
</svg>Sunrise: {pad(sunrise.getHours())}:{pad(sunrise.getMinutes())}
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<svg class="fill-foreground" width="28px" height="28px">
|
||||
<use class="stroke-2" xlink:href="/images/weather-icons/wi-sunset.svg#Layer_1"></use>
|
||||
</svg>
|
||||
Sunset: {pad(sunset.getHours())}:{pad(sunset.getMinutes())}
|
||||
</div>
|
||||
</div>
|
||||
{/await}
|
||||
<div>
|
||||
<div class="mt-6 flex gap-6 md:mt-12">
|
||||
<div class="relative w-1/2">
|
||||
<Select.Root name="model_selection" type="single" bind:value={$params.models}>
|
||||
<Select.Trigger
|
||||
aria-label="Forecast days input"
|
||||
class="h-12 cursor-pointer pt-6 [&_svg]:mb-3">{modelSelected?.label}</Select.Trigger
|
||||
>
|
||||
<Select.Content preventScroll={false} class="border-border">
|
||||
{#each models as mo}
|
||||
<Select.Item class="cursor-pointer" value={mo.value}>{mo.label}</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
<Label class="absolute top-[0.35rem] left-2 z-10 px-1 text-xs text-muted-foreground"
|
||||
>Weather model</Label
|
||||
>
|
||||
</Select.Root>
|
||||
</div>
|
||||
<div class="relative w-1/2">
|
||||
<LocationSearch
|
||||
style="height: 40px"
|
||||
on:location={(event) => storedLocation.set(event.detail)}
|
||||
label="Search Location"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 mb-6">
|
||||
<h2 class="text-2xl md:text-3xl">Color scale example</h2>
|
||||
<div class="mt-3 grid grid-cols-4 md:mt-6">
|
||||
{#if $params.temperature_unit == 'celsius'}
|
||||
{#each [...Array(101).keys()].map((i) => -40 + i) as temp}
|
||||
<div
|
||||
class="weather-temp-max flex min-w-[70px] justify-center rounded p-1"
|
||||
style={`background-color: ${getColor(temp, $params.temperature_unit)}; color: ${temp <= ($params.temperature_unit === 'celsius' ? 4 : 7) || temp >= ($params.temperature_unit === 'celsius' ? 30 : 104) ? 'white' : 'black'}`}
|
||||
>
|
||||
{temp} °C <br />
|
||||
{getColor(temp, $params.temperature_unit)}
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each [...Array(91).keys()].map((i) => -40 + i * 2) as temp}
|
||||
<div
|
||||
class="weather-temp-max flex min-w-[70px] justify-center rounded p-1"
|
||||
style={`background-color: ${getColor(temp, $params.temperature_unit)}; color: ${temp <= ($params.temperature_unit === 'celsius' ? 4 : 7) || temp >= ($params.temperature_unit === 'celsius' ? 30 : 104) ? 'white' : 'black'}`}
|
||||
>
|
||||
{temp}
|
||||
{$params.temperature_unit === 'celsius' ? '°C' : '°F'}<br />
|
||||
{getColor(temp, $params.temperature_unit)}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.now {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.weather-week-icon {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #0061a5;
|
||||
margin: 5px 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,14 @@
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
import { storedLocation } from '$lib/stores/settings';
|
||||
|
||||
import type { LayoutLoad } from './$types';
|
||||
|
||||
const location = get(storedLocation);
|
||||
|
||||
export const load: LayoutLoad = async () => {
|
||||
return {
|
||||
heroTitle: `14 Day Weather ${location.name}`,
|
||||
heroDescription: location.admin1 ?? '' + ' ' + location.country
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,331 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { get } from 'svelte/store';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import { dev } from '$app/environment';
|
||||
|
||||
import { storedLocation } from '$lib/stores/settings';
|
||||
import { urlHashStore } from '$lib/stores/url-hash-store';
|
||||
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Switch } from '$lib/components/ui/switch';
|
||||
|
||||
import LocationSearch from '$lib/components/location/location-search.svelte';
|
||||
|
||||
import '../compare/highcharts.css';
|
||||
import { defaultParameters } from './options';
|
||||
|
||||
let node: HTMLElement;
|
||||
let chart: any;
|
||||
let Highcharts = $state(null);
|
||||
|
||||
let showLegend = $state(false);
|
||||
let averageOnly = $state(false);
|
||||
|
||||
const location = get(storedLocation);
|
||||
|
||||
const params = urlHashStore({
|
||||
latitude: [52.52],
|
||||
longitude: [13.41],
|
||||
...defaultParameters,
|
||||
hourly: ['temperature_2m'],
|
||||
models: ['gfs_seamless']
|
||||
});
|
||||
|
||||
let count = $state(0);
|
||||
onMount(async () => {
|
||||
/// Highcharts needs to be loaded in `onMount` to work with prerendered SSG
|
||||
Highcharts = (await import('highcharts')).default;
|
||||
const more = (await import('highcharts/highcharts-more')).default;
|
||||
// more(Highcharts);
|
||||
|
||||
if (dev) {
|
||||
// const HighchartsDebugger = await import('highcharts/modules/debugger');
|
||||
// HighchartsDebugger.default(Highcharts);
|
||||
const Debugger = (await import('highcharts/es-modules/Extensions/Debugger/Debugger.js'))
|
||||
.default;
|
||||
const ErrorMessages = (
|
||||
await import('highcharts/es-modules/Extensions/Debugger/ErrorMessages.js')
|
||||
).default;
|
||||
Highcharts.errorMessages = ErrorMessages;
|
||||
Debugger.compose(Highcharts.Chart);
|
||||
}
|
||||
});
|
||||
|
||||
$effect(async () => {
|
||||
count = 0;
|
||||
if (Highcharts) {
|
||||
node.replaceChildren([]);
|
||||
|
||||
const dataDaily = await fetch(
|
||||
`https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}&timeformat=unixtime&daily=sunset,sunrise&forecast_days=14`
|
||||
);
|
||||
const wd = await dataDaily.json();
|
||||
|
||||
const dataReq = await fetch(
|
||||
`https://ensemble-api.open-meteo.com/v1/ensemble?latitude=${location.latitude}&longitude=${location.longitude}&hourly=${$params.hourly.join(',')}&models=${$params.models.join(',')}&timeformat=unixtime&forecast_days=14`
|
||||
);
|
||||
const data = await dataReq.json();
|
||||
|
||||
let plotBands: any = [];
|
||||
if ('daily' in wd && 'sunrise' in wd.daily && 'sunset' in wd.daily) {
|
||||
let rise = wd.daily.sunrise;
|
||||
let set = wd.daily.sunset;
|
||||
plotBands = rise.map(function (r, i) {
|
||||
return {
|
||||
color: 'rgba(255, 255, 194, 0.5)',
|
||||
from: (r + data.utc_offset_seconds) * 1000,
|
||||
to: (set[i] + data.utc_offset_seconds) * 1000
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
let minValues = new Array(data.hourly.time.length).fill(undefined);
|
||||
let maxValues = new Array(data.hourly.time.length).fill(undefined);
|
||||
|
||||
for (let variable of $params.hourly) {
|
||||
const chartDiv = document.createElement('div');
|
||||
|
||||
let unit;
|
||||
|
||||
let hourly_starttime = (data.hourly.time[0] + data.utc_offset_seconds) * 1000;
|
||||
let pointInterval = (data.hourly.time[1] - data.hourly.time[0]) * 1000;
|
||||
|
||||
const series = [];
|
||||
let average = new Array(data.hourly.time.length).fill(0);
|
||||
let averageCount = new Array(data.hourly.time.length).fill(0);
|
||||
|
||||
for (let [model, values] of Object.entries(data.hourly)) {
|
||||
if (model === 'time') {
|
||||
continue;
|
||||
}
|
||||
if (model.startsWith(variable)) {
|
||||
for (let [index, val] of values.entries()) {
|
||||
if (val) {
|
||||
let avVal = average[index];
|
||||
average[index] = avVal + val;
|
||||
averageCount[index]++;
|
||||
|
||||
if (minValues[index] > val || minValues[index] === undefined) {
|
||||
minValues[index] = val;
|
||||
}
|
||||
if (maxValues[index] < val || maxValues[index] === undefined) {
|
||||
maxValues[index] = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
unit = data.hourly_units[model];
|
||||
}
|
||||
}
|
||||
|
||||
for (let [index, val] of average.entries()) {
|
||||
average[index] = Math.round((val / averageCount[index]) * 10) / 10;
|
||||
}
|
||||
|
||||
const minMax = [];
|
||||
for (let [index, min] of minValues.entries()) {
|
||||
minMax.push([min, maxValues[index]]);
|
||||
}
|
||||
|
||||
series.push({
|
||||
name: 'temperature_2m_spread',
|
||||
data: minMax,
|
||||
type: 'arearange',
|
||||
tooltip: {
|
||||
valueSuffix: ' ' + unit
|
||||
},
|
||||
pointStart: hourly_starttime,
|
||||
pointInterval: pointInterval,
|
||||
className: 'highcharts-spread-series'
|
||||
});
|
||||
|
||||
series.push({
|
||||
name: variable + '_average',
|
||||
data: average,
|
||||
dashStyle: 'ShortDashDot',
|
||||
color: '#5e5e5e',
|
||||
type:
|
||||
unit == 'mm' || unit == 'cm' || unit == 'inch' || unit == 'MJ/m²' ? 'column' : 'spline',
|
||||
tooltip: {
|
||||
valueSuffix: ' ' + unit
|
||||
},
|
||||
lineWidth: 4,
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth: 6
|
||||
}
|
||||
},
|
||||
pointStart: hourly_starttime,
|
||||
pointInterval: pointInterval,
|
||||
className: 'highcharts-average-series'
|
||||
});
|
||||
|
||||
new Highcharts.Chart(chartDiv, {
|
||||
credits: {
|
||||
text: count === $params.hourly.length - 1 ? 'Open-Meteo.com' : '',
|
||||
href: 'http://open-meteo.com'
|
||||
},
|
||||
|
||||
chart: {
|
||||
height: showLegend ? '400px' : '300px',
|
||||
styledMode: true,
|
||||
marginLeft: '50',
|
||||
marginRight: 0
|
||||
},
|
||||
|
||||
lang: {
|
||||
locale: 'en-GB'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: count === 0 ? 'Model Spread' : '',
|
||||
align: 'left'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text:
|
||||
count === 0
|
||||
? `Compare <span class="font-bold">${$params.hourly.join(', ')}</span> in models: <span class="font-bold">` +
|
||||
$params.models.join(', ') +
|
||||
'</span>'
|
||||
: '',
|
||||
align: 'left'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: unit
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
plotLines: [
|
||||
{
|
||||
value: Date.now() + data.utc_offset_seconds * 1000,
|
||||
color: 'red',
|
||||
width: 2
|
||||
}
|
||||
],
|
||||
plotBands: plotBands
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
spline: {
|
||||
lineWidth: 2,
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth: 3
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
column: {
|
||||
pointWidth: 5
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: showLegend,
|
||||
layout: 'horizontal',
|
||||
align: 'center',
|
||||
verticalAlign: 'bottom'
|
||||
},
|
||||
|
||||
series: series,
|
||||
|
||||
responsive: {
|
||||
rules: [
|
||||
{
|
||||
condition: {
|
||||
maxWidth: 800
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
shared: true,
|
||||
animation: false
|
||||
}
|
||||
});
|
||||
|
||||
count++;
|
||||
node.appendChild(chartDiv);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (chart) {
|
||||
chart.destroy();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- min-h-[302px] min-h-[602px] min-h-[902px] min-h-[1202px] -->
|
||||
<div class="container-wrapper relative -mx-6 md:mx-0 min-h-[{300 * $params.hourly.length + 2}px]">
|
||||
<div in:fade={{ duration: 300 }} out:fade={{ duration: 300 }} bind:this={node}></div>
|
||||
<div
|
||||
class="{count > 0
|
||||
? 'pointer-events-none opacity-0'
|
||||
: 'opacity-100'} absolute top-0 z-30 flex h-full w-full items-center justify-center rounded-lg bg-accent/100"
|
||||
>
|
||||
<svg
|
||||
class="lucide lucide-loader-circle animate-spin"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
|
||||
</svg>
|
||||
<span class="hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<div class="mt-6 flex flex-col items-center gap-6 md:mt-12 md:flex-row">
|
||||
<div class="relative w-1/4">
|
||||
<LocationSearch
|
||||
style="height: 40px"
|
||||
on:location={(event) => {
|
||||
storedLocation.set(event.detail);
|
||||
window.location.reload();
|
||||
}}
|
||||
label="Search Location"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Switch
|
||||
id="show_legend"
|
||||
name="Show legend"
|
||||
bind:checked={showLegend}
|
||||
onCheckedChange={() => {
|
||||
$params.hourly = $params.hourly;
|
||||
}}
|
||||
/>
|
||||
<Label for="show_legend" class="mb-[2px] cursor-pointer text-lg">Show legend</Label>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Switch
|
||||
id="average_only"
|
||||
name="Average only"
|
||||
bind:checked={averageOnly}
|
||||
onCheckedChange={() => {
|
||||
$params.hourly = $params.hourly;
|
||||
}}
|
||||
/>
|
||||
<Label for="average_only" class="mb-[2px] cursor-pointer text-lg">Average only</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,33 @@
|
||||
export const defaultParameters = {
|
||||
daily: [],
|
||||
hourly: [],
|
||||
models: [],
|
||||
current: [],
|
||||
minutely_15: [],
|
||||
|
||||
timezone: 'UTC',
|
||||
location_mode: 'location_search',
|
||||
csv_coordinates: undefined,
|
||||
|
||||
time_mode: 'forecast_days',
|
||||
past_days: '0',
|
||||
forecast_days: '14',
|
||||
|
||||
end_date: undefined,
|
||||
start_date: undefined,
|
||||
|
||||
past_hours: undefined,
|
||||
cell_selection: undefined,
|
||||
forecast_hours: undefined,
|
||||
past_minutely_15: undefined,
|
||||
temporal_resolution: undefined,
|
||||
forecast_minutely_15: undefined,
|
||||
|
||||
tilt: '0',
|
||||
azimuth: '0',
|
||||
|
||||
timeformat: 'iso8601',
|
||||
wind_speed_unit: 'kmh',
|
||||
temperature_unit: 'celsius',
|
||||
precipitation_unit: 'mm'
|
||||
};
|
||||
@@ -0,0 +1,78 @@
|
||||
export default (
|
||||
ctx: CanvasRenderingContext2D | null | undefined,
|
||||
config: ConfigInterface,
|
||||
series: Float32Array | null | undefined,
|
||||
canvasElement: HTMLCanvasElement | null
|
||||
): void => {
|
||||
if (ctx && series) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 35 + (series[0] ** 1.5 / 1000) * 30);
|
||||
for (const [index, value] of series.entries()) {
|
||||
ctx.strokeStyle = '#444';
|
||||
ctx.lineWidth = 0.1;
|
||||
const nextValue = series[index + 1];
|
||||
|
||||
const xc =
|
||||
(index * config.deltaX +
|
||||
0.5 * config.deltaX +
|
||||
(index * config.deltaX + 1.5 * config.deltaX)) /
|
||||
2;
|
||||
const yc = (35 + (value ** 1.5 / 1000) * 30 + 35 + (nextValue ** 1.5 / 1000) * 30) / 2;
|
||||
|
||||
ctx.quadraticCurveTo(
|
||||
index * config.deltaX + 0.5 * config.deltaX,
|
||||
35 + (value ** 1.5 / 1000) * 30,
|
||||
xc,
|
||||
yc
|
||||
);
|
||||
}
|
||||
|
||||
ctx.quadraticCurveTo(
|
||||
config.maxX,
|
||||
35 + (series[series.length - 1] ** 1.5 / 1000) * 30,
|
||||
config.maxX,
|
||||
35 + (series[series.length - 1] ** 1.5 / 1000) * 30
|
||||
);
|
||||
ctx.quadraticCurveTo(
|
||||
config.maxX,
|
||||
35 - (series[series.length - 1] ** 1.5 / 1000) * 30,
|
||||
config.maxX,
|
||||
35 - (series[series.length - 1] ** 1.5 / 1000) * 30
|
||||
);
|
||||
|
||||
// same series but reversed
|
||||
for (const [ind, v] of series.entries()) {
|
||||
const index = series.length - 1 - ind;
|
||||
const value = series[index];
|
||||
const nextValue = series[index - 1];
|
||||
|
||||
ctx.strokeStyle = '#444';
|
||||
ctx.lineWidth = 0.1;
|
||||
|
||||
const xc =
|
||||
(index * config.deltaX +
|
||||
0.5 * config.deltaX +
|
||||
(index * config.deltaX - 0.5 * config.deltaX)) /
|
||||
2;
|
||||
const yc = (35 - (value ** 2 / 10000) * 30 + (35 - (nextValue ** 2 / 10000) * 30)) / 2;
|
||||
|
||||
ctx.quadraticCurveTo(
|
||||
index * config.deltaX + 0.5 * config.deltaX,
|
||||
35 - (value ** 2 / 10000) * 30,
|
||||
xc,
|
||||
yc
|
||||
);
|
||||
}
|
||||
ctx.quadraticCurveTo(
|
||||
0.5 * config.deltaX,
|
||||
35 - (series[0] ** 1.5 / 1000) * 30,
|
||||
0,
|
||||
35 - (series[0] ** 1.5 / 1000) * 30
|
||||
);
|
||||
|
||||
ctx.closePath();
|
||||
//to fill the space in the shape
|
||||
ctx.fillStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--muted-foreground').split(' ').join(',')}, 0.5)`;
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
export default (
|
||||
ctx: CanvasRenderingContext2D | null | undefined,
|
||||
config: ConfigInterface,
|
||||
series: Date[]
|
||||
): void => {
|
||||
if (ctx) {
|
||||
for (const [index, value] of series.entries()) {
|
||||
if (value.getHours() > 6 && value.getHours() < 21) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(index * config.deltaX, config.maxY);
|
||||
ctx.lineTo(index * config.deltaX, 0);
|
||||
ctx.lineTo((index + 1) * config.deltaX, 0);
|
||||
ctx.lineTo((index + 1) * config.deltaX, config.maxY);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = '#f4ff0014';
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
export default (
|
||||
ctx: CanvasRenderingContext2D | null | undefined,
|
||||
config: ConfigInterface,
|
||||
series: Float32Array | null | undefined,
|
||||
canvasElement: HTMLCanvasElement | null
|
||||
): void => {
|
||||
if (ctx && series) {
|
||||
for (const [index, value] of series.entries()) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(index * config.deltaX + 0.5 * config.deltaX, config.maxY);
|
||||
|
||||
ctx.strokeStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--primary').split(' ').join(',')}, 1)`;
|
||||
ctx.lineWidth = 12;
|
||||
|
||||
ctx.lineTo(index * config.deltaX + 0.5 * config.deltaX, config.maxY - value ** 0.55 * 45);
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
export default (
|
||||
ctx: CanvasRenderingContext2D | null | undefined,
|
||||
config: ConfigInterface,
|
||||
series: Date[],
|
||||
today: Date,
|
||||
canvasElement: HTMLCanvasElement | null
|
||||
): void => {
|
||||
if (ctx && series) {
|
||||
for (const [index, _] of series.entries()) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(index * config.deltaX, 0);
|
||||
ctx.lineTo(index * config.deltaX, config.maxY);
|
||||
if (series[index].getHours() === 0) {
|
||||
ctx.strokeStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--border').split(' ').join(',')}, 1)`;
|
||||
ctx.lineWidth = 3;
|
||||
} else if (
|
||||
series[index].getDate() === today.getDate() &&
|
||||
series[index].getHours() === today.getHours()
|
||||
) {
|
||||
// fill now line
|
||||
// TODO: update this line every minute
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = 'red';
|
||||
ctx.lineWidth = 5;
|
||||
let minutes = today.getMinutes();
|
||||
ctx.moveTo(index * config.deltaX + (config.deltaX / 60) * minutes, 0);
|
||||
ctx.lineTo(index * config.deltaX + (config.deltaX / 60) * minutes, config.maxY);
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
ctx.strokeStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--border').split(' ').join(',')}, 0.75)`;
|
||||
ctx.lineWidth = 1;
|
||||
} else {
|
||||
ctx.strokeStyle = `hsla(${getComputedStyle(canvasElement).getPropertyValue('--border').split(' ').join(',')}, 0.75)`;
|
||||
ctx.lineWidth = 1;
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,60 @@
|
||||
import { getColor } from '../utils/colors';
|
||||
|
||||
export default (
|
||||
ctx: CanvasRenderingContext2D | null | undefined,
|
||||
config: ConfigInterface,
|
||||
series: Float32Array | null | undefined,
|
||||
unit = 'celsius'
|
||||
): void => {
|
||||
if (ctx && series) {
|
||||
const tempGradientFill = ctx.createLinearGradient(0, 0, 0, config.maxY);
|
||||
tempGradientFill.addColorStop(0, getColor(config.maxTemp.toFixed(0), unit) + '5c');
|
||||
tempGradientFill.addColorStop(0.25, getColor(config.maxTemp.toFixed(0), unit) + '5c');
|
||||
tempGradientFill.addColorStop(0.85, getColor(config.minTemp.toFixed(0), unit) + '06');
|
||||
tempGradientFill.addColorStop(1, getColor(config.minTemp.toFixed(0), unit) + '00');
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(
|
||||
0,
|
||||
0.25 * config.maxY + ((config.maxTemp - series[0]) / config.diffTemp) * 0.55 * config.maxY
|
||||
);
|
||||
for (const [index, value] of series?.filter((t) => !isNaN(t)).entries()) {
|
||||
const indexDiffTemp = config.maxTemp - value;
|
||||
const indexDiffTempNext = config.maxTemp - series[index + 1];
|
||||
|
||||
ctx.strokeStyle = '#d3d3d3';
|
||||
ctx.lineWidth = 4;
|
||||
|
||||
const xc =
|
||||
(index * config.deltaX +
|
||||
0.5 * config.deltaX +
|
||||
(index * config.deltaX + 1.5 * config.deltaX)) /
|
||||
2;
|
||||
const yc =
|
||||
(0.25 * config.maxY +
|
||||
(indexDiffTemp / config.diffTemp) * 0.55 * config.maxY +
|
||||
(0.25 * config.maxY + (indexDiffTempNext / config.diffTemp) * 0.55 * config.maxY)) /
|
||||
2;
|
||||
|
||||
ctx.quadraticCurveTo(
|
||||
index * config.deltaX + 0.5 * config.deltaX,
|
||||
0.25 * config.maxY + (indexDiffTemp / config.diffTemp) * 0.55 * config.maxY,
|
||||
xc,
|
||||
yc
|
||||
);
|
||||
}
|
||||
ctx.quadraticCurveTo(
|
||||
config.maxX,
|
||||
0.25 * config.maxY +
|
||||
((config.maxTemp - series[series.length - 1]) / config.diffTemp) * 0.55 * config.maxY,
|
||||
(config.maxX + config.maxX + config.deltaX) / 2,
|
||||
0.25 * config.maxY +
|
||||
((config.maxTemp - series[series.length - 1]) / config.diffTemp) * 0.55 * config.maxY
|
||||
);
|
||||
ctx.lineTo(config.maxX, config.maxY);
|
||||
ctx.lineTo(0, config.maxY);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = tempGradientFill;
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
import { storedLocation } from '$lib/stores/settings';
|
||||
|
||||
import type { LayoutLoad } from './$types';
|
||||
|
||||
const location = get(storedLocation);
|
||||
|
||||
export const load: LayoutLoad = async () => {
|
||||
return {
|
||||
heroTitle: `Model Compare ${location.name}`,
|
||||
heroDescription: location.admin1 ?? '' + ' ' + location.country
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,434 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { get } from 'svelte/store';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import { dev } from '$app/environment';
|
||||
|
||||
import { storedLocation } from '$lib/stores/settings';
|
||||
import { urlHashStore } from '$lib/stores/url-hash-store';
|
||||
|
||||
import { Checkbox } from '$lib/components/ui/checkbox';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Switch } from '$lib/components/ui/switch';
|
||||
|
||||
import LocationSearch from '$lib/components/location/location-search.svelte';
|
||||
|
||||
import { hourly, models } from '../options';
|
||||
import './highcharts.css';
|
||||
import { defaultParameters } from './options';
|
||||
|
||||
let node: HTMLElement;
|
||||
let chart: any;
|
||||
let Highcharts = $state();
|
||||
|
||||
let showLegend = $state(false);
|
||||
let averageOnly = $state(false);
|
||||
|
||||
const location = get(storedLocation);
|
||||
|
||||
const params = urlHashStore({
|
||||
latitude: [52.52],
|
||||
longitude: [13.41],
|
||||
...defaultParameters,
|
||||
hourly: ['temperature_2m', 'rain', 'relative_humidity_2m'],
|
||||
models: [
|
||||
'ecmwf_ifs025',
|
||||
'meteofrance_seamless',
|
||||
'ukmo_seamless',
|
||||
'icon_seamless',
|
||||
'gem_seamless'
|
||||
]
|
||||
});
|
||||
|
||||
let count = $state(0);
|
||||
onMount(async () => {
|
||||
/// Highcharts needs to be loaded in `onMount` to work with prerendered SSG
|
||||
Highcharts = (await import('highcharts')).default;
|
||||
|
||||
if (dev) {
|
||||
// const HighchartsDebugger = await import('highcharts/modules/debugger');
|
||||
// HighchartsDebugger.default(Highcharts);
|
||||
const Debugger = (await import('highcharts/es-modules/Extensions/Debugger/Debugger.js'))
|
||||
.default;
|
||||
const ErrorMessages = (
|
||||
await import('highcharts/es-modules/Extensions/Debugger/ErrorMessages.js')
|
||||
).default;
|
||||
Highcharts.errorMessages = ErrorMessages;
|
||||
Debugger.compose(Highcharts.Chart);
|
||||
}
|
||||
});
|
||||
|
||||
$effect(async () => {
|
||||
count = 0;
|
||||
if (Highcharts) {
|
||||
node.replaceChildren([]);
|
||||
|
||||
const dataReq = await fetch(
|
||||
`https://api.open-meteo.com/v1/forecast?latitude=${location.latitude}&longitude=${location.longitude}&hourly=${$params.hourly.join(',')}&models=${$params.models.join(',')}&timeformat=unixtime&daily=sunset,sunrise`
|
||||
);
|
||||
const data = await dataReq.json();
|
||||
|
||||
let dailyFirstModelKey = Object.keys(data.daily)[1].split('_');
|
||||
dailyFirstModelKey.shift();
|
||||
dailyFirstModelKey = dailyFirstModelKey.join('_');
|
||||
|
||||
let plotBands: any = [];
|
||||
if (
|
||||
'daily' in data &&
|
||||
'sunrise_' + dailyFirstModelKey in data.daily &&
|
||||
'sunset_' + dailyFirstModelKey in data.daily
|
||||
) {
|
||||
let rise = data.daily['sunrise_' + dailyFirstModelKey];
|
||||
let set = data.daily['sunset_' + dailyFirstModelKey];
|
||||
plotBands = rise.map(function (r, i) {
|
||||
return {
|
||||
color: 'rgba(255, 255, 194, 0.5)',
|
||||
from: (r + data.utc_offset_seconds) * 1000,
|
||||
to: (set[i] + data.utc_offset_seconds) * 1000
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
for (let variable of $params.hourly) {
|
||||
const chartDiv = document.createElement('div');
|
||||
|
||||
let unit;
|
||||
|
||||
let hourly_starttime = (data.hourly.time[0] + data.utc_offset_seconds) * 1000;
|
||||
let pointInterval = (data.hourly.time[1] - data.hourly.time[0]) * 1000;
|
||||
|
||||
const series = [];
|
||||
let average = new Array(data.hourly.time.length).fill(0);
|
||||
let averageCount = new Array(data.hourly.time.length).fill(0);
|
||||
|
||||
let variableCount = 0;
|
||||
for (let [model, values] of Object.entries(data.hourly)) {
|
||||
if (model === 'time') {
|
||||
continue;
|
||||
}
|
||||
if (model.startsWith(variable)) {
|
||||
for (let [index, val] of values.entries()) {
|
||||
if (!!val) {
|
||||
let avVal = average[index];
|
||||
average[index] = avVal + val;
|
||||
averageCount[index]++;
|
||||
}
|
||||
}
|
||||
|
||||
unit = data.hourly_units[model];
|
||||
|
||||
if (!averageOnly) {
|
||||
series.push({
|
||||
name: model,
|
||||
data: values,
|
||||
type:
|
||||
unit == 'mm' || unit == 'cm' || unit == 'inch' || unit == 'MJ/m²'
|
||||
? 'column'
|
||||
: 'spline',
|
||||
tooltip: {
|
||||
valueSuffix: ' ' + unit
|
||||
},
|
||||
pointStart: hourly_starttime,
|
||||
pointInterval: pointInterval
|
||||
});
|
||||
}
|
||||
variableCount++;
|
||||
}
|
||||
}
|
||||
|
||||
for (let [index, val] of average.entries()) {
|
||||
average[index] = Math.round((val / averageCount[index]) * 10) / 10;
|
||||
}
|
||||
|
||||
series.push({
|
||||
name: variable + '_average',
|
||||
data: average,
|
||||
dashStyle: 'ShortDashDot',
|
||||
color: '#5e5e5e',
|
||||
type:
|
||||
unit == 'mm' || unit == 'cm' || unit == 'inch' || unit == 'MJ/m²' ? 'column' : 'spline',
|
||||
tooltip: {
|
||||
valueSuffix: ' ' + unit
|
||||
},
|
||||
lineWidth: 4,
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth: 6
|
||||
}
|
||||
},
|
||||
pointStart: hourly_starttime,
|
||||
pointInterval: pointInterval,
|
||||
className: 'highcharts-average-series'
|
||||
});
|
||||
|
||||
new Highcharts.Chart(chartDiv, {
|
||||
credits: {
|
||||
text: count === $params.hourly.length - 1 ? 'Open-Meteo.com' : '',
|
||||
href: 'http://open-meteo.com'
|
||||
},
|
||||
|
||||
chart: {
|
||||
height: showLegend ? '400px' : '300px',
|
||||
styledMode: true,
|
||||
marginLeft: '50',
|
||||
marginRight: 0
|
||||
},
|
||||
|
||||
lang: {
|
||||
locale: 'en-GB'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: count === 0 ? 'Model Compare' : '',
|
||||
align: 'left'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text:
|
||||
count === 0
|
||||
? `Compare <span class="font-bold">${$params.hourly.join(', ')}</span> in models: <span class="font-bold">` +
|
||||
$params.models.join(', ') +
|
||||
'</span>'
|
||||
: '',
|
||||
align: 'left'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: unit
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
plotLines: [
|
||||
{
|
||||
value: Date.now() + data.utc_offset_seconds * 1000,
|
||||
color: 'red',
|
||||
width: 2
|
||||
}
|
||||
],
|
||||
plotBands: plotBands
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
spline: {
|
||||
lineWidth: 2,
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth: 3
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
column: {
|
||||
pointWidth: 5
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: showLegend,
|
||||
layout: 'horizontal',
|
||||
align: 'center',
|
||||
verticalAlign: 'bottom'
|
||||
},
|
||||
|
||||
series: series,
|
||||
|
||||
responsive: {
|
||||
rules: [
|
||||
{
|
||||
condition: {
|
||||
maxWidth: 800
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
shared: true,
|
||||
animation: false
|
||||
}
|
||||
});
|
||||
|
||||
count++;
|
||||
node.appendChild(chartDiv);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (chart) {
|
||||
chart.destroy();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- min-h-[302px] min-h-[602px] min-h-[902px] min-h-[1202px] -->
|
||||
<div class="container-wrapper relative -mx-6 md:mx-0 min-h-[{300 * $params.hourly.length + 2}px]">
|
||||
<div in:fade={{ duration: 300 }} out:fade={{ duration: 300 }} bind:this={node}></div>
|
||||
<div
|
||||
class="{count > 0
|
||||
? 'pointer-events-none opacity-0'
|
||||
: 'opacity-100'} absolute top-0 z-30 flex h-full w-full items-center justify-center rounded-lg bg-accent/100"
|
||||
>
|
||||
<svg
|
||||
class="lucide lucide-loader-circle animate-spin"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
|
||||
</svg>
|
||||
<span class="hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="">
|
||||
<div class="mt-6 flex flex-col items-center gap-6 md:mt-12 md:flex-row">
|
||||
<div class="relative w-1/4">
|
||||
<LocationSearch
|
||||
style="height: 40px"
|
||||
on:location={(event) => {
|
||||
storedLocation.set(event.detail);
|
||||
window.location.reload();
|
||||
}}
|
||||
label="Search Location"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Switch
|
||||
id="show_legend"
|
||||
name="Show legend"
|
||||
bind:checked={showLegend}
|
||||
onCheckedChange={() => {
|
||||
$params.hourly = $params.hourly;
|
||||
}}
|
||||
/>
|
||||
<Label for="show_legend" class="mb-[2px] cursor-pointer text-lg">Show legend</Label>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Switch
|
||||
id="average_only"
|
||||
name="Average only"
|
||||
bind:checked={averageOnly}
|
||||
onCheckedChange={() => {
|
||||
$params.hourly = $params.hourly;
|
||||
}}
|
||||
/>
|
||||
<Label for="average_only" class="mb-[2px] cursor-pointer text-lg">Average only</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 md:mt-8">
|
||||
<div class="flex">
|
||||
<a href="#models"><h2 id="models" class="text-2xl md:text-3xl">Models</h2></a>
|
||||
{#if $params.models.length > 0}
|
||||
<div transition:fade={{ duration: 200 }} class="relative mt-[5px]">
|
||||
<div
|
||||
class="absolute -top-1 ml-2 rounded-full border-2 border-foreground/25 bg-secondary px-3 py-1 text-sm no-underline"
|
||||
>
|
||||
{$params.models.length} / {models.flat().length}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="mt-2 grid sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
|
||||
{#each models as group, i (i)}
|
||||
<div class="mb-3">
|
||||
{#each group as { value, label } (value)}
|
||||
<div class="group flex items-center" title={label}>
|
||||
<Checkbox
|
||||
id="{value}_model"
|
||||
class="border-border-dark cursor-pointer bg-muted/50 duration-100 group-hover:border-[currentColor]"
|
||||
{value}
|
||||
checked={$params.models?.includes(value)}
|
||||
aria-labelledby="{value}_label"
|
||||
onCheckedChange={() => {
|
||||
if ($params.models?.includes(value)) {
|
||||
$params.models = $params.models.filter((item) => {
|
||||
return item !== value;
|
||||
});
|
||||
} else if ($params.models) {
|
||||
$params.models.push(value);
|
||||
$params.models = $params.models;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Label
|
||||
id="{value}_model_label"
|
||||
for="{value}_model"
|
||||
class="cursor-pointer truncate py-[0.1rem] pl-[0.42rem]">{label}</Label
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- HOURLY -->
|
||||
<div class="mt-6 md:mt-12">
|
||||
<div class="flex">
|
||||
<a href="#hourly_weather_variables"
|
||||
><h2 id="hourly_weather_variables" class="text-2xl md:text-3xl">
|
||||
Hourly Weather Variables
|
||||
</h2></a
|
||||
>
|
||||
{#if $params.hourly.length > 0}
|
||||
<div transition:fade={{ duration: 200 }} class="relative mt-[5px]">
|
||||
<div
|
||||
class="absolute -top-1 ml-2 rounded-full border-2 border-foreground/25 bg-secondary px-3 py-1 text-sm no-underline"
|
||||
>
|
||||
{$params.hourly.length} / {hourly.flat().length}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-2 grid grid-flow-row gap-x-2 gap-y-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4"
|
||||
>
|
||||
{#each hourly as group, i (i)}
|
||||
<div>
|
||||
{#each group as { value, label } (value)}
|
||||
<div class="group flex items-center" title={label}>
|
||||
<Checkbox
|
||||
id="{value}_hourly"
|
||||
class="border-border-dark cursor-pointer bg-muted/50 duration-100 group-hover:border-[currentColor]"
|
||||
{value}
|
||||
checked={$params.hourly?.includes(value)}
|
||||
aria-labelledby="{value}_label"
|
||||
onCheckedChange={() => {
|
||||
if ($params.hourly?.includes(value)) {
|
||||
$params.hourly = $params.hourly.filter((item) => {
|
||||
return item !== value;
|
||||
});
|
||||
} else if ($params.hourly) {
|
||||
$params.hourly.push(value);
|
||||
$params.hourly = $params.hourly;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Label
|
||||
id="{value}_label"
|
||||
for="{value}_hourly"
|
||||
class="cursor-pointer truncate py-[0.1rem] pl-[0.42rem]">{label}</Label
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,33 @@
|
||||
export const defaultParameters = {
|
||||
daily: [],
|
||||
hourly: [],
|
||||
models: [],
|
||||
current: [],
|
||||
minutely_15: [],
|
||||
|
||||
timezone: 'UTC',
|
||||
location_mode: 'location_search',
|
||||
csv_coordinates: undefined,
|
||||
|
||||
time_mode: 'forecast_days',
|
||||
past_days: '0',
|
||||
forecast_days: '7',
|
||||
|
||||
end_date: undefined,
|
||||
start_date: undefined,
|
||||
|
||||
past_hours: undefined,
|
||||
cell_selection: undefined,
|
||||
forecast_hours: undefined,
|
||||
past_minutely_15: undefined,
|
||||
temporal_resolution: undefined,
|
||||
forecast_minutely_15: undefined,
|
||||
|
||||
tilt: '0',
|
||||
azimuth: '0',
|
||||
|
||||
timeformat: 'iso8601',
|
||||
wind_speed_unit: 'kmh',
|
||||
temperature_unit: 'celsius',
|
||||
precipitation_unit: 'mm'
|
||||
};
|
||||
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
interface ConfigInterface {
|
||||
maxX: number;
|
||||
maxY: number;
|
||||
deltaX: number;
|
||||
minTemp: number;
|
||||
maxTemp: number;
|
||||
diffTemp: number;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
[
|
||||
"kinshasa",
|
||||
"shenzhen",
|
||||
"shanghai",
|
||||
"guangzhou",
|
||||
"chengdu",
|
||||
"beijing",
|
||||
"mumbai",
|
||||
"lagos",
|
||||
"lahore",
|
||||
"istanbul"
|
||||
]
|
||||
@@ -0,0 +1,102 @@
|
||||
[
|
||||
"dubai",
|
||||
"kabul",
|
||||
"sydney",
|
||||
"melbourne",
|
||||
"dhaka",
|
||||
"chattogram",
|
||||
"sao-paulo",
|
||||
"rio-de-janeiro",
|
||||
"kinshasa",
|
||||
"abidjan",
|
||||
"santiago",
|
||||
"zhengzhou",
|
||||
"xi'an",
|
||||
"xiamen",
|
||||
"wuxi",
|
||||
"wuhan",
|
||||
"tianjin",
|
||||
"tangshan",
|
||||
"taiyuan",
|
||||
"shiyan",
|
||||
"shijiazhuang",
|
||||
"shenzhen",
|
||||
"shantou",
|
||||
"shanghai",
|
||||
"qingdao",
|
||||
"puyang",
|
||||
"ningbo",
|
||||
"nanning",
|
||||
"nanjing",
|
||||
"kunming",
|
||||
"jinan",
|
||||
"hefei",
|
||||
"hangzhou",
|
||||
"guangzhou",
|
||||
"fuzhou",
|
||||
"foshan",
|
||||
"dongguan",
|
||||
"dalian",
|
||||
"chongqing",
|
||||
"chengdu",
|
||||
"beijing",
|
||||
"suzhou",
|
||||
"shenyang",
|
||||
"harbin",
|
||||
"changchun",
|
||||
"zhongshan",
|
||||
"bogota",
|
||||
"berlin",
|
||||
"cairo",
|
||||
"giza",
|
||||
"alexandria",
|
||||
"addis-ababa",
|
||||
"london",
|
||||
"hong-kong",
|
||||
"new-territories",
|
||||
"jakarta",
|
||||
"surat",
|
||||
"chennai",
|
||||
"hyderabad",
|
||||
"delhi",
|
||||
"kolkata",
|
||||
"mumbai",
|
||||
"bengaluru",
|
||||
"ahmedabad",
|
||||
"baghdad",
|
||||
"tehran",
|
||||
"yokohama",
|
||||
"tokyo",
|
||||
"nairobi",
|
||||
"seoul",
|
||||
"busan",
|
||||
"casablanca",
|
||||
"bamako",
|
||||
"yangon",
|
||||
"mexico-city",
|
||||
"lagos",
|
||||
"kano",
|
||||
"ibadan",
|
||||
"lima",
|
||||
"peshawar",
|
||||
"lahore",
|
||||
"karachi",
|
||||
"faisalabad",
|
||||
"saint-petersburg",
|
||||
"moscow",
|
||||
"jeddah",
|
||||
"riyadh",
|
||||
"singapore",
|
||||
"bangkok",
|
||||
"ankara",
|
||||
"istanbul",
|
||||
"taipei",
|
||||
"new-taipei-city",
|
||||
"dar-es-salaam",
|
||||
"new-york-city",
|
||||
"los-angeles",
|
||||
"ho-chi-minh-city",
|
||||
"hanoi",
|
||||
"johannesburg",
|
||||
"cape-town"
|
||||
]
|
||||
@@ -0,0 +1,64 @@
|
||||
export const defaultParameters = {
|
||||
timeformat: 'iso8601',
|
||||
wind_speed_unit: 'kmh',
|
||||
temperature_unit: 'celsius',
|
||||
precipitation_unit: 'mm'
|
||||
};
|
||||
|
||||
export const models = [
|
||||
{ value: 'best_match', label: 'Best match' },
|
||||
{ value: 'gfs_seamless', label: 'NCEP GFS Seamless' },
|
||||
{ value: 'jma_seamless', label: 'JMA Seamless' },
|
||||
{ value: 'kma_seamless', label: 'KMA Seamless' },
|
||||
{ value: 'icon_seamless', label: 'DWD ICON Seamless' },
|
||||
{ value: 'gem_seamless', label: 'GEM Seamless' },
|
||||
{ value: 'meteofrance_seamless', label: 'Météo-France Seamless' },
|
||||
{ value: 'arpae_cosmo_seamless', label: 'ARPAE Seamless' },
|
||||
{ value: 'metno_seamless', label: 'MET Norway Seamless (with ECMWF)' },
|
||||
{ value: 'knmi_seamless', label: 'KNMI Seamless (with ECMWF)' },
|
||||
{ value: 'dmi_seamless', label: 'DMI Seamless (with ECMWF)' },
|
||||
{ value: 'ukmo_seamless', label: 'UK Met Office Seamless' }
|
||||
];
|
||||
|
||||
export const hourly = [
|
||||
[
|
||||
{ value: 'temperature_2m', label: 'Temperature 2m' },
|
||||
{ value: 'relative_humidity_2m', label: 'Relative Humidity 2m' },
|
||||
{ value: 'dew_point_2m', label: 'Dew Point 2m' },
|
||||
{ value: 'apparent_temperature', label: 'Apparent Temperature' },
|
||||
{ value: 'precipitation_probability', label: 'Precipitation Probability' }
|
||||
],
|
||||
[
|
||||
{ value: 'precipitation', label: 'Precipitation' },
|
||||
{ value: 'rain', label: 'Rain' },
|
||||
{ value: 'showers', label: 'Showers' },
|
||||
{ value: 'snowfall', label: 'Snowfall' },
|
||||
{ value: 'weather_code', label: 'Weather Code' }
|
||||
],
|
||||
[
|
||||
{ value: 'pressure_msl', label: 'Pressure MSL' },
|
||||
{ value: 'surface_pressure', label: 'Surface Pressure' },
|
||||
{ value: 'cloud_cover', label: 'Cloud Cover' },
|
||||
{ value: 'cloud_cover_low', label: 'Cloud Cover Low' },
|
||||
{ value: 'cloud_cover_mid', label: 'Cloud Cover Mid' },
|
||||
{ value: 'cloud_cover_high', label: 'Cloud Cover High' }
|
||||
],
|
||||
[
|
||||
{ value: 'et0_fao_evapotranspiration', label: 'Evapotranspiration' },
|
||||
{ value: 'vapor_pressure_deficit', label: 'Vapor Pressure Deficit' },
|
||||
{ value: 'wind_speed_10m', label: 'Wind Speed 10m' },
|
||||
{ value: 'wind_speed_80m', label: 'Wind Speed 80m' },
|
||||
{ value: 'wind_speed_120m', label: 'Wind Speed 120m' },
|
||||
{ value: 'wind_speed_180m', label: 'Wind Speed 180m' },
|
||||
{ value: 'wind_direction_10m', label: 'Wind Direction 10m' },
|
||||
{ value: 'wind_direction_80m', label: 'Wind Direction 80m' },
|
||||
{ value: 'wind_direction_120m', label: 'Wind Direction 120m' },
|
||||
{ value: 'wind_direction_180m', label: 'Wind Direction 180m' },
|
||||
{ value: 'wind_gusts_10m', label: 'Wind Gusts 10m' }
|
||||
],
|
||||
[
|
||||
{ value: 'temperature_80m', label: 'Temperature 80m' },
|
||||
{ value: 'temperature_120m', label: 'Temperature 120m' },
|
||||
{ value: 'temperature_180m', label: 'Temperature 180m' }
|
||||
]
|
||||
];
|
||||
@@ -0,0 +1,102 @@
|
||||
export default [
|
||||
'#800080',
|
||||
'#800083',
|
||||
'#800087',
|
||||
'#7f008a',
|
||||
'#7f008d',
|
||||
'#7e0090',
|
||||
'#7d0094',
|
||||
'#7c0097',
|
||||
'#7a009a',
|
||||
'#79009d',
|
||||
'#7700a1',
|
||||
'#7600a4',
|
||||
'#7400a7',
|
||||
'#7200aa',
|
||||
'#6f00ae',
|
||||
'#6d00b1',
|
||||
'#6a00b4',
|
||||
'#6700b7',
|
||||
'#6400bb',
|
||||
'#6100be',
|
||||
'#5e00c1',
|
||||
'#5b00c4',
|
||||
'#5700c8',
|
||||
'#5300cb',
|
||||
'#4f00ce',
|
||||
'#4b00d1',
|
||||
'#4700d5',
|
||||
'#4200d8',
|
||||
'#3e00db',
|
||||
'#3900de',
|
||||
'#3400e2',
|
||||
'#2f00e5',
|
||||
'#2a00e8',
|
||||
'#2400eb',
|
||||
'#1f00ef',
|
||||
'#1900f2',
|
||||
'#1300f5',
|
||||
'#0d00f8',
|
||||
'#0600fc',
|
||||
'#0000ff',
|
||||
'#0000ff',
|
||||
'#0021f7',
|
||||
'#003fee',
|
||||
'#005ce6',
|
||||
'#0076dd',
|
||||
'#008ed5',
|
||||
'#00a3cc',
|
||||
'#00b7c4',
|
||||
'#00bbaf',
|
||||
'#00b38f',
|
||||
'#00aa72',
|
||||
'#00a256',
|
||||
'#00993d',
|
||||
'#009127',
|
||||
'#008812',
|
||||
'#008000',
|
||||
'#008000',
|
||||
'#118c00',
|
||||
'#259700',
|
||||
'#3ca300',
|
||||
'#56ae00',
|
||||
'#72ba00',
|
||||
'#92c500',
|
||||
'#b4d100',
|
||||
'#d9dc00',
|
||||
'#e8cf00',
|
||||
'#f3bb00',
|
||||
'#ffa500',
|
||||
'#ffa500',
|
||||
'#ff9800',
|
||||
'#ff8c00',
|
||||
'#ff7f00',
|
||||
'#ff7200',
|
||||
'#ff6600',
|
||||
'#ff5900',
|
||||
'#ff4c00',
|
||||
'#ff3f00',
|
||||
'#ff3300',
|
||||
'#ff2600',
|
||||
'#ff1900',
|
||||
'#ff0d00',
|
||||
'#ff0000',
|
||||
'#ff0000',
|
||||
'#f8000f',
|
||||
'#f0001c',
|
||||
'#e90029',
|
||||
'#e10035',
|
||||
'#da0040',
|
||||
'#d2004a',
|
||||
'#cb0053',
|
||||
'#c3005c',
|
||||
'#bc0063',
|
||||
'#b4006a',
|
||||
'#ad0070',
|
||||
'#a50075',
|
||||
'#9e0079',
|
||||
'#96007c',
|
||||
'#8f007e',
|
||||
'#870080',
|
||||
'#800080'
|
||||
];
|
||||
@@ -0,0 +1,51 @@
|
||||
import colorScaleHex from './color-scale-hex';
|
||||
|
||||
function componentFromStr(numStr: string, percent: number) {
|
||||
const num = Math.max(0, parseInt(numStr, 10));
|
||||
return percent ? Math.floor((255 * Math.min(100, num)) / 100) : Math.min(255, num);
|
||||
}
|
||||
|
||||
export function rgbToHex(rgb: string) {
|
||||
const rgbRegex = /^rgb\(\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*,\s*(-?\d+)(%?)\s*\)$/;
|
||||
let result,
|
||||
r,
|
||||
g,
|
||||
b,
|
||||
hex = '';
|
||||
if ((result = rgbRegex.exec(rgb))) {
|
||||
r = componentFromStr(result[1], result[2]);
|
||||
g = componentFromStr(result[3], result[4]);
|
||||
b = componentFromStr(result[5], result[6]);
|
||||
|
||||
hex = (0x1000000 + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
||||
}
|
||||
if (!rgb) {
|
||||
return '355522';
|
||||
}
|
||||
return hex;
|
||||
}
|
||||
|
||||
export const getColor = (temp: number, unit = 'celsius'): string => {
|
||||
let index = 0;
|
||||
temp = Number(temp);
|
||||
if (unit === 'celsius') {
|
||||
if (temp <= -40) {
|
||||
index = 0;
|
||||
} else if (temp >= 60) {
|
||||
index = colorScaleHex.length - 1;
|
||||
} else {
|
||||
index = temp + 40;
|
||||
}
|
||||
} else {
|
||||
const tempInCelsius = Math.round(((temp - 32) * 5) / 9);
|
||||
if (tempInCelsius <= -40) {
|
||||
index = 0;
|
||||
} else if (tempInCelsius >= 60) {
|
||||
index = colorScaleHex.length - 1;
|
||||
} else {
|
||||
index = tempInCelsius + 40;
|
||||
}
|
||||
}
|
||||
|
||||
return colorScaleHex[index];
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,81 @@
|
||||
export default {
|
||||
0: 'clear',
|
||||
1: 'clear',
|
||||
2: 'cloudy',
|
||||
3: 'cloudy',
|
||||
4: 'fog',
|
||||
5: 'fog',
|
||||
10: 'fog',
|
||||
11: 'fog',
|
||||
12: 'lightning',
|
||||
18: 'strong-wind',
|
||||
20: 'fog',
|
||||
21: 'rain-mix',
|
||||
22: 'rain-mix',
|
||||
23: 'rain',
|
||||
24: 'snow',
|
||||
25: 'hail',
|
||||
26: 'thunderstorm',
|
||||
27: 'dust',
|
||||
28: 'dust',
|
||||
29: 'dust',
|
||||
30: 'fog',
|
||||
31: 'fog',
|
||||
32: 'fog',
|
||||
33: 'fog',
|
||||
34: 'fog',
|
||||
35: 'fog',
|
||||
40: 'rain-mix',
|
||||
41: 'sprinkle',
|
||||
42: 'rain',
|
||||
43: 'sprinkle',
|
||||
44: 'rain',
|
||||
45: 'hail',
|
||||
46: 'hail',
|
||||
47: 'snow',
|
||||
48: 'snow',
|
||||
50: 'sprinkle',
|
||||
51: 'sprinkle',
|
||||
52: 'rain',
|
||||
53: 'rain',
|
||||
54: 'snowflake-cold',
|
||||
55: 'snowflake-cold',
|
||||
56: 'snowflake-cold',
|
||||
57: 'sprinkle',
|
||||
58: 'rain',
|
||||
60: 'sprinkle',
|
||||
61: 'sprinkle',
|
||||
62: 'rain',
|
||||
63: 'rain',
|
||||
64: 'hail',
|
||||
65: 'hail',
|
||||
66: 'hail',
|
||||
67: 'rain-mix',
|
||||
68: 'rain-mix',
|
||||
70: 'snow',
|
||||
71: 'snow',
|
||||
72: 'snow',
|
||||
73: 'snow',
|
||||
74: 'snowflake-cold',
|
||||
75: 'snowflake-cold',
|
||||
76: 'snowflake-cold',
|
||||
77: 'snow',
|
||||
78: 'snowflake-cold',
|
||||
80: 'rain',
|
||||
81: 'sprinkle',
|
||||
82: 'rain',
|
||||
83: 'rain',
|
||||
84: 'storm-showers',
|
||||
85: 'rain-mix',
|
||||
86: 'rain-mix',
|
||||
87: 'rain-mix',
|
||||
89: 'hail',
|
||||
90: 'lightning',
|
||||
91: 'storm-showers',
|
||||
92: 'thunderstorm',
|
||||
93: 'thunderstorm',
|
||||
94: 'lightning',
|
||||
95: 'thunderstorm',
|
||||
96: 'thunderstorm',
|
||||
99: 'tornado'
|
||||
};
|
||||
@@ -0,0 +1,14 @@
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
import { storedLocation } from '$lib/stores/settings';
|
||||
|
||||
import type { LayoutLoad } from './$types';
|
||||
|
||||
const location = get(storedLocation);
|
||||
|
||||
export const load: LayoutLoad = async () => {
|
||||
return {
|
||||
heroTitle: `Weather Week ${location.name}`,
|
||||
heroDescription: location.admin1 ?? '' + ' ' + location.country
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
import { storedLocation } from '$lib/stores/settings';
|
||||
|
||||
import { geoLocationNameToRoute } from '$lib/utils/meteo';
|
||||
|
||||
import type { PageLoad } from '$types';
|
||||
|
||||
export const prerender = true;
|
||||
|
||||
export const load = (async (event) => {
|
||||
const location = get(storedLocation);
|
||||
const locationRoute = geoLocationNameToRoute(location.name);
|
||||
throw redirect(
|
||||
303,
|
||||
'/en/weather/week/' +
|
||||
(location.population
|
||||
? location.population > 543000
|
||||
? locationRoute
|
||||
: locationRoute + '_' + location.id
|
||||
: locationRoute + '_' + location.id)
|
||||
);
|
||||
}) satisfies PageLoad;
|
||||
@@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
let { data } = $props();
|
||||
|
||||
const location = data.location;
|
||||
</script>
|
||||
|
||||
<h1>
|
||||
{location ? location.name : ''}, population: {location.population}
|
||||
</h1>
|
||||
@@ -0,0 +1,77 @@
|
||||
import { error, redirect } from '@sveltejs/kit';
|
||||
|
||||
import { type GeoLocation, storedLocation } from '$lib/stores/settings';
|
||||
|
||||
import { geoLocationNameToRoute } from '$lib/utils/meteo';
|
||||
|
||||
import type { PageLoad } from '$types';
|
||||
|
||||
export const prerender = true;
|
||||
|
||||
export const load = (async (event) => {
|
||||
const urlLocation = event.params.location;
|
||||
let urlLocationSplit, urlLocationName, urlLocationId;
|
||||
|
||||
if (urlLocation.includes('_')) {
|
||||
urlLocationSplit = urlLocation.split('_');
|
||||
urlLocationName = urlLocationSplit[0];
|
||||
urlLocationId = urlLocationSplit[1];
|
||||
} else if (/^\d+$/.test(urlLocation)) {
|
||||
// only numbers in location, must be geonames id
|
||||
urlLocationName = '';
|
||||
urlLocationId = urlLocation;
|
||||
} else if (/^[a-zA-Z]/.test(urlLocation)) {
|
||||
// only letters in location, must be geonames query
|
||||
urlLocationName = urlLocation;
|
||||
urlLocationId = undefined;
|
||||
}
|
||||
|
||||
let location: GeoLocation;
|
||||
|
||||
// lat, long coordinates
|
||||
if (urlLocation.includes('N') && urlLocation.includes('E')) {
|
||||
urlLocationSplit = urlLocation.split(/N|E/);
|
||||
const latitude = urlLocationSplit[0];
|
||||
const longitude = urlLocationSplit[1];
|
||||
|
||||
location = {
|
||||
//id: undefined,
|
||||
name: `${latitude}N° ${longitude}E°`,
|
||||
latitude: latitude,
|
||||
longitude: longitude
|
||||
};
|
||||
} else {
|
||||
if (urlLocationId) {
|
||||
const res = await event.fetch(
|
||||
`https://geocoding-api.open-meteo.com/v1/get?id=${urlLocationId}`
|
||||
);
|
||||
location = await res.json();
|
||||
} else {
|
||||
const res = await event.fetch(
|
||||
`https://geocoding-api.open-meteo.com/v1/search?name=${urlLocationName}&count=1&language=en&format=json`
|
||||
);
|
||||
const geocodingResponse = await res.json();
|
||||
if (geocodingResponse.results) {
|
||||
location = geocodingResponse.results[0];
|
||||
} else {
|
||||
error(404, 'Location not found');
|
||||
}
|
||||
}
|
||||
|
||||
const locationRoute = geoLocationNameToRoute(location.name);
|
||||
|
||||
if (location.population && location.population > 543000) {
|
||||
// 1000 biggest cities
|
||||
if (event.url.pathname !== `/en/weather/week/${locationRoute}`) {
|
||||
throw redirect(303, `/en/weather/week/${locationRoute}`);
|
||||
}
|
||||
} else {
|
||||
if (event.url.pathname !== `/en/weather/week/${locationRoute + '_' + location.id}`) {
|
||||
throw redirect(303, `/en/weather/week/${locationRoute + '_' + location.id}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
storedLocation.set(location);
|
||||
return { location: location };
|
||||
}) satisfies PageLoad;
|
||||
Reference in New Issue
Block a user