diff --git a/source/components/ResultView/Distribution.css b/source/components/ResultView/Distribution.css index ae1db8f13..5e2b65535 100644 --- a/source/components/ResultView/Distribution.css +++ b/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; } diff --git a/source/components/ResultView/Distribution.js b/source/components/ResultView/Distribution.js index 0dee3494e..1e1b800ef 100644 --- a/source/components/ResultView/Distribution.js +++ b/source/components/ResultView/Distribution.js @@ -81,7 +81,7 @@ class Distribution extends Component { {styles => ( @@ -98,18 +98,29 @@ class Distribution extends Component { {brancheToLabel[branche] || branche} -
- - {montant} - +
+
+
+ + {montant} + + + {montant / + (total.partPatronale + total.partSalariale)} + +
)} diff --git a/source/components/ResultView/Montant.js b/source/components/ResultView/Montant.js index 97861df8f..db5bf3f95 100644 --- a/source/components/ResultView/Montant.js +++ b/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) => ( {value === 0 ? '—' : Intl.NumberFormat(language, { - style: 'currency', + style: type, currency: 'EUR', maximumFractionDigits: numFractionDigit, minimumFractionDigits: numFractionDigit