Weather dashboard widget¶

Usage¶

The weather dashboard widget displays current temperature and sky conditions, with an optional short-term forecast and additional meteorological parameters like humidity or wind speed.

The widget supports different layouts, and both the forecast days and the number of additional meteological parameters can be configured according to the use case.

When to use¶

• In dashboards and tile layouts.
• To display current outdoor or environmental conditions.
• To offer users a quick overview of the day's or week's weather.

Best practices¶

• Show only the metrics most relevant to the context.
• Keep units consistent (e.g. °C or °F, km/h or mph).
• Pick the layout that matches the available tile size.
• Use a skeleton to represent the loading state.

Design¶

Elements¶

1. Heading (location), 2. Current temperature, 3. Illustration, 4. Condition label, 5. Min/Max range, 6. Additional metrics (optional), 7. Forecast (optional)

Layout variants¶

The widget supports three layouts:

• Vertical: Forecast with up to five columns of additional data (e.g., wind, precipitation, humidity, UV, pressure).
• Horizontal: Forecast with condition and temperature only.
• Compact: No forecast.

The forecast shows up to seven days. The number of days is configurable. Columns are hidden automatically as the widget narrows.

Icon style¶

Weather conditions can be represented with flat Element icons or illustrated icons. For illustrated icons, the style may vary depending on the weather provider.

Code¶

The weather widget is built around two Angular components: the widget itself, which wraps an <si-card>, and a body component that can be reused for compositions.

Component usage¶

To simplify the usage and reduce the code, Element offers an Angular component as a wrapper with streamlined inputs.

import { SiWeatherWidgetComponent } from '@siemens/element-ng/dashboard';

@Component({
  :
  imports: [SiWeatherWidgetComponent]
})

SiWeatherWidgetComponent API Documentation¶

Dashboard widget for current weather conditions, additional metrics and an optional multi-day forecast.

The widget supports three layouts (see SiWeatherWidgetLayout ):

• vertical (default): full vertical card with <​si-card​> heading, illustration, today block, optional additional data and an optional forecast table with up to two extra columns.
• horizontal : wider card with the today block laid out side by side and a horizontal forecast strip below. The forecast SHOULD contain at least three days for a visually balanced layout.
• compact : condensed variant without a card header. The location is rendered next to the illustration. The forecast is not shown.

Data is supplied as a composite value payload of type SiWeatherWidgetData .

Weather illustrations are resolved by an optional SiWeatherIconResolver that application developers register. Without a resolver the widget only renders illustrations when callers pass a direct illustration.src .

Input Properties¶

Weather widget body component¶

The body of <si-weather-widget> is implemented in the component <si-weather-widget-body>. You can use it for compositions where the <si-card> wrapper is not appropriate.

SiWeatherWidgetBodyComponent API Documentation¶

Body of the <​si-weather-widget​> . Useful for compositions that do not need the surrounding <​si-card​> chrome (e.g. embedding the weather inside a custom container).

Data is supplied as a composite value payload of type SiWeatherWidgetData .

The body delegates illustration resolution to the injected SiWeatherIconResolver . The library ships a default resolver that maps the built-in SiWeatherCondition vocabulary to Element icons.

In the vertical layout the forecast list responsively hides additional data columns (wind, humidity, …) via pure CSS container queries when the widget becomes too narrow. See si-weather-widget-body.component.scss for the thresholds.

Input Properties¶

Name	Type	Default	Description
disableAutoLoadingIndicator ¶	boolean	false	Option to disable automatic start of skeleton loading indication.
forecastLabel ¶	TranslatableString	$localize`:@@SI_WEATHER_WIDGET.FORECAST_LABEL:Weather forecast`	Accessible label for the forecast section.
initialLoadingIndicatorDebounceTime ¶	number	300	Initial delay time in milliseconds before enabling loading indicator. Only used once initially during construction.
layout ¶	SiWeatherWidgetLayout	'vertical'	Visual layout. SiWeatherWidgetLayout .
location ¶	TranslatableString		Optional location label, shown inside the body in the compact layout only. The non-compact layouts render the location via the <​si-card​> heading managed by SiWeatherWidgetComponent .
metricsLabel ¶	TranslatableString	$localize`:@@SI_WEATHER_WIDGET.METRICS_LABEL:Additional weather data`	Accessible label for the additional data list.
showLoadingIndicator ¶	boolean	false	Input to start and stop the skeleton loading indication.
value ¶	(SiWeatherWidgetData | undefined)		The main value to be displayed. If no value is set, the skeleton indicates the loading of the value. Disable the automatic loading mechanism by setting SiWidgetBodyBaseComponent.disableAutoLoadingIndicator .

Attributes and Methods¶

Configurable playground¶

The configurable example exposes every input of the widget and is useful for exploring layouts, metrics and forecast extras interactively.

Icon resolver¶

Weather illustrations are produced by an injectable SiWeatherIconResolver. The library ships a default resolver that maps the built-in SiWeatherCondition vocabulary (clear, clouds, rain, storm, wind, unknown) to Element icons:

Applications can override the default by providing their own resolver. A resolver returns either an Element icon name (rendered via <si-icon>) or a direct image URL (rendered as <img>); callers can also pass an src directly via illustration.src to bypass the resolver.

Implementing a custom resolver¶

A custom resolver extends SiWeatherIconResolver and returns one of:

• { icon: '<name>' } — rendered as <si-icon icon="…">.
• { src: '<url>' } — rendered as <img src="…">.
• null — no illustration is shown.

The example below uses the MIT-licensed meteocons static SVG set (@meteocons/svg-static). The icons are exposed via angular.json under /assets/meteocons/:

// angular.json (assets array)
{
  "glob": "*.svg",
  "input": "node_modules/@meteocons/svg-static/fill",
  "output": "/assets/meteocons/"
}

The resolver is a small class that maps the six built-in condition tokens to file names. For more complex scenarios, you can introduce or reuse a richer condition vocabulary. It is registered as a component-level provider, so the override is scoped to this example:

providers: [{ provide: SiWeatherIconResolver, useClass: SiWeatherWidgetMeteoconsIconResolver }];

For an application-wide override, register the resolver in the root injector instead (providedIn: 'root' on the class itself, or via providers in bootstrapApplication).

SiWeatherIconResolver API Documentation¶

API not found.

Types Documentation¶

@Injectable({ providedIn: 'root' })
export class MyWeatherIconResolver extends SiWeatherIconResolver {
  override resolve(icon: SiWeatherIcon): SiWeatherIconResolution | null {
    // ...
  }
}