Grid-aware Websites Info Bar

This component is designed to be used with the Grid-aware Websites library. When creating a grid-aware website, this component can be used to:

Provide users with contextual information about their local energy grid.
Allow the user to "opt-out" of automatically applying Grid-aware Website design to a page.
Allow the user to change between different design modes that are setup for the site.

Grid intensity levels

The below show the info bar in different states when the grid intensity is known.

Low

Code

Moderate

Code

High

Code

Unkown

When grid intensity data for a region is unknown, this state should be presented.

Code

Different locations

For locations, you can pass in an Alpha-2 country code or any valid Electricity Maps Zone ID. For some zones with longer names or obscure names, we try to present a location string that represents the most likely location for that grid.

Regular country code

Code

Region

Code

Complex region

This is a region where we've attempted of find the nearest sensible location to show. The below example is the display name shown for the region "US-CENT-SPA" (Southwestern Power Administration).

Code