Skip to content
Snippets Groups Projects

Consumption

The consumption view displays data by :

  • multifluid, which groups all fluids
  • each fluid

Time step

Users can choose various time steps to display different periods on the graph.

Time step Period Step
Day (electricity only) one day half-hour
Week a week daily
Month a month daily
Year a year monthly
5 years 5 years yearly

Data Interval

Each fluid has an upcoming data interval depending on the provider API.

Provider Interval
Enedis 3 days
GRDF 5 days
EGL 5 days

Components 💻

ConsumptionView

This is the main component of the consumption page. It's the entrypoint to several children components :

  • DateNavigator
  • FluidButtons, allows the user to switch between the different fluids and the multifluid view.
  • FluidChart
  • ConsumptionDetails
  • KonnectorViewerList / KonnectorViewerCard

Rules:

  • If no fluids are connected, the KonnectorViewerList will be displayed. It shows buttons that allow user to connect its fluids. These buttons redirects to the chosen fluid view.
  • If at least one fluid is connected, the multi fluid view shows the connected fluids. Fluids prices are added together. They are in multi fluid color and in euro.
  • A Fluid is displayed with his specific color and his unit (kWh for electricity and gas, l for water).
  • The selected time step will persist when changing fluid.

DateNavigator

This component allows the user to navigate through the selected timestep (week by week, month by month, etc.)

  • If no fluid is connected, the navigation is locked
  • By default, the date is today.
  • Navigation is locked beyond the current date.

FluidButtons

This component allows the user to navigate through the different fluids.

  • If a Konnector is on error, it shows a red cross on the fluid icon
  • If the fluid is not connected it shows a disconnected icon
  • Icons are grey when inactive and display their respective color when active.

FluidChart

This component displays consumption, according to the selected fluid, timestep and date.

It uses two children components for the Day timestep (electricity only) in case no half-hour data is received :

  • The HalfHourUpcoming component is displayed if the konnector has been updated within the last 3 days indicating data is potentially coming later.
  • The HalfHourNoDataFailure component is displayed if the konnector has not been updated within the last 3 days, suggesting a more permanent issue in data retrieval.

FluidChartSwipe

This component calls the FluidChartSlide component which is handled by the library react-swipeable-views, and allows the user to swipe across the data.

This library loads the slides previous and next the current slide. This reduces loading time between slides.

ConsumptionVisualizer

  • Calls the DataloadConsumptionVisualizer component that shows the dataload of the selected timeStep and fluid
  • For multifluid, shows the total consumption in € of summed connected fluids, and each fluid
  • It displays a message according to the data state as explained in the DataLoad Consumption Visualizer

DataLoadConsumptionVisualizer

This component displays the load of a specified fluid or the total consumption on the multifluid screen. The rendered value depends on the data state.

The data state is defined by the following rule inside consumptionFormatter.service :

For single fluid
Condition State
Before the first data available EMPTY
Between the first and last data available & value of load is not empty VALID
Between the first and last data available & no document in database for the given day HOLE
After the last data available & Before today & in the dataDelayOffset period UPCOMING
After the last data available & Before today & not in the dataDelayOffset period MISSING
After today COMING
For multifluid
Condition State
All fluids have empty data AGGREGATED_EMPTY
At least one fluid have a data and another fluids with empty data AGGREGATED_WITH_EMPTY
All fluids have valid data AGGREGATED_VALID
All fluid have a hole or missing data AGGREGATED_HOLE_OR_MISSING
At least one fluid have a data and another fluids with a missing or hole data AGGREGATED_WITH_HOLE_OR_MISSING
At least one fluid have upcoming or coming data and other fluid doesn’t have missing or hole data AGGREGATED_WITH_COMING
All fluid have coming data AGGREGATED_COMING

A modal EstimatedConsumptionModal can be opened when clicking on the estimated price.

Display of the specific cases DataloadNoValue

This component appear instead of the traditional one. It is used to display a general message which override the value. Here are the rules :

For single fluid
dataload state Displayed label Comments
EMPTY Pas de données
VALID -
HOLE Pas de données
MISSING Données manquantes Displayed in red and clickable (scroll to the konnector card)
UPCOMING À venir
COMING À venir
For multi fluid
dataload state Displayed label
AGGREGATED_EMPTY Pas de données
AGGREGATED_WITH_EMPTY -
AGGREGATED_VALID -
AGGREGATED_WITH_COMING -
AGGREGATED_HOLE_OR_MISSING Données manquantes
AGGREGATED_WITH_HOLE_OR_MISSING -
AGGREGATED_COMING À venir
Display of the load values

Depending of the selected fluid, and of the data state, the value will be adapted.

Display of the main value DataloadSectionValue

Used to display the load or price in function of following rules :

Condition Displayed information
Single fluid && dataload value < 1000 Display the load
Single fluid && dataload value >= 1000 Display the load in Mega unit
Multifluid without comparison Display the load converted in euro and a link to display the Estimated Modal information
Multifluid with comparison Display the load converted in euro
Display of the detail value DataloadSectionDetail

Used to display the detail just below the main value.

Condition Displayed information
Single fluid Display the load converted in euro
Multifluid without comparison Display the load converted in euro for each available fluid
Multifluid with comparison Display nothing

InfoDataConsumptionVisualizer

This component renders nothing if a bar with value is selected.

If no value is available, the component render depending on the dataload state.

Single fluid:

dataload state Displayed label
VALID -
EMPTY Pourquoi n’ai-je pas de données ?
HOLE Pourquoi n’ai-je pas de données ?
MISSING Dernières données disponibles : XX/XX/XX
UPCOMING Dernières données disponibles : XX/XX/XX
COMING Dernières données disponibles : XX/XX/XX

Multi fluid:

dataload state Displayed label
AGGREGATED_VALID -
AGGREGATED_WITH_COMING -
AGGREGATED_EMPTY Pourquoi n’ai-je pas de données ?
AGGREGATED_HOLE_OR_MISSING Dernières données complètes : XX/XX/XX
AGGREGATED_WITH_HOLE_OR_MISSING Dernières données complètes : XX/XX/XX
AGGREGATED_COMING Dernières données complètes : XX/XX/XX

TimeStepSelector

This component allows the user to change the current Timestep, or to return to today's date.

Comparison

The user can compare two periods of data on the same chart.

The chart scale will adapt to the max load displayed between the actualData and the comparisonData.

ConsumptionDetails

This component sums up the consumption prices of the current period.

KonnectorViewerCard

This component shows the konnector state and allows the user to connect, delete, or update a konnector.

  • If the fluid is connected, this component will shows the konnector state
  • If the fluid is not connected, it will show the connection form
  • If the konnector is in error or its data is outdated, it will display the number of days since the data became outdated
  • If the error is a login error (eg: user consent is revoked), it will show a specific message
  • If the data is outdated but the konnector is not in error, it will display a warning concerning the outdated data
  • If the data is outdated but the user has already triggered an update today, it will show a message that informs the user that the issue is probably related to the energy provider