diff --git a/docs/ecolyo/functionalities/consumption.md b/docs/ecolyo/functionalities/consumption.md index a7410a634e653c81a8a96c2ac765bbd61ffb378b..0cf120aaa58f23525f15590de70d071f3d71268e 100644 --- a/docs/ecolyo/functionalities/consumption.md +++ b/docs/ecolyo/functionalities/consumption.md @@ -2,68 +2,102 @@ Ecolyo allow user to see its consumption in two way: -- with an aggregated view aka HomeView -- with a specific view for a fluid aka SingleFluidView +- globally with the Mutlifluid view that displays euro consumptions +- more specifcally, fluid by fluid, by selecting the wanted fluid in the submenu -All consumption information are retrieve and calculated by services from the application. +All consumption information are retrieved and calculated by services from the application. -## HomeView +## Time step + +Different time steps can be selected by the user which will display different period on the graph according to the time step. + +- 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) + +## Data Interval + +For each fluid, we have an upcoming data interval depending on the energy provider API's. +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 agreggation view of all connected fluids +This view is the main view of the application. It displays an agreggation view of all connected fluids. +It is the entrypoint to several children components that each handles a particular feature : -### Rules +- DateNavigator +- FluidButtons +- FluidChart +- ConsumptionDetails +- KonnectorViewerList / KonnectorViewerCard -1. If no fluids are connected, this view will display the konnectors card which allow user to connect its first fluids. These card are the same as the cards in option screen. -2. Fluid are displayed in multi fluid color and in euro -3. The comparison functionnality is not available for this view -4. TimeStep available are the folowing: week, month, year and 5 years +The submenu (FluidButtons), allows the user to switch between the different fluids and the multifluid view. -### Modal old fluid data -In order to warn a user that its data is too old regarding a fluid, a modal is displayed when the last date of a fluid is greater than 5 days. The modal is displayed only once a day and once the user saw it, we store a boolean to true in the userProfile's property `haveSeenOldFluidModal`. +### Rules -Depending of the konnector status the user will receive 2 differents messages: +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 gaz, l for water) +5. TimeStep available are the folowing: 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. -- if the konnector is in error, the user will be invited to check the konnector -- if the konnector has run successfully but hasn't retrieved data from the last 5 days, the user will be invited to contact the supplier -## SingleFluidView +## DateNavigator ### Description -This view displays the consumption of a specified fluid (electricity, water, gas). +The component allows the user to navigate through the selected timestep (week by week, month by month, etc.) ### Rules -1. Fluid is displayed in the given fluid color and unit (kWh for electricity and gaz, l for water) -2. The comparison functionnality is present for following time step: day, week, month, year -3. TimeStep day is only available for electricity fluid -4. If user has selected day time step and change the fluid, the week time step will be selected by default. +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. -## Comparison +## FluidButtons -The user can compare its data with a previous period using a switch which will display the previous period on the same chart. -This feature is only available on single fluid charts and is not available at the year time step +### Description -## Time step +The component allows the user to navigate through the different fluid views (multifluid, electricity, water, gaz) -Different time steps can be selected by the user which will display different period on the graph according to the time step. +### Rules -- 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) +1. If a Konnector is errored 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 coloured when selected) -## Data Interval +## FluidChart + +### Description + +This component is the one that shows the user its consumption, according to the selected fluid, timestep and date. +It is splitted in 3 distinct parts: + +- The ConsumptionVisualier +- The FluidSlides +- The TimeStep Navigator -For each fluid, we have an upcoming data interval depending on the energy provider API's. -For Enedis, the interval is **1 day** -For GRDF, the interval is **2 days** -For EGL, the interval is **3 days** +### Rules +| 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 accross 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 Consumption Visualizer @@ -77,6 +111,25 @@ It also allows to navigate between the singlefluid views. 1. The Load is displayed in the given fluid color and unit (kWh for electricity and gaz, l for water) 2. For the dataloads > 1000, it will display a mega unit (MWh for electricity and gaz, m3 for water) 3. If it's multifluid view, we show the total consumption in € -4. If we are in the upcoming data interval for the given fluid, we display "Upcoming Data" -5. If we not in this interval anymore, we display the date of the last valid data. -6. If there is no data at all for the given fluid, we display "No data" +4. While the last data date is between today's date and the interval mentionned above : we consider the data as *upcoming* +5. If the last data date is before the interval (eg: lastDataDate = 8 days) : we consider the data as *outdated* +6. If the a data is missing but there is other data after: we consider the data as *missing*, which means it is probably the supplier's fault or the customer's device +7. If a user visualizes a consumption after the last data date, we show a link to the last data date + + +## Comparison + +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* + +## Konnector Viewer Card + +This component shows the konnector's state and allows the user to connect, delete, or update a konnector + +### Rules + +- If the fluid is konnected, this component will shows the konnector state at the end of the consumption page +- If the fluid is not konnected, 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 error is a login error (eg: user consent is revocated), it will show a specific message +- 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