From ee3ee57b7f7ad9f39ee6e5e606b87c336cb9642f Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Mon, 3 Sep 2018 16:14:16 +0200
Subject: [PATCH] =?UTF-8?q?Formattage=20des=20nombres=20des=20explications?=
 =?UTF-8?q?=20de=20bar=C3=A8me?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/engine/mecanismViews/Barème.js | 40 +++++++++++++++------------
 source/engine/mecanismViews/common.js |  9 ++++--
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/source/engine/mecanismViews/Barème.js b/source/engine/mecanismViews/Barème.js
index fdf500355..1021225d8 100644
--- a/source/engine/mecanismViews/Barème.js
+++ b/source/engine/mecanismViews/Barème.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Node } from './common'
+import { Node, NodeValuePointer, formatNumber } 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'
 import { ShowValuesConsumer } from 'Components/rule/ShowValuesContext'
+import withLanguage from 'Components/utils/withLanguage'
 
 export default function Barème(nodeValue, explanation) {
 	return (
@@ -72,25 +72,29 @@ export default function Barème(nodeValue, explanation) {
 	)
 }
 
-function Tranche({
-	tranche: {
-		'en-dessous de': maxOnly,
-		'au-dessus de': minOnly,
-		de: min,
-		à: max,
-		taux
-	},
-	trancheValue,
-	showValues
-}) {
-	return (
+let Tranche = withLanguage(
+	({
+		tranche: {
+			'en-dessous de': maxOnly,
+			'au-dessus de': minOnly,
+			de: min,
+			à: max,
+			taux
+		},
+		trancheValue,
+		showValues,
+		language
+	}) => (
 		<tr className={classNames('tranche', { activated: trancheValue > 0 })}>
 			<td key="tranche">
 				{maxOnly
-					? `En-dessous de ${maxOnly}`
+					? `En-dessous de ${formatNumber(maxOnly, language)}`
 					: minOnly
-						? `Au-dessus de ${minOnly}`
-						: `De ${min} à ${max}`}
+						? `Au-dessus de ${formatNumber(minOnly, language)}`
+						: `De ${formatNumber(min, language)} à ${formatNumber(
+								max,
+								language
+						  )}`}
 			</td>
 			<td key="taux"> {makeJsx(taux)}</td>
 			{showValues && (
@@ -100,4 +104,4 @@ function Tranche({
 			)}
 		</tr>
 	)
-}
+)
diff --git a/source/engine/mecanismViews/common.js b/source/engine/mecanismViews/common.js
index d55062142..f308da928 100644
--- a/source/engine/mecanismViews/common.js
+++ b/source/engine/mecanismViews/common.js
@@ -15,9 +15,12 @@ let treatValue = (data, language) =>
 		? '?'
 		: typeof data == 'boolean'
 			? { true: '✅', false: '✘' }[data]
-			: !isNaN(data)
-				? Intl.NumberFormat(language, { maximumFractionDigits: 2 }).format(data)
-				: data
+			: formatNumber(data, language)
+
+export let formatNumber = (data, language) =>
+	!isNaN(data)
+		? Intl.NumberFormat(language, { maximumFractionDigits: 2 }).format(data)
+		: data
 
 export let NodeValue = withLanguage(({ data, language }) => (
 	<span>{treatValue(data, language)}</span>