consumption.md

Consumption

Ecolyo allow user to see its consumption in two way:

• globally with the multifluid view that displays euro consumption
• more specifically, fluid by fluid, by selecting the wanted fluid in the submenu

All consumption information are retrieved and calculated by services from the application.

Time step

Different time steps can be selected by the user which will display different period on the graph according to the time step.

• Day: display data at half-an-hour step on a period of one day
• Week: display data at daily step on a period of a week
• Month: display data at daily step on a period of a month
• Year: display data at monthly step on a period of a year
• 5 years: display data at yearly step on a period of 5 years (5 last years)

Data Interval

For each fluid, we have an upcoming data interval depending on the energy provider API. When we check the data, we display directly the data or a specific message according to the last data we have in comparison with the actual date and the last data date.

We rely on these 3 intervals to show different messages :

For Enedis, the interval is 3 days For GRDF, the interval is 5 days For EGL, the interval is 5 days

ConsumptionView

Description

This view is the main view of the application. It displays an aggregation view of all connected fluids. It is the entrypoint to several children components that each handles a particular feature :

• DateNavigator
• FluidButtons
• FluidChart
• ConsumptionDetails
• KonnectorViewerList / KonnectorViewerCard

The submenu (FluidButtons), allows the user to switch between the different fluids and the multifluid view.

Rules

1. If no fluids are connected, this view will display the multifluid view with the KonnectorViewerList component which shows buttons that allow user to connect its first fluids. These buttons redirects to the chosen fluid section with the connection form.
2. If at least one fluid is connected, the multi fluid view and the connected fluids views are shown (electricity, water, gas).
3. For the multifluid view, Fluids are displayed in multi fluid color and in euro
4. Fluid is displayed in the given fluid color and unit (kWh for electricity and gas, l for water)
5. TimeStep available are the following: week, month, year, 5 years and day for electricity fluid
6. If user has selected day time step and change the fluid, the week time step will be selected by default.

DateNavigator

Description

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

Rules

1. If no fluid is connected, the navigation is locked
2. By default, the date is set to the lastDataDate.
3. Navigation is locked above the current date.

FluidButtons

Description

The component allows the user to navigate through the different fluid views (multifluid, electricity, water, gas)

Rules

1. If a Konnector is on error or its data is outdated, we show a red cross on the fluid icon
2. If the fluid is not connected we show a "turn on" icon
3. Icons have an active state. (They are coloured when selected)

FluidChart

Description

This component is the one that shows the user its consumption, according to the selected fluid, timestep and date. It is split in 3 distinct parts:

• The ConsumptionVisualizer
• The FluidSlides
• The TimeStep Navigator

Rules

Component	Rules
ConsumptionVisualizer	Calls the DataloadConsumptionVisualizer component that shows the dataload of the selected timeStep and fluid For multifluid, we show the total consumption of all connected fluid, and the consumption fluid by fluid, all in € We display a message according to the data state as explained in the DataLoad Consumption Visualizer
FluidSlides	This component calls the fluidSwipe component which is handled by the library react-swipeable-views, and allows the user to swipe across the selected timestep. This library loads the slides before and after the current slide, so we reduce the loading time between slides.
TimeStepSelector	This component allows the user to change the current Timestep, or to return to today's date with a button

DataLoad Consumption Visualizer

Description

This view displays the load of a specified fluid (electricity, water, gas) or the total consumption on the multifluid screen. The display will be done in function of the data state.

Rules to define data state

The data state is define in the "ConsumptionFormatter" service following theses rules :

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 & value of load is empty	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

Display of the specific cases (component: DataloadNoValue)

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

Condition	Displayed label	Comments
Single fluid && dataload state = EMPTY	Pas de données
Single fluid && dataload state = VALID	-
Single fluid && dataload state = HOLE	Pas de données
Single fluid && dataload state = MISSING	Données manquantes	Displayed in red and clickable (scroll to the konnector card)
Single fluid && dataload state = UPCOMING	À venir
Single fluid && dataload state = COMING	À venir
Multi fluid && dataload state = AGGREGATED_EMPTY	Pas de données
Multi fluid && dataload state = AGGREGATED_WITH_EMPTY	-
Multi fluid && dataload state = AGGREGATED_VALID	-
Multi fluid && dataload state = AGGREGATED_WITH_COMING	-
Multi fluid && dataload state = AGGREGATED_HOLE_OR_MISSING	Données manquantes
Multi fluid && dataload state = AGGREGATED_WITH_HOLE_OR_MISSING	-
Multi fluid && dataload state = AGGREGATED_COMING	À venir

Display of the load values

In function of the fluid type (single or multi) and of the data state, the display will be adapted.

Display of the main value (component: 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 (component: DataloadSectionDetail)

Used to display the detail just below the main value. The information displayed are :

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

Information (component: InfoDataConsumptionVisualizer)

In addition of the value / load / message displayed, we can displayed an additional information.

Condition	Displayed label	Comments
Single fluid && dataload state = EMPTY	Pourquoi n’ai-je pas de données ?
Single fluid && dataload state = VALID	-
Single fluid && dataload state = HOLE	Pourquoi n’ai-je pas de données ?
Single fluid && dataload state = MISSING	Dernières données disponibles : XX/XX/XX
Single fluid && dataload state = UPCOMING	Dernières données disponibles : XX/XX/XX
Single fluid && dataload state = COMING	Dernières données disponibles : XX/XX/XX
Multi fluid && dataload state = AGGREGATED_EMPTY	Pourquoi n’ai-je pas de données ?
Multi fluid && dataload state = AGGREGATED_VALID	-
Multi fluid && dataload state = AGGREGATED_WITH_COMING	-
Multi fluid && dataload state = AGGREGATED_HOLE_OR_MISSING	Dernières données complètes : XX/XX/XX
Multi fluid && dataload state = AGGREGATED_WITH_HOLE_OR_MISSING	Dernières données complètes : XX/XX/XX
Multi fluid && dataload state = AGGREGATED_COMING	Dernières données complètes : XX/XX/XX

Comparison

The user can compare its data with a previous period using a switch which will display the previous period on the same chart. The chart scale will adapt to the max load displayed between the actualData and the comparisonData

Konnector Viewer Card

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

Rules

• If the fluid is connected, this component will shows the konnector state at the end of the consumption page
• 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 is 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 user has already triggered an update today, we will show a message that informs the user that the issue is probably related to the energy provider