Skip to main content

Energy Insights

General Overview​

These are sample features that allow users to visualize and explore their energy consumption and generation data. The data comes from the core first field Measurements on the GraphQL Property endpoint and is designed to be extendable for new territories and markets.

To use these features, there are two "core" components available, designed to support different markets and their respective market setups by accepting props like propertyId, marketSupplyPointId, readingDirection, and utilityType to account for all possible scenarios.

  • <ConsumptionGraph /> and <ConsumptionGraphControl /> These two components work together to provide a comprehensive overview of energy consumption and generation data.

<ConsumptionGraph />​

This component visualizes energy data for a single supply point. It supports the following features:

  • Displays energy consumption or generation data.
  • Handles multi-tariff periods by rendering multi-color bars to indicate energy usage or generation across different tariff bands.
  • If the costOfUsage view is toggled, it visualizes the distribution of total costs across multiple subcosts using multi-color bars.

<ConsumptionGraphControl />​

This component allows users to filter energy data based on:

  • Predefined time intervals: daily, weekly, monthly, or yearly.
  • Custom date ranges.
  • It also serves as a single toggle for all your supply point or energy type graphs(e.g gas, generation, consumption) on a single page.

Key Features:​

  • Data Filtering: Users can filter data by time intervals or custom start dates.

  • Cost and Income Views: Includes a toggle to switch between viewing energy usage costs or generated income for the selected energy type and supply point.

  • Multi-Tariff Visualization: Displays multi-color bars for periods with multiple active tariff bands or subcosts.

  • <StatisticsCard />

This component provides users with a quick overview by comparing this week's energy consumption to the previous week's consumption. It is implemented market-agnostic by accepting the same props as the ConsumptionGraph component.

Disclaimer: Due to the "core nature" of the measurements API, all the queried subfields should be consistent and available for all markets. However, the actual data returned will vary and depend on the correct and full implementation of the core measurements engine within Kraken. (e.g., currently, GER 🇩🇪 will not return any costOfUsage data via the metaData object) yet. The components and their underlying queries won't throw any errors and show fallbacks if your market might still be missing some specific data.

Market Specifics:​

GB 🇬🇧​

  • To visualize data for multiple properties under an account, there is a property picker in the top right corner using the properties field on the AccountType GraphQL endpoint. The propertyId is then passed to the ConsumptionGraph component.
  • To display data for electricity supply points, we use the electricityMeterPoints field on the PropertyType GraphQL endpoint and pass the mpan field from the ElectricityMeterPointType as marketSupplyPointId. To differentiate imported vs exported data, we use the meters field from the same ElectricityMeterPointType object and the underlying importMeter field on the MeterPointType to determine the readingDirection and pass it to the ConsumptionGarph component.
  • For gas supply points, we use the gasMeterPoints field on the PropertyType GraphQL endpoint and pass the mprn field from the GasMeterPointType as marketSupplyPointId to the ConsumptionGraph component.
  • Up until now, the API only provides information via the statistics field about which subcosts the total cost of a measurement is composed of. The fields label/description cannot be used yet to attribute those cost entries to different tariff bands that were active at the time of usage.

Example:​

Storybook

France 🇫🇷​

  • In the French market, we would use the properties field on the AccountType GraphQL endpoint to get the propertyId and pass it to the ConsumptionGraph component.
  • To display data for all electricity supply points, we can query the field prms on the PropertyType and pass the id from the PRM object as marketSupplyPointId to the ConsumptionGarph component.
  • Up until now the API does not provide any costOfUsage data yet, but via the statistics field and the value and label subfields, there is information about how the substitutes of the total consumption can be attributed to usage during HP/HC (on/off peak) tariff bands.

Example:​

Storybook

Germany 🇩🇪​

  • In the German market, we would use the properties field on the AccountType GraphQL endpoint to get the propertyId and pass it to the ConsumptionGraph component.
  • To display data for all electricity supply points, we can query the field electricityMalos on the PropertyType and pass the maloNumber from the MaLo object as marketSupplyPointId to the ConsumptionGraph component.