Skip to Content
🎉 Coral x Panda has been released 🎉 Read the Migration Guide
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' };
dateDate
setDateDispatch<SetStateAction<Date>>
dateLocaleLocale
isCalendarOpenboolean
setIsCalendarOpenDispatch<SetStateAction<boolean>>
currencystring
localestring
loadingboolean
kwhDecimalPlacesnumber
errorboolean
childrenReactNode
Last updated on