# Weather

> The more-info view of a weather entity, with the current conditions, the details, and a forecast.

Source: https://contributors.home-assistant.io/design/more-info/weather/

Live demo of `ha-demo-more-info`, connected to a demo Home Assistant.

```html
<ha-demo-more-info entity="weather.home"></ha-demo-more-info>
```

## What it shows

There is nothing to control on a weather entity, so its view is all about reading. From top to bottom:

- **Current conditions**: a weather picture, the condition, like **Partly cloudy**, and how long ago it changed. On the right, the temperature in large text, with the high and low of today below it when the forecast has them.
- **Details**: a list of the current air pressure, humidity, wind speed with the direction, and visibility, each with an icon. A detail the weather service doesn't report is left out.
- **Forecast**: a row of days or hours, each with a weather icon, the temperature, and the low.
- **Attribution**: a line at the bottom with where the data comes from, like **Weather forecast from met.no**.

When the weather service has more than one kind of forecast, tabs above the forecast switch between them: **Daily**, **Hourly**, and **Twice daily**. The weather above has a daily and an hourly forecast, so it gets two tabs.

## Design notes

- Hover over the time below the condition to see when the state last changed and when it last updated.
- Every value is shown in the units of the weather service, like °C and km/h.
- The hourly and twice daily forecasts group their items by day, with a header for each day.
- The forecast is fetched when the dialog opens, and a spinner shows until it arrives.

## In code

The view is `more-info-weather` in [`src/dialogs/more-info/controls/more-info-weather.ts`](https://github.com/home-assistant/frontend/blob/dev/src/dialogs/more-info/controls/more-info-weather.ts). The forecast subscription, the units, and helpers like `getSecondaryWeatherAttribute` are in [`src/data/weather.ts`](https://github.com/home-assistant/frontend/blob/dev/src/data/weather.ts).

Source: [`more-info-weather.ts`](https://github.com/home-assistant/frontend/blob/dev/src/dialogs/more-info/controls/more-info-weather.ts)