From ea77e64cc4cae6029de4da42df3d8c4837eeaff2 Mon Sep 17 00:00:00 2001 From: Mael Thomas Date: Thu, 30 Jun 2016 12:16:47 +0200 Subject: [PATCH] Bel affichage des tags --- .eslintrc | 1 - IDEES.ms | 7 ++++ containers/App.css | 33 +++++++++++++---- containers/Explorer.js | 80 ++++++++++-------------------------------- load-parameters.js | 2 +- model.js | 71 +++++++++++++++++++++++++++++++++++++ package.json | 3 ++ server.js | 17 +++++++-- 8 files changed, 140 insertions(+), 74 deletions(-) create mode 100644 model.js diff --git a/.eslintrc b/.eslintrc index da79aafb1..8c1989477 100644 --- a/.eslintrc +++ b/.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 diff --git a/IDEES.ms b/IDEES.ms index 1fad0c9c7..671a0d085 100644 --- a/IDEES.ms +++ b/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. diff --git a/containers/App.css b/containers/App.css index e76e5b897..735acfe74 100644 --- a/containers/App.css +++ b/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 } diff --git a/containers/Explorer.js b/containers/Explorer.js index a66540980..281df492b 100644 --- a/containers/Explorer.js +++ b/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 ( ) } } + +class TagSelect extends React.Component { + render(){ + let {name, choices, number} = this.props.tag + return (
  • + {`${name} (${number} variables)`} + +
    • ) + } +} diff --git a/load-parameters.js b/load-parameters.js index 2133fb1fa..17bd73434 100644 --- a/load-parameters.js +++ b/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 diff --git a/model.js b/model.js new file mode 100644 index 000000000..171d02b33 --- /dev/null +++ b/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 diff --git a/package.json b/package.json index 5c071e11f..96f1bd50c 100644 --- a/package.json +++ b/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" } } diff --git a/server.js b/server.js index 77065882e..a40d45814 100644 --- a/server.js +++ b/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)