-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
179 lines (164 loc) · 6.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<html lang="fr">
<meta charset="utf8">
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function v(val) {
return val.replace(',', '.');
}
function drawChart() {
var C = v(document.getElementById('capital').value) * 1; // capital
var T = v(document.getElementById('taux').value) /100; // taux
var N = v(document.getElementById('duree').value) *12; // nombre de mensualités
var t = T/12;
var M = euros((C*t)/(1-Math.pow((1+t), -N))); // mensualité du prêt principal
var PTZ_C = v(document.getElementById('ptzMontant').value) * 1; // montant du PTZ
if (document.getElementById('enable_ptz').checked != true) {
PTZ_C = 0;
}
var PTZ_N = v(document.getElementById('ptzDuree').value) * 12; // nb mensualités du ptz
var PTZ_O = v(document.getElementById('ptzCarence').value) * 12; // offset du ptz
var PTZ_end = PTZ_N + PTZ_O;
var PTZ_M = euros(PTZ_C / PTZ_N); // au moins, ça c'est facile à calculer. Mensu du PTZ
if (PTZ_M > 0) {
// calcul de la mensualité lissée
M = euros((C*t+PTZ_M*Math.pow(1+t, -PTZ_O)*(1-Math.pow(1+t,-PTZ_N)))/(1-Math.pow((1+t), -N)));
}
if (document.getElementById('calcul_assurance').value == 1) {
var assurance = ((C + PTZ_C) * 0.01 * (v(document.getElementById('assurance').value) || 0))*100/(100*12); // assurance mensuelle payée par mois
} else {
var assurance = parseInt(v(document.getElementById('assurance').value), 10) || 0;
}
var mydata = [['Amortissement', 'Intérêts', 'Assurance']];
var myOtherData = [['Mois', 'PTZ', 'Prêt principal', 'Intérêts cumulés']];
if (PTZ_C > 0) {
mydata[0].unshift('PTZ'); // unset "PTZ" key
}
mydata[0].unshift('Mois');
var interets, capital, amortissement, row, ptz;
var capital = C;
var capitalPtz = PTZ_C;
var interetsCumules = 0.00;
for (var i=0; i < N; i++) {
interets = euros(capital * t);
interetsCumules += interets;
ptz = 0;
if (PTZ_C > 0 && i >= PTZ_O && i < PTZ_end) {
ptz = PTZ_M;
}
amortissement = M - interets - ptz;
capital -= amortissement;
capitalPtz -= ptz;
row = [amortissement, interets, assurance];
if (PTZ_C > 0) {
row.unshift(ptz); // set PTZ key
}
row.unshift(i);
mydata.push(row);
myOtherData.push([i, capitalPtz, capital, interetsCumules]);
}
var data = google.visualization.arrayToDataTable(mydata);
var otherData = google.visualization.arrayToDataTable(myOtherData);
var options = {
title: 'Composition des mensualités en fonction du temps',
isStacked: true
};
var otherOptions = {
title: 'Évolution du capital restant dû',
isStacked: true,
series: {2: {type: 'line'}}
}
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
var otherChart = new google.visualization.AreaChart(document.getElementById('other_chart_div'));
var assuranceCumulee = assurance * N;
var total = interetsCumules + assuranceCumulee;
document.getElementById('total').innerHTML = total.toLocaleString() + ' €';
document.getElementById('totalInterets').innerHTML = interetsCumules.toLocaleString() + ' €';
document.getElementById('totalAssurance').innerHTML = assuranceCumulee.toLocaleString() + ' €';
document.getElementById('nbDeMensualites').innerHTML = N;
document.getElementById('montantMensualite').innerHTML = (M+assurance).toLocaleString() + ' €';
chart.draw(data, options);
otherChart.draw(otherData, otherOptions);
}
function enablePtz() {
var checkbox = document.getElementById('enable_ptz');
console.log(checkbox.checked);
document.body.classList.toggle('with-ptz', checkbox.checked);
}
function euros(number) {
return Math.round(number*100)/100;
}
</script>
<style>
body {
font-family: sans-serif;
margin: 1em;
}
h1 {
border-bottom: 3px double;
padding: .2em 0 .5em;
text-align: center;
}
input {
background: #fff;
padding: .5em;
font-size: 1em;
border: 1px solid #ccc;
width: 5em;
text-align: right;
}
.gros { /* GROS MONTANT ! $OU$ !!! */
width: 9em;
}
button {
border-radius: .7em;
padding: .5em 1.3em;
font-size: 1em;
background: linear-gradient(to bottom, #eee, #bbb)
}
button:hover {
background: linear-gradient(to bottom, #eee, #999)
}
.result {
font-weight: bold;
}
.ptz {
display: none;
}
.with-ptz .ptz {
display: initial;
}
</style>
</head>
<body class="no-ptz">
<h1>Visualisateur d'échéancier de prêt <span class="ptz">avec <abbr title="Prêt à Taux Zéro">PTZ</abbr></span></h1>
<div class="tooltip-right">
<input type="checkbox" id="enable_ptz" onChange="enablePtz();"><label for="enable_ptz">Simuler un prêt à taux zéro</label>
</div>
<div>
<p>J'emprunte <input id="capital" class="gros" type="number"> € au taux de <input id="taux" type="text"> % sur <input id="duree" type="number"> ans.</p>
<p>
Assurance :
<input type="text" id="assurance">
<select name="calcul_assurance" id="calcul_assurance">
<option value="1">% du capital emprunté par an</option>
<option value="2">€ par mois</option>
</select>
</p>
<p class="ptz">J'ai aussi un <abbr title="Prêt à Taux Zéro">PTZ</abbr> d'un montant de <input type="text" class="gros" id="ptzMontant"> € à rembourser en <input type="text" id="ptzDuree"> ans après une carence de <input type="text" id="ptzCarence"> ans.</p>
<p><button onClick="drawChart()">Calculer</button></p>
</div>
<div class="results">
<p><span class="result" id="nbDeMensualites"></span> mensualités de <span class="result" id="montantMensualite"></span></p>
<p>Coût total du prêt : <span class="result" id="total"></span> dont <span class="result" id="totalInterets"></span> d'intérêts et <span class="result" id="totalAssurance"></span> d'assurance.</p>
</div>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id="other_chart_div" style="width: 900px; height: 500px;"></div>
<script>
enablePtz();
</script>
</body>
</html>