Skip to Content
🎉 Coral now has an MCP Server, check out the docs
DocumentationMoleculesEnergyOverview

EnergyOverview

Gives users the ability to see a full overview of their energy consumption for electric and gas.

The user can see their consumption data in day view, week view, month view, year view, and interval view. They can also view their consumption in kWh and cost. There is also a table view which is especially useful for accessibility.

Formerly known as ConsumptionGraphControl and ConsumptionGraph when exported from Blueprint, this component combines the functionality of both into a compound component alongside the use of new hooks useEnergyOverview and useEnergyOverviewTimeframe which handle the data processing and timeframe logic respectively.

Electricity example

Gas example

Multi example

Dual measurement example

Loading

No data / error

Full API

NameTypeDefault
attributesAttributes

This prop can be used to pass HTML attributes directly to the component. We currently allow passing data-* and aria-* attributes and the id. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content.

Example usage:

AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };
dateLocaleLocale
currencystring
localestring
kwhDecimalPlacesnumber
loadingboolean
errorboolean
errorMessagestring
childrenReactNode
Last updated on