import { exponentialBackoffMiddleware } from "https://esm.town/v/stevekrouse/exponentialBackoffMiddleware";
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON";
import React from "https://esm.sh/react";
import { renderToString } from "https://esm.sh/react-dom/server";
import tailwindURL from "https://esm.town/v/stevekrouse/tailwindURL";
import { weatherGovGrid } from "https://esm.town/v/stevekrouse/weatherGovGrid";
import { DateTime } from "npm:luxon";
const brooklynGridHourly = "https://api.weather.gov/gridpoints/OKX/35,34/forecast/hourly";
async function getHourlyWeather(day: DateTime): Promise<Period[]> {
let { properties: { periods } } = await fetchJSON(brooklynGridHourly);
return periods.filter((x) =>
DateTime.fromISO(x.startTime) >= day.set({ minute: 0, second: 0, millisecond: 0 })
&& DateTime.fromISO(x.startTime) < day.set({ hour: 24, minute: 0, second: 0, millisecond: 0 })
);
}
function formatTime(time: string) {
const hour = parseInt(time.slice(11, 13));
return hour === 12 ? `12pm` : hour < 12 ? `${hour}am` : `${hour - 12}pm`;
}
function weatherChart(periods) {
const max = periods.reduce((max, period) => Math.max(max, period.temperature), 0);
const maxIndex = periods.findIndex((x) => x.temperature === max);
const min = periods.reduce((min, period) => Math.min(min, period.temperature), max);
const minIndex = periods.findIndex((x) => x.temperature === min);
const range = (max - min) * 2;
const maxPrecipitation = periods.reduce((max, period) => Math.max(max, period.probabilityOfPrecipitation.value), 0);
const maxPrecipitationIndex = periods.findIndex((x) => x.probabilityOfPrecipitation.value === maxPrecipitation);
const heightOffset = 50;
const widthOffset = 20;
const [width, height] = [300 - widthOffset, 200 - heightOffset];
const trueHeight = height + heightOffset;
const trueWidth = width + widthOffset;
return (
<svg viewBox={`${widthOffset / -2} 0 ${trueWidth} ${trueHeight}`} width="100%">
<polyline
fill="none"
stroke="rgba(255, 104, 2, 1)"
strokeWidth="5"
strokeLinejoin="round"
strokeLinecap="round"
points={periods.map((x, i) =>
`${i * (width / (periods.length - 1))},${height - ((x.temperature - min) * (height / range))}`
)
.join("\n")}
/>
<polyline
fill="none"
stroke="rgba(0, 123, 255, 0.85)"
strokeWidth="4"
strokeLinejoin="round"
strokeLinecap="round"
points={periods.map((x, i) =>
`${i * (width / (periods.length - 1))},${height - x.probabilityOfPrecipitation.value}`
)
.join("\n")}
/>
{}
<text
x={0}
y={height - ((periods[0].temperature - min) * (height / range) + 30)}
textAnchor="start"
dominantBaseline="auto"
fill="rgba(255, 104, 2, 1)"
fontSize="30"
>
{periods[0].temperature}°
</text>
{}
{maxIndex > 1 && (
<text
x={maxIndex * (width / (periods.length - 1))}
y={height - ((max - min) * (height / range) + 10)}
textAnchor="middle"
dominantBaseline="auto"
fill="rgba(255, 104, 2, 1)"
fontSize="30"
>
{max}°
</text>
)}
{}
<text
x={width}
y={maxPrecipitationIndex === periods.length - 1