Newer
Older
- **multifluid**, which groups all fluids
- **each fluid**
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 |
Each fluid has an upcoming data interval depending on the provider API.
| Provider | Interval |
| -------- | ---------- |
| Enedis | **3 days** |
| GRDF | **5 days** |
| EGL | **5 days** |
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`
- 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.
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 set to the `lastDataDate`.
- Navigation is locked beyond the current date.
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](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.
This component displays consumption, according to the selected fluid, timestep and date.
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.
- 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 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` :
| 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 |
| 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 :
| 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 | |
| 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 |
This component renders nothing if a bar with value is selected.
If no value is available, the component render depending on the dataload state.
| 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 |
| 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