Mise en valeur des tranches de barème activées

source/components/rule/Algorithm.css

@@ -44,7 +44,6 @@
 	margin: 1em 0;
 }
 
-
 #rule-rules #ruleValue {
 	font-weight: 400;
 	text-align: center;
@@ -159,7 +158,6 @@
 	white-space: nowrap;
 }
 
-
 .percentage .name {
 	font-weight: 500;
 }
@@ -173,33 +171,6 @@
 	font-size: 60%;
 }
 
-.barème > .nodeHead .name {
-	background: #1abc9c;
-}
-
-.barème .key {
-	color: #1abc9c;
-}
-.mecanism.barème {
-	border-color: #1abc9c;
-}
-
-.barème table {
-	margin-top: 1em;
-	width: 80%;
-	text-align: left;
-	font-weight: 400;
-}
-.barème table td {
-	padding: 0.1em 0.4em;
-}
-.barème table tr:first-child {
-	font-weight: 500;
-}
-.barème table tr:nth-child(2n) {
-	background: #f1f1f1;
-}
-
 .mecanism.inversion li {
 	margin-top: 0.6em;
 }

source/engine/mecanismViews/Barème.css

@@ -1,7 +1,32 @@
-.tranche .activated {
-	background: yellow;
+.barème > .nodeHead .name {
+	background: #1abc9c;
 }
-.tranche .activated:last-child {
-	border: 1px dashed yellow;
-	background: none;
+
+.barème .key {
+	color: #1abc9c;
+}
+.mecanism.barème {
+	border-color: #1abc9c;
+}
+
+.barème table {
+	margin-top: 1em;
+	width: 80%;
+	text-align: left;
+	font-weight: 400;
+}
+.barème table td {
+	padding: 0.1em 0.4em;
+}
+.barème table tr:first-child {
+	font-weight: 600;
+}
+.barème .tranche:nth-child(2n) {
+	background: #f1f1f1;
+}
+.barème .tranche.activated {
+	background: yellow !important ;
+}
+.barème .tranche.activated:last-of-type {
+	background: chartreuse;
 }

source/engine/mecanismViews/Barème.js

@@ -3,7 +3,9 @@ import { Node } from './common'
 import { makeJsx } from '../evaluation'
 import { Trans } from 'react-i18next'
 import { trancheValue } from 'Engine/mecanisms/barème'
+import { NodeValuePointer } from './common'
 import './Barème.css'
+import classNames from 'classnames'
 
 export default function Barème(nodeValue, explanation) {
 	return (
@@ -45,7 +47,7 @@ export default function Barème(nodeValue, explanation) {
 									tranche={t}
 									trancheValue={trancheValue(
 										explanation['assiette'],
-										explanation['multiplicateur de tranches']
+										explanation['multiplicateur des tranches']
 									)(t)}
 								/>
 							))}
@@ -68,7 +70,7 @@ function Tranche({
 	trancheValue
 }) {
 	return (
-		<tr className={trancheValue > 0 ? 'activated' : ''}>
+		<tr className={classNames('tranche', { activated: trancheValue > 0 })}>
 			<td key="tranche">
 				{maxOnly
 					? `En-dessous de ${maxOnly}`
@@ -76,7 +78,7 @@ function Tranche({
 						? `Au-dessus de ${minOnly}`
 						: `De ${min} à ${max}`}
 			</td>
-			<td key="taux"> {makeJsx(taux)} </td>
+			<td key="taux"> {makeJsx(taux)}</td>
 		</tr>
 	)
 }

source/engine/mecanismViews/common.js

@@ -23,7 +23,7 @@ export let NodeValue = withLanguage(({ data, language }) => (
 	<span>{treatValue(data, language)}</span>
 ))
 
-let NodeValuePointer = ({ data }) =>
+export let NodeValuePointer = ({ data }) =>
 	data !== undefined && data !== null ? (
 		<span className={'situationValue ' + treatValue(data)}>
 			<NodeValue data={data} />

source/engine/treat.js

@@ -153,6 +153,17 @@ export let treatString = (rules, rule) => rawNode => {
 							// eslint-disable-next-line
 							jsx: nodeValue => <span className="value">{nodeValue}</span>
 						})
+					],
+					[
+						propEq('category', 'percentage'),
+						node => ({
+							nodeValue: node.nodeValue,
+							// eslint-disable-next-line
+							jsx: nodeValue => (
+								<span className="value">{nodeValue * 100}%</span>
+							)
+							//the best would be to display the original text before parsing, but nearley does'nt let us access it
+						})
 					]
 				])
 			),