diff --git a/src/components/Home/HomeIndicators.tsx b/src/components/Home/HomeIndicators.tsx index c3f3a6932314f67776ddad54af0e877157c73da1..83fe432556b268243e9d28bf667cd3449888e996 100644 --- a/src/components/Home/HomeIndicators.tsx +++ b/src/components/Home/HomeIndicators.tsx @@ -15,6 +15,7 @@ import { convertDateToShortDateString } from 'utils/date' import PerformanceIndicatorContent from 'components/PerformanceIndicator/PerformanceIndicatorContent' import FluidPerformanceIndicator from 'components/PerformanceIndicator/FluidPerformanceIndicator' import KonnectorViewerListItem from 'components/Konnector/KonnectorViewerListItem' +import { FluidType } from 'enum/fluid.enum' interface HomeIndicatorsProps { timeStep: TimeStep @@ -35,6 +36,7 @@ const HomeIndicators: React.FC<HomeIndicatorsProps> = ({ null ) const [isLoaded, setIsLoaded] = useState<boolean>(false) + const [fluidLackOfData, setFluidLackOfData] = useState<Array<FluidType>>([]) const performanceIndicatorService = new PerformanceIndicatorService() const configService = new ConfigService() @@ -61,6 +63,14 @@ const HomeIndicators: React.FC<HomeIndicatorsProps> = ({ ) if (fetchedPerformanceIndicators) { + const fluidLackOfDataIndicators: Array<FluidType> = [] + fetchedPerformanceIndicators.map((fluidIndicator, index) => { + if (fluidIndicator.compareValue === null) { + console.log(index) + fluidLackOfDataIndicators.push(index) + } + }) + setFluidLackOfData(fluidLackOfDataIndicators) setPerformanceIndicators(fetchedPerformanceIndicators) setCurrentTimePeriod(periods.timePeriod) } @@ -88,6 +98,7 @@ const HomeIndicators: React.FC<HomeIndicatorsProps> = ({ performanceIndicators )} timeStep={timeStep} + fluidLackOfData={fluidLackOfData} /> <div> <span className="text-16-normal-uppercase details-title"> diff --git a/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx index 72fb20b067b4d853cdf6969de771efce6c2704e3..1900e2ed00b34a3f77ae8eb03df118e74993aa6e 100644 --- a/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx +++ b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx @@ -13,15 +13,18 @@ import RedIndicatorIcon from 'assets/icons/visu/indicator/red.svg' import GreyIndicatorIcon from 'assets/icons/visu/indicator/grey.svg' import ErrorIndicatorIcon from 'assets/icons/visu/indicator/error.svg' import NodataIndicatorIcon from 'assets/icons/visu/indicator/nodata.svg' +import { FluidType } from 'enum/fluid.enum' interface PerformanceIndicatorContentProps { performanceIndicator: PerformanceIndicator timeStep: TimeStep + fluidLackOfData?: Array<FluidType> } const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> = ({ performanceIndicator, timeStep, + fluidLackOfData = [], }: PerformanceIndicatorContentProps) => { const { t } = useI18n() let displayedValue: string @@ -47,10 +50,8 @@ const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> = } const perfString = perf ? formatNumberValues(perf) : '' const diffString = diffInEuro ? formatNumberValues(diffInEuro) : '' - let perfStatus = ['error', ErrorIndicatorIcon] - if (perf === null && !errorInPerf) - perfStatus = ['nodata', NodataIndicatorIcon] + if (perf === null && !errorInPerf) perfStatus = ['nodata', ErrorIndicatorIcon] else if (perf === null && errorInPerf) perfStatus = ['error', ErrorIndicatorIcon] else if (perf && perf === 0) perfStatus = ['zero', GreyIndicatorIcon] @@ -86,7 +87,6 @@ const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> = return frequency } - return ( <div className="fpi"> <div className="fpi-left"> @@ -143,11 +143,29 @@ const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> = icon={perfStatus[1]} size={35} /> - <div> - {' '} - <div> {t('INDICATOR.ERROR_NO_COMPARE')} </div> - <div> {t('INDICATOR.ERROR_NO_COMPARE_REASON')} </div> - </div> + + {fluidLackOfData.length !== 0 ? ( + <div> + <div> {t('INDICATOR.ERROR_NO_COMPARE_NO_DATA')} </div> + <div> + {fluidLackOfData.map(fluidType => { + return ( + <div key={fluidType} className="fluid-enum"> + {' '} + - {t( + 'FLUID.' + FluidType[fluidType] + '.NAME' + )}{' '} + </div> + ) + })} + </div> + </div> + ) : ( + <div> + <div> {t('INDICATOR.ERROR_NO_COMPARE')} </div> + <div> {t('INDICATOR.ERROR_NO_COMPARE_REASON')} </div> + </div> + )} </div> )} </div> diff --git a/src/locales/fr.json b/src/locales/fr.json index f09eb168dc92365e251b2d2b875e08be897902d2..70c8975bb31cc52240a1917e40c6a795d10a3c15 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -177,7 +177,8 @@ }, "DISPLAY_OTHER_FLUID": "Voir", "ERROR_NO_COMPARE": "comparaison impossible", - "ERROR_NO_COMPARE_REASON": "(manque de données)" + "ERROR_NO_COMPARE_REASON": "(manque de données)", + "ERROR_NO_COMPARE_NO_DATA": "Vos consommations pour cette période sont incomplètes à cause d’un problème technique concernant :" }, "FAQ": { "TITLE_FAQ": "Foire aux questions", diff --git a/src/styles/components/_indicators.scss b/src/styles/components/_indicators.scss index d824b6301ae8a654a8834b6fa3b7d1b267b7ec3e..9a7f344e62c1b5e6fca483056762a1a1290799ac 100644 --- a/src/styles/components/_indicators.scss +++ b/src/styles/components/_indicators.scss @@ -80,6 +80,10 @@ &:first-child() { margin-bottom: 0.75rem; } + .fluid-enum { + font-weight: bold; + margin-left: 1rem; + } .icon-line { display: flex; align-items: center; @@ -164,3 +168,4 @@ justify-content: center; align-items: center; } + diff --git a/test/AAAAAF-gMKM1MDdhZWM5Nzk2OTQ3ZTUyN2RmMjNkYTk4YjAwOTQyOOlLByKqEpQO5ILG097miDWOPxgXVnPRr01p73w_YOv9 b/test/AAAAAF-gMKM1MDdhZWM5Nzk2OTQ3ZTUyN2RmMjNkYTk4YjAwOTQyOOlLByKqEpQO5ILG097miDWOPxgXVnPRr01p73w_YOv9 new file mode 100644 index 0000000000000000000000000000000000000000..9cd299e2380845561bbc65e879fdefe20594864f --- /dev/null +++ b/test/AAAAAF-gMKM1MDdhZWM5Nzk2OTQ3ZTUyN2RmMjNkYTk4YjAwOTQyOOlLByKqEpQO5ILG097miDWOPxgXVnPRr01p73w_YOv9 @@ -0,0 +1 @@ +{"token":"eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhY2Nlc3MiLCJpYXQiOjE2MDQzOTY5NTIsImlzcyI6ImNvenkudG9vbHM6ODA4MCIsInN1YiI6ImE1NmM4MGZjZjlmYWRiZTg1NDIzZTQ0OGZjMDBiYjEyIiwic2NvcGUiOiJjb20uZ3JhbmRseW9uLmVuZWRpcy5kYXk6QUxMIGNvbS5ncmFuZGx5b24uZW5lZGlzLm1vbnRoOkFMTCBjb20uZ3JhbmRseW9uLmVuZWRpcy55ZWFyOkFMTCBjb20uZ3JhbmRseW9uLmdyZGYuZGF5OkFMTCBjb20uZ3JhbmRseW9uLmdyZGYubW9udGg6QUxMIGNvbS5ncmFuZGx5b24uZ3JkZi55ZWFyOkFMTCBjb20uZ3JhbmRseW9uLmVnbC5kYXk6QUxMIGNvbS5ncmFuZGx5b24uZWdsLm1vbnRoOkFMTCBjb20uZ3JhbmRseW9uLmVnbC55ZWFyOkFMTCBpby5jb3p5Lm9hdXRoLmNsaWVudHM6QUxMIn0.LaF_wM5SJ01Sfj3OkTgETtP2uLKH_YX_M-pMKw-gtiQTEKG004xmeB7SpQVkxYXtuMT47Icgp9Zebmuk9lVydQ"} \ No newline at end of file