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
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.
Marlène SIMONDANT
committed
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.
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