From b1cd6123c9289d184fbf2697ce1208d40fa3c7b8 Mon Sep 17 00:00:00 2001
From: Etienne LOUPIAS <eloupias@grandlyon.com>
Date: Mon, 3 Oct 2022 13:34:37 +0000
Subject: [PATCH] feat(analysis): improve average consumption
---
src/assets/icons/ico/chevron-down.svg | 2 +-
src/assets/icons/ico/chevron-up.svg | 2 +-
.../Analysis/AnalysisConsumption.spec.tsx | 157 ++----------------
.../Analysis/AnalysisConsumption.tsx | 96 ++++++-----
.../Analysis/AnalysisConsumptionRow.spec.tsx | 32 ----
.../Analysis/AnalysisConsumptionRow.tsx | 31 +---
.../Analysis/analysisConsumption.scss | 100 ++---------
.../Analysis/analysisConsumptionRow.scss | 15 +-
.../Konnector/KonnectorViewerCard.tsx | 4 +-
src/components/Options/ProfileTypeOptions.tsx | 4 +-
.../__snapshots__/exportOptions.spec.tsx.snap | 7 +-
src/components/Options/exportOptions.tsx | 4 +-
src/locales/fr.json | 3 +-
src/styles/index.scss | 6 +-
14 files changed, 116 insertions(+), 347 deletions(-)
diff --git a/src/assets/icons/ico/chevron-down.svg b/src/assets/icons/ico/chevron-down.svg
index 24377e7c5..12b11fa40 100644
--- a/src/assets/icons/ico/chevron-down.svg
+++ b/src/assets/icons/ico/chevron-down.svg
@@ -1,3 +1,3 @@
<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.5 0L7 5L11.5 0L14 0L7 8L0 0L2.5 0Z" fill="white"/>
+<path d="M2.5 0L7 5L11.5 0L14 0L7 8L0 0L2.5 0Z" fill="currentColor"/>
</svg>
diff --git a/src/assets/icons/ico/chevron-up.svg b/src/assets/icons/ico/chevron-up.svg
index 1bcc77f4b..281bb1a04 100644
--- a/src/assets/icons/ico/chevron-up.svg
+++ b/src/assets/icons/ico/chevron-up.svg
@@ -1,3 +1,3 @@
<svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.5 8.87979L7 3.89345L2.5 8.87979L9.53674e-07 8.87979L7 0.901652L14 8.87979L11.5 8.87979Z" fill="white"/>
+<path d="M11.5 8.87979L7 3.89345L2.5 8.87979L9.53674e-07 8.87979L7 0.901652L14 8.87979L11.5 8.87979Z" fill="currentColor"/>
</svg>
diff --git a/src/components/Analysis/AnalysisConsumption.spec.tsx b/src/components/Analysis/AnalysisConsumption.spec.tsx
index fb9eea498..a080095b3 100644
--- a/src/components/Analysis/AnalysisConsumption.spec.tsx
+++ b/src/components/Analysis/AnalysisConsumption.spec.tsx
@@ -7,7 +7,6 @@ import { profileData } from '../../../tests/__mocks__/profile.mock'
import AnalysisConsumption from 'components/Analysis/AnalysisConsumption'
import { act } from 'react-dom/test-utils'
import Button from '@material-ui/core/Button'
-import StyledCard from 'components/CommonKit/Card/StyledCard'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import {
mockMonthlyForecastJanuaryTestProfile1,
@@ -16,6 +15,7 @@ import {
import { FluidType } from 'enum/fluid.enum'
import { PerformanceIndicator } from 'models'
import { DateTime } from 'luxon'
+import { Accordion } from '@material-ui/core'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -108,7 +108,7 @@ describe('AnalysisConsumption component', () => {
await new Promise(resolve => setTimeout(resolve))
wrapper.update()
})
- expect(wrapper.find(StyledCard).exists()).toBeTruthy()
+ expect(wrapper.find(Accordion).exists()).toBeTruthy()
expect(wrapper.find('#analysisconsumptionrow').length).toBe(4)
})
@@ -171,11 +171,11 @@ describe('AnalysisConsumption component', () => {
await new Promise(resolve => setTimeout(resolve))
wrapper.update()
})
- expect(wrapper.find(StyledCard).exists()).toBeTruthy()
+ expect(wrapper.find(Accordion).exists()).toBeTruthy()
expect(wrapper.find('#analysisconsumptionrow').length).toBe(4)
})
- it('should be rendered correctly without fluid and when click on ideal home button', async () => {
+ it('should be rendered correctly without fluid', async () => {
const store = mockStore({
ecolyo: {
profile: modifiedProfile,
@@ -198,49 +198,12 @@ describe('AnalysisConsumption component', () => {
await new Promise(resolve => setTimeout(resolve))
wrapper.update()
})
- wrapper.find('.link-ideal').first().simulate('click')
expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('ideal')
+ wrapper.find('#analysisconsumptionrow').first().parent().prop('fluid')
+ ).toBe(FluidType.MULTIFLUID)
})
- it('should be rendered correctly without fluid and when click on average home button', async () => {
- const store = mockStore({
- ecolyo: {
- profile: modifiedProfile,
- global: globalStateData,
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- wrapper.find('.link-average').first().simulate('click')
- expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('average')
- })
-
- it('should be rendered correctly with all fluids connected for ideal', async () => {
+ it('should be rendered correctly with all fluids connected', async () => {
const updateGlobalState = { ...globalStateData }
updateGlobalState.fluidTypes = [
FluidType.ELECTRICITY,
@@ -273,103 +236,12 @@ describe('AnalysisConsumption component', () => {
expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
profileData.monthlyAnalysisDate.month - 1
)
- wrapper.find('.link-ideal').first().simulate('click')
- expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('ideal')
- })
-
- it('should be rendered correctly with all fluids connected for average', async () => {
- const updateGlobalState = { ...globalStateData }
- updateGlobalState.fluidTypes = [
- FluidType.ELECTRICITY,
- FluidType.WATER,
- FluidType.GAS,
- ]
- const store = mockStore({
- ecolyo: {
- profile: modifiedProfile,
- profileType: profileTypeData,
- global: updateGlobalState,
- },
- })
- mockgetMonthlyForecast.mockReturnValue(
- mockMonthlyForecastJanuaryTestProfile1
- )
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
- profileData.monthlyAnalysisDate.month - 1
- )
- wrapper.find('.link-average').first().simulate('click')
- expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('average')
- })
-
- it('should be rendered correctly with 2 fluids connected for ideal', async () => {
- const updateGlobalState = { ...globalStateData }
- updateGlobalState.fluidTypes = [FluidType.ELECTRICITY, FluidType.WATER]
- const store = mockStore({
- ecolyo: {
- profile: modifiedProfile,
- profileType: profileTypeData,
- global: updateGlobalState,
- },
- })
- mockgetMonthlyForecast.mockReturnValue(
- mockMonthlyForecastJanuaryTestProfile1
- )
- const wrapper = mount(
- <Provider store={store}>
- <AnalysisConsumption
- aggregatedPerformanceIndicator={performanceIndicator}
- performanceIndicators={performanceIndicators}
- analysisDate={DateTime.fromISO('2021-07-01T00:00:00.000Z', {
- zone: 'utc',
- })}
- />
- </Provider>
- )
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
- profileData.monthlyAnalysisDate.month - 1
- )
- wrapper.find('.link-ideal').first().simulate('click')
expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('ideal')
+ wrapper.find('#analysisconsumptionrow').first().parent().prop('fluid')
+ ).toBe(FluidType.MULTIFLUID)
})
- it('should be rendered correctly with 2 fluids connected for average', async () => {
+ it('should be rendered correctly with 2 fluids connected', async () => {
const updateGlobalState = { ...globalStateData }
updateGlobalState.fluidTypes = [FluidType.ELECTRICITY, FluidType.WATER]
const store = mockStore({
@@ -399,14 +271,9 @@ describe('AnalysisConsumption component', () => {
expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
profileData.monthlyAnalysisDate.month - 1
)
- wrapper.find('.link-average').first().simulate('click')
expect(
- wrapper
- .find('#analysisconsumptionrow')
- .first()
- .parent()
- .prop('toggleHome')
- ).toBe('average')
+ wrapper.find('#analysisconsumptionrow').first().parent().prop('fluid')
+ ).toBe(FluidType.MULTIFLUID)
})
it('should redirect to profileType form when click on mui button', async () => {
diff --git a/src/components/Analysis/AnalysisConsumption.tsx b/src/components/Analysis/AnalysisConsumption.tsx
index 622af99b6..653cfa3bd 100644
--- a/src/components/Analysis/AnalysisConsumption.tsx
+++ b/src/components/Analysis/AnalysisConsumption.tsx
@@ -11,15 +11,20 @@ import './analysisConsumption.scss'
import Button from '@material-ui/core/Button'
import AnalysisConsumptionRow from 'components/Analysis/AnalysisConsumptionRow'
import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import ProfileTypeService from 'services/profileType.service'
import { Client, useClient } from 'cozy-client'
import { DateTime } from 'luxon'
import ProfileTypeEntityService from 'services/profileTypeEntity.service'
+import {
+ Accordion,
+ AccordionDetails,
+ AccordionSummary,
+} from '@material-ui/core'
import PlaceHolderIcon from 'assets/icons/visu/analysis/no-profile-placeholder.svg'
import ProfileEditIcon from 'assets/icons/ico/profile-edit.svg'
import AnalysisIcon from 'assets/icons/visu/analysis/analysis.svg'
+import chevronDown from 'assets/icons/ico/chevron-down.svg'
interface AnalysisConsumptionProps {
aggregatedPerformanceIndicator: PerformanceIndicator
@@ -42,9 +47,24 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
const { fluidTypes } = useSelector((state: AppStore) => state.ecolyo.global)
const [homePriceConsumption, setHomePriceConsumption] = useState<number>(0)
const [forecast, setForecast] = useState<MonthlyForecast | null>(null)
- const [toggleHome, setToggleHome] = useState<string>('average')
const [isLoading, setisLoading] = useState<boolean>(true)
+ const [activeAverageHome, setActiveAverageHome] = useState<boolean>(false)
+ const toggleAccordion = () => {
+ setActiveAverageHome(prev => !prev)
+ if (!activeAverageHome) {
+ setTimeout(() => {
+ const content = document.querySelector('.consumption-electricity')
+ if (content) {
+ content.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start',
+ })
+ }
+ }, 300)
+ }
+ }
+
// Disconnected + empty fluids to show in AnalysisConsumptionRow
const disconnectedFluidTypes: FluidType[] = [
FluidType.ELECTRICITY,
@@ -75,12 +95,6 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
},
[fluidTypes]
)
- const toggleAverage = () => {
- setToggleHome('average')
- }
- const toggleIdeal = () => {
- setToggleHome('ideal')
- }
const goToForm = () => {
history.push('/profileType')
@@ -181,9 +195,7 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
<>
<div className="consumption-title text-20-bold">
<div className="user-title">{t('analysis.user_consumption')}</div>
- <div className={`${toggleHome}-title`}>
- {t(`analysis.comparison`)}
- </div>
+ <div className={`average-title`}>{t(`analysis.comparison`)}</div>
</div>
<div className="consumption-price">
{fluidTypes.length > 0 ? (
@@ -193,7 +205,6 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
- toggleHome={toggleHome}
connected={true}
noData={false}
/>
@@ -204,7 +215,6 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
- toggleHome={toggleHome}
connected={false}
noData={false}
/>
@@ -220,7 +230,6 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
homePriceConsumption={homePriceConsumption}
performanceValue={performanceIndicators[fluid].value}
forecast={forecast}
- toggleHome={toggleHome}
connected={true}
noData={false}
/>
@@ -235,7 +244,6 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
- toggleHome={toggleHome}
connected={false}
noData={false}
/>
@@ -248,34 +256,48 @@ const AnalysisConsumption: React.FC<AnalysisConsumptionProps> = ({
homePriceConsumption={homePriceConsumption}
performanceValue={null}
forecast={forecast}
- toggleHome={toggleHome}
connected={false}
noData={true}
/>
))}
- <StyledCard
- onClick={toggleAverage}
- className={`link-average ${
- toggleHome === 'average' && 'active'
- } grid-align`}
+ <Accordion
+ expanded={activeAverageHome}
+ onChange={toggleAccordion}
+ classes={{
+ root: 'expansion-panel-root',
+ }}
>
- <span className="check-icon"></span>
- <span className="link-label text-16-normal">
- {t('analysis.average_home')}
- </span>
- </StyledCard>
- <StyledCard
- onClick={toggleIdeal}
- className={`link-ideal ${
- toggleHome === 'ideal' && 'active'
- } grid-align`}
- >
- <span className="check-icon"></span>
- <span className="link-label text-16-normal">
- {t('analysis.ideal_home')}
- </span>
- </StyledCard>
+ <AccordionSummary
+ aria-label={t(
+ 'profile_type.accessibility.button_toggle_average_home'
+ )}
+ expandIcon={
+ <Icon
+ icon={chevronDown}
+ size={16}
+ className="accordion-icon"
+ />
+ }
+ classes={{
+ root: 'expansion-panel-summary',
+ content: 'expansion-panel-content',
+ }}
+ >
+ <div className="accordion-title accordion-title">
+ {t('analysis.average_home')}
+ </div>
+ </AccordionSummary>
+ <AccordionDetails
+ classes={{
+ root: 'expansion-panel-details',
+ }}
+ >
+ <span className="accordion-desc text-16-normal">
+ {t('analysis.average_home_description')}
+ </span>
+ </AccordionDetails>
+ </Accordion>
</>
)}
</div>
diff --git a/src/components/Analysis/AnalysisConsumptionRow.spec.tsx b/src/components/Analysis/AnalysisConsumptionRow.spec.tsx
index 866717ba5..2deb45ac4 100644
--- a/src/components/Analysis/AnalysisConsumptionRow.spec.tsx
+++ b/src/components/Analysis/AnalysisConsumptionRow.spec.tsx
@@ -20,7 +20,6 @@ describe('AnalysisConsumptionRow component', () => {
const homePriceConsumption = 18
const performanceValue: number | null = 25
const forecast: MonthlyForecast = mockMonthlyForecastJanuaryTestProfile1
- const toggleHome = 'average'
const connected = true
const noData = false
@@ -33,7 +32,6 @@ describe('AnalysisConsumptionRow component', () => {
homePriceConsumption={homePriceConsumption}
performanceValue={mockPerformanceValue}
forecast={forecast}
- toggleHome={toggleHome}
connected={connected}
noData={noData}
/>
@@ -55,7 +53,6 @@ describe('AnalysisConsumptionRow component', () => {
homePriceConsumption={homePriceConsumption}
performanceValue={mockPerformanceValue}
forecast={forecast}
- toggleHome={toggleHome}
connected={mockConnected}
noData={noData}
/>
@@ -75,7 +72,6 @@ describe('AnalysisConsumptionRow component', () => {
homePriceConsumption={homePriceConsumption}
performanceValue={performanceValue}
forecast={forecast}
- toggleHome={toggleHome}
connected={connected}
noData={noData}
/>
@@ -91,31 +87,6 @@ describe('AnalysisConsumptionRow component', () => {
expect(wrapper.find('.not-connected').exists()).toBeFalsy()
})
- it('should be rendered correctly for singleFluid connected for ideal', async () => {
- const mockToggleHome = 'ideal'
- const wrapper = mount(
- <AnalysisConsumptionRow
- fluid={FluidType.ELECTRICITY}
- userPriceConsumption={userPriceConsumption}
- homePriceConsumption={homePriceConsumption}
- performanceValue={performanceValue}
- forecast={forecast}
- toggleHome={mockToggleHome}
- connected={connected}
- noData={noData}
- />
- )
- expect(wrapper.find('.consumption-electricity').exists()).toBeTruthy()
- expect(wrapper.find('.price').first().text()).toBe(
- '25 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.price').last().text()).toBe(
- '3906 FLUID.ELECTRICITY.UNIT'
- )
- expect(wrapper.find('.graph').exists()).toBeTruthy()
- expect(wrapper.find('.not-connected').exists()).toBeFalsy()
- })
-
it('should be rendered correctly for singleFluid not connected', async () => {
const mockConnected = false
const wrapper = mount(
@@ -125,7 +96,6 @@ describe('AnalysisConsumptionRow component', () => {
homePriceConsumption={homePriceConsumption}
performanceValue={performanceValue}
forecast={forecast}
- toggleHome={toggleHome}
connected={mockConnected}
noData={noData}
/>
@@ -148,7 +118,6 @@ describe('AnalysisConsumptionRow component', () => {
homePriceConsumption={homePriceConsumption}
performanceValue={mockPerformanceValue}
forecast={forecast}
- toggleHome={toggleHome}
connected={connected}
noData={noData}
/>
@@ -183,7 +152,6 @@ describe('AnalysisConsumptionRow component', () => {
homePriceConsumption={homePriceConsumption}
performanceValue={performanceValue}
forecast={mockforecast}
- toggleHome={toggleHome}
connected={connected}
noData={noData}
/>
diff --git a/src/components/Analysis/AnalysisConsumptionRow.tsx b/src/components/Analysis/AnalysisConsumptionRow.tsx
index e3830ee19..c4a3fbeb8 100644
--- a/src/components/Analysis/AnalysisConsumptionRow.tsx
+++ b/src/components/Analysis/AnalysisConsumptionRow.tsx
@@ -16,7 +16,6 @@ interface AnalysisConsumptionRowProps {
homePriceConsumption: number
performanceValue: number | null
forecast: MonthlyForecast | null
- toggleHome: string
connected: boolean
noData: boolean
}
@@ -27,21 +26,15 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
homePriceConsumption,
performanceValue,
forecast,
- toggleHome,
connected,
noData,
}: AnalysisConsumptionRowProps) => {
const { t } = useI18n()
const converterService: ConverterService = new ConverterService()
- const idealCoefficient = 0.1
const maxPriceConsumption: number = Math.max(
userPriceConsumption,
homePriceConsumption
)
- const forecastPriceConsumption: number =
- toggleHome === 'ideal'
- ? homePriceConsumption - homePriceConsumption * idealCoefficient
- : homePriceConsumption
const fluidLoad: number =
forecast && fluid !== FluidType.MULTIFLUID
? forecast.fluidForecast[fluid].load
@@ -73,24 +66,19 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
const formatFluidConsumptionForForecast = (_fluid: FluidType) => {
if (_fluid === FluidType.MULTIFLUID) {
- return `${formatNumberValues(forecastPriceConsumption).toString()} €`
+ return `${formatNumberValues(homePriceConsumption).toString()} €`
} else {
- let _fluidLoad: number = fluidLoad
- if (toggleHome === 'ideal') {
- _fluidLoad = fluidLoad - fluidLoad * idealCoefficient
- }
// keeps unit in kWh for electricity and gas
if (_fluid === FluidType.ELECTRICITY || _fluid === FluidType.GAS) {
- return `${Math.round(_fluidLoad)} ${t(
+ return `${Math.round(fluidLoad)} ${t(
`FLUID.${FluidType[_fluid]}.UNIT`
)}`
}
- return (performanceValue && performanceValue >= 1000) ||
- _fluidLoad >= 1000
- ? formatNumberValues(_fluidLoad / 1000).toString() +
+ return (performanceValue && performanceValue >= 1000) || fluidLoad >= 1000
+ ? formatNumberValues(fluidLoad / 1000).toString() +
' ' +
t(`FLUID.${FluidType[_fluid]}.MEGAUNIT`)
- : Math.round(_fluidLoad) + ' ' + t(`FLUID.${FluidType[_fluid]}.UNIT`)
+ : Math.round(fluidLoad) + ' ' + t(`FLUID.${FluidType[_fluid]}.UNIT`)
}
}
@@ -108,14 +96,11 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
const getWidthForForecast = (_fluid: FluidType) => {
if (_fluid === FluidType.MULTIFLUID) {
- return `${(forecastPriceConsumption / maxPriceConsumption) * 100}%`
+ return `${(homePriceConsumption / maxPriceConsumption) * 100}%`
} else {
- let fluidValue: number = forecast
+ const fluidValue: number = forecast
? forecast.fluidForecast[_fluid].value
: 0
- if (toggleHome === 'ideal') {
- fluidValue = fluidValue - fluidValue * idealCoefficient
- }
return `${(fluidValue / maxPriceConsumption) * 100}%`
}
}
@@ -154,7 +139,7 @@ const AnalysisConsumptionRow: React.FC<AnalysisConsumptionRowProps> = ({
size={22}
/>
</div>
- <div className={`${toggleHome}-graph`}>
+ <div className="average-graph">
<div className="container-graph">
{connected && (
<div
diff --git a/src/components/Analysis/analysisConsumption.scss b/src/components/Analysis/analysisConsumption.scss
index ffd6593c0..b0861c520 100644
--- a/src/components/Analysis/analysisConsumption.scss
+++ b/src/components/Analysis/analysisConsumption.scss
@@ -7,104 +7,31 @@
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
+ gap: 2rem;
.user-title,
- .average-title,
- .ideal-title {
+ .average-title {
flex-basis: 50%;
}
.user-title {
text-align: right;
- padding-right: 5%;
color: $multi-color;
}
- .average-title,
- .ideal-title {
- padding-left: 5%;
- }
.average-title {
color: $blue-grey;
}
- .ideal-title {
- color: $green-light;
- }
}
- .link-average,
- .link-ideal {
- .check-icon {
- display: inline-block;
- background: $dark-light-2;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- vertical-align: middle;
- margin-right: 1rem;
- position: relative;
- &::before,
- &:after {
- content: '';
- display: none;
- background-color: $blue-grey;
- position: absolute;
- border-radius: 0.5rem;
- }
- &::before {
- top: 11px;
- left: 3px;
- width: 7px;
- height: 3px;
- transform: rotate(46deg);
- }
- &::after {
- top: 9px;
- left: 6px;
- width: 13px;
- height: 3px;
- transform: rotate(-45deg);
- }
- }
- .link-label {
- display: inline-block;
- vertical-align: middle;
- font-weight: bold;
- line-height: 100%;
- }
- &.active {
- .link-label {
- color: $dark-light-2;
- }
- .check-icon {
- &::before,
- &:after {
- display: inline-block;
- }
- }
- }
+ div.expansion-panel-root {
+ border: solid 2px $blue-grey;
+ color: $blue-grey;
}
- .link-average {
- margin-top: 2rem;
- &.active {
- background: $blue-grey;
- .link-label {
- color: $dark-light-2;
- }
- }
- .check-icon {
- &::before,
- &:after {
- background-color: $blue-grey;
- }
- }
+ .accordion-title {
+ font-weight: bold;
}
- .link-ideal {
- &.active {
- background: $green-light;
- }
- .check-icon {
- &::before,
- &:after {
- background-color: $green-light;
- }
- }
+ .accordion-desc {
+ color: $grey-bright;
+ }
+ div.expansion-panel-summary {
+ padding: 0px 16px;
}
.loader-container {
min-height: 350px;
@@ -113,6 +40,9 @@
align-items: center;
margin: auto;
}
+ .accordion-icon {
+ color: $blue-grey;
+ }
}
.no-profile {
display: flex;
diff --git a/src/components/Analysis/analysisConsumptionRow.scss b/src/components/Analysis/analysisConsumptionRow.scss
index 2079dd10b..5d0171f1f 100644
--- a/src/components/Analysis/analysisConsumptionRow.scss
+++ b/src/components/Analysis/analysisConsumptionRow.scss
@@ -33,26 +33,13 @@
background-color: $blue-grey;
}
}
- .ideal-graph {
- color: $green-light;
- .price {
- text-align: right;
- &.not-connected {
- opacity: 0.55;
- }
- }
- .graph {
- background-color: $green-light;
- }
- }
}
.consumption-sep {
border-top: 1px solid $grey-dark;
margin: 1rem 0;
}
.user-graph,
-.average-graph,
-.ideal-graph {
+.average-graph {
display: flex;
justify-content: space-between;
flex-basis: 45%;
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 73b94b504..73473e27e 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -501,7 +501,9 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
fluidStatus.fluidType
].toLowerCase()}`
)}
- expandIcon={<Icon icon={chevronDown} size={16} />}
+ expandIcon={
+ <Icon icon={chevronDown} size={16} className="accordion-icon" />
+ }
classes={{
root: 'expansion-panel-summary',
content: 'expansion-panel-content',
diff --git a/src/components/Options/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions.tsx
index 3959c2c12..580b086d3 100644
--- a/src/components/Options/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions.tsx
@@ -63,7 +63,9 @@ const ProfileTypeOptions: React.FC = () => {
aria-label={t(
'profile_type.accessibility.button_toggle_detail_profile'
)}
- expandIcon={<Icon icon={chevronDown} size={16} />}
+ expandIcon={
+ <Icon icon={chevronDown} size={16} className="accordion-icon" />
+ }
classes={{
root: 'expansion-panel-summary',
content: 'expansion-panel-content',
diff --git a/src/components/Options/__snapshots__/exportOptions.spec.tsx.snap b/src/components/Options/__snapshots__/exportOptions.spec.tsx.snap
index eef4c6b13..aa4c35791 100644
--- a/src/components/Options/__snapshots__/exportOptions.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/exportOptions.spec.tsx.snap
@@ -82,6 +82,7 @@ exports[`exportOptions component should be rendered correctly 1`] = `
}
expandIcon={
<Icon
+ className="accordion-icon"
icon="test-file-stub"
size={16}
spin={false}
@@ -104,6 +105,7 @@ exports[`exportOptions component should be rendered correctly 1`] = `
}
expandIcon={
<Icon
+ className="accordion-icon"
icon="test-file-stub"
size={16}
spin={false}
@@ -270,18 +272,19 @@ exports[`exportOptions component should be rendered correctly 1`] = `
className="MuiIconButton-label"
>
<Icon
+ className="accordion-icon"
icon="test-file-stub"
size={16}
spin={false}
>
<Component
- className="styles__icon___23x3R"
+ className="accordion-icon styles__icon___23x3R"
height={16}
style={Object {}}
width={16}
>
<svg
- className="styles__icon___23x3R"
+ className="accordion-icon styles__icon___23x3R"
height={16}
style={Object {}}
width={16}
diff --git a/src/components/Options/exportOptions.tsx b/src/components/Options/exportOptions.tsx
index 77daa3627..1c4936eb6 100644
--- a/src/components/Options/exportOptions.tsx
+++ b/src/components/Options/exportOptions.tsx
@@ -125,7 +125,9 @@ const ExportOptions: React.FC = () => {
>
<AccordionSummary
aria-label={t('profile_type.accessibility.button_toggle_export')}
- expandIcon={<Icon icon={chevronDown} size={16} />}
+ expandIcon={
+ <Icon icon={chevronDown} size={16} className="accordion-icon" />
+ }
classes={{
root: 'expansion-panel-summary',
content: 'expansion-panel-content',
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 31547f031..d345c4781 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -80,7 +80,7 @@
"challenge": "Défis terminés en",
"user_consumption": "Votre conso",
"average_home": "Conso moyenne d'un profil similaire",
- "ideal_home": "Conso idéale pour votre profil",
+ "average_home_description": "Le comparatif ici présenté est calculé sur la base d'un profil similaire au vôtre. Il s'agit d'un calcul et non d'une comparaison avec les autres utilisateurs de l'application. Sont pris en compte l'ensemble des informations entrées dans votre profil\u00a0: mode de chauffage, âge du logement et éventuels travaux de rénovation, etc. Ce modèle a été créé avec l'Agence Locale de l'Energie sur la base de chiffres issues du Schéma Directeur des Energies de la Métropole de Lyon et de Chiffres-clé publiés par l'ADEME (l'Agence de l'Environnement et de la Maîtrise de l'Energie).",
"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",
@@ -1154,6 +1154,7 @@
"button_update_profile": "Ouvrir la page de mise à jour du profil",
"button_toggle_detail_profile": "Afficher ou masquer le détail du profil",
"button_toggle_export": "Afficher ou masquer l'export des données'",
+ "button_toggle_average_home": "Afficher ou masquer les informations sur le comparatif'",
"button_validate": "Valider"
}
},
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 19cdba906..8a59dff68 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -63,6 +63,6 @@
background-color: $default-background;
}
-// .app-content {
-// background-color: $default-background;
-// }
+.accordion-icon {
+ color: $white;
+}
--
GitLab