Loading...
The WeatherDataWidget component displays comprehensive climate data with a toggle between monthly (12 months) and seasonal (4 seasons) views. Features visual indicators, badges, tooltips, and links to detailed weather pages. Perfect for city and region weather pages.
import { WeatherDataWidget, WeatherMonthData, WeatherSeasonData } from '@/components/composite/WeatherDataWidget';
const monthlyData: WeatherMonthData[] = [
{
month: 1,
monthName: 'January',
avgHighTempC: 12,
avgLowTempC: 5,
avgMeanTempC: 8.5,
avgRainfallMm: 73,
avgRainyDays: 9,
avgSunshineHours: 125,
avgDaylightHours: 9.5,
touristSeason: 'off-season',
comfortIndex: 'fair',
weatherDescription: 'January in Florence is typically cool and damp...',
travelNotes: 'Fewer crowds make it ideal for museum visits.',
detailHref: '/regions/tuscany/florence/weather/january',
},
// ... 11 more months
];
const seasonalData: WeatherSeasonData[] = [
{
season: 'spring',
seasonName: 'Spring',
months: [3, 4, 5],
avgTempRange: { min: 8, max: 24 },
totalRainfall: 230,
avgRainyDaysPerMonth: 8.7,
avgSunshineHoursPerMonth: 178,
avgDaylightHoursPerMonth: 13.5,
dominantTouristSeason: 'shoulder',
overallComfort: 'excellent',
seasonalRecommendations: 'Perfect weather for outdoor activities...',
detailHref: '/regions/tuscany/florence/weather/spring',
},
// ... 3 more seasons
];
<WeatherDataWidget
monthlyData={monthlyData}
seasonalData={seasonalData}
location="Florence"
defaultView="months"
monthlyLayout="grid"
cardVariant="elevated"
showInheritanceNote={false}
onViewChange={(view) => console.log('View changed to:', view)}
/>
// Table layout variant
<WeatherDataWidget
monthlyData={monthlyData}
seasonalData={seasonalData}
location="Florence"
defaultView="months"
monthlyLayout="table"
cardVariant="elevated"
/>Array of 12 WeatherMonthData objects with month-by-month climate information
Array of 4 WeatherSeasonData objects with seasonal aggregated climate information
Optional location name for context (e.g., "Florence", "Tuscany")
Initial view mode: 'months' (default) or 'seasons'
Layout for monthly view: 'grid' (default) or 'table'
Card style variant: 'default', 'elevated' (default), or 'outlined'
Show inheritance note if data is inherited from region (default: false)
Callback when view changes between months and seasons