Skip to main content

Energy Insights

General Overview​

These features 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, shared components are available (including single and dual consumption graphs), designed to support different Kraken endpoints and market setups by accepting props like propertyId, marketSupplyPointId, readingDirection, and utilityType to account for all possible scenarios.

  • <ConsumptionGraph />, <DualConsumptionGraph />, and <ConsumptionGraphControl /> These 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.

<DualConsumptionGraph />​

This component shows two measurement datasets in one chart (e.g. both fuels—electricity and gas). It extends ConsumptionGraph with extraMeasurements (and legend/color props) so users can compare consumption or cost for two supply points or energy types in a single view. Use it with the same <ConsumptionGraphControl /> for time range and filters.

<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: The measurements API is designed so that queried subfields are consistent and available across Kraken instances. 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.

Example​

The consumption page is a Foundation feature. The underlying API operations and UI patterns remain consistent, with Kraken-endpoint-specific adaptations for timezones and meter point query structures.

View Full Story →

Market specifics​

GB 🇬🇧​

  • In the British market (Kraken 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 (Kraken GB) 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 (Kraken GB) GraphQL endpoint and pass the mpan field from the ElectricityMeterPointType (Kraken GB) as marketSupplyPointId. To differentiate imported vs exported data, we use the meters field from the same object and the underlying importMeter field on the MeterPointType (Kraken GB) to determine the readingDirection and pass it to the ConsumptionGarph component.
  • For gas supply points, we use the gasMeterPoints field on the PropertyType (Kraken GB) GraphQL endpoint and pass the mprn field from the GasMeterPointType (Kraken GB) as marketSupplyPointId to the ConsumptionGraph component.
  • Up until now, the API only provides information via the statistics (Kraken GB) 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.

France 🇫🇷​

  • In the French market (Kraken FR), 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.

Germany 🇩🇪​

  • In the German market (Kraken DE), 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.