v46.0.0

EnergyOverview breaking changes

v46 makes EnergyOverview a controlled compound component. The presentation components no longer keep their own selected unit, custom interval, card view, or standing charge state. Instead, these values are owned by useEnergyOverview and useEnergyOverviewTimeframe, then passed into the relevant components.

If you do not use EnergyOverview, there is no migration work for this release. If you do, update the code that wires your hooks to the compound components. The sections below show each breaking change and the replacement API.

Move the unit default into useEnergyOverview

EnergyOverviewUnitToggle no longer accepts defaultValue. The selected unit now comes from useEnergyOverview. To keep the same initial unit, pass defaultUnitView to the hook.

Before:

const energyOverview = useEnergyOverview({
    measurementsData,
    measurementFiltersData,
});
 
<EnergyOverviewUnitToggle defaultValue="cost">
    <EnergyOverviewUnitToggleOption value="kWh">kWh</EnergyOverviewUnitToggleOption>
    <EnergyOverviewUnitToggleOption value="cost">£</EnergyOverviewUnitToggleOption>
</EnergyOverviewUnitToggle>

After:

const energyOverview = useEnergyOverview({
    measurementsData,
    measurementFiltersData,
    defaultUnitView: 'cost',
});
 
<EnergyOverviewUnitToggle>
    <EnergyOverviewUnitToggleOption value="kWh">kWh</EnergyOverviewUnitToggleOption>
    <EnergyOverviewUnitToggleOption value="cost">£</EnergyOverviewUnitToggleOption>
</EnergyOverviewUnitToggle>

EnergyOverviewUnitToggle still receives its current value through EnergyOverviewCard context, so make sure your card receives unitView and setUnitView from useEnergyOverview.

Control the custom date range interval from useEnergyOverviewTimeframe

EnergyOverviewTimeframeControls no longer accepts defaultIntervalValue. The default for the custom date range interval now belongs to useEnergyOverviewTimeframe and is configured with defaultCustomIntervalValue.

The controlled interval prop on EnergyOverviewTimeframeControls has also changed. The hook still returns the selected custom interval as dateRangeIntervalValue, but the component now receives that value through its intervalValue prop.

Before:

const timeframe = useEnergyOverviewTimeframe({
    measurementFiltersData,
    dateLocale,
});
 
<EnergyOverviewTimeframeControls
    dateRangeIntervalValue={timeframe.dateRangeIntervalValue}
    defaultIntervalValue={intervalValues[1]}
    onIntervalChange={timeframe.setDateRangeIntervalValue}
    toggleIntervalValue={timeframe.toggleIntervalValue}
    {...otherTimeframeControlProps}
/>

After:

const timeframe = useEnergyOverviewTimeframe({
    measurementFiltersData,
    dateLocale,
    defaultCustomIntervalValue: 'WEEK',
});
 
<EnergyOverviewTimeframeControls
    intervalValue={timeframe.dateRangeIntervalValue}
    onIntervalChange={timeframe.setDateRangeIntervalValue}
    toggleIntervalValue={timeframe.toggleIntervalValue}
    {...otherTimeframeControlProps}
/>

This keeps the custom interval select in sync with the hook state. It also means the timeframe hook is now the single place that handles the persisted timeframe and the custom interval default.

Pass card state from useEnergyOverview

EnergyOverviewCard no longer creates its own view or standing charge state. When migrating a card, check the wiring between useEnergyOverview and EnergyOverviewCard. Pass viewType and setViewType from the hook. Pass showStandingCharge and setShowStandingCharge from the same hook. If you want the card to open in table view, pass initialViewType to useEnergyOverview.

Before:

const energyOverview = useEnergyOverview({
    measurementsData,
    measurementFiltersData,
});
 
<EnergyOverviewCard
    chartData={energyOverview.chartData}
    legendEntries={energyOverview.legendEntries}
    totalConsumption={energyOverview.totalConsumption}
    totalStandingCharge={energyOverview.totalStandingCharge}
    unitView={energyOverview.unitView}
    setUnitView={energyOverview.setUnitView}
    {...otherCardProps}
/>

After:

const energyOverview = useEnergyOverview({
    measurementsData,
    measurementFiltersData,
    initialViewType: 'table',
});
 
<EnergyOverviewCard
    chartData={energyOverview.chartData}
    legendEntries={energyOverview.legendEntries}
    totalConsumption={energyOverview.totalConsumption}
    totalStandingCharge={energyOverview.totalStandingCharge}
    unitView={energyOverview.unitView}
    setUnitView={energyOverview.setUnitView}
    viewType={energyOverview.viewType}
    setViewType={energyOverview.setViewType}
    showStandingCharge={energyOverview.showStandingCharge}
    setShowStandingCharge={energyOverview.setShowStandingCharge}
    {...otherCardProps}
/>

Previously, EnergyOverviewCard handled the standing charge adjustment internally. In v46, useEnergyOverview owns that state and returns the adjusted total instead. In cost view, when showStandingCharge is false, the hook subtracts the standing charge from the returned totalConsumption. Passing the returned value to EnergyOverviewCard keeps EnergyOverviewTotalValue, the chart, and the standing charge checkbox aligned.

Update EnergyOverview type and value imports

EnergyOverview measurement and timeframe types are now defined in Coral instead of coming from @octopus-energy/measurements. If your app imports EnergyOverview date range, custom interval, or fuel values from @octopus-energy/measurements, move those imports to Coral.

Before:

import {
    CustomDateRangeSelectValue,
    DateRangeToggleValue,
} from '@octopus-energy/measurements';

After:

import {
    CustomDateRangeSelectValue,
    DateRangeToggleValue,
} from '@octopus-energy/coral/molecules';

Import only the values and types your app uses. @octopus-energy/coral/molecules reexports the relevant Coral types, so you can keep EnergyOverview type imports beside your component imports.

Use these checks when updating imports:

• If you import CustomDateRangeSelectValue, DateRangeToggleValue, EnergyOverviewDateRange, or FuelType from @octopus-energy/measurements or @krakentech/blueprint-utils, import them from @octopus-energy/coral/molecules instead.
• If you use UseMeasurementsData, replace it with MeasurementsData from @octopus-energy/coral/molecules.
• If you use measurement or timeframe helper types from @octopus-energy/measurements, use the Coral equivalents where needed. These include MeasurementLineItem, MeasurementStatisticItem, and DateRangeStartAtEndAtMapping.
• If you use TimeframeEnergyOverviewDateRange or EnergyOverviewTimeframeTypes, replace them with the more specific Coral types. Use EnergyOverviewDateRange for the hook date range and DateRangeToggleValue for the toggle value.

Before:

import type { UseMeasurementsData } from '@octopus-energy/coral/molecules';

After:

import type { MeasurementsData } from '@octopus-energy/coral/molecules';

The move from TypeScript enums to const objects should be transparent for most consumers. Runtime usage such as DateRangeToggleValue.CUSTOM still works, and the public values are still the same string literals. The new types are a little more permissive, so any type assertions you added to bridge values from @octopus-energy/measurements or @krakentech/blueprint-utils may no longer be needed. This is a good opportunity to remove that bridging code.

The INTERVAL and CALENDAR date range values have also been removed from EnergyOverviewDateRange. Use DateRangeToggleValue.CUSTOM for the custom toggle state, then use CustomDateRangeSelectValue.DAY, CustomDateRangeSelectValue.WEEK, or CustomDateRangeSelectValue.MONTH for the interval inside the custom date range picker.