Skip to main content

Measurements

The measurements utilities provide helpers for working with energy consumption and generation data from the Kraken API.

Overview​

Energy measurements come from the measurements field on the Property GraphQL endpoint. These utilities help with:

  • Parsing and transforming measurement data
  • Calculating consumption statistics
  • Formatting values for display
  • React components for visualizing energy data (e.g. consumption graphs, statistics cards)

Usage​

Import the hook and components from @krakentech/blueprint-utils/client. Use useMeasurements to fetch and shape data for the Property measurements GraphQL field; pass the result into ConsumptionGraph. Use useMeasurementFilters for date range and anchor state, then pass that into both useMeasurements and ConsumptionGraphControl.

import {
  ConsumptionGraph,
  ConsumptionGraphControl,
  DateRangeToggleValue,
  useMeasurements,
  useMeasurementFilters,
} from "@krakentech/blueprint-utils/client";

function ConsumptionPage({ accountNumber, propertyId, dateLocale }) {
  const measurementFilters = useMeasurementFilters({
    initialDateRange: DateRangeToggleValue.WEEK,
  });

  const measurements = useMeasurements({
    variables: {
      accountNumber,
      propertyId,
      utilityType: "ELECTRICITY",
      dateLocale,
      enabled: true,
      measurementFilters,
      marketSupplyPointId: "…", // e.g. MPAN/MPRN (GB), PRM (FR), or your market's supply point ID
    },
  });

  return (
    <>
      <ConsumptionGraphControl
        measurementFilters={measurementFilters}
        translations={{ "graph.day": "Day", "graph.week": "Week", /* ... */ }}
      />
      <ConsumptionGraph
        measurements={measurements}
        measurementFilters={measurementFilters}
        translations={{ /* ConsumptionGraphTranslations */ }}
        label="Electricity"
        currency="GBP"
      />
    </>
  );
}

For dual fuel (e.g. electricity and gas in one chart), use DualConsumptionGraph with two useMeasurements results as measurements and extraMeasurements, plus legendEntries and colorScale. See Energy Insights for full patterns and market specifics.

Components​

  • ConsumptionGraph – Bar chart of energy consumption over time (multiple tariff bands, cost/usage toggle, responsive).
  • DualConsumptionGraph – Renders two measurement datasets in one chart (e.g. both fuels such as electricity and gas). Uses the same time controls and cost/usage toggle as ConsumptionGraph; pass measurements and extraMeasurements (plus legendEntries and colorScale) to show both series.
  • ConsumptionGraphControl – Filtering by time interval and custom date ranges.
  • StatisticsCard – Comparison of current vs previous period consumption.

For implementation details and market specifics, see Energy Insights.

Kraken API (measurements)​

The measurements field on the Property endpoint supports parameters such as:

  • propertyId, marketSupplyPointId
  • from, to, granularity (e.g. HALF_HOURLY, DAILY, WEEKLY, MONTHLY, YEARLY)
  • readingDirection (IMPORT | EXPORT), utilityType (ELECTRICITY | GAS)

Preview​

View Full Story →