Skip to main content

Energy chart

Description​

The <clevergy-energy-chart> microfrontend provides an interactive visualization of energy consumption and production data. It offers two views of the energy data, grid or house, so people can track their energy patterns across different time periods and identify opportunities for optimization.

  • Grid view: shows only the data from the distribution company (FTP or Datadis), that is, the kWh imported from and exported to the grid. These are the values that appear on the electricity bill.

  • House view: shows the total consumption of the home (including self-consumption, if any) together with the production. It is mainly useful for people who have connected their solar inverter.

You choose the view with the data-electricity-view attribute, which accepts grid or house.

Requirements​

To ensure this microfrontend displays correctly, clients must have:

  • A configured integration: It is necessary to have an integration set up to connect to the data. The grid view requires distribution company data, either via FTP (see Distributors) or via Datadis. The House view requires a solar inverter, or data provided via the connect API by your team.

  • Available energy data: Even if the house is linked, the energy source must return data correctly. Without available data, the chart will not be able to display information.

Use cases with examples​

1. Grid view: imported and exported energy​

The grid view is available to all people in your app. It shows the energy imported from and exported to the grid, based on distribution company data, which is the energy that is billed.

People can monitor their daily, weekly, or monthly grid consumption to identify opportunities for energy savings.

2. House view with a solar inverter​

The house view shows the total consumption of the home, including the energy self-consumed from the solar installation, together with the solar production. It lets people compare production with consumption to optimize self-consumption and maximize the benefits of their installation.

3. Comparing gas consumption over time​

info

Requires gas contracts and uploaded invoices to access this feature.

Enables analysis and comparison of gas consumption based on invoice data. Since gas consumption is obtained from invoices, the microfrontend displays consumption data for the last 14 months only, allowing clients to compare recent months with previous periods and better understand seasonal variability and consumption patterns over time.

4. Energy community production​

info

Requires connection to an energy community to access this feature.

Members of energy communities can visualize the production corresponding to their share based on their coefficient, helping them understand their portion of community benefits.

5. Cost (deprecated soon)​

note

This feature is being deprecated. We found that showing euros with such a fine granularity does not provide value, and it is better to present costs in another way. Use the invoice estimation module to show the forecast of the bill, or the invoices module to show the chart of past invoices.

If the client has a contract with their tariff and prices configured, the chart can display the cost of the energy instead of the kWh, in both the grid and house views.

Technical documentation​

Check out the full documentation for clevergy-energy-chart.