agumonkey/impots.js

## impots.js


// https://output.jsbin.com/cinefupoda/
// https://jsbin.com/voneyoraka/

var tranches = [
  {lo:0, hi:9964, per:0},
  {lo:9964, hi:27519, per:14},
  {lo:27519, hi:73779, per:30},
  {lo:73779, hi:156244, per:41},
  {lo:156244, hi:999999999999, per:45},
]

function inter(v,l,h) {
  if (v < l) {
    return v;
  } else if (v > h) {
    return h - l;
  } else {
    return v - l;
  }
}

function cycle(a) {
  var i = 0;
  var l = a.length;
  return function() {
    var e = a[i % l];
    i += 1;
    return e;
  }
}

function dip(a,k) {
  ks = _.flatten(_.times(a.length,()=>[k]));
  return _.zip(a,ks);
}

function sum(a, b) { return a+b; }

//

function impots(revenu) {
  let tr = ([o,s]) => {
    let t = inter(s,o.lo,o.hi);
    let p = o.per;
    let i = (t * p) / 100;
    return {tranche: t, taux:p, du:i}
  };
  let effective = ([o,s]) => s > o.lo;
  let trs = dip(tranches,revenu);
  let r = _.map(_.filter(trs, effective),tr);
  let t = _.map(r, ({tranche,taux,du}) => du);
  let c = t.reduce(sum)
  return {tranches: r, cumul: c};
}

function ratio(a,b) { return (b/a) * 100 }
function dround(a,b) {
  let p = Math.pow(10,b)
  return Math.round(a*p)/p
}

/*
{
  let revenu = 40000;
  let [ts,c] = impots(revenu);
  console.log(revenu + " => " + c + " euros.");
  console.log("detail:", ts)
}
*/

var v = new Vue({
  el: "#main",
  data: {
    revenu: 40000,
  },
  computed: {
    imp: function () { return impots(this.revenu); },
    trs: function () { return impots(this.revenu).tranches; },
    cum: function () { return impots(this.revenu).cumul.toFixed(2); },
    rat: function () {
      let r = this.revenu;
      let i = impots(r);
      return dround(ratio(r,i.cumul),2).toFixed(2);
    },
  }
})

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin :- Impots</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  <h1>Simulation Naive Impots 2019</h1>
  <div id="main">
    <input placeholder="revenu" v-model="revenu">
    <hr>
    <table>
      <thead>
        <tr>
          <td>Tranche</td>
          <td>Somme €</td>
          <td>Taux %</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="t in trs">
          <td>{{ t.tranche }}</td>
          <td>{{ t.du }} €</td>
          <td>{{ t.taux }}%</td>
        </tr>
        <tr class="total">
          <td>Total</td>
          <td>{{ cum }} €</td>
          <td>{{ rat }}%</td>
        </tr>
        <tr class="ratio">
          <td></td>
        </tr>
      </tbody>
    </table>
    <hr>
    <a href="https://impots.dispofi.fr/bareme-impot/calcul-impot-par-tranche">source</a>
  </div>

</body>
</html>

## style.css
#main h3 {
  color: grey;
  background-color: lightgrey;
}

.tranches li {
  background-color: lightgrey;
}

.tranches li:hover {
  background-color: pink;
  cursor: pointer;
}

input { width: 100% }

.total {
  color: blue;
  background-color: lightblue;
}
.ratio {
  color: green;
  background-color: lightgreen;
}

table {
  width: 100%;
  font-family: sans-serif;
  font-size: 10pt;
  border: thin solid red;
}

table td {
  border: thin solid pink;
  text-align: right;
}

thead td {
  font-weight: bold;
}

table tr {
  border-bottom: thin solid gray;
  color: black
}

table tr:hover {
  background: pink;
  color: brown;
}

.cumul {
  color: green;
  background-color: lightgreen;
}

