Skip to content
Snippets Groups Projects
Commit c8b7e41c authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

feat(ui): analysis

parent 4fb40cba
No related branches found
No related tags found
2 merge requests!1266feat(ui): analysis,!1263feat(ui)!: new design
Showing
with 285 additions and 409 deletions
<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>
<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>
<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>
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)
})
})
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
// 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"
......
......@@ -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;
}
}
......@@ -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>
)
}
......
......@@ -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>
`;
@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;
......
......@@ -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 {
......
......@@ -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)} €`
: '--- €'}
......
......@@ -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"
>
......
......@@ -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;
......
......@@ -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;
}
}
}
......@@ -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",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment