diff --git a/source/components/ResultView/Distribution.css b/source/components/ResultView/Distribution.css index eab44282b..e768f5f0f 100644 --- a/source/components/ResultView/Distribution.css +++ b/source/components/ResultView/Distribution.css @@ -1,6 +1,6 @@ .distribution-chart__item { display: flex; - margin-top: 1em; + margin: 1.5em 0; min-height: 3.5em; padding: 0; width: 100%; @@ -17,21 +17,32 @@ } .distribution-chart__bar { - border-radius: 0.6em; - min-height: 3.5em; + border-radius: 0.4em; + min-height: 1.5em; +} + +.distribution-chart__item-content { + flex: 1; +} + +.distribution-chart__counterparts { + width: 20em; } .distribution-chart__item:hover .distribution-chart__bar { opacity: 0.9; } .distribution-chart__amount { - display: flex; font-weight: bold; margin-left: 1em; } .distribution-chart__percent { margin-left: 1em; - color: rgba(0, 0, 0, 0.7); + opacity: 0; + transition: 0.3s opacity; +} +.distribution-chart__item:hover .distribution-chart__percent { + opacity: 1; } @media (max-width: 800px) { @@ -48,7 +59,7 @@ height: initial !important; } .distribution-chart__bar { - min-height: 3em !important; + min-height: 1.5em !important; } .distribution-chart__branche-name { @@ -65,13 +76,13 @@ padding: 0.4em 0; padding-right: 1em; justify-content: space-evenly; - width: 9em; + width: 6em; flex-grow: 0; flex-shrink: 0; } .distribution-chart__branche-name { - font-size: 90%; + font-weight: bold; } .distribution-chart__icon { font-size: 200%; diff --git a/source/components/ResultView/Distribution.js b/source/components/ResultView/Distribution.js index de724ee83..7b4a30dd3 100644 --- a/source/components/ResultView/Distribution.js +++ b/source/components/ResultView/Distribution.js @@ -7,6 +7,7 @@ import { Trans } from 'react-i18next' import { connect } from 'react-redux' import { config, Spring } from 'react-spring' import { compose } from 'redux' +import { capitalise0 } from '../../utils' import withColours from '../withColours' import './Distribution.css' import Montant from './Montant' @@ -28,6 +29,22 @@ const brancheToEmoji: { [Branche]: string } = { autres: '🔧' } +const brancheToCounterparts: { [Branche]: string } = { + retraite: 'Guarantees on average 70% of your last activity income.', + santé: + 'Covers most of everyday-life health care needs and 100% for serious illnesses, e.g. hospital stays.', + famille: + 'Offers a balanced work and family life. Finances day nurseries and various child care. ', + formation: 'Gives access to professional training for employees.', + logement: 'Helps build new and affordable housing.', + 'accidents du travail / maladies professionnelles': + 'Offers full coverage of occupational illnesses or accidents.', + 'assurance chômage': + "Gives income to former employees while they're in search of a new job.", + transport: 'Helps keep the price of a public transportation ticket low.', + autres: 'Other contributions to the social system.' +} + const brancheToLabel: { [Branche]: string } = { 'accidents du travail / maladies professionnelles': 'accidents', 'assurance chômage': 'chômage' @@ -91,37 +108,18 @@ class Distribution extends Component { style={{ opacity: styles.opacity }}> -
- - {emoji(brancheToEmoji[branche])} - - - {brancheToLabel[branche] || branche} - -
-
-
-
- - {montant} - - - {montant / - (total.partPatronale + total.partSalariale)} - -
+ +
+

+ + + {capitalise0(brancheToLabel[branche] || branche)} + + + {'. '} + {brancheToCounterparts[branche]} +

+
)} @@ -137,8 +135,7 @@ class Distribution extends Component { + Cotisations - {total.partPatronale + - total.partSalariale} + {total.partPatronale + total.partSalariale}
@@ -157,3 +154,37 @@ export default compose( {} ) )(Distribution) + +let ChartItemBar = ({ styles, colour, montant, total }) => ( +
+
+
+ + {montant} + + + {montant / (total.partPatronale + total.partSalariale)} + +
+
+) + +let ChartItemLegend = ({ branche }) => ( +
+ + {emoji(brancheToEmoji[branche])} + +
+)