diff --git a/src/components/Analysis/MaxConsumptionCard.tsx b/src/components/Analysis/MaxConsumptionCard.tsx index b8d4680c921b56e7c545d20c2890a4a2930ed599..6693e85f715fcaa4420c71f1905f26019fbd5f43 100644 --- a/src/components/Analysis/MaxConsumptionCard.tsx +++ b/src/components/Analysis/MaxConsumptionCard.tsx @@ -33,7 +33,7 @@ const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({ const [index, setIndex] = useState<number>(0) const [maxDayData, setMaxDayData] = useState<Dataload | null>(null) - const [isLoading, setisLoading] = useState<boolean>(true) + const [isLoading, setisLoading] = useState<boolean>(false) const handleChangePrevFluid = useCallback(() => { setisLoading(true) @@ -56,6 +56,7 @@ const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({ useEffect(() => { let subscribed = true async function getMaxLoadData() { + setisLoading(true) const timePeriod: TimePeriod = { startDate: analysisDate.minus({ month: 1 }).startOf('month'), endDate: analysisDate.minus({ month: 1 }).endOf('month'), @@ -71,6 +72,8 @@ const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({ ) if (monthMaxData) { setMaxDayData(monthMaxData as Dataload) + } else { + setMaxDayData(null) } setisLoading(false) } @@ -113,43 +116,47 @@ const MaxConsumptionCard: React.FC<MaxConsumptionCardProps> = ({ )} </div> <div className="data-container"> - {maxDayData && !isLoading ? ( - <> - <div className="text-24-bold maxDay-date"> - {maxDayData.date.setLocale('fr').toFormat('cccc dd LLLL')} - </div> - <Icon - className="dataloadvisualizer-euro-fluid-icon" - icon={getNavPicto(fluidTypes[index], true, true)} - size={38} - /> - <div className="maxDay-load"> - {formatNumberValues( - maxDayData.value, - FluidType[fluidTypes[index]] - ) >= 1000 ? ( - <> - {formatNumberValues( - maxDayData.value, - FluidType[fluidTypes[index]] - )} + {!isLoading ? ( + maxDayData ? ( + <> + <div className="text-24-bold maxDay-date"> + {maxDayData.date.setLocale('fr').toFormat('cccc dd LLLL')} + </div> + <Icon + className="dataloadvisualizer-euro-fluid-icon" + icon={getNavPicto(fluidTypes[index], true, true)} + size={38} + /> + <div className="maxDay-load"> + {formatNumberValues( + maxDayData.value, + FluidType[fluidTypes[index]] + ) >= 1000 ? ( + <> + {formatNumberValues( + maxDayData.value, + FluidType[fluidTypes[index]] + )} - {` ${t( - 'FLUID.' + FluidType[fluidTypes[index]] + '.MEGAUNIT' - )}`} - </> - ) : ( - <> - {formatNumberValues( - maxDayData.value, - FluidType[fluidTypes[index]] - )} + {` ${t( + 'FLUID.' + FluidType[fluidTypes[index]] + '.MEGAUNIT' + )}`} + </> + ) : ( + <> + {formatNumberValues( + maxDayData.value, + FluidType[fluidTypes[index]] + )} - {` ${t('FLUID.' + FluidType[fluidTypes[index]] + '.UNIT')}`} - </> - )} - </div> - </> + {` ${t('FLUID.' + FluidType[fluidTypes[index]] + '.UNIT')}`} + </> + )} + </div> + </> + ) : ( + <p className={`text-20-bold no_data`}>{t('analysis.no_data')}</p> + ) ) : ( <StyledSpinner size="3em" fluidType={fluidTypes[index]} /> )} diff --git a/src/components/Analysis/TotalAnalysisChart.tsx b/src/components/Analysis/TotalAnalysisChart.tsx index ed33d3ab98d2a2f3835ca1799fde5710a62f978f..7b5c73ee1c7d9dceb7006d44eb2d0e67b87176c3 100644 --- a/src/components/Analysis/TotalAnalysisChart.tsx +++ b/src/components/Analysis/TotalAnalysisChart.tsx @@ -87,7 +87,7 @@ const TotalAnalysisChart: React.FC<TotalAnalysisChartProps> = ({ {dataLoadArray.map((load, index) => { return ( <div key={index} className="total-card"> - <div className="text-20-bold fluidconso"> + <div className="text-18-bold fluidconso"> {load !== -1 ? `${formatNumberValues(load)} €` : '--- €'} </div> <Icon diff --git a/src/components/Analysis/maxConsumptionCard.scss b/src/components/Analysis/maxConsumptionCard.scss index bea7bc4492a9fc8c8f8f7ab619bead0a23752ec2..ba3285043b5e174f33cc75bfa42f8069b8bd2419 100644 --- a/src/components/Analysis/maxConsumptionCard.scss +++ b/src/components/Analysis/maxConsumptionCard.scss @@ -29,6 +29,12 @@ .gas { color: $gas-color; } + .title { + text-align: center; + } + .no_data { + color: white; + } .data-container { min-height: 130px; display: flex; diff --git a/src/components/Analysis/totalAnalysisChart.scss b/src/components/Analysis/totalAnalysisChart.scss index 3b50a81abdbc978d18376d9679f9415e450a6f8b..85f18f5c0808f9d8405f7b298f580fff5050c694 100644 --- a/src/components/Analysis/totalAnalysisChart.scss +++ b/src/components/Analysis/totalAnalysisChart.scss @@ -59,7 +59,6 @@ } .total-card-container { display: flex; - margin: auto; justify-content: center; margin-top: 1rem; .total-card { @@ -68,6 +67,9 @@ flex-direction: column; justify-content: center; align-items: center; + @media screen and (max-width: 350px) { + margin: 0.5rem; + } svg { margin: 0.7rem 0; } @@ -83,8 +85,8 @@ font-size: 1rem; } } - .text-20-bold { - @media screen and (max-width: 345px) { + .text-18-bold { + @media screen and (max-width: 365px) { font-size: 1rem; } } diff --git a/src/locales/fr.json b/src/locales/fr.json index b2e27fb656609ab4cccb52e2c50995e591ba79d8..fc636f574f2d366384610710789a73c945976703 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -86,7 +86,8 @@ "max_day": "Jour où vous avez le plus consommé", "compare": { "title": "Comparateur" - } + }, + "no_data": "Pas de données" }, "analysis_error_modal": { "title": "Aucune analyse",