Newer
Older
Ecolyo allow user to see its consumption in two way:
- 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.
## 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.
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
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 :
- DateNavigator
- FluidButtons
- FluidChart
- ConsumptionDetails
- KonnectorViewerList / KonnectorViewerCard
The submenu (FluidButtons), allows the user to switch between the different fluids and the multifluid view.
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.
The component allows the user to navigate through the selected timestep (week by week, month by month, etc.)
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.
The component allows the user to navigate through the different fluid views (multifluid, electricity, water, gas)
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 is the one that shows the user its consumption, according to the selected fluid, timestep and date.
- The ConsumptionVisualizer
- The FluidSlides
- The TimeStep Navigator
| 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 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.
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
The data state is define in the "ConsumptionFormatter" service following theses rules :
#### 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 & value of load is empty | 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 |
### Display of the specific cases (component: 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 :
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
| 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 | |
### Display of the load values
In function of the fluid type (single or multi) and of the data state, the display will be adapted.
#### Display of the main value (component: 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 (component: DataloadSectionDetail)
Used to display the detail just below the main value. The information displayed are :
| 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 |
### Information (component: InfoDataConsumptionVisualizer)
In addition of the value / load / message displayed, we can displayed an additional information.
| 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 | |
## 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_
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 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 error is a login error (eg: user consent is revoked), 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