Travail sur la page variable; affichage des calculs linéaires

components/SelectedVariable.css

@@ -0,0 +1,50 @@
+#calculable-items>li {
+	margin-top: 4em;
+	padding-bottom: 2em;
+	border-bottom: 1px solid #eee;
+}
+
+.item .left {
+	display: inline-block;
+	width: 30%;
+}
+.item .right {
+	display: inline-block;
+	width: 40%;
+}
+/* Display formulas */
+
+.calc {
+	text-align: center;
+}
+.calc h3 {
+	font-weight: 300;
+	font-size: 100%;
+	color: #666;
+	text-transform: uppercase;
+}
+.linear {
+	font-size: 130%;
+}
+.linear .label {
+	font-size: 70%;
+	color: #333;
+	color: #2980b9;
+}
+
+.linear .operator {
+	margin: 0 1em;
+	color: #2980b9;
+	font-size: 150%;
+}
+
+.linear .limit {
+	margin-top: 1em;
+}
+.linear .limit .label {
+	margin-right: 1em;
+}
+
+.linear .base, .calc .rate {
+	display: inline-block;
+}

components/SelectedVariable.js

@@ -1,4 +1,7 @@
 import React, { Component } from 'react'
+import './SelectedVariable.css'
+import TagMap from './TagMap'
+import R from 'ramda'
 
 export default class SelectedVariable extends Component {
 	render() {
@@ -8,14 +11,26 @@ export default class SelectedVariable extends Component {
 				first: {
 					description
 				},
-				tags
+				tags,
+				calculable
 			},
 			selectedTags
-		} = this.props
+		} = this.props,
+
+			tagsList = R.pluck('tags', calculable),
+			commonTags = R.tail(tagsList).reduce(
+				(result, next) => R.intersection(result, R.toPairs(next)),
+				R.toPairs(R.head(tagsList))
+			),
+			itemsWithUniqueTags = R.map(item => [item, R.fromPairs(R.difference(R.toPairs(item.tags), commonTags))], calculable)
+
+
 		return (
 			<section id="selected-variable">
 				<h1>{name}</h1>
 				<p>{description}</p>
+				<TagMap data={commonTags} />
+				{/*
 				<ul>
 					{Object.keys(tags)
 							.filter(name => !selectedTags.find(([n]) => name == n))
@@ -25,6 +40,67 @@ export default class SelectedVariable extends Component {
 								</li>
 							)}
 				</ul>
+				*/}
+				<Items itemsWithUniqueTags={itemsWithUniqueTags}/>
 			</section>)
 	}
 }
+
+class Items extends Component {
+	render() {
+		let {itemsWithUniqueTags} = this.props
+
+		return (
+			<ul id="calculable-items">
+				{itemsWithUniqueTags.map(([item, tags], i) =>
+					<Item key={i} item={item} tags={tags}/>
+				)}
+			</ul>
+		)
+	}
+}
+
+let Item = ({item: {linear, marginalRateTaxScale}, tags}) =>
+<li className="item">
+	<div className="left">
+		<TagMap data={tags} />
+	</div>
+	<div className="right">
+		{	linear && <Linear data={linear}/>
+			||	marginalRateTaxScale && <TaxScale data={marginalRateTaxScale}/>
+		}
+	</div>
+</li>
+
+
+let Linear = ({data: {
+	base,
+	limit,
+	historique
+}}) => <div className="calc">
+	<h3>Calcul linéaire</h3>
+	<div className="linear">
+		<div className="base">
+			<div className="label">base</div>
+			<div className="value">{base}</div>
+		</div>
+		<span className="operator">
+			✕
+		</span>
+		<div className="rate">
+			<div className="label">Taux</div>
+			<div className="value">{
+					historique[(Object.keys(historique).sort()[0])]
+			}</div>
+		</div>
+		{ limit != null &&  <div className="limit">
+				<span className="label">dans la limite de : </span>
+				<span className="value"> {limit}</span>
+			</div>	}
+	</div>
+</div>
+
+let TaxScale = ({data}) => <div className="calc tax-scale">
+	<h3>Règle de calcul: barème</h3>
+	{JSON.stringify(data)}
+</div>

components/TagMap.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import R from 'ramda'
+
+let TagMap = ({data}) =>
+	<ul className="tag-map">
+		{R.unless(R.isArrayLike, R.toPairs)(data).map(([name, value]) => <li key={name}>
+			<span>{name}</span> :
+			<span className="tag-value">{value}</span>
+		</li>)
+		}
+	</ul>
+
+export default TagMap

components/TagNavigation.js

@@ -1,5 +1,5 @@
 import React from 'react'
-
+import TagMap from './TagMap'
 
 export default class TagNavigation extends React.Component {
 	render(){
@@ -10,13 +10,7 @@ export default class TagNavigation extends React.Component {
 				<div className="content">
 					{selectedTags.length > 0 &&
 						<div id="selected">
-							<ul>
-								{selectedTags.map(([name, value]) => <li key={name}>
-									<span>{name}</span>:
-									<span className="tag-value">{value}</span>
-								</li>)
-								}
-							</ul>
+							<TagMap data={selectedTags} />
 							<button onClick={resetTags}>Effacer ma sélection ✕</button>
 						</div>
 					}
@@ -38,7 +32,7 @@ class Tag extends React.Component {
 			<span className="name">
 				{name}
 				<span className="nb">
-					({number} variables)
+					({number} variable{number > 1 ? 's' : ''})
 				</span>
 			</span>
 			<ul className="choices">

containers/App.css

@@ -73,11 +73,13 @@ li {
 	color: #16a085;
 }
 
-#selected .tag-value {
+.tag-map .tag-value {
 	margin-left: 1em;
-	border: 1px solid #16a085;
-	color: #16a085;
+	background: #16a085;
+	border: none;
+	color: white;
 	margin-bottom: .5em;
+	cursor: default;
 }
 
 #selected button {
@@ -132,5 +134,4 @@ li {
 	border: 1px solid #ddd;
 	border-left: 2px solid #ddd;
 	padding: 1em 2em;
-
 }

reducers.js

@@ -13,7 +13,7 @@ function selectedTags(state = [], {type, tagName, tagValue}) {
 	}
 }
 
-function selectedVariable(state = null, {type, name}) {
+function selectedVariable(state = 'chomage', {type, name}) {
 	switch (type) {
 	case SELECT_VARIABLE:
 		return name