🎨 Meilleur affichage des multiplicateurs

Affichage des multiplicateurs directement au niveau des tranches et
supprime l'affichage du label "multiplicateur" qui était difficile à
comprendre.

Ajout d'un attribut de règle "acronyme", utilisé pour afficher un nom de
règle plus court au niveau des tranches d'un barème.

source/components/RuleLink.js

@@ -29,6 +29,7 @@ const RuleLink = ({
 		<Link
 			to={newPath}
 			className="rule-link"
+			title={title}
 			style={{ color: colour, ...style }}>
 			{children || title || nameLeaf(dottedName)}
 		</Link>

source/components/rule/Header.js

@@ -16,6 +16,7 @@ let RuleHeader = withColours(
 		question,
 		flatRule,
 		flatRules,
+		acronyme,
 		name,
 		title,
 		icon,
@@ -26,9 +27,12 @@ let RuleHeader = withColours(
 			<section id="ruleHeader">
 				<header className="ui__ plain card">
 					<div>
-							<Namespace {...{ dottedName, flatRules, colour: colours.textColour }} />
+						<Namespace
+							{...{ dottedName, flatRules, colour: colours.textColour }}
+						/>
 						<h1 style={{ color: colours.textColour }}>
 							{title || capitalise0(name)}
+							{acronyme && <> ({acronyme})</>}
 						</h1>
 					</div>
 					{icon && <span id="ruleHeader__icon"> {emoji(icon)}</span>}

source/components/rule/Rule.js

@@ -57,7 +57,7 @@ export default compose(
 	const { t } = useTranslation()
 
 	let flatRule = findRuleByDottedName(flatRules, dottedName)
-	let { type, name, title, description, question, icon } = flatRule,
+	let { type, name, acronyme, title, description, question, icon } = flatRule,
 		namespaceRules = findRuleByNamespace(flatRules, dottedName)
 	let displayedRule = analysedExample || analysedRule
 
@@ -116,6 +116,7 @@ export default compose(
 								flatRule,
 								flatRules,
 								name,
+								acronyme,
 								title,
 								icon,
 								valuesToShow

source/engine/mecanismViews/Barème.js

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import { ShowValuesContext } from 'Components/rule/ShowValuesContext'
+import RuleLink from 'Components/RuleLink'
 import { numberFormatter } from 'Engine/format'
 import { trancheValue } from 'Engine/mecanisms/barème'
 import { inferUnit, serialiseUnit } from 'Engine/units'
@@ -10,27 +11,31 @@ import { makeJsx } from '../evaluation'
 import './Barème.css'
 import { Node, NodeValuePointer } from './common'
 
-export let BarèmeAttributes = ({ explanation, lazyEval = identity }) => (
-	<>
-		<li key="assiette">
-			<span className="key">
-				<Trans>assiette</Trans>:{' '}
-			</span>
-			<span className="value">{makeJsx(lazyEval(explanation.assiette))}</span>
-		</li>
-		{explanation['multiplicateur'] &&
-			explanation['multiplicateur'].nodeValue !== 1 && (
-				<li key="multiplicateur">
-					<span className="key">
-						<Trans>multiplicateur</Trans>:{' '}
-					</span>
-					<span className="value">
-						{makeJsx(lazyEval(explanation['multiplicateur']))}
-					</span>
-				</li>
-			)}
-	</>
-)
+export let BarèmeAttributes = ({ explanation, lazyEval = identity }) => {
+	const multiplicateur = lazyEval(explanation['multiplicateur'])
+	const multiplicateurAcronym = multiplicateur?.explanation?.acronyme
+
+	return (
+		<>
+			<li key="assiette">
+				<span className="key">
+					<Trans>assiette</Trans>:{' '}
+				</span>
+				<span className="value">{makeJsx(lazyEval(explanation.assiette))}</span>
+			</li>
+			{explanation['multiplicateur'] &&
+				explanation['multiplicateur'].nodeValue !== 1 &&
+				!multiplicateurAcronym && (
+					<li key="multiplicateur">
+						<span className="key">
+							<Trans>multiplicateur</Trans>:{' '}
+						</span>
+						<span className="value">{makeJsx(multiplicateur)}</span>
+					</li>
+				)}
+		</>
+	)
+}
 
 let Component = function Barème({
 	language,
@@ -41,6 +46,7 @@ let Component = function Barème({
 	unit
 }) {
 	const showValues = useContext(ShowValuesContext)
+	const multiplicateur = lazyEval(explanation?.multiplicateur)
 	return (
 		<Node
 			classes="mecanism barème"
@@ -90,6 +96,7 @@ let Component = function Barème({
 										]),
 										resultUnit: explanation.assiette.unit,
 										returnRate: explanation.returnRate,
+										multiplicateur,
 										trancheValue:
 											barèmeType === 'marginal'
 												? tranche.value
@@ -137,6 +144,7 @@ let Tranche = ({
 		taux,
 		montant
 	},
+	multiplicateur,
 	tranchesUnit,
 	resultUnit,
 	returnRate,
@@ -144,10 +152,18 @@ let Tranche = ({
 	showValues,
 	language
 }) => {
-	const trancheFormatter = numberFormatter({
-		language,
-		style: serialiseUnit(tranchesUnit) === '€' ? 'currency' : undefined
-	})
+	const trancheFormatter = value => (
+		<TrancheFormatter
+			{...{
+				language,
+				tranchesUnit,
+				resultUnit,
+				multiplicateur,
+				value
+			}}
+		/>
+	)
+
 	let activated = trancheValue > 0
 	return (
 		<tr className={classNames('tranche', { activated })}>
@@ -177,6 +193,37 @@ let Tranche = ({
 	)
 }
 
+function TrancheFormatter({
+	language,
+	tranchesUnit,
+	resultUnit,
+	multiplicateur,
+	value
+}) {
+	const multiplicateurAcronym = multiplicateur?.explanation?.acronyme
+	if (!multiplicateurAcronym) {
+		return numberFormatter({
+			language,
+			style: serialiseUnit(tranchesUnit) === '€' ? 'currency' : undefined
+		})(value)
+	} else {
+		return (
+			<>
+				{value}&nbsp;
+				<RuleLink
+					{...multiplicateur.explanation}
+					title={multiplicateur.explanation.name}>
+					{multiplicateurAcronym}
+				</RuleLink>{' '}
+				<NodeValuePointer
+					data={value * multiplicateur.nodeValue}
+					unit={resultUnit}
+				/>
+			</>
+		)
+	}
+}
+
 //eslint-disable-next-line
 export default barèmeType => (
 	nodeValue,

source/engine/mecanismViews/BarèmeContinu.js

@@ -1,11 +1,12 @@
 import { ShowValuesConsumer } from 'Components/rule/ShowValuesContext'
-import { formatPercentage } from 'Engine/format'
+import RuleLink from 'Components/RuleLink'
+import { formatPercentage, formatValue } from 'Engine/format'
 import { sortObjectByKeys } from 'Engine/mecanismViews/common'
 import React from 'react'
-import { Trans } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { BarèmeAttributes } from './Barème'
 import './Barème.css'
-import { Node } from './common'
+import { Node, NodeValuePointer } from './common'
 
 let Comp = function Barème({ nodeValue, explanation, unit }) {
 	return (
@@ -33,7 +34,14 @@ let Comp = function Barème({ nodeValue, explanation, unit }) {
 								<tbody>
 									{sortObjectByKeys(explanation.points).map(([seuil, taux]) => (
 										<tr key={seuil} className="tranche">
-											<td key="tranche">{seuil}</td>
+											<td key="tranche">
+												<SeuilFormatteur
+													value={Number(seuil)}
+													multiplicateur={
+														explanation.multiplicateur.explanation
+													}
+												/>
+											</td>
 											<td key="taux"> {taux}</td>
 										</tr>
 									))}
@@ -60,6 +68,34 @@ let Comp = function Barème({ nodeValue, explanation, unit }) {
 	)
 }
 
+function SeuilFormatteur({ value, multiplicateur }) {
+	const { language } = useTranslation().i18n
+	if (value === 0) {
+		return '0'
+	} else {
+		return (
+			<>
+				{formatValue({
+					value,
+					language
+				})}
+				{multiplicateur && (
+					<>
+						&nbsp;
+						<RuleLink {...multiplicateur} title={multiplicateur.name}>
+							{multiplicateur.acronyme}
+						</RuleLink>
+					</>
+				)}{' '}
+				<NodeValuePointer
+					data={value * multiplicateur.nodeValue}
+					unit={multiplicateur.unit}
+				/>
+			</>
+		)
+	}
+}
+
 //eslint-disable-next-line
 export default (nodeValue, explanation, _, unit) => (
 	<Comp {...{ nodeValue, explanation, unit }} />

source/règles/base.yaml

@@ -1022,6 +1022,7 @@ contrat salarié . statut cadre . choix statut cadre:
 plafond sécurité sociale temps plein:
   description: Le plafond de Sécurité sociale est le montant maximum des rémunérations à prendre en compte pour le calcul de certaines cotisations.
   période: mois
+  acronyme: PSS
   formule: 3377
   unité: €
   références:
@@ -1030,6 +1031,7 @@ plafond sécurité sociale temps plein:
 
 contrat salarié . plafond sécurité sociale:
   période: flexible
+  acronyme: PSS
   formule: plafond sécurité sociale temps plein * temps de travail . quotité de travail
 
 contrat salarié . SMIC temps plein: