From 2eb17aa19e6deb514a348687aee8d25e70b74970 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Mon, 14 Jan 2019 15:14:57 +0100
Subject: [PATCH] =?UTF-8?q?:doc:=20Meilleure=20visualisation=20du=20bar?=
 =?UTF-8?q?=C3=A8me=20continu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/engine/evaluation.js                  | 12 ++++--
 source/engine/mecanismViews/BarèmeContinu.js | 45 +++++++-------------
 source/engine/mecanisms.js                   | 15 +++++--
 3 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/source/engine/evaluation.js b/source/engine/evaluation.js
index 27bc08709..b15556d14 100644
--- a/source/engine/evaluation.js
+++ b/source/engine/evaluation.js
@@ -10,7 +10,8 @@ import {
 	keys,
 	values,
 	evolve,
-	filter
+	filter,
+	is
 } from 'ramda'
 
 export let makeJsx = node =>
@@ -100,8 +101,13 @@ export let evaluateObject = (objectShape, effect) => (
 		evaluateNode(cache, situationGate, parsedRules, child)
 
 	let transforms = map(k => [k, evaluateOne], keys(objectShape)),
-		explanation = evolve(fromPairs(transforms))(node.explanation),
-		nodeValue = effect(explanation),
+		automaticExplanation = evolve(fromPairs(transforms))(node.explanation)
+	// the result of effect can either be just a nodeValue, or an object {additionalExplanation, nodeValue}. The latter is useful for a richer JSX visualisation of the mecanism : the view should not duplicate code to recompute intermediate values (e.g. for a marginal 'barème', the marginal 'tranche')
+	let evaluated = effect(automaticExplanation),
+		explanation = is(Object, evaluated)
+			? { ...automaticExplanation, ...evaluated.additionalExplanation }
+			: automaticExplanation,
+		nodeValue = is(Object, evaluated) ? evaluated.nodeValue : evaluated,
 		missingVariables = mergeAllMissing(values(explanation))
 	//	console.log("".padStart(cache.parseLevel),map(node => length(flatten(collectNodeMissing(node))) ,explanation))
 	return rewriteNode(node, nodeValue, explanation, missingVariables)
diff --git a/source/engine/mecanismViews/BarèmeContinu.js b/source/engine/mecanismViews/BarèmeContinu.js
index e6ea9dd49..4c6a0e885 100644
--- a/source/engine/mecanismViews/BarèmeContinu.js
+++ b/source/engine/mecanismViews/BarèmeContinu.js
@@ -1,22 +1,19 @@
 import React from 'react'
-import { Node, NodeValuePointer, formatNumber } from './common'
-import { makeJsx } from '../evaluation'
+import { Node } from './common'
 import { Trans } from 'react-i18next'
-import { trancheValue } from 'Engine/mecanisms/barème'
 import './Barème.css'
-import classNames from 'classnames'
 import { ShowValuesConsumer } from 'Components/rule/ShowValuesContext'
 import withLanguage from 'Components/utils/withLanguage'
 import { BarèmeAttributes } from './Barème'
 import { toPairs } from 'ramda'
 
-let Comp = withLanguage(function Barème({ language, nodeValue, explanation }) {
+let Comp = withLanguage(function Barème({ nodeValue, explanation }) {
 	return (
 		<ShowValuesConsumer>
 			{showValues => (
 				<Node
-					classes="mecanism"
-					name="barèmeContinu"
+					classes="mecanism barème"
+					name="barème continu"
 					value={nodeValue}
 					child={
 						<ul className="properties">
@@ -30,26 +27,25 @@ let Comp = withLanguage(function Barème({ language, nodeValue, explanation }) {
 										<th>
 											<Trans>Taux</Trans>
 										</th>
-										{showValues && (
-											<th>
-												<Trans>Résultat</Trans>
-											</th>
-										)}
 									</tr>
 								</thead>
 								<tbody>
 									{toPairs(explanation.points).map(([seuil, taux]) => (
-										<Point
-											{...{
-												language,
-												seuil,
-												taux,
-												showValues
-											}}
-										/>
+										<tr key={seuil} className="tranche">
+											<td key="tranche">{seuil}</td>
+											<td key="taux"> {taux}</td>
+										</tr>
 									))}
 								</tbody>
 							</table>
+							{showValues && (
+								<span style={{ background: 'yellow' }}>
+									<b>
+										<Trans>Votre taux </Trans> :{' '}
+									</b>
+									{(100 * explanation.taux).toFixed(1)} %
+								</span>
+							)}
 						</ul>
 					}
 				/>
@@ -62,12 +58,3 @@ let Comp = withLanguage(function Barème({ language, nodeValue, explanation }) {
 export default (nodeValue, explanation) => (
 	<Comp {...{ nodeValue, explanation }} />
 )
-
-let Point = ({ seuil, taux, showValues, language }) => {
-	return (
-		<tr>
-			<td key="tranche">{seuil}</td>
-			<td key="taux"> {taux}</td>
-		</tr>
-	)
-}
diff --git a/source/engine/mecanisms.js b/source/engine/mecanisms.js
index 745856d45..d320c9c05 100644
--- a/source/engine/mecanisms.js
+++ b/source/engine/mecanisms.js
@@ -790,7 +790,7 @@ export let mecanismContinuousScale = (recurse, k, v) => {
 	let effect = ({ assiette, multiplicateur, points }) => {
 		if (anyNull([assiette, multiplicateur])) return null
 		//We'll build a linear function given the two constraints that must be respected
-		return pipe(
+		let result = pipe(
 			toPairs,
 			// we don't rely on the sorting of objects
 			sort(([k1], [k2]) => k1 - k2),
@@ -804,11 +804,20 @@ export let mecanismContinuousScale = (recurse, k, v) => {
 				if (val(assiette) > x1 && val(assiette) <= x2) {
 					// Outside of these 2 limits, it's a linear function a * x + b
 					let a = (y2 - y1) / (x2 - x1),
-						b = y1 - x1 * a
-					return reduced(a * val(assiette) + b)
+						b = y1 - x1 * a,
+						nodeValue = a * val(assiette) + b
+					return reduced({
+						nodeValue,
+						additionalExplanation: {
+							seuil: val(assiette) / val(multiplicateur),
+							taux: nodeValue / val(assiette)
+						}
+					})
 				}
 			}, 0)
 		)(points)
+
+		return result
 	}
 	let explanation = {
 			...parseObject(recurse, objectShape, v),