From 001843dcd2c4e28cd436c36fd99466fd19080ab4 Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Thu, 16 Jul 2026 11:26:16 -0500 Subject: [PATCH] Updates to details --- package-lock.json | 35 ++- package.json | 4 +- .../DataTable/components/Filter.tsx | 2 +- .../WeatherModal/CurrentWeather.tsx | 1 + .../WeatherModal/ExtendedForecastDetails.tsx | 206 +++++++++++------- src/components/WeatherModal/WeatherGraphs.tsx | 90 ++++---- src/components/WeatherModal/WeatherModal.tsx | 33 ++- 7 files changed, 237 insertions(+), 134 deletions(-) diff --git a/package-lock.json b/package-lock.json index 77c8797..c361f44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "@tanstack/react-query-persist-client": "^5.101.2", "@tanstack/react-table": "^8.21.3", "idb-keyval": "^6.3.0", - "jotai": "^2.20.1", + "jotai": "^2.20.2", "openmeteo": "^1.2.3", "react": "^19.2.7", "react-dom": "^19.2.7", @@ -38,7 +38,7 @@ "@vitest/coverage-v8": "^4.1.10", "@vitest/ui": "^4.1.10", "typescript": "^7.0.2", - "vite": "^8.1.4", + "vite": "^8.1.5", "vite-plugin-dts": "~5.0.3", "vite-tsconfig-paths": "^6.1.1", "vitest": "^4.1.10" @@ -1918,9 +1918,9 @@ } }, "node_modules/jotai": { - "version": "2.20.1", - "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.20.1.tgz", - "integrity": "sha512-dnuKfU/GLi8B28RRMjQ3AfoN7kfzP8o41+AX2FmITZqEMY8PHnjABq+VkEooomLwYaGjda+pgy0yFSjaHX/ZPg==", + "version": "2.20.2", + "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.20.2.tgz", + "integrity": "sha512-aHB4CNb9qRcyf0mwSB6EO5bCGAjx8cTwFgOFCE2leOnTzqACbnSWG8XoWB3LxCT1Qoj03I1OWAHszDmN4uHb/w==", "engines": { "node": ">=12.20.0" }, @@ -3097,15 +3097,15 @@ } }, "node_modules/vite": { - "version": "8.1.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.4.tgz", - "integrity": "sha512-bTT9PsdWO+MQMNG9ZXIP/qM9wGh37DFxTV/sPq9cFpHr3w4jkgef032PkAL9jAqhk3Nz8NQw3O8n6/xFkqO4QQ==", + "version": "8.1.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-8.1.5.tgz", + "integrity": "sha512-7ULLwsCdYx/nRyrpiEwvqb5TFHrMVZyBt+rg/OAXT7rgj/z+DtTDyKFeLAdDkubDVDKD8jOsndmy7m55XcfUsw==", "dev": true, "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.5", - "postcss": "^8.5.16", - "rolldown": "~1.1.4", + "postcss": "^8.5.17", + "rolldown": "~1.1.5", "tinyglobby": "^0.2.17" }, "bin": { @@ -3233,6 +3233,21 @@ } } }, + "node_modules/vite-tsconfig-paths/node_modules/typescript": { + "version": "5.9.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", + "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "dev": true, + "optional": true, + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/vitest": { "version": "4.1.10", "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.10.tgz", diff --git a/package.json b/package.json index fcc6bcf..bf95e2f 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@tanstack/react-query-persist-client": "^5.101.2", "@tanstack/react-table": "^8.21.3", "idb-keyval": "^6.3.0", - "jotai": "^2.20.1", + "jotai": "^2.20.2", "openmeteo": "^1.2.3", "react": "^19.2.7", "react-dom": "^19.2.7", @@ -40,7 +40,7 @@ "@vitest/coverage-v8": "^4.1.10", "@vitest/ui": "^4.1.10", "typescript": "^7.0.2", - "vite": "^8.1.4", + "vite": "^8.1.5", "vite-plugin-dts": "~5.0.3", "vite-tsconfig-paths": "^6.1.1", "vitest": "^4.1.10" diff --git a/src/components/DataTable/components/Filter.tsx b/src/components/DataTable/components/Filter.tsx index 684b371..e52b60e 100644 --- a/src/components/DataTable/components/Filter.tsx +++ b/src/components/DataTable/components/Filter.tsx @@ -17,7 +17,7 @@ import { datePickerInputClasses, selectClasses } from 'styles'; declare module '@tanstack/react-table' { //allows us to define custom properties for our columns - interface ColumnMeta { + interface ColumnMeta<_TData extends RowData, _TValue> { filterVariant?: | 'text' | 'range' diff --git a/src/components/WeatherModal/CurrentWeather.tsx b/src/components/WeatherModal/CurrentWeather.tsx index ffcd519..8950729 100644 --- a/src/components/WeatherModal/CurrentWeather.tsx +++ b/src/components/WeatherModal/CurrentWeather.tsx @@ -230,6 +230,7 @@ export default function CurrentWeather({ ? textClasses.autoScrollText : undefined } + fz={isMobile ? 12 : 18} classNames={textClasses} style={{ lineHeight: 1 }} > diff --git a/src/components/WeatherModal/ExtendedForecastDetails.tsx b/src/components/WeatherModal/ExtendedForecastDetails.tsx index ce0ba16..e9cd82a 100644 --- a/src/components/WeatherModal/ExtendedForecastDetails.tsx +++ b/src/components/WeatherModal/ExtendedForecastDetails.tsx @@ -1,18 +1,26 @@ import { ActionIcon, Box, Card, Group, Stack, Text } from '@mantine/core'; -import { FaArrowDown, FaArrowUp, FaLocationArrow, FaSun, FaWind } from 'react-icons/fa'; -import { FaX } from 'react-icons/fa6'; +import { useCommonHooks } from 'hooks'; +import { FaLocationArrow, FaSun, FaWind } from 'react-icons/fa'; +import { FaDroplet, FaX } from 'react-icons/fa6'; import { WiRain, WiSunrise, WiSunset } from 'react-icons/wi'; +import { textClasses } from 'styles'; import { WeatherCodes } from 'types'; import WeatherFeaturePill from './WeatherFeaturePill'; +import WeatherGraphs from './WeatherGraphs'; import WeatherIcon from './WeatherIcon'; export default function ExtendedForecastDetails({ selectedDay, setSelectedDay, + selectedHourly, + setSelectedHourly, }: { selectedDay: any; setSelectedDay: (day: any) => void; + selectedHourly: any; + setSelectedHourly: (hourly: any) => void; }) { + const { isMobile } = useCommonHooks(); return ( { e.stopPropagation(); @@ -41,6 +50,7 @@ export default function ExtendedForecastDetails({ }} onClick={() => { setSelectedDay(undefined); + setSelectedHourly(undefined); }} > @@ -64,10 +74,96 @@ export default function ExtendedForecastDetails({ - - - {WeatherCodes[Number(selectedDay.weatherCode)]} - + + + + Feels like} + rightSide={ + + {selectedDay.apparentTemperatureMax?.toFixed(0) ?? + selectedDay.temperatureMax?.toFixed(0)} + °F + + } + highlight='right' + /> + + + + {selectedDay.temperatureMax?.toFixed(0)} + °F + + + + / {selectedDay.temperatureMin?.toFixed(0)}°F + + + + 25 + ? 'flex-start' + : 'center' + } + style={{ + width: '100%', + maxWidth: '180px', + whiteSpace: 'nowrap', + overflow: 'hidden', + boxSizing: 'border-box', + position: 'relative', + }} + > + 25 + ? textClasses.autoScrollText + : undefined + } + classNames={textClasses} + style={{ lineHeight: 1 }} + > + {selectedDay.temperature_2m?.toFixed(0) === '69' + ? 'Nice' + : WeatherCodes[Number(selectedDay.weatherCode)]} + + + + + + + + @@ -173,76 +269,27 @@ export default function ExtendedForecastDetails({ - - - - - High Temp - - } - rightSide={ - - {selectedDay.temperatureMax.toFixed(0)}°F - - } - highlight='right' - /> - - - - - Low Temp - - } - rightSide={ - - {selectedDay.temperatureMin.toFixed(0)}°F - - } - highlight='right' - /> - - - - - - - Feels Like High - - } - rightSide={ - - {selectedDay.apparentTemperatureMax.toFixed(0)}°F - - } - highlight='right' - /> - - - - - Feels Like Temp - - } - rightSide={ - - {selectedDay.apparentTemperatureMin.toFixed(0)}°F - - } - highlight='right' - /> - - - - + + + + + + + @@ -253,8 +300,6 @@ export default function ExtendedForecastDetails({ rightSide={{selectedDay.precipitationProbability}%} highlight='right' /> - - @@ -265,8 +310,9 @@ export default function ExtendedForecastDetails({ rightSide={{selectedDay.precipitationSum.toFixed(2)} in.} highlight='right' /> - + + ); diff --git a/src/components/WeatherModal/WeatherGraphs.tsx b/src/components/WeatherModal/WeatherGraphs.tsx index dba8ea4..ef4de2d 100644 --- a/src/components/WeatherModal/WeatherGraphs.tsx +++ b/src/components/WeatherModal/WeatherGraphs.tsx @@ -13,34 +13,42 @@ import { YAxis, } from 'recharts'; import { selectClasses } from 'styles'; -import type { Hourly } from 'types'; import WeatherTooltip from './WeatherTooltip'; -export default function WeatherGraphs({ hourly }: { hourly: Hourly | undefined }) { +export default function WeatherGraphs({ + hourly, + formatted, +}: { + hourly: any; + formatted?: boolean; +}) { const colorPrecipitation = 'colorPrecipitation'; const colorHumidity = 'colorHumidity'; const [timeFrame, setTimeFrame] = useState(24); const later = new Date(); const now = new Date(); - later.setTime(now.getTime() + timeFrame * 60 * 60 * 1000); - const hourlyForecast = hourly?.time - ?.map((_: any, index: number) => { - return { - dewpoint: hourly.dew_point_2m?.[index].toFixed(0), - isDaytime: hourly.is_day?.[index], - name: hourly.time[index].toLocaleString('en-us'), - startTime: hourly.time[index], - endTime: hourly.time[index + 1], - probabilityOfPrecipitation: hourly.precipitation_probability?.[index], - temperature: hourly.temperature_2m?.[index].toFixed(0), - apparentTemperature: hourly.apparent_temperature?.[index].toFixed(0), - relativeHumidity: hourly.relative_humidity_2m?.[index].toFixed(0), - }; - }) - .filter((hour: any) => hour.startTime > now && hour.startTime < later); + const hourlyForecast = formatted + ? hourly + : hourly?.time + ?.map((_: any, index: number) => { + return { + dewpoint: hourly.dew_point_2m?.[index].toFixed(0), + isDaytime: hourly.is_day?.[index], + name: hourly.time[index].toLocaleString('en-us'), + startTime: hourly.time[index], + endTime: hourly.time[index + 1], + probabilityOfPrecipitation: hourly.precipitation_probability?.[index], + temperature: hourly.temperature_2m?.[index].toFixed(0), + apparentTemperature: hourly.apparent_temperature?.[index].toFixed(0), + relativeHumidity: hourly.relative_humidity_2m?.[index].toFixed(0), + }; + }) + .filter((hour: any) => hour.startTime > now && hour.startTime < later); + return ( - - setTimeFrame(value)} + /> + + )} (undefined); + const [selectedHourly, setSelectedHourly] = useState(undefined); + + useEffect(() => { + if (selectedDay && current) { + const later = new Date().setTime(selectedDay.time.getTime() + 24 * 60 * 60 * 1000); + setSelectedHourly( + current?.hourly.time + ?.map((_: any, index: number) => { + return { + dewpoint: current?.hourly.dew_point_2m?.[index].toFixed(0), + isDaytime: current?.hourly.is_day?.[index], + name: current?.hourly.time[index].toLocaleString('en-us'), + startTime: current?.hourly.time[index], + endTime: current?.hourly.time[index + 1], + probabilityOfPrecipitation: + current?.hourly.precipitation_probability?.[index], + temperature: current?.hourly.temperature_2m?.[index].toFixed(0), + apparentTemperature: + current?.hourly.apparent_temperature?.[index].toFixed(0), + relativeHumidity: current?.hourly.relative_humidity_2m?.[index].toFixed(0), + }; + }) + .filter( + (hour: any) => hour.startTime >= selectedDay.time && hour.startTime < later, + ), + ); + } + }, [selectedDay]); + return (