Regroupement visuel des variables

.eslintrc

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

components/Variables.js

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import colors from './variable-colors.yaml'
+
+function convertHex(hex,opacity){
+	let	r = parseInt(hex.substring(0,2), 16),
+		g = parseInt(hex.substring(2,4), 16),
+		b = parseInt(hex.substring(4,6), 16),
+		result =`rgba(${r},${g},${b},${opacity})`
+
+	return result
+}
+
+const Variable = ({variable: {variable, tags}, selectedTags, variableColors}) =>
+	<li className="variable" style={{background: convertHex(variableColors[variable], .15)}}>
+		<h3>{variable}</h3>
+		<ul>
+			{Object.keys(tags)
+					.filter(name => !selectedTags.find(([n]) => name == n))
+					.map(name =>
+						<li key={name}>
+							{name + ': ' + tags[name]}
+						</li>
+					)}
+		</ul>
+	</li>
+
+export default class Variables extends React.Component {
+	render(){
+		let {variables, selectedTags} = this.props,
+			variableSet =
+				variables.reduce((set, {variable}) => set.add(variable), new Set()), // get unique variable names
+			variableColors = [...variableSet].reduce((correspondance, v, i) => Object.assign(correspondance, {[v]: colors[i]}), {})
+
+		return <ul id="variables">
+			{variables.map((v, i) => <Variable variableColors={variableColors} key={i} variable={v} selectedTags={selectedTags}/>)}
+		</ul>
+	}
+}

components/variable-colors.yaml

@@ -0,0 +1,9 @@
+- 2ecc71
+- e74c3c
+- 3498db
+- 9b59b6
+- f1c40f
+- 1abc9c
+- e67e22
+- 95a5a6
+- 7f8c8d

containers/App.css

@@ -63,6 +63,15 @@ li {
 }
 
 .variable {
-	width: 12em;
+	width: 13em;
 	display: inline-block;
+	margin-bottom: 1em;
+	margin-right: 1em;
+	padding: .6em;
+	vertical-align: top;
+  height: 13em;
+}
+
+.variable ul {
+	padding-left: .6em
 }

containers/Explorer.js

@@ -2,24 +2,12 @@ import React from 'react'
 import {connect} from 'react-redux'
 import {getVariables} from '../selectors'
 import TagNavigation from '../components/TagNavigation'
+import Variables from '../components/Variables'
 import * as actions from '../actions'
 import {bindActionCreators} from 'redux'
 import {getTagsToSelect} from '../selectors'
 
 
-const Variable = ({variable: {variable, tags}, selectedTags}) => <li className="variable">
-	<h3>{variable}</h3>
-	<ul>
-		{Object.keys(tags)
-				.filter(name => !selectedTags.find(([n]) => name == n))
-				.map(name =>
-					<li key={name}>
-						{name + ': ' + tags[name]}
-					</li>
-				)}
-	</ul>
-</li>
-
 class Explorer extends React.Component {
 	render() {
 		let {variables, selectedTags, tagsToSelect, actions: {selectTag}} = this.props
@@ -27,9 +15,7 @@ class Explorer extends React.Component {
 			<div>
 				<h1>Liste des prélèvements sociaux sur les salaires en France</h1>
 				<TagNavigation selectedTags={selectedTags} tagsToSelect={tagsToSelect} selectTag={selectTag}/>
-				<ul id="variables">
-					{variables.map((v, i) => <Variable key={i} variable={v} selectedTags={selectedTags}/>)}
-				</ul>
+				<Variables variables={variables} selectedTags={selectedTags} />
 			</div>
 		)
 	}