🎨 ajoute les pourcentages au résultat

source/components/ResultView/Distribution.css

@@ -10,18 +10,29 @@
 	font-size: 90%;
 	position: relative;
 }
-.distribution-chart__container {
-	max-width: calc(100% - 5.5em);
+.distribution-chart__bar-container {
+	display: flex;
+	align-items: center;
+	flex: 1;
+}
+
+.distribution-chart__bar {
+	border-radius: 0.6em;
+	min-height: 3.5em;
 }
 
 .distribution-chart__item:hover .distribution-chart__bar {
-	opacity: 0.8;
+	opacity: 0.9;
 }
-.distribution-chart__amount--outside {
-	position: relative;
-	left: 5.5em;
-	justify-content: flex-start;
-	min-width: 5em;
+.distribution-chart__amount {
+	display: flex;
+	font-weight: bold;
+	margin-left: 1em;
+}
+.distribution-chart__percent {
+	margin-left: 1em;
+	font-size: 90%;
+	color: rgba(0, 0, 0, 0.7);
 }
 
 @media (max-width: 800px) {
@@ -37,6 +48,10 @@
 		width: auto !important;
 		height: initial !important;
 	}
+	.distribution-chart__bar {
+		min-height: 3em !important;
+	}
+
 	.distribution-chart__branche-name {
 		padding-left: 0.4em;
 		font-size: inherit !important;
@@ -64,16 +79,6 @@
 	height: 1.2em;
 }
 
-.distribution-chart__bar {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	height: 3em;
-	color: white;
-	border-radius: 0.6em;
-	font-weight: bold;
-}
-
 .distribution-chart__branche-name::first-letter {
 	text-transform: capitalize;
 }

source/components/ResultView/Distribution.js

@@ -81,7 +81,7 @@ class Distribution extends Component<Props, State> {
 								<Spring
 									config={ANIMATION_SPRING}
 									to={{
-										width: (100 * montant) / cotisationMaximum + '%',
+										flex: montant / cotisationMaximum,
 										opacity: montant ? 1 : 0
 									}}>
 									{styles => (
@@ -98,18 +98,29 @@ class Distribution extends Component<Props, State> {
 													<Trans>{brancheToLabel[branche] || branche}</Trans>
 												</span>
 											</div>
-											<div
-												className="distribution-chart__bar"
-												style={{
-													width: styles.width,
-													backgroundColor: colour,
-													color: colour
-												}}>
-												<Montant
-													numFractionDigit={0}
-													className="distribution-chart__amount--outside">
-													{montant}
-												</Montant>
+											<div className="distribution-chart__bar-container">
+												<div
+													className="distribution-chart__bar"
+													style={{
+														flex: styles.flex,
+														backgroundColor: colour
+													}}
+												/>
+												<div>
+													<Montant
+														className="distribution-chart__amount"
+														numFractionDigit={0}
+														style={{ color: colour }}>
+														{montant}
+													</Montant>
+													<Montant
+														numFractionDigit={0}
+														type="percent"
+														className="distribution-chart__percent">
+														{montant /
+															(total.partPatronale + total.partSalariale)}
+													</Montant>
+												</div>
 											</div>
 										</div>
 									)}

source/components/ResultView/Montant.js

@@ -6,6 +6,7 @@ import './Montant.css'
 type Props = {
 	children: number,
 	className?: string,
+	type: 'currency' | 'percent',
 	style?: { [string]: string },
 	numFractionDigit?: number
 } & ConnectedProps
@@ -19,13 +20,14 @@ const Montant = ({
 	numFractionDigit = 2,
 	children: value,
 	className = '',
+	type = 'currency',
 	style = {}
 }: Props) => (
 	<span className={'montant ' + className} style={style}>
 		{value === 0
 			? '—'
 			: Intl.NumberFormat(language, {
-					style: 'currency',
+					style: type,
 					currency: 'EUR',
 					maximumFractionDigits: numFractionDigit,
 					minimumFractionDigits: numFractionDigit