# Consumption The consumption view displays data by : - **multifluid**, which groups all fluids - **each fluid** ## Time step 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 | ## Data Interval Each fluid has an upcoming data interval depending on the provider API. | Provider | Interval | | -------- | ---------- | | Enedis | **3 days** | | GRDF | **5 days** | | EGL | **5 days** | ## Components 💻 ### ConsumptionView 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` **Rules:** - 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. ### DateNavigator 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 today. - Navigation is locked beyond the current date. ### FluidButtons 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. ### FluidChart This component displays consumption, according to the selected fluid, timestep and date. 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. #### FluidChartSwipe 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. #### ConsumptionVisualizer - 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](./consumption.md#dataload-consumption-visualizer) #### DataLoadConsumptionVisualizer 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` : ##### 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 & 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 | ##### 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 | 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 : ##### For single fluid | 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 | | ##### For multi fluid | 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 | | Multifluid with comparison | Display nothing | #### InfoDataConsumptionVisualizer This component renders nothing if a bar with value is selected. If no value is available, the component render depending on the dataload state. **Single fluid:** | 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 | **Multi fluid:** | 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