diff --git a/src/assets/icons/ico/chevron-down.svg b/src/assets/icons/ico/chevron-down.svg
index 24377e7c56e222361a98518bf03d9ba0692acc82..12b11fa40f039ed7614740e37500334be4e3e628 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 1bcc77f4b6b3753ab28665c4266651cc7def33d3..281bb1a04c300c79582e62f85763eae90b16c50a 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 fb9eea498122754f72d2df482be6a41e06e0fc77..a080095b356ddd774283a9eb1347a0bed831e873 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 622af99b6b4ea4746430fad728a6080ea1fe4b9a..653cfa3bd617e5671dbec863f0890d98e2dfc927 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 866717ba5f698741665112769fdf6a01f0506f24..2deb45ac4ad4b3d3cee5ee7c0c71f6ebc5e3767d 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 e3830ee19ffd749cd38e36aa9123d00774f2a706..c4a3fbeb8ed1f7b4984448c3d98638767ecc13b0 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 ffd6593c0d8b512ce5929b90c9a2db1d7dd0f613..b0861c5208727edb719805ea27b5cc5af37f395d 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 2079dd10bcb6a4e410822290a0603ced17ab7d36..5d0171f1f6468965c2e8394e11f0548bbcc808a1 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 73b94b5049e94a4a388e09643b18dffdeac96ce1..73473e27e531c9bf0d63721fd4469fb31b939878 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 3959c2c124e6b67b3760b2b0611c10df36346dbe..580b086d3d4ef2e8b28ce910308958e3103ec688 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 eef4c6b133b447691229c8fad44c5d2d4d95784a..aa4c3579151d165dc4d3cd7204c80e86598c680c 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 77daa36271557f62eb7f4532564a9d835f338f94..1c4936eb676f26b07f42f8b7ca41ff6b78dcd65b 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 31547f031554ef1269cce5266eeb7c11607b4d8c..d345c478197c3660cf6fee6fa0546db5d5536fbd 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 19cdba9061ca1592c29f01985bb9e3d5538dd69e..8a59dff68acd362e56d2e14aed640426395ff42c 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;
+}