- Month: display data at daily step on a period of a month
| **Day** (electricity only) | one day | half-hour |
- Year: display data at monthly step on a period of a year
| **Week** | a week | daily |
- 5 years: display data at yearly step on a period of 5 years (5 last years)
| **Month** | a month | daily |
| **Year** | a year | monthly |
| **5 years** | 5 years | yearly |
## Data Interval
## Data Interval
For each fluid, we have an upcoming data interval depending on the energy provider API.
Each fluid has an upcoming data interval depending on the 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
| Provider | Interval |
- FluidButtons
| -------- | ---------- |
- FluidChart
| Enedis | **3 days** |
- ConsumptionDetails
| GRDF | **5 days** |
- KonnectorViewerList / KonnectorViewerCard
| EGL | **5 days** |
The submenu (FluidButtons), allows the user to switch between the different fluids and the multifluid view.
## Components 💻
**Rules:**
### ConsumptionView
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:**
This is the main component of the consumption page. It's the entrypoint to several children components :
The component allows the user to navigate through the selected timestep (week by week, month by month, etc.)
-`DateNavigator`
-`FluidButtons`, _allows the user to switch between the different fluids and the multifluid view._
-`FluidChart`
-`ConsumptionDetails`
-`KonnectorViewerList` / `KonnectorViewerCard`
**Rules:**
**Rules:**
1. If no fluid is connected, the navigation is locked
- 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.
2. By default, the date is set to the lastDataDate.
- 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.
3. Navigation is locked above the current date.
- 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.
## FluidButtons
### DateNavigator
**Description:**
This component allows the user to navigate through the selected timestep (week by week, month by month, etc.)
The component allows the user to navigate through the different fluid views (multifluid, electricity, water, gas)
- If no fluid is connected, the navigation is locked
- By default, the date is set to the `lastDataDate`.
- Navigation is locked beyond the current date.
**Rules:**
### FluidButtons
1. If a Konnector is on error or its data is outdated, we show a red cross on the fluid icon
This component allows the user to navigate through the different fluids.
2. If the fluid is not connected we show a "turn on" icon
3. Icons have an active state. (They are colored when selected)
## FluidChart
- 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](https://forge.grandlyon.com/web-et-numerique/factory/llle_project/ecolyo/-/blob/async-oauth-gas/src/assets/icons/visu/disconnected.svg?plain=0)
- Icons are grey when inactive and display their respective color when active.
**Description:**
### FluidChart
This component is the one that shows the user its consumption, according to the selected fluid, timestep and date.
This component displays consumption, according to the selected fluid, timestep and date.
It is split in 3 distinct parts:
- The ConsumptionVisualizer
#### FluidChartSwipe
- The FluidSlides
- The TimeStep Navigator
**Rules:**
This component calls the `FluidChartSlide` component which is handled by the library `react-swipeable-views`, and allows the user to swipe across the data.
| Component | Rules |
This library loads the slides previous and next the current slide. This reduces loading time between slides.
| 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 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 ConsumptionVisualizer
#### ConsumptionVisualizer
**Description:**
- 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](./#dataload-consumption-visualizer)
This view displays the load of a specified fluid (electricity, water, gas) or the total consumption on the multifluid screen.
#### DataLoadConsumptionVisualizer
The display will be done in function of the data state.
**Rules to define data state:**
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 define in the "ConsumptionFormatter" service following theses rules :
The data state is defined by the following rule inside `consumptionFormatter.service` :
@@ -129,31 +107,40 @@ The data state is define in the "ConsumptionFormatter" service following theses
...
@@ -129,31 +107,40 @@ The data state is define in the "ConsumptionFormatter" service following theses
| At least one fluid have upcoming or coming data and other fluid doesn’t have missing or hole data | AGGREGATED_WITH_COMING |
| 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 |
| All fluid have coming data | AGGREGATED_COMING |
### Display of the specific cases (component: DataloadNoValue)
A modal `EstimatedConsumptionModal` can be opened when clicking on the estimated price.
##### Display of the specific cases `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 :
This component appear instead of the traditional one. It is used to display a general message which override the value. Here are the rules :
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 at the end of the consumption page
- 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 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 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 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 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, we will show a message that informs the user that the issue is probably related to the energy provider
- 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
