Consumption disaggregation

​

Functional description

---

​

Main feature

The usage breakdown web component allows users to understand what consumes the most energy at home, for both electricity and gas. Visualize an ordered list of usage consumption The component gives an overview of consumption by usage for a given period. By default, the client sees :

• Total energy consumed during the previous month, in kWh and currency

• The top 5 most consuming usages (electricity view)
• The consumption value in a given currency
• The percentage of each usage relative to the total consumption

Below an example :

​

Detailed features

Choose a period A user can view usage breakdown over two timeframes —year, month— using the dedicated period selector. Then, in each timeframe, a user can select a specific year or month using the datePicker element. Month timeframe

• Displays the breakdown for a specific ended month

Year timeframe

• Displays the breakdown from the beginning of the year
• Up to the previous month

Choose a fluid (electricity or gas) If the user has both electricity and gas contracts, a switch allows selecting one or the other. If only one fluid is contracted, no switch is shown. Electricity view

• Up to 12 usages can be displayed
• By default : only the top 5
• Additional usages can be revealed via the dropdown

Gas view

• Up to 3 usages
• All always displayed

Displayed usages depend on the equipment declared by the user. Understand how usage breakdown is calculated Depending on the algorithm used (see consumption disaggregation documentation), the accuracy may vary. The tooltip (“i”) explains the algorithm used :

• SIMFAST : Breakdown estimated solely from profile data
• REGIME : Based on monthly consumption + profile
• DISAGGREGATION : Based on detailed daily consumption + profile

Below an example : Note : Whatever the view or the timeframe, it is stated to the users that the displayed amounts are estimates and that the invoice remains the reference.

---

​

Error and information messages handling

The usage breakdown may not display in the following cases : Use case 1 : Breakdown not available for current month Use case 2 : API error (400/500)

---

​

Loading state handling

When data takes time to load (slow network or API > 300 ms), a skeleton is displayed to :

• indicate that data is loading
• preview how the list will appear

Below an example :

---

​

Responsiveness

The usage breakdown interface is fully responsive. Desktop

---

​

Provider customization

Each usage is associated with a pictogram. The component offers two display modes : Polychromatic mode Each usage has a colored pictogram depending on category : Below an example : Monochromatic mode Pictograms use the provider’s primary brand color (weakest shade). The applied CSS variable : —etc-sem-color-brand-weakest For more details, refer to ‘How to parameter a web component’ section. Below an example :

---

​

Language management

The web component supports multiple languages. Below an example in french :

---

​

Accessibility

The component is developed following the RGAA (French General Accessibility Improvement Framework) requirements and accessibility best practices. Examples of RGAA accessibility requirements implemented in the dtn-usage-breakdown web component include :

• The usage list is an ordered list, meaning that the screen reader will respect the usage arrangement (from the highest to the lowest usage in terms of consumption).
• When users decide to display more usage, the screen reader will notify them that more usage are displayed.
• The keyboard navigation follows the pattern below :
  1. Fluid switch
  2. Step switch
  3. Datepicker
  4. Consumption header
  5. Algorithm information button
  6. All usages (one by one)

---

​

API used to display consumption data

Usage breakdown is provided by the monthly usage breakdown API (see detailed API documentation).

---

Integration of the web component ‘Consumption disaggregation’