Ecolyo allow user to see its consumption in two way:
Ecolyo allow user to see its consumption in two way:
-with an aggregated view aka HomeView
-globally with the Mutlifluid view that displays euro consumptions
-with a specific view for a fluid aka SingleFluidView
-more specifcally, fluid by fluid, by selecting the wanted fluid in the submenu
All consumption information are retrieve and calculated by services from the application.
All consumption information are retrieved and calculated by services from the application.
## HomeView
## 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's.
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
### Description
This view is the main view of the application. It displays an agreggation view of all connected fluids
This view is the main view of the application. It displays an agreggation view of all connected fluids.
It is the entrypoint to several children components that each handles a particular feature :
### Rules
- DateNavigator
- FluidButtons
- FluidChart
- ConsumptionDetails
- KonnectorViewerList / KonnectorViewerCard
1. If no fluids are connected, this view will display the konnectors card which allow user to connect its first fluids. These card are the same as the cards in option screen.
The submenu (FluidButtons), allows the user to switch between the different fluids and the multifluid view.
2. Fluid are displayed in multi fluid color and in euro
3. The comparison functionnality is not available for this view
4. TimeStep available are the folowing: week, month, year and 5 years
### Modal old fluid data
In order to warn a user that its data is too old regarding a fluid, a modal is displayed when the last date of a fluid is greater than 5 days. The modal is displayed only once a day and once the user saw it, we store a boolean to true in the userProfile's property `haveSeenOldFluidModal`.
### Rules
Depending of the konnector status the user will receive 2 differents messages:
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 gaz, l for water)
5. TimeStep available are the folowing: 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.
- if the konnector is in error, the user will be invited to check the konnector
- if the konnector has run successfully but hasn't retrieved data from the last 5 days, the user will be invited to contact the supplier
## SingleFluidView
## DateNavigator
### Description
### Description
This view displays the consumption of a specified fluid (electricity, water, gas).
The component allows the user to navigate through the selected timestep (week by week, month by month, etc.)
### Rules
### Rules
1. Fluid is displayed in the given fluid color and unit (kWh for electricity and gaz, l for water)
1. If no fluid is connected, the navigation is locked
2. The comparison functionnality is present for following time step: day, week, month, year
2. By default, the date is set to the lastDataDate.
3. TimeStep day is only available for electricity fluid
3. Navigation is locked above the current date.
4. If user has selected day time step and change the fluid, the week time step will be selected by default.
## Comparison
## FluidButtons
The user can compare its data with a previous period using a switch which will display the previous period on the same chart.
### Description
This feature is only available on single fluid charts and is not available at the year time step
## Time step
The component allows the user to navigate through the different fluid views (multifluid, electricity, water, gaz)
Different time steps can be selected by the user which will display different period on the graph according to the time step.
### Rules
- Day: display data at half-an-hour step on a period of one day
1. If a Konnector is errored or its data is outdated, we show a red cross on the fluid icon
- Week: display data at daily step on a period of a week
2. If the fluid is not connected we show a "turn on" icon
- Month: display data at daily step on a period of a month
3. Icons have an active state. (They are coloured when selected)
- 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
## FluidChart
### Description
This component is the one that shows the user its consumption, according to the selected fluid, timestep and date.
It is splitted in 3 distinct parts:
- The ConsumptionVisualier
- The FluidSlides
- The TimeStep Navigator
For each fluid, we have an upcoming data interval depending on the energy provider API's.
For Enedis, the interval is **1 day**
### Rules
For GRDF, the interval is **2 days**
| Component | Rules |
For EGL, the interval is **3 days**
| ----------- | ------------------------------ |
| ConsumptionVisualizer | <ul><li>Calls the *DataloadConsumptionVisualizer* component that shows the dataload of the selected timeStep and fluid</li><li>For multifluid, we show the total consumption of all connected fluid, and the consumption fluid by fluid, all in €</li><li>We display a message according to the data state as explained in the [DataLoad Consumption Visualizer](./#dataload-consumption-visualizer)</li></ul>|
|FluidSlides | This component calls the fluidSwipe component which is handled by the library *react-swipeable-views*, and allows the user to swipe accross 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
## DataLoad Consumption Visualizer
...
@@ -77,6 +111,25 @@ It also allows to navigate between the singlefluid views.
...
@@ -77,6 +111,25 @@ It also allows to navigate between the singlefluid views.
1. The Load is displayed in the given fluid color and unit (kWh for electricity and gaz, l for water)
1. The Load is displayed in the given fluid color and unit (kWh for electricity and gaz, l for water)
2. For the dataloads > 1000, it will display a mega unit (MWh for electricity and gaz, m3 for water)
2. For the dataloads > 1000, it will display a mega unit (MWh for electricity and gaz, m3 for water)
3. If it's multifluid view, we show the total consumption in €
3. If it's multifluid view, we show the total consumption in €
4. If we are in the upcoming data interval for the given fluid, we display "Upcoming Data"
4. While the last data date is between today's date and the interval mentionned above : we consider the data as *upcoming*
5. If we not in this interval anymore, we display the date of the last valid data.
5. If the last data date is before the interval (eg: lastDataDate = 8 days) : we consider the data as *outdated*
6. If there is no data at all for the given fluid, we display "No data"
6. If the a data is missing but there is other data after: we consider the data as *missing*, which means it is probably the supplier's fault or the customer's device
7. If a user visualizes a consumption after the last data date, we show a link to the last data date
## 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's state and allows the user to connect, delete, or update a konnector
### Rules
- If the fluid is konnected, this component will shows the konnector state at the end of the consumption page
- If the fluid is not konnected, 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 revocated), 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
