diff --git a/docs/ecolyo/functionalities/consumption.md b/docs/ecolyo/functionalities/consumption.md index 36d469a9f8d93e9f45267820a64ce9f7aec5dccb..ad5b92f468333a99530699b06025f7c04d98bf01 100644 --- a/docs/ecolyo/functionalities/consumption.md +++ b/docs/ecolyo/functionalities/consumption.md @@ -1,112 +1,90 @@ # Consumption -Ecolyo allow user to see its consumption in two way: +The consumption view displays data by : -- globally with the multifluid view that displays euro consumption -- more specifically, fluid by fluid, by selecting the wanted fluid in the submenu - -All consumption information are retrieved and calculated by services from the application. +- **multifluid**, which groups all fluids +- **each fluid** ## Time step -Different time steps can be selected by the user which will display different period on the graph according to the time step. +Users can choose various time steps to display different periods on the graph. -- 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) +| 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 -For each fluid, we have an upcoming data interval depending on the energy 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 : +Each fluid has an upcoming data interval depending on the provider API. -- DateNavigator -- FluidButtons -- FluidChart -- ConsumptionDetails -- KonnectorViewerList / KonnectorViewerCard +| Provider | Interval | +| -------- | ---------- | +| Enedis | **3 days** | +| GRDF | **5 days** | +| EGL | **5 days** | -The submenu (FluidButtons), allows the user to switch between the different fluids and the multifluid view. +## Components 💻 -**Rules:** - -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 +### ConsumptionView -**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:** -1. If no fluid is connected, the navigation is locked -2. By default, the date is set to the lastDataDate. -3. Navigation is locked above the current date. +- 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. -## 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 -2. If the fluid is not connected we show a "turn on" icon -3. Icons have an active state. (They are colored when selected) +This component allows the user to navigate through the different fluids. -## 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. -It is split in 3 distinct parts: +This component displays consumption, according to the selected fluid, timestep and date. -- The ConsumptionVisualizer -- The FluidSlides -- The TimeStep Navigator +#### FluidChartSwipe -**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 | -| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 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 | +This library loads the slides previous and next the current slide. This reduces loading time between slides. -## DataLoad Consumption Visualizer +#### 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. -The display will be done in function of the data state. +#### DataLoadConsumptionVisualizer -**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` : -#### For single fluid +##### For single fluid | Condition | State | | ------------------------------------------------------------------------------------- | -------- | @@ -117,7 +95,7 @@ The data state is define in the "ConsumptionFormatter" service following theses | After the last data available & Before today & not in the dataDelayOffset period | MISSING | | After today | COMING | -#### For multifluid +##### For multifluid | Condition | State | | ------------------------------------------------------------------------------------------------- | ------------------------------- | @@ -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 | | 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 : -| Condition | Displayed label | Comments | -| --------------------------------------------------------------- | ------------------ | ------------------------------------------------------------- | -| Single fluid && dataload state = EMPTY | Pas de données | | -| Single fluid && dataload state = VALID | - | | -| Single fluid && dataload state = HOLE | Pas de données | | -| Single fluid && dataload state = MISSING | Données manquantes | Displayed in red and clickable (scroll to the konnector card) | -| Single fluid && dataload state = UPCOMING | À venir | | -| Single fluid && dataload state = COMING | À venir | | -| Multi fluid && dataload state = AGGREGATED_EMPTY | Pas de données | | -| Multi fluid && dataload state = AGGREGATED_WITH_EMPTY | - | | -| Multi fluid && dataload state = AGGREGATED_VALID | - | | -| Multi fluid && dataload state = AGGREGATED_WITH_COMING | - | | -| Multi fluid && dataload state = AGGREGATED_HOLE_OR_MISSING | Données manquantes | | -| Multi fluid && dataload state = AGGREGATED_WITH_HOLE_OR_MISSING | - | | -| Multi fluid && dataload state = AGGREGATED_COMING | À venir | | +##### For single fluid -### Display of the load values +| 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 | | -In function of the fluid type (single or multi) and of the data state, the display will be adapted. +##### For multi fluid -#### Display of the main value (component: DataloadSectionValue) +| 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 : @@ -164,9 +151,9 @@ Used to display the load or price in function of following rules : | 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 (component: DataloadSectionDetail) +##### Display of the detail value `DataloadSectionDetail` -Used to display the detail just below the main value. The information displayed are : +Used to display the detail just below the main value. | Condition | Displayed information | | ----------------------------- | ----------------------------------------------------------- | @@ -174,39 +161,55 @@ Used to display the detail just below the main value. The information displayed | Multifluid without comparison | Display the load converted in euro for each available fluid | | Multifluid with comparison | Display nothing | -### Information (component: InfoDataConsumptionVisualizer) +#### InfoDataConsumptionVisualizer -In addition of the value / load / message displayed, we can displayed an additional information. +This component renders nothing if a bar with value is selected. -| Condition | Displayed label | Comments | -| --------------------------------------------------------------- | ---------------------------------------- | -------- | -| Single fluid && dataload state = EMPTY | Pourquoi n’ai-je pas de données ? | | -| Single fluid && dataload state = VALID | - | | -| Single fluid && dataload state = HOLE | Pourquoi n’ai-je pas de données ? | | -| Single fluid && dataload state = MISSING | Dernières données disponibles : XX/XX/XX | | -| Single fluid && dataload state = UPCOMING | Dernières données disponibles : XX/XX/XX | | -| Single fluid && dataload state = COMING | Dernières données disponibles : XX/XX/XX | | -| Multi fluid && dataload state = AGGREGATED_EMPTY | Pourquoi n’ai-je pas de données ? | | -| Multi fluid && dataload state = AGGREGATED_VALID | - | | -| Multi fluid && dataload state = AGGREGATED_WITH_COMING | - | | -| Multi fluid && dataload state = AGGREGATED_HOLE_OR_MISSING | Dernières données complètes : XX/XX/XX | | -| Multi fluid && dataload state = AGGREGATED_WITH_HOLE_OR_MISSING | Dernières données complètes : XX/XX/XX | | -| Multi fluid && dataload state = AGGREGATED_COMING | Dernières données complètes : XX/XX/XX | | +If no value is available, the component render depending on the dataload state. -## Comparison +**Single fluid:** -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_ +| 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 | -## Konnector Viewer Card +**Multi fluid:** -This component shows the konnector state and allows the user to connect, delete, or update a konnector +| 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 | -**Rules:** +### 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 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 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 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