Bel affichage des tags

.eslintrc

@@ -14,7 +14,6 @@ rules:
  curly:
   - 2
   - multi-or-nest
- space-before-blocks: 2
  no-console: 1
  react/prop-types: 0
  react/display-name: 0

IDEES.ms

@@ -1,3 +1,10 @@
+Prochaine étape :
+- mettre les données dans le state : ce qu'on veut c'est la liste de variables fusionnées.
+- en déduire, à partir de la liste des sélections user elle aussi dans le state, la liste des variables à afficher
+
+
+
+
 
 - Afficher du YAML simplifié
 En fonction des valeurs des variables de la simulation, ou des choix de l'utilisateur dans les étiquettes, le parser YAML doit être capable de nous donner une vue simplifiée de la variable.

containers/App.css

@@ -3,17 +3,36 @@ body {
 	color: #333;
 }
 
-#tags {
+ul {
 	list-style: none;
-	text-transform: uppercase;
-	font-size: 300%;
-	font-weight: 200;
+	padding: 0
+}
 
-	text-align: center;
+#tags {
+
+	text-transform: capitalize;
+	font-size: 140%;
+	font-weight: 300;
+	width: 20%;
+	border-right: 1px solid #aaa;
 }
 
 #tags li {
-	width: 12em;
 	margin-top: 1em;
-	border: 1px solid #bbb;
+}
+
+.choices {
+
+}
+.choices li {
+	font-size: 75%;
+	font-weight: 400;
+	display: inline-block;
+	text-align: right;
+	margin-left: 1em;
+	background: #16a085;
+	color: white;
+	padding: .05em .5em;
+	cursor: pointer;
+	border-radius: .1em
 }

containers/Explorer.js

@@ -1,72 +1,28 @@
 import React from 'react'