.revenu {
  color: blue;
  background-color: lightblue;
}


	// https://output.jsbin.com/cinefupoda/
	// https://jsbin.com/voneyoraka/

	var tranches = [
	{lo:0, hi:9964, per:0},
	{lo:9964, hi:27519, per:14},
	{lo:27519, hi:73779, per:30},
	{lo:73779, hi:156244, per:41},
	{lo:156244, hi:999999999999, per:45},
	]

	function inter(v,l,h) {
	if (v < l) {
	return v;
	} else if (v > h) {
	return h - l;
	} else {
	return v - l;
	}
	}

	function cycle(a) {
	var i = 0;
	var l = a.length;
	return function() {
	var e = a[i % l];
	i += 1;
	return e;
	}
	}

	function dip(a,k) {
	ks = _.flatten(_.times(a.length,()=>[k]));
	return _.zip(a,ks);
	}

	function sum(a, b) { return a+b; }

	//

	function impots(revenu) {
	let tr = ([o,s]) => {
	let t = inter(s,o.lo,o.hi);
	let p = o.per;
	let i = (t * p) / 100;
	return {tranche: t, taux:p, du:i}
	};
	let effective = ([o,s]) => s > o.lo;
	let trs = dip(tranches,revenu);
	let r = _.map(_.filter(trs, effective),tr);
	let t = _.map(r, ({tranche,taux,du}) => du);
	let c = t.reduce(sum)
	return {tranches: r, cumul: c};
	}

	function ratio(a,b) { return (b/a) * 100 }
	function dround(a,b) {
	let p = Math.pow(10,b)
	return Math.round(a*p)/p
	}

	/*
	{
	let revenu = 40000;
	let [ts,c] = impots(revenu);
	console.log(revenu + " => " + c + " euros.");
	console.log("detail:", ts)
	}
	*/

	var v = new Vue({
	el: "#main",
	data: {
	revenu: 40000,
	},
	computed: {
	imp: function () { return impots(this.revenu); },
	trs: function () { return impots(this.revenu).tranches; },
	cum: function () { return impots(this.revenu).cumul.toFixed(2); },
	rat: function () {
	let r = this.revenu;
	let i = impots(r);
	return dround(ratio(r,i.cumul),2).toFixed(2);
	},
	}
	})
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin :- Impots</title>
	</head>
	<body>
	<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
	<h1>Simulation Naive Impots 2019</h1>
	<div id="main">
	<input placeholder="revenu" v-model="revenu">
	<hr>
	<table>
	<thead>
	<tr>
	<td>Tranche</td>
	<td>Somme €</td>
	<td>Taux %</td>
	</tr>
	</thead>
	<tbody>
	<tr v-for="t in trs">
	<td>{{ t.tranche }}</td>
	<td>{{ t.du }} €</td>
	<td>{{ t.taux }}%</td>
	</tr>
	<tr class="total">
	<td>Total</td>
	<td>{{ cum }} €</td>
	<td>{{ rat }}%</td>
	</tr>
	<tr class="ratio">
	<td></td>
	</tr>
	</tbody>
	</table>
	<hr>
	<a href="https://impots.dispofi.fr/bareme-impot/calcul-impot-par-tranche">source</a>
	</div>

	</body>
	</html>
	#main h3 {
	color: grey;
	background-color: lightgrey;
	}

	.tranches li {
	background-color: lightgrey;
	}

	.tranches li:hover {
	background-color: pink;
	cursor: pointer;
	}

	input { width: 100% }

	.total {
	color: blue;
	background-color: lightblue;
	}
	.ratio {
	color: green;
	background-color: lightgreen;
	}

	table {
	width: 100%;
	font-family: sans-serif;
	font-size: 10pt;
	border: thin solid red;
	}

	table td {
	border: thin solid pink;
	text-align: right;
	}

	thead td {
	font-weight: bold;
	}

	table tr {
	border-bottom: thin solid gray;
	color: black
	}

	table tr:hover {
	background: pink;
	color: brown;
	}

	.cumul {
	color: green;
	background-color: lightgreen;
	}

	.revenu {
	color: blue;
	background-color: lightblue;
	}