From 46bb3e0f84a9be45c509c8354a33a0121079d37f Mon Sep 17 00:00:00 2001
From: Mael Thomas <mael.thomas@data.gouv.fr>
Date: Tue, 5 Jul 2016 16:08:36 +0200
Subject: [PATCH] Regroupement visuel des variables

---
 .eslintrc                       |  1 +
 components/Variables.js         | 39 +++++++++++++++++++++++++++++++++
 components/variable-colors.yaml |  9 ++++++++
 containers/App.css              | 11 +++++++++-
 containers/Explorer.js          | 18 ++-------------
 5 files changed, 61 insertions(+), 17 deletions(-)
 create mode 100644 components/Variables.js
 create mode 100644 components/variable-colors.yaml

diff --git a/.eslintrc b/.eslintrc
index 8c1989477..f89062a03 100644
--- a/.eslintrc
+++ b/.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
diff --git a/components/Variables.js b/components/Variables.js
new file mode 100644
index 000000000..0b256b0dd
--- /dev/null
+++ b/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>
+	}
+}
diff --git a/components/variable-colors.yaml b/components/variable-colors.yaml
new file mode 100644
index 000000000..52ecaac43
--- /dev/null
+++ b/components/variable-colors.yaml
@@ -0,0 +1,9 @@
+- 2ecc71
+- e74c3c
+- 3498db
+- 9b59b6
+- f1c40f
+- 1abc9c
+- e67e22
+- 95a5a6
+- 7f8c8d
diff --git a/containers/App.css b/containers/App.css
index 173c93fb9..ed4feea62 100644
--- a/containers/App.css
+++ b/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
 }
diff --git a/containers/Explorer.js b/containers/Explorer.js
index 6ae8d47de..5a9a6e50a 100644
--- a/containers/Explorer.js
+++ b/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>
 		)
 	}