-import parameters from '../load-parameters'
-import deepAssign from 'deep-assign'
-
-let
-	groupedByVariableName = parameters
-		.filter(p => p && p.variable)
-		.reduce((acc, p) => {
-			let variableName = p.variable
-			if (acc[variableName])
-				acc[variableName].push(p)
-			else
-				acc[variableName] = [p]
-			return acc
-		}, {}),
-
-	conflictingTags = (tags1, tags2) =>
-		Object.keys(tags1).reduce((conflicts, k) => {
-			if (typeof tags2[k] != 'undefined' && tags2[k] !== tags1[k])
-				conflicts.push(k)
-			return conflicts
-		}, []),
-
-	groupedMergedVariables =
-		Object.keys(groupedByVariableName)
-			.reduce((list, name) => {
-				let items = groupedByVariableName[name]
-				/* 	Les items sont des fragments de variables.
-						Les premiers fragments vont être fusionnés dans les suivants,
-						sauf s'il introduit un écrasement d'un tag */
-				let variableList = items.slice(1).reduce((mergedItems, item) => {
-					let mergedItem = mergedItems.reduce((final, itemBefore) => {
-						let oups = conflictingTags(itemBefore.tags, item.tags)
-						//console.log('conflicts for ', itemBefore.tags, item.tags)
-						return oups.length ? item : deepAssign({}, item, itemBefore)
-					},
-					item)
-					mergedItems.push(mergedItem)
-					return mergedItems
-				},
-				[items[0]])
-				return [...variableList, ...list]
-			}, []),
-
-	tagFrequency =
-		groupedMergedVariables
-			.reduce((stats, variable) => {
-				Object.keys(variable.tags).map(
-					k => {
-						stats[k] = stats[k] || {number: 0, choices: new Set()}
-						stats[k].number = stats[k].number + 1
-						stats[k].choices.add(variable.tags[k])
-					}
-				)
-				return stats
-			}
-		, {})
-
-
-console.log('YOUYOU', tagFrequency)
-
+import data from '../model'
+console.log(data)
 export default class Explorer extends React.Component {
 	render() {
 		return (
 			<ul id="tags">
-				{Object.keys(tagFrequency).map(tag =>
-					<li key={tag}>{tag}</li>
+				{data.map(tag =>
+					<TagSelect key={tag.name} tag={tag} />
 				)}
 			</ul>
 		)
 	}
 }
+
+class TagSelect extends React.Component {
+	render(){
+		let {name, choices, number} = this.props.tag
+		return (<li>
+			<span className="name">{`${name} (${number} variables)`}</span>
+			<ul className="choices">
+				{[...choices].map(c => <li key={c}>
+					{c}
+				</li>)}
+			</ul>
+		</li>)
+	}
+}

load-parameters.js

@@ -1,5 +1,5 @@
 /* Load all yaml files in a dir */
-let requireContext = require.context('./parameters/cotisations', false, /(agirc|arrco|agff).yaml$/)
+let requireContext = require.context('./parameters/cotisations', false, /(chomage|agirc|arrco|agff).yaml$/)
 export default requireContext.keys()
   .map( requireContext )
   //flatten

model.js

@@ -0,0 +1,71 @@
+import parameters from './load-parameters'
+import deepAssign from 'deep-assign'
+
+let
+	groupedByVariableName = parameters
+		.filter(p => p && p.variable)
+		.reduce((acc, p) => {
+			let variableName = p.variable
+			if (acc[variableName])
+				acc[variableName].push(p)
+			else
+				acc[variableName] = [p]
+			return acc
+		}, {}),
+
+	conflictingTags = (tags1, tags2) =>
+		Object.keys(tags1).reduce((conflicts, k) => {
+			if (typeof tags2[k] != 'undefined' && tags2[k] !== tags1[k])
+				conflicts.push(k)
+			return conflicts
+		}, []),
+
+	list =
+		Object.keys(groupedByVariableName)
+			.reduce((list, name) => {
+				let items = groupedByVariableName[name]
+				/* 	Les items sont des fragments de variables.
+						Les premiers fragments vont être fusionnés dans les suivants,
+						sauf s'il introduit un écrasement d'un tag */
+				let newItems = items.slice(1).reduce((mergedItems, item) => {
+					let mergedItem = mergedItems.reduce((final, itemBefore) => {
+						let oups = conflictingTags(itemBefore.tags, item.tags)
+						//console.log('conflicts for ', itemBefore.tags, item.tags)
+						return oups.length ? item : deepAssign({}, item, itemBefore)
+					},
+					item)
+					mergedItems.push(mergedItem)
+					return mergedItems
+				},
+				[items[0]])
+
+
+
+
+				return [
+					/* Gardons seulement les variables ayant une
+					implémentation : capable de faire un calcul */
+					...newItems.filter(i => JSON.stringify(i).indexOf('values') + 1),
+					...list]
+			}, []),
+
+	tagFrequencies =
+		list
+			.reduce((stats, variable) => {
+				Object.keys(variable.tags).map(
+					k => {
+						stats[k] = stats[k] || {number: 0, choices: new Set()}
+						stats[k].number = stats[k].number + 1
+						stats[k].choices.add(variable.tags[k])
+					}
+				)
+				return stats
+			}
+		, {}),
+
+	data =
+		Object.keys(tagFrequencies)
+			.reduce((acc, n) => ([...acc, {name: n, ...tagFrequencies[n]}]), [])
+			.sort((a, b) => b.number - a.number)
+
+export default data

package.json

@@ -50,5 +50,8 @@
     "webpack": "^1.12.14",
     "webpack-dev-server": "^1.14.1",
     "yaml-loader": "^0.2.0"
+  },
+  "scripts": {
+    "start": "node server.js"
   }
 }

server.js

@@ -6,10 +6,21 @@ new WebpackDevServer(webpack(config), {
 	publicPath: config.output.publicPath,
 	hot: true,
 	historyApiFallback: true,
+	// It suppress error shown in console, so it has to be set to false.
+	quiet: false,
+	// It suppress everything except error, so it has to be set to false as well
+	// to see success build.
+	noInfo: false,
 	stats: {
-		colors: true
-	},
-	noInfo: false
+		// Config for minimal console.log mess.
+		assets: false,
+		colors: true,
+		version: false,
+		hash: false,
+		timings: false,
+		chunks: false,
+		chunkModules: false
+	}
 }).listen(3000, 'localhost', function (err) {
 	if (err)
 		console.log(err)