diff --git a/src/assets/icons/ico/questionMark.svg b/src/assets/icons/ico/questionMark.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b633290c9775786a543936c2b65803b7203a755e
--- /dev/null
+++ b/src/assets/icons/ico/questionMark.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="41" viewBox="0 0 21 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4.09723C0.637168 3.5251 1.31859 2.98987 2.04425 2.49156C2.78761 1.99325 3.58407 1.55953 4.43362 1.19041C5.30088 0.821293 6.23008 0.535225 7.22124 0.33221C8.23008 0.110737 9.30974 0 10.4602 0C12.0531 0 13.4956 0.230701 14.7876 0.692102C16.0797 1.13505 17.1858 1.781 18.1062 2.62998C19.0266 3.4605 19.7345 4.46635 20.2301 5.64754C20.7434 6.82872 21 8.14833 21 9.60635C21 11.009 20.8053 12.2271 20.4159 13.2606C20.0443 14.2757 19.5664 15.1616 18.9823 15.9183C18.4159 16.675 17.7876 17.3302 17.0973 17.8839C16.4071 18.4375 15.7522 18.9543 15.1327 19.4342C14.5133 19.914 13.9734 20.3939 13.5133 20.8737C13.0708 21.3351 12.7965 21.8519 12.6903 22.424L12.0266 26.3829H7.00885L6.50442 21.898C6.38053 21.0122 6.48673 20.2462 6.82301 19.6003C7.15929 18.9359 7.61062 18.336 8.17699 17.8008C8.74337 17.2471 9.37169 16.7211 10.062 16.2228C10.7699 15.7061 11.4248 15.1616 12.0266 14.5895C12.646 13.9989 13.1593 13.3437 13.5664 12.6239C13.9912 11.8857 14.2035 11.0182 14.2035 10.0216C14.2035 8.80351 13.7965 7.83457 12.9823 7.11479C12.1858 6.395 11.1239 6.03511 9.79646 6.03511C8.82301 6.03511 8 6.14585 7.32744 6.36732C6.67257 6.58879 6.10619 6.83795 5.62832 7.11479C5.15044 7.37317 4.74336 7.6131 4.40708 7.83457C4.07079 8.05604 3.75222 8.16678 3.45133 8.16678C2.77876 8.16678 2.27434 7.86226 1.93805 7.25321L0 4.09723ZM4.96461 36.5982C4.96461 35.9892 5.07079 35.4171 5.28318 34.8818C5.51327 34.3282 5.82302 33.8575 6.2124 33.47C6.60178 33.0639 7.05309 32.7502 7.56637 32.5287C8.09734 32.2888 8.67256 32.1688 9.29203 32.1688C9.8938 32.1688 10.4602 32.2888 10.9912 32.5287C11.5221 32.7502 11.9823 33.0639 12.3717 33.47C12.7611 33.8575 13.0619 34.3282 13.2743 34.8818C13.5044 35.4171 13.6195 35.9892 13.6195 36.5982C13.6195 37.2257 13.5044 37.8071 13.2743 38.3423C13.0619 38.8776 12.7611 39.3482 12.3717 39.7542C11.9823 40.1418 11.5221 40.4463 10.9912 40.6678C10.4602 40.8893 9.8938 41 9.29203 41C8.67256 41 8.09734 40.8893 7.56637 40.6678C7.05309 40.4463 6.60178 40.1418 6.2124 39.7542C5.82302 39.3482 5.51327 38.8776 5.28318 38.3423C5.07079 37.8071 4.96461 37.2257 4.96461 36.5982Z" fill="#E3B82A"/>
+</svg>
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
index 6ef84a788ca6c43d757ee0e325c5ce7055c56ab8..a1fc6388cc184f7289faf85debffa0ebdb965c60 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx
@@ -43,9 +43,6 @@ const DataloadConsumptionVisualizer = ({
const [openEstimationModal, setOpenEstimationModal] = useState<boolean>(false)
const converterService = new ConverterService()
const dateChartService = new DateChartService()
- const { currentDatachart } = useSelector(
- (state: AppStore) => state.ecolyo.chart
- )
const emitNavEvent = useCallback(
async (targetPage: string) => {
diff --git a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
index b24e350e73eccd9ea32ac99fce72b06065ecf968..e637396bb614207424b5c978bacb9112862940b0 100644
--- a/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadNoValue.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
import './consumptionVisualizer.scss'
import { FluidType } from 'enum/fluid.enum'
import { Dataload } from 'models'
@@ -8,6 +8,7 @@ import { DateTime } from 'luxon'
import { useSelector } from 'react-redux'
import { AppStore } from 'store'
import ConfigService from 'services/fluidConfig.service'
+import NoDataModal from './NoDataModal'
interface DataloadNoValueProps {
dataload: Dataload
@@ -32,6 +33,10 @@ const DataloadNoValue: React.FC<DataloadNoValueProps> = ({
)
const configService = new ConfigService()
const fluidConfig = configService.getFluidConfig()
+ const [openNodataModal, setopenNodataModal] = useState<boolean>(false)
+ const toggleNoDataModal = useCallback(() => {
+ setopenNodataModal(prev => !prev)
+ }, [])
const handleToggleKonnectionCard = useCallback(() => {
setActive(true)
const app = document.querySelector('.app-content')
@@ -105,13 +110,28 @@ const DataloadNoValue: React.FC<DataloadNoValueProps> = ({
</div>
)}
{getDataState() === NoDataState.DATA_HOLE && (
- <div
- onClick={handleToggleKonnectionCard}
- className={`dataloadvisualizer-content error text-22-normal`}
- >
- {t('consumption_visualizer.no_data')}
+ <div className={`dataloadvisualizer-content text-22-normal`}>
+ <div className="dataloadvisualizer-section">
+ <div
+ className={`dataloadvisualizer-value ${FluidType[
+ fluidType
+ ].toLowerCase()} upper`}
+ >
+ {t('consumption_visualizer.no_data')}
+ </div>
+ <div
+ className="text-15-normal no-data-text"
+ onClick={toggleNoDataModal}
+ >
+ {t('consumption_visualizer.why_no_data')}
+ </div>
+ </div>
</div>
)}
+ <NoDataModal
+ open={openNodataModal}
+ handleCloseClick={toggleNoDataModal}
+ />
</>
)
}
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.tsx b/src/components/ConsumptionVisualizer/NoDataModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f6c64f7a1ce587b23504a0aa0036cb25b87f5f40
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/NoDataModal.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import Dialog from '@material-ui/core/Dialog'
+import CloseIcon from 'assets/icons/ico/close.svg'
+import QuestionIcon from 'assets/icons/ico/questionMark.svg'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import { Button, IconButton } from '@material-ui/core'
+import './noDataModal.scss'
+
+interface NoDataModalProps {
+ open: boolean
+ handleCloseClick: () => void
+}
+
+const NoDataModal: React.FC<NoDataModalProps> = ({
+ open,
+ handleCloseClick,
+}: NoDataModalProps) => {
+ const { t } = useI18n()
+
+ return (
+ <Dialog
+ open={open}
+ onClose={handleCloseClick}
+ aria-labelledby={'accessibility-title'}
+ classes={{
+ root: 'modal-root',
+ paper: 'modal-paper',
+ }}
+ >
+ <div id={'accessibility-title'}>
+ {t('consumption_visualizer.modal.window_title')}
+ </div>
+ <IconButton
+ aria-label={t('consumption_visualizer.modal.close')}
+ className="modal-paper-close-button"
+ onClick={handleCloseClick}
+ >
+ <Icon icon={CloseIcon} size={16} />
+ </IconButton>
+ <div className="nodata-modal">
+ <div className="question-mark">
+ <Icon icon={QuestionIcon} size={36} />
+ </div>
+
+ <div className="text-20-normal title">
+ {t('consumption_visualizer.why_no_data')}
+ </div>
+ <div className="text-16-normal">
+ {t('consumption_visualizer.dataModal.list_title')}
+ </div>
+ <div className="text-16-normal">
+ {t('consumption_visualizer.dataModal.item1')}
+ </div>
+ <div className="text-16-normal">
+ {t('consumption_visualizer.dataModal.item2')}
+ </div>
+ <Button
+ aria-label={t('ecogesture_info_modal.button_close')}
+ onClick={handleCloseClick}
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ >
+ {t('ecogesture_info_modal.button_close')}
+ </Button>
+ </div>
+ </Dialog>
+ )
+}
+
+export default NoDataModal
diff --git a/src/components/ConsumptionVisualizer/consumptionVisualizer.scss b/src/components/ConsumptionVisualizer/consumptionVisualizer.scss
index 4b5fc3f8a379e91bd7c343fd7daddad238cf4b88..d9b772b795430ac83179ad35cbbd61ec39bd8a6a 100644
--- a/src/components/ConsumptionVisualizer/consumptionVisualizer.scss
+++ b/src/components/ConsumptionVisualizer/consumptionVisualizer.scss
@@ -5,6 +5,7 @@
display: flex;
flex-direction: column;
align-items: center;
+ padding-bottom: 1rem;
@media #{$large-phone} {
width: 100%;
}
diff --git a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
index 097e91896692f7ec628b3387d98c5ea516367c11..d7fe9d5b86f206e1a96cf104047ae6cd4320de80 100644
--- a/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
+++ b/src/components/ConsumptionVisualizer/dataloadConsumptionVisualizer.scss
@@ -2,7 +2,7 @@
@import 'src/styles/base/breakpoint';
.dataloadvisualizer-root {
- min-height: 4rem;
+ min-height: 5rem;
display: flex;
align-items: center;
}
@@ -23,6 +23,12 @@
display: flex;
flex-direction: column;
align-items: center;
+ .no-data-text {
+ cursor: pointer;
+ color: $grey-bright;
+ border-bottom: solid 1px $grey-bright;
+ margin-top: 1rem;
+ }
&.dataloadvisualizer-section-left {
align-items: flex-end;
padding: 0.5rem 0.5rem;
@@ -94,6 +100,8 @@
.dataloadvisualizer-euro {
display: flex;
flex-direction: row;
+ min-height: 2rem;
+ align-items: center;
.dataloadvisualizer-euro-link {
text-decoration: none;
color: transparent;
diff --git a/src/components/ConsumptionVisualizer/lastDataConsumptionVisualizer.scss b/src/components/ConsumptionVisualizer/lastDataConsumptionVisualizer.scss
index 60b8e14e21166c00db310453e436612a206c8ca1..b2dbc972355b5eeb94e53f4a05832684da70ee7f 100644
--- a/src/components/ConsumptionVisualizer/lastDataConsumptionVisualizer.scss
+++ b/src/components/ConsumptionVisualizer/lastDataConsumptionVisualizer.scss
@@ -4,6 +4,5 @@
border: none;
background: none;
color: $grey-bright;
- margin-bottom: 1.5rem;
text-decoration: underline;
}
diff --git a/src/components/ConsumptionVisualizer/noDataModal.scss b/src/components/ConsumptionVisualizer/noDataModal.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f2e825050705a7808030a5dee1bac7232012e18f
--- /dev/null
+++ b/src/components/ConsumptionVisualizer/noDataModal.scss
@@ -0,0 +1,19 @@
+@import 'src/styles/base/color';
+
+.nodata-modal {
+ padding: 0.5rem;
+ color: $grey-bright;
+ div {
+ margin: 0.5rem 0;
+ line-height: 1.3;
+ }
+ .question-mark {
+ text-align: center;
+ }
+ .title {
+ color: $gold-shadow;
+ font-weight: bold;
+ text-align: center;
+ margin: 1rem 0;
+ }
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 228e9df627d6b68a458aff459a533b5e5cf951f1..35d2e1000580447832ebf95d2d5b60982eb72dd8 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -239,11 +239,17 @@
"consumption_visualizer": {
"missing_data": "Données manquantes",
"no_data": "Pas de données",
+ "why_no_data": "Pourquoi n'ai-je pas de données ?",
"last_data": "Dernières données",
"last_valid_data": "Dernières données valides",
"data_to_come": "à venir",
"aie": "Aïe !",
"estimated": "estimés",
+ "dataModal": {
+ "list_title": "2 raisons possibles :",
+ "item1": "- le lien entre Ecolyo et le fournisseur de données est rompu : une mise à jour de ce lien (en bas de la page) peut parfois résoudre ce problème.",
+ "item2": "- la mise à jour a été effectuée mais les données n'apparaîssent toujours pas : le soucis vient du fournisseur de données (Enedis pour l'électricité, GRDF pour le gaz, Eau du Grand Lyon pour l'eau). Cela peut-être dû à un problème technique et le mieux est de contacter directement votre fournisseur pour tenter de régler le problème avec eux."
+ },
"modal": {
"window_title": "info estimation des prix",
"title": "Comment sont estimés les prix ?",