diff --git a/src/assets/icons/ico/graph-icon.svg b/src/assets/icons/ico/graph-icon.svg
deleted file mode 100644
index d392bc746e368594be464b33654e4f1ca23c02ae..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/graph-icon.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 29C0 26.7909 1.79086 25 4 25H6.75556C8.96469 25 10.7556 26.7909 10.7556 29V44H0V29Z" fill="#FFF1C5"/>
-<path d="M0 29C0 26.7909 1.79086 25 4 25H6.75556C8.96469 25 10.7556 26.7909 10.7556 29V44H0V29Z" fill="#261C14" fill-opacity="0.65"/>
-<path d="M16.6221 4C16.6221 1.79086 18.4129 0 20.6221 0H23.3776C25.5868 0 27.3776 1.79086 27.3776 4V44H16.6221V4Z" fill="#E3B82A"/>
-<path d="M33.2446 17C33.2446 14.7909 35.0355 13 37.2446 13H40.0002C42.2093 13 44.0002 14.7909 44.0002 17V44H33.2446V17Z" fill="#FFF1C5"/>
-<path d="M33.2446 17C33.2446 14.7909 35.0355 13 37.2446 13H40.0002C42.2093 13 44.0002 14.7909 44.0002 17V44H33.2446V17Z" fill="#261C14" fill-opacity="0.65"/>
-</svg>
diff --git a/src/assets/icons/ico/profile-edit.svg b/src/assets/icons/ico/profile-edit.svg
deleted file mode 100644
index cf363b03d39c821d56d6bb4bb820c14f09c992a7..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/profile-edit.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="21.5" cy="16.5" r="5.5" fill="white"/>
-<path d="M11 29C11 25.4735 12.6077 22.4852 16 22C17.3163 23.1296 19.5 24 21.5 24C25 24 25.5 23 27 22C30.3923 22.4852 32 25.4735 32 29V30C32 30 28 31 21.5 31C15 31 11 30 11 30V29Z" fill="white"/>
-<mask id="path-4-outside-1" maskUnits="userSpaceOnUse" x="12.0213" y="13.5858" width="24.7487" height="24.7487" fill="black">
-<rect fill="white" x="12.0213" y="13.5858" width="24.7487" height="24.7487"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M31.1052 15.7151C31.5001 15.3202 32.216 15.3957 32.7042 15.8839L34.472 17.6517C34.9601 18.1398 35.0357 18.8557 34.6407 19.2506L32.5194 21.372L28.9839 17.8364L31.1052 15.7151ZM31.8123 22.0791L28.2768 18.5435L17.6701 29.1502L21.2057 32.6857L31.8123 22.0791ZM20.4986 33.3928L16.963 29.8573L16.6655 30.1548C16.5032 30.3172 16.4139 30.543 16.4125 30.7952L15.5573 34.1084C15.5553 34.4642 15.8916 34.8006 16.2475 34.7986L19.5607 33.9434C19.8128 33.9419 20.0387 33.8527 20.2011 33.6903L20.4986 33.3928Z"/>
-</mask>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M31.1052 15.7151C31.5001 15.3202 32.216 15.3957 32.7042 15.8839L34.472 17.6517C34.9601 18.1398 35.0357 18.8557 34.6407 19.2506L32.5194 21.372L28.9839 17.8364L31.1052 15.7151ZM31.8123 22.0791L28.2768 18.5435L17.6701 29.1502L21.2057 32.6857L31.8123 22.0791ZM20.4986 33.3928L16.963 29.8573L16.6655 30.1548C16.5032 30.3172 16.4139 30.543 16.4125 30.7952L15.5573 34.1084C15.5553 34.4642 15.8916 34.8006 16.2475 34.7986L19.5607 33.9434C19.8128 33.9419 20.0387 33.8527 20.2011 33.6903L20.4986 33.3928Z" fill="#E0E0E0"/>
-<path d="M31.1052 15.7151L31.8123 16.4222L31.1052 15.7151ZM34.6407 19.2506L33.9336 18.5435L34.6407 19.2506ZM32.5194 21.372L31.8123 22.0791L32.5194 22.7862L33.2265 22.0791L32.5194 21.372ZM28.9839 17.8364L28.2768 17.1293L27.5697 17.8364L28.2768 18.5435L28.9839 17.8364ZM28.2768 18.5435L28.9839 17.8364L28.2768 17.1293L27.5697 17.8364L28.2768 18.5435ZM31.8123 22.0791L32.5194 22.7862L33.2265 22.0791L32.5194 21.372L31.8123 22.0791ZM17.6701 29.1502L16.963 28.4431L16.2559 29.1502L16.963 29.8573L17.6701 29.1502ZM21.2057 32.6857L20.4986 33.3928L21.2057 34.0999L21.9128 33.3928L21.2057 32.6857ZM20.4986 33.3928L21.2057 34.0999L21.9128 33.3928L21.2057 32.6857L20.4986 33.3928ZM16.963 29.8573L17.6701 29.1502L16.963 28.4431L16.2559 29.1502L16.963 29.8573ZM16.4125 30.7952L17.3808 31.0451L17.4118 30.9249L17.4125 30.8008L16.4125 30.7952ZM15.5573 34.1084L14.589 33.8584L14.558 33.9786L14.5573 34.1027L15.5573 34.1084ZM16.2475 34.7986L16.2531 35.7985L16.3772 35.7978L16.4974 35.7668L16.2475 34.7986ZM19.5607 33.9434L19.555 32.9434L19.4309 32.9441L19.3107 32.9751L19.5607 33.9434ZM20.2011 33.6903L20.9082 34.3974L20.2011 33.6903ZM33.4113 15.1768C32.68 14.4454 31.3162 14.0899 30.3981 15.008L31.8123 16.4222C31.7597 16.4748 31.72 16.4581 31.7648 16.4628C31.812 16.4678 31.9043 16.4982 31.9971 16.591L33.4113 15.1768ZM35.1791 16.9445L33.4113 15.1768L31.9971 16.591L33.7649 18.3588L35.1791 16.9445ZM35.3478 19.9577C36.2659 19.0397 35.9104 17.6759 35.1791 16.9445L33.7649 18.3588C33.8576 18.4515 33.8881 18.5438 33.893 18.5911C33.8978 18.6358 33.8811 18.5961 33.9336 18.5435L35.3478 19.9577ZM33.2265 22.0791L35.3478 19.9577L33.9336 18.5435L31.8123 20.6648L33.2265 22.0791ZM28.2768 18.5435L31.8123 22.0791L33.2265 20.6648L29.691 17.1293L28.2768 18.5435ZM30.3981 15.008L28.2768 17.1293L29.691 18.5435L31.8123 16.4222L30.3981 15.008ZM27.5697 19.2507L31.1052 22.7862L32.5194 21.372L28.9839 17.8364L27.5697 19.2507ZM18.3773 29.8573L28.9839 19.2507L27.5697 17.8364L16.963 28.4431L18.3773 29.8573ZM16.963 29.8573L20.4986 33.3928L21.9128 31.9786L18.3773 28.4431L16.963 29.8573ZM31.1052 21.372L20.4986 31.9786L21.9128 33.3928L32.5194 22.7862L31.1052 21.372ZM21.2057 32.6857L17.6701 29.1502L16.2559 30.5644L19.7915 34.0999L21.2057 32.6857ZM17.3726 30.8619L17.6701 30.5644L16.2559 29.1502L15.9584 29.4477L17.3726 30.8619ZM17.4125 30.8008C17.4125 30.7911 17.4141 30.795 17.4087 30.8088C17.403 30.8231 17.3917 30.8428 17.3726 30.8619L15.9584 29.4477C15.5908 29.8153 15.4152 30.3025 15.4125 30.7896L17.4125 30.8008ZM16.5255 34.3583L17.3808 31.0451L15.4442 30.5453L14.589 33.8584L16.5255 34.3583ZM16.2419 33.7986C16.3784 33.7978 16.451 33.8563 16.4753 33.8805C16.4996 33.9048 16.558 33.9774 16.5573 34.114L14.5573 34.1027C14.5545 34.5952 14.7802 35.0139 15.0611 35.2948C15.342 35.5757 15.7607 35.8013 16.2531 35.7985L16.2419 33.7986ZM19.3107 32.9751L15.9975 33.8303L16.4974 35.7668L19.8106 34.9116L19.3107 32.9751ZM19.494 32.9832C19.513 32.9642 19.5327 32.9528 19.5471 32.9472C19.5608 32.9417 19.5648 32.9433 19.555 32.9434L19.5663 34.9433C20.0534 34.9406 20.5405 34.7651 20.9082 34.3974L19.494 32.9832ZM19.7915 32.6857L19.494 32.9832L20.9082 34.3974L21.2057 34.0999L19.7915 32.6857Z" fill="#121212" mask="url(#path-4-outside-1)"/>
-</svg>
-
diff --git a/src/assets/icons/visu/analysis/analysis.svg b/src/assets/icons/visu/analysis/analysis.svg
deleted file mode 100644
index d85c12958de754552f0e095a3de4c05c36850c3d..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/analysis/analysis.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="21" y="11.2078" width="3" height="26" fill="#E0E0E0"/>
-<rect x="21" y="11" width="2" height="26" fill="#A0A0A0"/>
-<path d="M8.5 14.2075L14 29.2075H3L8.5 14.2075Z" stroke="white" stroke-width="0.5"/>
-<rect x="8.25" y="14.2075" width="0.5" height="15" fill="white"/>
-<path d="M2 28.2075C2 29.8643 4.91019 31.2075 8.5 31.2075C12.0898 31.2075 15 29.8643 15 28.2075H2Z" fill="#E3B82A"/>
-<path d="M35.5 4.20752L41 19.2075H30L35.5 4.20752Z" stroke="white" stroke-width="0.5"/>
-<rect x="35.25" y="4.20752" width="0.5" height="15" fill="white"/>
-<path d="M29 18.2075C29 19.8643 31.9102 21.2075 35.5 21.2075C39.0898 21.2075 42 19.8643 42 18.2075H29Z" fill="#E3B82A"/>
-<rect x="7.73242" y="13.8973" width="30.1449" height="1" transform="rotate(-21.1928 7.73242 13.8973)" fill="#E3B82A"/>
-<rect x="20" y="6.20776" width="5" height="5" rx="1" fill="#E3B82A"/>
-<rect x="20" y="34" width="5" height="4" rx="1" fill="#E3B82A"/>
-<path d="M13 38C13 36.8954 13.8954 36 15 36H30C31.1046 36 32 36.8954 32 38V39H13V38Z" fill="#E3B82A"/>
-<path d="M11 39H34V41H11V39Z" fill="#E3B82A"/>
-</svg>
diff --git a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx
index 1c8b8f3414a79c8d798a69a2dca9598cb1fc9ea7..beeecf03170decb70956623e45fc097ad41a39b5 100644
--- a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx
+++ b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx
@@ -1,5 +1,4 @@
-import { act, render, screen, waitFor } from '@testing-library/react'
-import { userEvent } from '@testing-library/user-event'
+import { render, screen, waitFor } from '@testing-library/react'
import { FluidType } from 'enums'
import React from 'react'
import { Provider } from 'react-redux'
@@ -17,7 +16,7 @@ jest.mock('services/consumption.service', () => {
describe('MaxConsumptionCard component', () => {
const store = createMockEcolyoStore()
- it('should be rendered correctly', async () => {
+ it('should be rendered correctly with 2 buttons', async () => {
const { container } = render(
<Provider store={store}>
<MaxConsumptionCard
@@ -27,57 +26,7 @@ describe('MaxConsumptionCard component', () => {
)
await waitFor(() => null, { container })
expect(container).toMatchSnapshot()
- })
- it('should be rendered with one fluid and not display arrows', async () => {
- const { container } = render(
- <Provider store={store}>
- <MaxConsumptionCard fluidsWithData={[FluidType.ELECTRICITY]} />
- </Provider>
- )
- await waitFor(() => null, { container })
- expect(
- screen.getByLabelText('consumption.accessibility.button_previous_value')
- ).toBeDisabled()
- expect(
- screen.getByLabelText('consumption.accessibility.button_next_value')
- ).toBeDisabled()
- })
- it('should be rendered with several fluids and click navigate between fluid', async () => {
- const { container } = render(
- <Provider store={store}>
- <MaxConsumptionCard
- fluidsWithData={[FluidType.ELECTRICITY, FluidType.GAS]}
- />
- </Provider>
- )
- await waitFor(() => null, { container })
- const prevButton = screen.getByLabelText(
- 'consumption.accessibility.button_previous_value'
- )
- const nextButton = screen.getByLabelText(
- 'consumption.accessibility.button_next_value'
- )
-
- // navigate next
- await act(async () => {
- await userEvent.click(nextButton)
- })
- expect(screen.getByText('FLUID.GAS.LABEL')).toBeInTheDocument()
-
- await act(async () => {
- await userEvent.click(nextButton)
- })
- expect(screen.getByText('FLUID.ELECTRICITY.LABEL')).toBeInTheDocument()
-
- // navigate prev
- await act(async () => {
- await userEvent.click(prevButton)
- })
- expect(screen.getByText('FLUID.GAS.LABEL')).toBeInTheDocument()
-
- await act(async () => {
- await userEvent.click(prevButton)
- })
- expect(screen.getByText('FLUID.ELECTRICITY.LABEL')).toBeInTheDocument()
+ const fluidButtons = screen.getAllByRole('tab')
+ expect(fluidButtons).toHaveLength(2)
})
})
diff --git a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
index b0339c6d3ee7d56a81dde2cd5cb1ce2e0c3b8a02..ed1cd35fc50a944937b877002ad80482dbd4cb0e 100644
--- a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
+++ b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.tsx
@@ -1,9 +1,7 @@
-import GraphIcon from 'assets/icons/ico/graph-icon.svg'
-import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
-import RightArrowIcon from 'assets/icons/ico/right-arrow.svg'
+import { IconButton } from '@material-ui/core'
+import classNames from 'classnames'
import BarChart from 'components/Charts/BarChart'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import DataloadSection from 'components/ConsumptionVisualizer/DataloadSection'
import { useChartResize } from 'components/Hooks/useChartResize'
import Loader from 'components/Loader/Loader'
@@ -15,6 +13,7 @@ import React, { useEffect, useRef, useState } from 'react'
import ConsumptionDataManager from 'services/consumption.service'
import { setSelectedDate } from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
+import { getFluidIcon } from 'utils/picto'
import { getFluidName } from 'utils/utils'
import './maxConsumptionCard.scss'
@@ -37,18 +36,9 @@ const MaxConsumptionCard = ({
const containerRef = useRef<HTMLDivElement>(null)
const { height, width } = useChartResize(containerRef, isLoading, 250, 940)
- const fluidName = getFluidName(currentFluid || FluidType.ELECTRICITY)
-
- const handleFluidChange = (direction: number) => {
- if (currentFluid === undefined) return
+ const handleFluidChange = (fluidType: FluidType) => {
setIsLoading(true)
- let newIndex = fluidsWithData.indexOf(currentFluid) + direction
- if (newIndex >= fluidsWithData.length) {
- newIndex = 0
- } else if (newIndex < 0) {
- newIndex = fluidsWithData.length - 1
- }
- setCurrentFluid(fluidsWithData[newIndex])
+ setCurrentFluid(fluidType)
}
useEffect(() => {
@@ -84,7 +74,7 @@ const MaxConsumptionCard = ({
return () => {
subscribed = false
}
- }, [analysisMonth, client, fluidsWithData, currentFluid, dispatch])
+ }, [analysisMonth, client, currentFluid, dispatch])
const getMaxConsumptionDay = (dataload: Dataload[]) => {
let maxIndex = -1
@@ -99,38 +89,18 @@ const MaxConsumptionCard = ({
return dataload[maxIndex]
}
- const buttonPrev = () => (
- <StyledIconButton
- icon={LeftArrowIcon}
- sized={24}
- onClick={() => handleFluidChange(-1)}
- disabled={fluidsWithData.length <= 1}
- aria-label={t('consumption.accessibility.button_previous_value')}
- className="arrow-prev"
- />
- )
-
- const buttonNext = () => (
- <StyledIconButton
- icon={RightArrowIcon}
- sized={24}
- onClick={() => handleFluidChange(1)}
- disabled={fluidsWithData.length <= 1}
- aria-label={t('consumption.accessibility.button_next_value')}
- className="arrow-next"
- />
- )
-
return (
<div className="max-consumption-container" ref={containerRef}>
- <StyledIcon icon={GraphIcon} size={38} />
- <div className="text-16-normal title">{t('analysis.max_day')}</div>
- <div className="fluid-navigation">
- {buttonPrev()}
- <div className={`text-20-bold fluid ${fluidName}`}>
- {t(`FLUID.${fluidName.toUpperCase()}.LABEL`)}
- </div>
- {buttonNext()}
+ <div className="text-24-normal title">{t('analysis.max_day')}</div>
+ <div className="fluid-navigation" role="tablist">
+ {fluidsWithData.map(fluid => (
+ <FluidMaxButton
+ key={fluid}
+ fluidType={fluid}
+ handleClick={handleFluidChange}
+ isActive={currentFluid === fluid}
+ />
+ ))}
</div>
<div className="data-container">
@@ -176,4 +146,37 @@ const MaxConsumptionCard = ({
)
}
+const FluidMaxButton = ({
+ handleClick,
+ isActive,
+ fluidType,
+}: {
+ handleClick: (fluidType: FluidType) => void
+ isActive: boolean
+ fluidType: FluidType
+}) => {
+ const { t } = useI18n()
+ const fluidName = getFluidName(fluidType)
+ return (
+ <IconButton
+ role="tab"
+ className={classNames('fluidMaxButton', { active: isActive })}
+ onClick={() => handleClick(fluidType)}
+ >
+ <StyledIcon
+ icon={getFluidIcon(fluidType)}
+ size={fluidType === FluidType.MULTIFLUID ? 36 : 32}
+ />
+
+ <div
+ className={classNames('text-14-normal', {
+ active: isActive,
+ })}
+ >
+ {t(`FLUID.${fluidName.toLocaleUpperCase()}.LABEL`)}
+ </div>
+ </IconButton>
+ )
+}
+
export default MaxConsumptionCard
diff --git a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index 4839bb3492eca9e99483242c111061088c5a73d4..e5a5762412fe9b076810dce71dbda2e4fa2fd303 100644
--- a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -1,31 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
+exports[`MaxConsumptionCard component should be rendered correctly with 2 buttons 1`] = `
<div>
<div
class="max-consumption-container"
>
- <svg
- aria-hidden="true"
- class="styles__icon___23x3R"
- height="38"
- width="38"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
<div
- class="text-16-normal title"
+ class="text-24-normal title"
>
analysis.max_day
</div>
<div
class="fluid-navigation"
+ role="tablist"
>
<button
- aria-label="consumption.accessibility.button_previous_value"
- class="MuiButtonBase-root MuiIconButton-root arrow-prev"
+ class="MuiButtonBase-root MuiIconButton-root fluidMaxButton active"
+ role="tab"
tabindex="0"
type="button"
>
@@ -35,26 +26,26 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="styles__icon___23x3R"
- height="24"
- width="24"
+ height="32"
+ width="32"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
+ <div
+ class="text-14-normal active"
+ >
+ FLUID.ELECTRICITY.LABEL
+ </div>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
- <div
- class="text-20-bold fluid electricity"
- >
- FLUID.ELECTRICITY.LABEL
- </div>
<button
- aria-label="consumption.accessibility.button_next_value"
- class="MuiButtonBase-root MuiIconButton-root arrow-next"
+ class="MuiButtonBase-root MuiIconButton-root fluidMaxButton"
+ role="tab"
tabindex="0"
type="button"
>
@@ -64,13 +55,18 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="styles__icon___23x3R"
- height="24"
- width="24"
+ height="32"
+ width="32"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
+ <div
+ class="text-14-normal"
+ >
+ FLUID.GAS.LABEL
+ </div>
</span>
<span
class="MuiTouchRipple-root"
diff --git a/src/components/Analysis/MaxConsumptionCard/maxConsumptionCard.scss b/src/components/Analysis/MaxConsumptionCard/maxConsumptionCard.scss
index b6df1c622636a132aed514da63148843e0bd2bd4..8ffb59c46e66c02fcc81c91c3ca32c03d6ea3f6f 100644
--- a/src/components/Analysis/MaxConsumptionCard/maxConsumptionCard.scss
+++ b/src/components/Analysis/MaxConsumptionCard/maxConsumptionCard.scss
@@ -5,16 +5,13 @@
flex-direction: column;
align-items: center;
justify-content: center;
+ gap: 16px;
color: $white;
- .title {
- color: $grey-bright;
- margin: 1rem 0 0.7rem 0;
- text-align: center;
- }
.fluid-navigation {
display: flex;
- justify-content: space-between;
+ justify-content: space-around;
align-items: center;
+ max-width: 45.75rem;
width: 100%;
div {
font-weight: 900;
@@ -65,3 +62,19 @@
flex-direction: column;
align-items: center;
}
+
+.fluidMaxButton {
+ border-radius: 4px;
+ width: 80px;
+ &:hover,
+ &.active {
+ // V4TODO create variable
+ background: rgba(255, 255, 255, 0.1);
+ }
+
+ .MuiIconButton-label {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ }
+}
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
index 097182f98140b37fec2dbdff4832420a079efe12..43cd8707ff479790cd8a8bf26b93aa29fb841b24 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
@@ -5,8 +5,6 @@ import {
} from '@material-ui/core'
import Button from '@material-ui/core/Button'
import chevronDown from 'assets/icons/ico/chevron-down.svg'
-import ProfileEditIcon from 'assets/icons/ico/profile-edit.svg'
-import AnalysisIcon from 'assets/icons/visu/analysis/analysis.svg'
import PlaceHolderIcon from 'assets/icons/visu/analysis/no-profile-placeholder.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Loader from 'components/Loader/Loader'
@@ -235,27 +233,21 @@ const ProfileComparator = ({
)
return (
- <>
- <div className="status-header">
- <div>
- <StyledIcon icon={AnalysisIcon} size={44} />
- <p className="text-16-normal">{t('analysis.compare.title')}</p>
- </div>
- {profile.isProfileTypeCompleted && (
- <Button
- aria-label={t('analysis.accessibility.button_go_to_profil')}
- onClick={() => navigate('/profileType')}
- className="btnIcon"
- data-testid="iconGoToProfile"
- >
- <StyledIcon icon={ProfileEditIcon} size={40} />
- </Button>
- )}
- </div>
+ <div className="profileComparator">
+ <div className="text-24-normal title">{t('analysis.average')}</div>
{!profile.isProfileTypeCompleted && profileNotCompleted}
{profile.isProfileTypeCompleted && comparison}
- </>
+ {profile.isProfileTypeCompleted && (
+ <Button
+ onClick={() => navigate('/profileType')}
+ className="btnSecondary"
+ data-testid="iconGoToProfile"
+ >
+ {t('analysis.average_edit_profile')}
+ </Button>
+ )}
+ </div>
)
}
diff --git a/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap b/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap
index bf328e562fc59ee28024e3c48c951869eb4cbc26..3be0c787e86510aa75b46a1d31ae7098948e033e 100644
--- a/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap
+++ b/src/components/Analysis/ProfileComparator/__snapshots__/ProfileComparator.spec.tsx.snap
@@ -3,227 +3,193 @@
exports[`AnalysisConsumption component should be rendered correctly with profile NOT completed and go to profile button 1`] = `
<div>
<div
- class="status-header"
- >
- <div>
- <svg
- aria-hidden="true"
- class="styles__icon___23x3R"
- height="44"
- width="44"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <p
- class="text-16-normal"
- >
- analysis.compare.title
- </p>
- </div>
- </div>
- <div
- class="no-profile"
+ class="profileComparator"
>
<div
- class="text-16-normal"
+ class="text-24-normal title"
>
- analysis.approximative_description
+ analysis.average
</div>
- <button
- class="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
- data-testid="goToProfile"
- tabindex="0"
- type="button"
+ <div
+ class="no-profile"
>
- <span
- class="MuiButton-label text-18-bold"
+ <div
+ class="text-16-normal"
>
- analysis.accessibility.button_go_to_profil
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <svg
- aria-hidden="true"
- class="styles__icon___23x3R"
- height="150"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </div>
-</div>
-`;
-
-exports[`AnalysisConsumption component should be rendered correctly with profile completed and go to profile edition on click 1`] = `
-<div>
- <div
- class="status-header"
- >
- <div>
+ analysis.approximative_description
+ </div>
+ <button
+ class="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
+ data-testid="goToProfile"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-18-bold"
+ >
+ analysis.accessibility.button_go_to_profil
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
<svg
aria-hidden="true"
class="styles__icon___23x3R"
- height="44"
- width="44"
+ height="150"
+ width="16"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
- <p
- class="text-16-normal"
- >
- analysis.compare.title
- </p>
</div>
- <button
- aria-label="analysis.accessibility.button_go_to_profil"
- class="MuiButtonBase-root MuiButton-root MuiButton-text btnIcon"
- data-testid="iconGoToProfile"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiButton-label"
- >
- <svg
- aria-hidden="true"
- class="styles__icon___23x3R"
- height="40"
- width="40"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
</div>
+</div>
+`;
+
+exports[`AnalysisConsumption component should be rendered correctly with profile completed and go to profile edition on click 1`] = `
+<div>
<div
- class="analysis-graph"
+ class="profileComparator"
>
<div
- class="consumption-title text-20-bold"
+ class="text-24-normal title"
>
- <div
- class="user-title"
- >
- analysis.user_consumption
- </div>
- <div
- class="average-title"
- >
- analysis.comparison
- </div>
+ analysis.average
</div>
- <mock-profilecomparatorrow
- connected="true"
- fluidtype="3"
- homepriceconsumption="0"
- nodata="false"
- userpriceconsumption="156.161853"
- />
- <mock-profilecomparatorrow
- connected="true"
- fluidtype="0"
- homepriceconsumption="0"
- nodata="false"
- performancevalue="178.54"
- userpriceconsumption="156.161853"
- />
- <mock-profilecomparatorrow
- connected="true"
- fluidtype="1"
- homepriceconsumption="0"
- nodata="false"
- performancevalue="7763.98"
- userpriceconsumption="156.161853"
- />
- <mock-profilecomparatorrow
- connected="true"
- fluidtype="2"
- homepriceconsumption="0"
- nodata="false"
- performancevalue="1317.67"
- userpriceconsumption="156.161853"
- />
<div
- class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+ class="analysis-graph"
>
<div
- aria-disabled="false"
- aria-expanded="false"
- aria-label="profile_type.accessibility.button_toggle_average_home"
- class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
- role="button"
- tabindex="0"
+ class="consumption-title text-20-bold"
>
<div
- class="MuiAccordionSummary-content expansion-panel-content"
+ class="user-title"
>
- <div
- class="accordion-title accordion-title"
- >
- analysis.average_home
- </div>
+ analysis.user_consumption
</div>
<div
- aria-disabled="false"
- aria-hidden="true"
- class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+ class="average-title"
>
- <span
- class="MuiIconButton-label"
- >
- <svg
- aria-hidden="true"
- class="accordion-icon styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
+ analysis.comparison
</div>
</div>
+ <mock-profilecomparatorrow
+ connected="true"
+ fluidtype="3"
+ homepriceconsumption="0"
+ nodata="false"
+ userpriceconsumption="156.161853"
+ />
+ <mock-profilecomparatorrow
+ connected="true"
+ fluidtype="0"
+ homepriceconsumption="0"
+ nodata="false"
+ performancevalue="178.54"
+ userpriceconsumption="156.161853"
+ />
+ <mock-profilecomparatorrow
+ connected="true"
+ fluidtype="1"
+ homepriceconsumption="0"
+ nodata="false"
+ performancevalue="7763.98"
+ userpriceconsumption="156.161853"
+ />
+ <mock-profilecomparatorrow
+ connected="true"
+ fluidtype="2"
+ homepriceconsumption="0"
+ nodata="false"
+ performancevalue="1317.67"
+ userpriceconsumption="156.161853"
+ />
<div
- class="MuiCollapse-root MuiCollapse-hidden"
- style="min-height: 0px;"
+ class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
>
<div
- class="MuiCollapse-wrapper"
+ aria-disabled="false"
+ aria-expanded="false"
+ aria-label="profile_type.accessibility.button_toggle_average_home"
+ class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
+ role="button"
+ tabindex="0"
>
<div
- class="MuiCollapse-wrapperInner"
+ class="MuiAccordionSummary-content expansion-panel-content"
>
<div
- role="region"
+ class="accordion-title accordion-title"
+ >
+ analysis.average_home
+ </div>
+ </div>
+ <div
+ aria-disabled="false"
+ aria-hidden="true"
+ class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="accordion-icon styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ </div>
+ </div>
+ <div
+ class="MuiCollapse-root MuiCollapse-hidden"
+ style="min-height: 0px;"
+ >
+ <div
+ class="MuiCollapse-wrapper"
+ >
+ <div
+ class="MuiCollapse-wrapperInner"
>
<div
- class="MuiAccordionDetails-root expansion-panel-details"
+ role="region"
>
- <span
- class="accordion-desc text-16-normal"
+ <div
+ class="MuiAccordionDetails-root expansion-panel-details"
>
- analysis.average_home_description
- </span>
+ <span
+ class="accordion-desc text-16-normal"
+ >
+ analysis.average_home_description
+ </span>
+ </div>
</div>
</div>
</div>
</div>
</div>
</div>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ data-testid="iconGoToProfile"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ analysis.average_edit_profile
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
</div>
`;
diff --git a/src/components/Analysis/ProfileComparator/profileComparator.scss b/src/components/Analysis/ProfileComparator/profileComparator.scss
index 3b5d0afcdcc8d31e2303fd22013925b4a4f2a7e9..ed788d9a7c2283422baca8e795fad0d00e4868b0 100644
--- a/src/components/Analysis/ProfileComparator/profileComparator.scss
+++ b/src/components/Analysis/ProfileComparator/profileComparator.scss
@@ -1,6 +1,12 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
+.profileComparator {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
.analysis-graph {
display: flex;
flex-direction: column;
diff --git a/src/components/Analysis/ProfileComparator/profileComparatorRow.scss b/src/components/Analysis/ProfileComparator/profileComparatorRow.scss
index d559f2f1e3708bdd187c5577908a76020f3e40e7..e8e475503adaf793714c1808ef3a452a24e08b5d 100644
--- a/src/components/Analysis/ProfileComparator/profileComparatorRow.scss
+++ b/src/components/Analysis/ProfileComparator/profileComparatorRow.scss
@@ -33,16 +33,12 @@
}
}
.average-graph {
- color: $blue-grey;
.price {
text-align: right;
&.not-connected {
opacity: 0.55;
}
}
- .graph {
- background-color: $blue-grey;
- }
}
}
@@ -60,6 +56,12 @@
background-color: $multi-color;
}
}
+ .average-graph {
+ color: #fff1c5;
+ .graph {
+ background-color: #fff1c5;
+ }
+ }
}
.consumption-electricity {
.user-graph {
@@ -68,6 +70,12 @@
background-color: $elec-color;
}
}
+ .average-graph {
+ color: #e2bca1;
+ .graph {
+ background-color: #e2bca1;
+ }
+ }
}
.consumption-water {
.user-graph {
@@ -76,6 +84,12 @@
background-color: $water-color;
}
}
+ .average-graph {
+ color: #abd4fa;
+ .graph {
+ background-color: #abd4fa;
+ }
+ }
}
.consumption-gas {
.user-graph {
@@ -84,6 +98,12 @@
background-color: $gas-color;
}
}
+ .average-graph {
+ color: #a8f6e9;
+ .graph {
+ background-color: #a8f6e9;
+ }
+ }
}
.container-graph {
diff --git a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
index 57367c21b3ccbb5bd9c70e4193d1205b9a4d0a1f..3c4192f521c1a34048dfbb8d121bb7d970636c62 100644
--- a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
+++ b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
@@ -28,7 +28,7 @@ const TotalAnalysisChart = ({
>(null)
const [totalLoadValue, setTotalLoadValue] = useState<number>(0)
const [openEstimationModal, setOpenEstimationModal] = useState<boolean>(false)
- const arcWidth = 30
+ const arcWidth = 20
const radius = Math.min(375, innerWidth - 100)
const outerRadius = radius / 2
const innerRadius = outerRadius - arcWidth
@@ -125,7 +125,7 @@ const TotalAnalysisChart = ({
>
{dataLoadValueDetailArray.map((dataload, index) => (
<div key={index} role="listitem" className="total-card">
- <div className="text-18-bold fluidconso">
+ <div className="text-20-bold fluidconso">
{dataload.value !== -1
? `${formatNumberValues(dataload.value)} €`
: '--- €'}
diff --git a/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap b/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap
index fa1ae890431cdfee5d4df73a942af9cdae1db911..ad0cf7f8c7eda902ea4e49b0909679618617bc04 100644
--- a/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap
+++ b/src/components/Analysis/TotalAnalysisChart/__snapshots__/TotalAnalysisChart.spec.tsx.snap
@@ -13,7 +13,7 @@ exports[`TotalAnalysisChart component should be rendered correctly 1`] = `
</div>
<mock-piechart
dataloadvaluedetailarray=""
- innerradius="157.5"
+ innerradius="167.5"
outerradius="187.5"
radius="375"
>
diff --git a/src/components/Analysis/TotalAnalysisChart/totalAnalysisChart.scss b/src/components/Analysis/TotalAnalysisChart/totalAnalysisChart.scss
index 7af8f1620cbcd0a5de0d99530f5504b009be1581..d85f5aa2fd678fd814f64445238a8af894db3a8a 100644
--- a/src/components/Analysis/TotalAnalysisChart/totalAnalysisChart.scss
+++ b/src/components/Analysis/TotalAnalysisChart/totalAnalysisChart.scss
@@ -6,15 +6,11 @@
display: flex;
justify-content: space-around;
flex-direction: column;
+ gap: 24px;
color: white;
- .title {
- text-align: center;
- color: $grey-bright;
- margin-bottom: 1.5rem;
- }
+
.no_data {
color: $grey-bright;
- margin-top: 1rem;
}
.pie-container {
text-align: center;
@@ -27,12 +23,8 @@
overflow: visible;
}
.pie-center {
- box-sizing: border-box;
position: absolute;
- border-radius: 50%;
- background: $dark-light-2;
z-index: $z-pieChart;
- padding: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
@@ -41,7 +33,7 @@
margin-left: 0.6rem;
}
.date {
- text-transform: uppercase;
+ text-transform: lowercase;
color: $soft-grey;
display: inline-block;
margin: 4px 0;
@@ -51,13 +43,8 @@
font-weight: 700;
}
.circle {
- box-sizing: border-box;
- border: 1px solid $grey-dark;
position: absolute;
- border-radius: 50%;
- background: transparent;
z-index: -1;
- padding: 1rem;
@media screen and (max-width: 345px) {
display: none;
}
@@ -66,7 +53,6 @@
.total-card-container {
display: flex;
justify-content: center;
- margin-top: 1rem;
.total-card {
margin: 1rem;
display: flex;
diff --git a/src/components/Analysis/monthlyanalysis.scss b/src/components/Analysis/monthlyanalysis.scss
index 2d7afc608946784ee4dd2714cb147b7a35c7fc74..46ffabeea32a78ecf69760eaac7d02d1eab980af 100644
--- a/src/components/Analysis/monthlyanalysis.scss
+++ b/src/components/Analysis/monthlyanalysis.scss
@@ -10,34 +10,10 @@
.analysis-content {
max-width: 45.75rem;
width: 100%;
- }
- .status-header {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
- grid-gap: 0.5rem;
- justify-content: end;
- color: $grey-bright !important;
- p {
+
+ .title {
+ text-align: center;
color: $grey-bright;
}
- div {
- align-items: center;
- display: flex;
- flex-direction: column;
- grid-column: 2;
- }
- button {
- grid-column: 3;
- display: flex;
- justify-self: end;
- }
- button.btnIcon {
- border: 1px solid $grey-bright;
- min-width: 40px;
- width: 40px;
- height: 40px;
- padding: 0;
- margin: 0;
- }
}
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 0f7f996b08f4b9569aedd55e9ff6eed6b6202c4d..1562fc797c6c961ee4de70a02c749ef904089a23 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -98,6 +98,8 @@
"analysis_date": "Conso totale",
"challenge": "Défis terminés en",
"user_consumption": "Votre conso",
+ "average": "Comparaison moyenne d’un jour de :",
+ "average_edit_profile": "Modifier mon profil",
"average_home": "Conso moyenne d'un profil similaire",
"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",
@@ -154,7 +156,7 @@
},
"special_elec": {
"title": "Spécial Électricité",
- "average": "Conso moyenne",
+ "average": "Conso moyenne d’un jour de :",
"weektype": "un jour de ",
"week": "semaine",
"weekend": "week-end",