diff --git a/src/assets/icons/ico/pile.svg b/src/assets/icons/ico/pile.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1a398fdce675c429f39f37a01f8fcb555c940b7e
--- /dev/null
+++ b/src/assets/icons/ico/pile.svg
@@ -0,0 +1,83 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.78865 33.3019C3.32505 33.233 3 32.8332 3 32.3645L3 30.1667C3 29.6144 3.44772 29.1667 4 29.1667L31.1667 29.1667C31.719 29.1667 32.1667 29.6144 32.1667 30.1667L32.1667 32.3645C32.1667 32.8332 31.8416 33.233 31.378 33.3019C29.7904 33.5379 25.651 34.0001 17.5833 34.0001C9.51564 34.0001 5.37631 33.5379 3.78865 33.3019Z" fill="url(#paint0_linear)"/>
+<path d="M3 32.3645C3 32.8332 3.32505 33.2329 3.78865 33.3018C5.37631 33.5378 9.51564 34 17.5833 34C25.651 34 29.7904 33.5378 31.378 33.3018C31.8416 33.2329 32.1667 32.8332 32.1667 32.3645L32.1667 31.5311C32.1667 31.9998 31.8416 32.3996 31.378 32.4685C29.7904 32.7045 25.651 33.1666 17.5833 33.1666C9.51564 33.1666 5.37631 32.7045 3.78865 32.4685C3.32505 32.3996 3 31.9998 3 31.5311L3 32.3645Z" fill="#A95508"/>
+<path d="M3.83333 29.1666C3.3731 29.1666 3 28.7935 3 28.3333L32.1667 28.3333C32.1667 28.7935 31.7936 29.1666 31.3333 29.1666L3.83333 29.1666Z" fill="#A95508"/>
+<path d="M3 28.3333L3 25.1666C3 24.6144 3.44772 24.1666 4 24.1666L31.1667 24.1666C31.719 24.1666 32.1667 24.6144 32.1667 25.1666L32.1667 28.3333L3 28.3333Z" fill="url(#paint1_linear)"/>
+<path d="M3.83333 24.1666C3.37309 24.1666 3 23.7935 3 23.3333L32.1667 23.3333C32.1667 23.7935 31.7936 24.1666 31.3333 24.1666L3.83333 24.1666Z" fill="#A95508"/>
+<path d="M3 23.3333L3 20.1666C3 19.6144 3.44772 19.1666 4 19.1666L31.1667 19.1666C31.719 19.1666 32.1667 19.6144 32.1667 20.1666L32.1667 23.3333L3 23.3333Z" fill="url(#paint2_linear)"/>
+<path d="M3.83333 19.1666C3.3731 19.1666 3 18.7935 3 18.3333L32.1667 18.3333C32.1667 18.7935 31.7936 19.1666 31.3333 19.1666L3.83333 19.1666Z" fill="#A95508"/>
+<path d="M3 18.3333L3 15.1666C3 14.6144 3.44772 14.1666 4 14.1666L31.1667 14.1666C31.719 14.1666 32.1667 14.6144 32.1667 15.1666L32.1667 18.3333L3 18.3333Z" fill="url(#paint3_linear)"/>
+<path d="M3.83333 14.1667C3.3731 14.1667 3 13.7936 3 13.3334L32.1667 13.3334C32.1667 13.7936 31.7936 14.1667 31.3333 14.1667L3.83333 14.1667Z" fill="#A95508"/>
+<path d="M3 13.3334L3 10.1667C3 9.61442 3.44772 9.16671 4 9.16671L31.1667 9.16671C31.719 9.16671 32.1667 9.61442 32.1667 10.1667L32.1667 13.3334L3 13.3334Z" fill="url(#paint4_linear)"/>
+<path d="M3.875 9.16669C3.39175 9.16669 3 8.77494 3 8.29169L32.1667 8.29169C32.1667 8.77494 31.7749 9.16669 31.2917 9.16669L3.875 9.16669Z" fill="#A95508"/>
+<path d="M3 8.29169L3 4.04168C3 3.48939 3.44772 3.04168 4 3.04168L31.1667 3.04168C31.719 3.04168 32.1667 3.48939 32.1667 4.04168L32.1667 8.29169L3 8.29169Z" fill="url(#paint5_linear)"/>
+<path d="M32.1667 3.47919C32.1667 4.20406 23.4167 4.79169 17.5833 4.79169C11.75 4.79169 3 4.20406 3 3.47919C3 2.75431 9.52918 2.16669 17.5833 2.16669C25.6375 2.16669 32.1667 2.75431 32.1667 3.47919Z" fill="#FECA81"/>
+<defs>
+<linearGradient id="paint0_linear" x1="32.167" y1="31.2552" x2="3.00036" y2="31.2552" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2AA32"/>
+<stop offset="0.0677083" stop-color="#B3653D"/>
+<stop offset="0.1719" stop-color="#F8B116"/>
+<stop offset="0.3438" stop-color="#EBB12A"/>
+<stop offset="0.5417" stop-color="#9E5810"/>
+<stop offset="0.6771" stop-color="#E2AF0A"/>
+<stop offset="0.7969" stop-color="#FBE05B"/>
+<stop offset="0.8854" stop-color="#DC972D"/>
+<stop offset="1" stop-color="#EBC50B"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="32.167" y1="26.2552" x2="3.00036" y2="26.2552" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2AA32"/>
+<stop offset="0.0677083" stop-color="#B3653D"/>
+<stop offset="0.1719" stop-color="#F8B116"/>
+<stop offset="0.3438" stop-color="#EBB12A"/>
+<stop offset="0.5417" stop-color="#9E5810"/>
+<stop offset="0.6771" stop-color="#E2AF0A"/>
+<stop offset="0.7969" stop-color="#FBE05B"/>
+<stop offset="0.8854" stop-color="#DC972D"/>
+<stop offset="1" stop-color="#EBC50B"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="32.167" y1="21.2552" x2="3.00036" y2="21.2552" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2AA32"/>
+<stop offset="0.0677083" stop-color="#B3653D"/>
+<stop offset="0.1719" stop-color="#F8B116"/>
+<stop offset="0.3438" stop-color="#EBB12A"/>
+<stop offset="0.5417" stop-color="#9E5810"/>
+<stop offset="0.6771" stop-color="#E2AF0A"/>
+<stop offset="0.7969" stop-color="#FBE05B"/>
+<stop offset="0.8854" stop-color="#DC972D"/>
+<stop offset="1" stop-color="#EBC50B"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="32.167" y1="16.2552" x2="3.00036" y2="16.2552" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2AA32"/>
+<stop offset="0.0677083" stop-color="#B3653D"/>
+<stop offset="0.1719" stop-color="#F8B116"/>
+<stop offset="0.3438" stop-color="#EBB12A"/>
+<stop offset="0.5417" stop-color="#9E5810"/>
+<stop offset="0.6771" stop-color="#E2AF0A"/>
+<stop offset="0.7969" stop-color="#FBE05B"/>
+<stop offset="0.8854" stop-color="#DC972D"/>
+<stop offset="1" stop-color="#EBC50B"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="32.167" y1="11.2552" x2="3.00036" y2="11.2552" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2AA32"/>
+<stop offset="0.0677083" stop-color="#B3653D"/>
+<stop offset="0.1719" stop-color="#F8B116"/>
+<stop offset="0.3438" stop-color="#EBB12A"/>
+<stop offset="0.5417" stop-color="#9E5810"/>
+<stop offset="0.6771" stop-color="#E2AF0A"/>
+<stop offset="0.7969" stop-color="#FBE05B"/>
+<stop offset="0.8854" stop-color="#DC972D"/>
+<stop offset="1" stop-color="#EBC50B"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="32.167" y1="5.67322" x2="3.00036" y2="5.67322" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2AA32"/>
+<stop offset="0.0677083" stop-color="#B3653D"/>
+<stop offset="0.1719" stop-color="#F8B116"/>
+<stop offset="0.3438" stop-color="#EBB12A"/>
+<stop offset="0.5417" stop-color="#9E5810"/>
+<stop offset="0.6771" stop-color="#E2AF0A"/>
+<stop offset="0.7969" stop-color="#FBE05B"/>
+<stop offset="0.8854" stop-color="#DC972D"/>
+<stop offset="1" stop-color="#EBC50B"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/ContainerComponents/IndicatorsContainer/IndicatorContainerSwitcher.tsx b/src/components/ContainerComponents/IndicatorsContainer/IndicatorContainerSwitcher.tsx
index 3dbe4b0a97d2996563f29f166e1e9091545bb316..f7aade1de2114733bdf342173ba3c4eed10972bd 100644
--- a/src/components/ContainerComponents/IndicatorsContainer/IndicatorContainerSwitcher.tsx
+++ b/src/components/ContainerComponents/IndicatorsContainer/IndicatorContainerSwitcher.tsx
@@ -6,17 +6,20 @@ import ConfigService from 'services/fluidConfig.service'
import { convertDateByTimeStep } from 'utils/date'
import FluidPerformanceIndicator from 'components/ContentComponents/PerformanceIndicator/FluidPerformanceIndicator'
import KonnectorViewer from 'components/ContentComponents/KonnectorViewer/KonnectorViewer'
+import { translate } from 'cozy-ui/react/I18n'
interface IndicatorContainerSwitcherProps {
performanceIndicators: PerformanceIndicator[]
timeStep: TimeStep
- comparisonTimePeriod: TimePeriod | null
+ currentTimePeriod: TimePeriod | null
+ t: Function
}
const IndicatorContainerSwitcher: React.FC<IndicatorContainerSwitcherProps> = ({
performanceIndicators,
timeStep,
- comparisonTimePeriod,
+ currentTimePeriod,
+ t,
}: IndicatorContainerSwitcherProps) => {
const appContext = useContext(AppContext)
const allConfiguredFluidTypes = appContext.fluidTypes
@@ -24,16 +27,16 @@ const IndicatorContainerSwitcher: React.FC<IndicatorContainerSwitcherProps> = ({
return (
<div>
+ <span className="text-16-normal-uppercase details-title">
+ {t('INDICATOR.DETAIL')}
+ {convertDateByTimeStep(currentTimePeriod, timeStep, true)}
+ </span>
{fluidConfig.map((fluid, index) => {
return allConfiguredFluidTypes.includes(fluid.fluidTypeId) ? (
<FluidPerformanceIndicator
key={index}
fluidType={fluid.fluidTypeId}
performanceIndicator={performanceIndicators[fluid.fluidTypeId]}
- timePeriodText={convertDateByTimeStep(
- comparisonTimePeriod,
- timeStep
- )}
/>
) : null
})}
@@ -46,4 +49,4 @@ const IndicatorContainerSwitcher: React.FC<IndicatorContainerSwitcherProps> = ({
)
}
-export default IndicatorContainerSwitcher
+export default translate()(IndicatorContainerSwitcher)
diff --git a/src/components/ContainerComponents/IndicatorsContainer/MultiFluidIndicatorsContainer.tsx b/src/components/ContainerComponents/IndicatorsContainer/MultiFluidIndicatorsContainer.tsx
index 6aec0583cd100ad6cc01c06798ed944c1352ec5d..4fa38fcaae2d802d5479baa27c55303a047193d1 100644
--- a/src/components/ContainerComponents/IndicatorsContainer/MultiFluidIndicatorsContainer.tsx
+++ b/src/components/ContainerComponents/IndicatorsContainer/MultiFluidIndicatorsContainer.tsx
@@ -91,16 +91,12 @@ const MultiFluidIndicatorsContainer: React.FC<MultiFluidIndicatorsContainerProps
performanceIndicator={performanceIndicatorService.aggregatePerformanceIndicators(
performanceIndicators
)}
- timePeriodText={convertDateByTimeStep(
- comparisonTimePeriod,
- timeStep
- )}
timeStep={timeStep}
/>
<IndicatorContainerSwitcher
+ currentTimePeriod={currentTimePeriod}
performanceIndicators={performanceIndicators}
timeStep={timeStep}
- comparisonTimePeriod={comparisonTimePeriod}
/>
</div>
</div>
diff --git a/src/components/ContentComponents/PerformanceIndicator/FluidPerformanceIndicator.tsx b/src/components/ContentComponents/PerformanceIndicator/FluidPerformanceIndicator.tsx
index 915c82fe2c1ad7acaf22fe7f5a6eec7d36244fa0..196d2f3ef20d7e69b80b1c3b9f5fde609b5c6496 100644
--- a/src/components/ContentComponents/PerformanceIndicator/FluidPerformanceIndicator.tsx
+++ b/src/components/ContentComponents/PerformanceIndicator/FluidPerformanceIndicator.tsx
@@ -10,21 +10,21 @@ import { formatNumberValues } from 'utils/utils'
import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import BlackArrowIcon from 'assets/icons/ico/black-arrow.svg'
+import ConverterService from 'services/converter.service'
interface FluidPerformanceIndicatorProps {
performanceIndicator: PerformanceIndicator
- timePeriodText: string
fluidType: FluidType
t: Function
}
const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
performanceIndicator,
- timePeriodText,
fluidType,
t,
}: FluidPerformanceIndicatorProps) => {
const iconType = getPicto(fluidType)
+ const converterService = new ConverterService()
let displayedValue: string
if (performanceIndicator && performanceIndicator.value)
@@ -40,7 +40,6 @@ const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
perf =
100 * (performanceIndicator.value / performanceIndicator.compareValue - 1)
}
- const perfString = perf ? formatNumberValues(perf) : ''
let perfStatus = 'error'
if (perf === null) perfStatus = 'nodata'
@@ -73,25 +72,18 @@ const FluidPerformanceIndicator: React.FC<FluidPerformanceIndicatorProps> = ({
<span className="card-indicator">
{t('FLUID.' + FluidType[fluidType] + '.UNIT')}
</span>
+ <span
+ className={`${FluidType[fluidType] + '-color euro-value'}`}
+ >
+ {performanceIndicator.value &&
+ `${formatNumberValues(
+ converterService.LoadToEuro(
+ performanceIndicator.value,
+ fluidType
+ )
+ )} €`}
+ </span>
</div>
- {perfStatus === 'positive' ||
- perfStatus === 'negative' ||
- perfStatus === 'zero' ? (
- <div className="fpi-content-perf-indicator card-text">
- <span
- className={`fpi-content-perf-indicator-kpi ${perfStatus} card-text-bold`}
- >
- {perfStatus === 'positive' ? '+' : ''}
- {perfString}%
- </span>
- <span> / {timePeriodText}</span>
- </div>
- ) : (
- <div className="fpi-content-perf-indicator card-text">
- <div> {t('INDICATOR.ERROR_NO_COMPARE')} </div>
- <div> {t('INDICATOR.ERROR_NO_COMPARE_REASON')} </div>
- </div>
- )}
</div>
</div>
</div>
diff --git a/src/components/ContentComponents/PerformanceIndicator/PerformanceIndicatorContent.tsx b/src/components/ContentComponents/PerformanceIndicator/PerformanceIndicatorContent.tsx
index da149d1fd25d9dd55233c0dabc367b79cd6dc6ce..587cd8d2e931d879b433a26324f4dd64d89e7377 100644
--- a/src/components/ContentComponents/PerformanceIndicator/PerformanceIndicatorContent.tsx
+++ b/src/components/ContentComponents/PerformanceIndicator/PerformanceIndicatorContent.tsx
@@ -5,8 +5,8 @@ import { TimeStep } from 'enum/timeStep.enum'
import { PerformanceIndicator } from 'models'
import { formatNumberValues } from 'utils/utils'
-import StyledBorderCard from 'components/CommonKit/Card/StyledBorderCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import PileIcon from 'assets/icons/ico/pile.svg'
import GreenIndicatorIcon from 'assets/icons/visu/indicator/green.svg'
import RedIndicatorIcon from 'assets/icons/visu/indicator/red.svg'
@@ -17,14 +17,12 @@ import NodataIndicatorIcon from 'assets/icons/visu/indicator/nodata.svg'
interface PerformanceIndicatorContentProps {
t: Function
performanceIndicator: PerformanceIndicator
- timePeriodText: string
timeStep: TimeStep
}
const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> = ({
t,
performanceIndicator,
- timePeriodText,
timeStep,
}: PerformanceIndicatorContentProps) => {
let displayedValue: string
@@ -38,6 +36,7 @@ const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> =
}
let perf: number | null = null
+ let diffInEuro: number | null = null
if (
performanceIndicator &&
performanceIndicator.value &&
@@ -45,8 +44,10 @@ const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> =
) {
perf =
100 * (performanceIndicator.value / performanceIndicator.compareValue - 1)
+ diffInEuro = performanceIndicator.value - performanceIndicator.compareValue
}
const perfString = perf ? formatNumberValues(perf) : ''
+ const diffString = diffInEuro ? formatNumberValues(diffInEuro) : ''
let perfStatus = ['error', ErrorIndicatorIcon]
if (perf === null && !errorInPerf)
@@ -88,48 +89,73 @@ const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> =
}
return (
- <StyledBorderCard>
- <div className="fpi">
- <div className="fpi-left">
- <div className="fpi-title card-title-on">
- {t('COMMON.PERF_INDICATOR_LABEL')}{' '}
- {t(getRelevantFrequencyLabel(timeStep))}
- </div>
- <div className="fpi-content">
- <StyledIcon
- className="fpi-content-icon"
- icon={perfStatus[1]}
- size={50}
- />
- <div className="fpi-content-perf">
- <div className="fpi-content-perf-result card-result">
- <span>{displayedValue}</span>
- <span className="card-indicator">€</span>
+ <div className="fpi">
+ <div className="fpi-left">
+ <div className="fpi-content">
+ <div className="fpi-content-perf">
+ <div className="fpi-content-perf-result card-result">
+ <div className="icon-line">
+ <StyledIcon
+ className="fpi-content-icon perf-icon"
+ icon={PileIcon}
+ size={35}
+ />
+ <div>
+ <span className="euro-value">{displayedValue}</span>
+ <span className="card-indicator"> €</span>
+ </div>
</div>
- {perfStatus[0] === 'positive' ||
- perfStatus[0] === 'negative' ||
- perfStatus[0] === 'zero' ? (
- <div className="fpi-content-perf-indicator card-text">
- <span
- className={`fpi-content-perf-indicator-kpi ${perfStatus[0]} card-text-bold`}
- >
- {perfStatus[0] === 'positive' ? '+' : ''}
- {perfString}%
- </span>
- <span> / {timePeriodText}</span>
+ </div>
+ {perfStatus[0] === 'positive' ||
+ perfStatus[0] === 'negative' ||
+ perfStatus[0] === 'zero' ? (
+ <div className="fpi-content-perf-indicator bilan-card card-text">
+ <div className="icon-line">
+ <StyledIcon
+ className="fpi-content-icon perf-icon"
+ icon={perfStatus[1]}
+ size={35}
+ />
+ <div className="evolution-text">
+ {t('INDICATOR.BILAN.TEXT1')}
+ <span
+ className={`fpi-content-perf-indicator-kpi ${perfStatus[0]} card-text-bold`}
+ >
+ {perfStatus[0] === 'positive' ? ' + ' : ' '}
+ {perfString}%
+ </span>
+ <br />
+ <span>
+ {t('INDICATOR.BILAN.TEXT2')}
+ <span className="diff-value">{diffString} €</span>
+ <br />
+ {t(
+ 'INDICATOR.BILAN.' +
+ `${getRelevantFrequencyLabel(timeStep)}`
+ )}
+ </span>
+ </div>
</div>
- ) : (
- <div className="fpi-content-perf-indicator card-text">
+ </div>
+ ) : (
+ <div className="fpi-content-perf-indicator card-text error">
+ <StyledIcon
+ className="fpi-content-icon perf-icon"
+ icon={perfStatus[1]}
+ size={35}
+ />
+ <div>
+ {' '}
<div> {t('INDICATOR.ERROR_NO_COMPARE')} </div>
<div> {t('INDICATOR.ERROR_NO_COMPARE_REASON')} </div>
</div>
- )}
- </div>
+ </div>
+ )}
</div>
</div>
- <div className="fpi-right"></div>
</div>
- </StyledBorderCard>
+ <div className="fpi-right"></div>
+ </div>
)
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 7176f5e18d500e24df896d0d99e6044c98b51091..c9557f2c250dce680b3f95b7839b84384258bd50 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -23,14 +23,14 @@
"APP_ECO_GESTURE_TITLE": "Ecogestes",
"APP_PARAMETERS_TITLE": "Options",
"APP_HELLO": "Bonjour",
- "APP_PRESENTATION": "Votre consommation d'énergie",
+ "APP_PRESENTATION": "Consommation d'énergie",
"CONSO_DETAILS": "détail des consommations",
"NODATA": "Pas de données",
"LASTDATA": "Dernières données",
"LASTVALIDDATA": "Dernières données valides",
"DATATOCOME": "à venir",
"CHALLENGE_CARD_LABEL": "Defi",
- "CONSO_CARDS_LABEL": "Consommation",
+ "CONSO_CARDS_LABEL": "Bilan",
"PERF_INDICATOR_LABEL": "Bilan",
"DAILY_FRENQUENCY": "quotidien",
"WEEKLY_FRENQUENCY": "hebdo",
@@ -156,6 +156,17 @@
"OK": "Ok"
},
"INDICATOR": {
+ "DETAIL": "Détail",
+ "BILAN": {
+ "TEXT1": "Evolution de : ",
+ "TEXT2": "soit une différence de : ",
+ "COMMON": {
+ "DAILY_FRENQUENCY": "par rapport au jour précédent",
+ "WEEKLY_FRENQUENCY": "par rapport à la semaine précédente",
+ "MONTHLY_FRENQUENCY": "par rapport au mois précédent",
+ "YEARLY_FRENQUENCY": "par rapport à l'année précédente"
+ }
+ },
"DISPLAY_OTHER_FLUID": "Voir",
"ERROR_NO_COMPARE": "comparaison impossible",
"ERROR_NO_COMPARE_REASON": "(manque de données)"
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 458661823904470cf7cb43f89a9f6588a754099a..9a379223a73f0f966f44ebe6c7c73a113a8b244c 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -83,6 +83,14 @@ p {
font-size: 1rem;
line-height: 120%;
}
+.text-16-normal-uppercase {
+ font-family: $text-font;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 1rem;
+ line-height: 120%;
+ text-transform: uppercase;
+}
.text-16-normal-150 {
font-family: $text-font;
font-style: normal;
diff --git a/src/styles/components/_indicators.scss b/src/styles/components/_indicators.scss
index 7b884748731859f26fdbc5478e74184bcc8e5ef6..5e91831830d3892fd9b16e7099802eef241097d1 100644
--- a/src/styles/components/_indicators.scss
+++ b/src/styles/components/_indicators.scss
@@ -19,9 +19,10 @@
width: 100%;
}
.fi-header {
- margin-top: 2.5rem;
+ margin-top: 1rem;
margin-bottom: 1.25rem;
color: $grey-bright;
+ font-size: 1rem;
}
}
//SingleFluidIndicator
@@ -54,6 +55,11 @@
.fpi-link {
color: transparent;
}
+.details-title {
+ color: white;
+ display: inline-block;
+ margin-bottom: 1rem;
+}
.fpi {
display: flex;
flex-direction: row;
@@ -70,28 +76,71 @@
.fpi-content {
display: flex;
flex-direction: row;
+ &:first-child() {
+ margin-bottom: 2rem;
+ }
+ .icon-line {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 0.25rem;
+ .euro-value {
+ font-size: 2.2rem;
+ font-weight: 900;
+ margin-right: 0.2rem;
+ }
+ .evolution-text {
+ color: $soft-grey;
+ .fpi-content-perf-indicator-kpi {
+ &.positive {
+ color: $red-primary !important;
+ }
+ &.negative {
+ color: $green !important;
+ }
+ }
+ .diff-value {
+ color: white;
+ font-weight: 700;
+ }
+ }
+ }
+ .bilan-card {
+ margin-bottom: 2rem;
+ }
+ .error {
+ display: flex;
+ gap: 1rem;
+ }
.fpi-content-icon {
margin: 0.5rem 0;
}
- .fpi-content-perf {
- margin: 0 1rem;
+ .perf-icon {
+ align-self: start;
+ }
+ .fpi-content-perf:not(:first-child) {
+ margin: 0 0 0 1rem;
align-self: center;
+
.fpi-content-perf-result {
color: $grey-bright;
& span {
display: inline-block;
padding-right: 0.25rem;
}
- }
- .fpi-content-perf-indicator {
- color: $soft-grey;
- .fpi-content-perf-indicator-kpi {
- &.positive {
- color: $red-primary;
- }
- &.negative {
- color: $green;
- }
+ .euro-value {
+ font-size: 1.125rem;
+ display: block;
+ font-weight: 400;
+ }
+ .ELECTRICITY-color {
+ color: $elec-color;
+ }
+ .GAS-color {
+ color: $gas-color;
+ }
+ .WATER-color {
+ color: $water-color;
}
}
}