Commit 6ae25723 authored by Hugo NOUTS's avatar Hugo NOUTS
Browse files

Merge branch 'feat/US666-analysis-infos-ko' into 'dev'

feat(US666-Analysis): Inform user when analysis cannot be processed

See merge request web-et-numerique/llle_project/ecolyo!539
parents a3143e2a f001b4d2
......@@ -42,12 +42,19 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
const [toggleHome, setToggleHome] = useState<string>('average')
const [isLoading, setisLoading] = useState<boolean>(true)
// Disconnected + empty fluids to show in AnalysisConsumptionRow
const disconnectedFluidTypes: FluidType[] = [
FluidType.ELECTRICITY,
FluidType.WATER,
FluidType.GAS,
].filter(fluidType => !fluidTypes.includes(fluidType))
const emptyFluidTypes: FluidType[] = []
for (let i = 0; i < performanceIndicators.length; i++) {
if (!performanceIndicators[i].value) {
emptyFluidTypes.push(fluidTypes[i])
}
}
const getTotalValueWithConnectedFluids = useCallback(
(monthlyForecast: MonthlyForecast) => {
if (fluidTypes.length === 3) {
......@@ -152,6 +159,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
forecast={forecast}
toggleHome={toggleHome}
connected={true}
noData={false}
/>
) : (
<AnalysisConsumptionRow
......@@ -162,25 +170,44 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
forecast={forecast}
toggleHome={toggleHome}
connected={false}
noData={false}
/>
)}
</div>
{fluidTypes.map((fluid, index) => {
return (
performanceIndicators[fluid].value && (
<AnalysisConsumptionRow
key={index}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={performanceIndicators[fluid].value}
forecast={forecast}
toggleHome={toggleHome}
connected={true}
noData={false}
/>
)
)
})}
{fluidTypes.length < 3 && <hr className="consumption-sep" />}
{disconnectedFluidTypes.map((fluid, index) => {
return (
<AnalysisConsumptionRow
key={index}
fluid={fluid}
userPriceConsumption={userPriceConsumption}
homePriceConsumption={homePriceConsumption}
performanceValue={performanceIndicators[fluid].value}
performanceValue={null}
forecast={forecast}
toggleHome={toggleHome}
connected={true}
connected={false}
noData={false}
/>
)
})}
{fluidTypes.length < 3 && <hr className="consumption-sep" />}
{disconnectedFluidTypes.map((fluid, index) => {
{emptyFluidTypes.map((fluid, index) => {
return (
<AnalysisConsumptionRow
key={index}
......@@ -191,9 +218,11 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
forecast={forecast}
toggleHome={toggleHome}
connected={false}
noData={true}
/>
)
})}
<StyledCard
onClick={toggleAverage}
className={`link-average ${toggleHome === 'average' &&
......
......@@ -22,6 +22,7 @@ describe('AnalysisConsumptionRow component', () => {
const forecast: MonthlyForecast = mockMonthlyForecastJanuaryTestProfile1
const toggleHome = 'average'
const connected = true
const noData = false
it('should be rendered correctly for Multifluid and at least fluid connected', async () => {
const mockPerformanceValue: number | null = null
......@@ -34,6 +35,7 @@ describe('AnalysisConsumptionRow component', () => {
forecast={forecast}
toggleHome={toggleHome}
connected={connected}
noData={noData}
/>
)
expect(wrapper.find('.consumption-multifluid').exists()).toBeTruthy()
......@@ -65,6 +67,7 @@ describe('AnalysisConsumptionRow component', () => {
forecast={forecast}
toggleHome={toggleHome}
connected={mockConnected}
noData={noData}
/>
)
expect(wrapper.find('.consumption-multifluid').exists()).toBeTruthy()
......@@ -94,6 +97,7 @@ describe('AnalysisConsumptionRow component', () => {
forecast={forecast}
toggleHome={toggleHome}
connected={connected}
noData={noData}
/>
)
expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
......@@ -124,6 +128,7 @@ describe('AnalysisConsumptionRow component', () => {
forecast={forecast}
toggleHome={mockToggleHome}
connected={connected}
noData={noData}
/>
)
expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
......@@ -154,6 +159,7 @@ describe('AnalysisConsumptionRow component', () => {
forecast={forecast}
toggleHome={toggleHome}
connected={mockConnected}
noData={noData}
/>
)
expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
......@@ -184,6 +190,7 @@ describe('AnalysisConsumptionRow component', () => {
forecast={forecast}
toggleHome={toggleHome}
connected={connected}
noData={noData}
/>
)
expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
......@@ -226,6 +233,7 @@ describe('AnalysisConsumptionRow component', () => {
forecast={mockforecast}
toggleHome={toggleHome}
connected={connected}
noData={noData}
/>
)
expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
......
......@@ -18,6 +18,7 @@ interface AnalysisConsumptionRowProps {
forecast: MonthlyForecast | null
toggleHome: string
connected: boolean
noData: boolean
}
const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
......@@ -28,6 +29,7 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
forecast,
toggleHome,
connected,
noData,
}: AnalysisConsumptionRowProps) => {
const { t } = useI18n()
const converterService: ConverterService = new ConverterService()
......@@ -110,11 +112,13 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
<div className="user-graph">
<div
className={classNames('price', 'text-15-bold', {
['not-connected']: !connected,
['not-connected']: !connected || noData,
})}
>
{connected
? formatFluidConsumptionForConso(fluid)
: noData
? t(`analysis.no_data_2`)
: t(`analysis.not_connected`)}
</div>
<div className="container-graph">
......
......@@ -46,6 +46,7 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
const [performanceIndicators, setPerformanceIndicators] = useState<
PerformanceIndicator[]
>([])
const [loadAnalysis, setLoadAnalysis] = useState<boolean>(false)
const [
aggregatedPerformanceIndicators,
setAggregatedPerformanceIndicators,
......@@ -89,6 +90,13 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
if (subscribed) {
if (fetchedPerformanceIndicators) {
setPerformanceIndicators(fetchedPerformanceIndicators)
setLoadAnalysis(false)
for (let i = 0; i < fetchedPerformanceIndicators.length; i++) {
if (fetchedPerformanceIndicators[i].value) {
setLoadAnalysis(true)
}
}
setAggregatedPerformanceIndicators(
performanceIndicatorService.aggregatePerformanceIndicators(
fetchedPerformanceIndicators
......@@ -137,58 +145,65 @@ const MonthlyAnalysis: React.FC<MonthlyAnalysisProps> = ({
})}
</div>
</div>
<div className="analysis-content">
<div className="card rich-card">
<TotalAnalysisChart
analysisDate={analysisDate}
fluidTypes={fluidTypes}
/>
</div>
</div>
<div className="analysis-content">
<div className="card rich-card">
<MaxConsumptionCard analysisDate={analysisDate} />
</div>
</div>
<div className="analysis-content">
<div className="card rich-card">
<div className="status-header">
<div>
<StyledIcon icon={AnalysisIcon} size={44} />
<p className="text-16-normal">
{t('analysis.compare.title')}
</p>
{loadAnalysis && (
<>
<div className="analysis-content">
<div className="card rich-card">
<TotalAnalysisChart
analysisDate={analysisDate}
fluidTypes={fluidTypes}
/>
</div>
{isProfileTypeCompleted && (
<Button
aria-label={t(
'analysis.accessibility.button_go_to_profil'
)}
onClick={goToForm}
classes={{
root: 'btn-secondary-negative',
label: 'text-16-normal',
}}
>
<StyledIcon icon={ProfileEditIcon} size={40} />
</Button>
)}
</div>
<AnalysisConsumption
aggregatedPerformanceIndicator={
aggregatedPerformanceIndicators
}
performanceIndicators={performanceIndicators}
analysisDate={analysisDate}
/>
</div>
</div>
{fluidTypes.includes(FluidType.ELECTRICITY) && (
<div className="analysis-content">
<div className="card">
<ElecHalfHourMonthlyAnalysis analysisDate={analysisDate} />
<div className="analysis-content">
<div className="card rich-card">
<MaxConsumptionCard analysisDate={analysisDate} />
</div>
</div>
</div>
<div className="analysis-content">
<div className="card rich-card">
<div className="status-header">
<div>
<StyledIcon icon={AnalysisIcon} size={44} />
<p className="text-16-normal">
{t('analysis.compare.title')}
</p>
</div>
{isProfileTypeCompleted && (
<Button
aria-label={t(
'analysis.accessibility.button_go_to_profil'
)}
onClick={goToForm}
classes={{
root: 'btn-secondary-negative',
label: 'text-16-normal',
}}
>
<StyledIcon icon={ProfileEditIcon} size={40} />
</Button>
)}
</div>
<AnalysisConsumption
aggregatedPerformanceIndicator={
aggregatedPerformanceIndicators
}
performanceIndicators={performanceIndicators}
analysisDate={analysisDate}
/>
</div>
</div>
{fluidTypes.includes(FluidType.ELECTRICITY) && (
<div className="analysis-content">
<div className="card">
<ElecHalfHourMonthlyAnalysis
analysisDate={analysisDate}
/>
</div>
</div>
)}
</>
)}
</>
) : (
......
......@@ -22,11 +22,10 @@ const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
}: FluidPerformanceIndicatorProps) => {
const { t } = useI18n()
const iconType = getPicto(fluidType)
let displayedValue: string
if (performanceIndicator && performanceIndicator.value)
let displayedValue = '----'
if (performanceIndicator && performanceIndicator.value) {
displayedValue = formatNumberValues(performanceIndicator.value).toString()
else displayedValue = '-----'
}
return (
<div className="card">
<div className="fpi">
......@@ -38,40 +37,52 @@ const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
size={50}
/>
<div className="fpi-content-perf">
<div className="fpi-content-perf-result card-result">
<span>{displayedValue}</span>
<span className="card-indicator">
{t('FLUID.' + FluidType[fluidType] + '.UNIT')}
</span>
<span className={`euro-value month`}>
<span
className={`${
performanceIndicator &&
performanceIndicator.percentageVariation &&
performanceIndicator.percentageVariation > 0
? 'negative'
: 'positive'
}`}
>
{performanceIndicator &&
performanceIndicator.percentageVariation ? (
performanceIndicator.percentageVariation > 0 ? (
`-${formatNumberValues(
performanceIndicator.percentageVariation * 100
)} %`
{!performanceIndicator.value ? (
<div className="fpi-content-perf-no-data card-result">
<span>{t('performance_indicator.fpi.no_data')}</span>
</div>
) : (
<div className="fpi-content-perf-result card-result">
<span>{displayedValue}</span>
<span className="card-indicator">
{t('FLUID.' + FluidType[fluidType] + '.UNIT')}
</span>
<span className={`euro-value month`}>
{/* condition pas de comparaison possible */}
<span
className={`${
performanceIndicator &&
performanceIndicator.percentageVariation &&
performanceIndicator.percentageVariation > 0
? 'negative'
: 'positive'
}`}
>
{performanceIndicator &&
performanceIndicator.percentageVariation ? (
performanceIndicator.percentageVariation > 0 ? (
`-${formatNumberValues(
performanceIndicator.percentageVariation * 100
)} %`
) : (
`+${formatNumberValues(
Math.abs(performanceIndicator.percentageVariation) *
100
)} %`
)
) : (
`+${formatNumberValues(
Math.abs(performanceIndicator.percentageVariation) *
100
)} %`
)
) : (
<></>
)}
<>
<span className="no-comparison">
{t('performance_indicator.fpi.no_comparison')}
</span>
</>
)}
</span>
{performanceIndicator.percentageVariation &&
`/ ${getPreviousMonthName(date.minus({ month: 1 }))}`}
</span>
{`/ ${getPreviousMonthName(date.minus({ month: 1 }))}`}
</span>
</div>
</div>
)}
</div>
</div>
</div>
......
......@@ -136,6 +136,19 @@
.WATER-color {
color: $water-color;
}
.no-comparison {
color: $soft-grey;
}
}
.fpi-content-perf-no-data {
color: $grey-bright;
& span {
display: inline-block;
padding-right: 0.25rem;
font-size: 1.1rem;
display: block;
font-weight: 400;
}
}
}
}
......
......@@ -80,6 +80,7 @@
"ideal_home": "Conso idéale pour votre profil",
"approximative_description": "Pour comparer votre consommation avec un foyer similaire ou avec une conso idéale, veuillez détailler votre profil",
"not_connected": "Non connecté",
"no_data_2": "Données non disponibles",
"accessibility": {
"button_go_to_profil": "Aller à la page de profil"
},
......@@ -885,7 +886,11 @@
},
"error_no_compare": "comparaison impossible",
"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 :"
"error_no_compare_no_data": "Vos consommations pour cette période sont incomplètes à cause d’un problème technique concernant :",
"fpi": {
"no_data": "Données non disponibles",
"no_comparison": "Pas de comparaison possible"
}
},
"profile": {
"report": {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment