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.

  • <ConsumptionOverview />

This component gives users the ability to visualize their energy data for a single supply point. The data can be filtered based on daily, weekly, monthly, or yearly intervals, as well as with custom start dates. Additionally, there is a switch to see the associated usage costs or the generated income for the respective energy type and supply point.

If a measurement spans a time period where multiple tariff bands were active, the component will render multi-color bars to indicate how much energy was consumed/generated in each tariff band. If the costOfUsage view is toggled, and the total cost of a measurement is composed of multiple subcosts, there will be multi-color bars to showcase the distribution.

  • <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 ConsumptionOverview 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 ConsumptionOverview 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 ConsumptionOverview 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 ConsumptionOverview 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 ConsumptionOverview 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 ConsumptionOverview 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 ConsumptionOverview 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 ConsumptionOverview component.