KPI Component

Solar WindGoldRenewables

Source metadata loading

Feed status loading

Design System & Frontend Lead

2026

KPI Component

A KPI card fed by three public data sources.

React 18Public APIsSVG chartsCSS animationScoped tokens

Component Settings

Chart Type

Line ChartBar ChartNone (Hidden)

Show Target ThresholdShow Details ListForce Loading StateRight-to-Left

Documentation

Data

Solar wind (NOAA), gold (Kraken) and renewables (Eurostat), each polled at its own source's cadence. Sources that block browser requests go through a same-origin proxy.

Build

When a source is down, the card keeps showing sample data and the playground’s source status says so. Styles and tokens are scoped to the card, so it renders the same in any host.

Limits

Renewables is an annual figure, so its chart moves once a year.

Made byPavel Barchanski