agumonkey/impots-v2.js

## impots-v2.js
var defaut = {
  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}
  ]
}

// prelude

let ratio = (a,b) => (b/a)*100
let sum = (a,b) => a+b
let percent = x => x/100

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

function imp(r,ts) {
  let up = ({lo:l,hi:h,per:p}) => {
    let d = inter(r,l,h)
    let t = ratio(r,d)
    let s = d*p/100
    let o = { lo:l, hi:h, per:p, du:d, ra:t, sum:s }
    return o
  }
  return _.chain(ts)
    .takeWhile(({lo:l}) => l <= r)
    .map(up)
    .value()
}

let ref = (r,f,m) => f ? r-(r*percent(m)) : r

// main

var app = new Vue({
  el: "#app",
  data: {
    revenu: 40000,
    frais: true,
    reduction: 10,
  },
  computed: {
    ref: function () {
      return ref(this.revenu, this.frais, this.reduction)
    },
    imp: function () {
      return imp(this.revenu, defaut.tranches);
    },
    tot: function () {
      let r = ref(this.revenu, this.frais, this.reduction)
      return imp(r, defaut.tranches)
        .map(({sum:s}) => s)
        .reduce(sum)
    }
  }
})

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</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>

  <div class="container" id="app">
    <div class="form-group">
      <label class="form-label" for="revenu">Revenu</label>
      <input id="revenu"
             class="form-control form-control-sm"
             placeholder="revenu"
             v-model="revenu">
    </div>
    <div class="form-group form-check">
      <input class="form-check-input" id="frais" type="checkbox" v-model="frais">
      <label class="form-check-label" for="frais">-10% de frais</label>
    </div>
    <hr>
    <table class="table-sm table-borderless">
      <caption>impots par tranche</caption>
      <thead class="thead-light">
        <tr>
          <td>tranche</td>
          <td>base</td>
          <td>taux</td>
          <td>montant</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="t in imp">
          <td>{{ t.hi }}</td>
          <td>{{ t.du }}</td>
          <td>{{ t.per }}</td>
          <td>€{{ t.sum.toFixed(2) }}</td>
        </tr>
        <tfoot>
          <tr>
            <td>reference</td>
            <td>{{ ref }}</td>
            <td>total</td>
            <td>€{{ tot }}</td>
          </tr>
        </tfoot>
      </tbody>
    </table>
    <hr>
    <!--div class="alert alert-primary">impots par tranche</div-->
  </div>
  <footer><code>(current-year) &copy; (user)</code></footer>

</body>
</html>

## style.css
table { width: 100% }

thead {
  font-weight: bold;
  background-color: ghostwhite;
  border-bottom: thin solid gainsboro;
}

tfoot {
  color: crimson;
  border-top: thin solid gainsboro;
}

tr:hover {
  background-color: ghostwhite;
}

td {
  text-align: right;
}

footer {
  text-align: center;
}

code {
  display: block;
  width: 100%;
  color: white;
  background: #000;
}
	var defaut = {
	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}
	]
	}

	// prelude

	let ratio = (a,b) => (b/a)*100
	let sum = (a,b) => a+b
	let percent = x => x/100

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

	function imp(r,ts) {
	let up = ({lo:l,hi:h,per:p}) => {
	let d = inter(r,l,h)
	let t = ratio(r,d)
	let s = d*p/100
	let o = { lo:l, hi:h, per:p, du:d, ra:t, sum:s }
	return o
	}
	return _.chain(ts)
	.takeWhile(({lo:l}) => l <= r)
	.map(up)
	.value()
	}

	let ref = (r,f,m) => f ? r-(r*percent(m)) : r

	// main

	var app = new Vue({
	el: "#app",
	data: {
	revenu: 40000,
	frais: true,
	reduction: 10,
	},
	computed: {
	ref: function () {
	return ref(this.revenu, this.frais, this.reduction)
	},
	imp: function () {
	return imp(this.revenu, defaut.tranches);
	},
	tot: function () {
	let r = ref(this.revenu, this.frais, this.reduction)
	return imp(r, defaut.tranches)
	.map(({sum:s}) => s)
	.reduce(sum)
	}
	}
	})
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
	</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>

	<div class="container" id="app">
	<div class="form-group">
	<label class="form-label" for="revenu">Revenu</label>
	<input id="revenu"
	class="form-control form-control-sm"
	placeholder="revenu"
	v-model="revenu">
	</div>
	<div class="form-group form-check">
	<input class="form-check-input" id="frais" type="checkbox" v-model="frais">
	<label class="form-check-label" for="frais">-10% de frais</label>
	</div>
	<hr>
	<table class="table-sm table-borderless">
	<caption>impots par tranche</caption>
	<thead class="thead-light">
	<tr>
	<td>tranche</td>
	<td>base</td>
	<td>taux</td>
	<td>montant</td>
	</tr>
	</thead>
	<tbody>
	<tr v-for="t in imp">
	<td>{{ t.hi }}</td>
	<td>{{ t.du }}</td>
	<td>{{ t.per }}</td>
	<td>€{{ t.sum.toFixed(2) }}</td>
	</tr>
	<tfoot>
	<tr>
	<td>reference</td>
	<td>{{ ref }}</td>
	<td>total</td>
	<td>€{{ tot }}</td>
	</tr>
	</tfoot>
	</tbody>
	</table>
	<hr>
	<!--div class="alert alert-primary">impots par tranche</div-->
	</div>
	<footer><code>(current-year) © (user)</code></footer>

	</body>
	</html>
	table { width: 100% }

	thead {
	font-weight: bold;
	background-color: ghostwhite;
	border-bottom: thin solid gainsboro;
	}

	tfoot {
	color: crimson;
	border-top: thin solid gainsboro;
	}

	tr:hover {
	background-color: ghostwhite;
	}

	td {
	text-align: right;
	}

	footer {
	text-align: center;
	}

	code {
	display: block;
	width: 100%;
	color: white;
	background: #000;
	}