phuoc/caotek_monaa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajout courbe evolution du portefeuille

Browse Source
This commit is contained in:
Phuoc
2017-07-28 11:17:19 +02:00
parent 156b5093a5
commit 5e9f9ab970
5 changed files with 153 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
caotek_mesavoirs/templates/home.pt
View File

@@ -5,7 +5,7 @@
<div class="row">
<p>"<i>Investment success depends on asset allocation, diversification, and risk management, not on complexity.</i>" Tweddell and Pierce</p>
<div class="col-md-6">
<div class="col-md-5">
<table id="categories_list" class="table table-condensed table-bordered">
<thead>
<tr>
@@ -29,12 +29,22 @@
</table>
</div>
</div>
<div class="row">
<div class="col-md-6">
<!-- graphique donut cible -->
<div id="donutchart_cible" style="width: 100%; height: 500px;"></div>
</div>
<div class="col-md-6">
<!-- graphique donut actuel -->
<div id="donutchart_actuel" style="width: 100%; height: 500px;"></div>
</div>
</div>
<div class="row">
<h3>+ Diversification à coût minimal</h3>
<p>"<i>Diversification is not determined by the number of securities held.</i>"
<a href="http://www.etf.com/sections/index-investor-corner" target="_blank">Larry Swedroe</a></p>
<div class="col-md-8">
<table id="actifs_list" class="table table-condensed table-bordered">
<thead>
<tr>
@@ -45,7 +55,8 @@
<th class="text-right">% de +/-</th>
<th class="text-right">% PF</th>
<th class="text-right">TER</th>
<th class="text-right">Rdt</th>
<th class="text-right">% Rdt</th>
<th class="text-right">Rdt brut</th>
</tr>
</thead>
<tbody>
@@ -60,23 +71,75 @@
<td class="text-right">${ligne.pc_allocation} %</td>
<td class="text-right">${layout.to_percent(ligne.ter,2)}</td>
<td class="text-right">${layout.to_percent(ligne.rdt,1)}</td>
<td class="text-right">${u'%.0f €' % (ligne.valeur * ligne.rdt / 100)}</td>
</tr>
<tr>
<td colspan="2"></td>
<td class="text-right">${layout.to_euro(total_valeur)}</td>
<td class="text-right">${layout.to_euro(total_pv)}</td>
<td class="text-right">${layout.to_percent(total_pc_value,1)}</td>
<td class="text-right">100 %</td>
<td colspan="2"></td>
</tr>
<tr>
<td class="text-right" colspan="2"><b>Total</b></td>
<td class="text-right"><b>${layout.to_euro(total_valeur)}</b></td>
<td class="text-right"><b>${layout.to_euro(total_pv)}</b></td>
<td class="text-right"><b>${layout.to_percent(total_pc_value, 1)}</b></td>
<td class="text-right"><b>100.0 %</b></td>
<td></td>
<td></td>
<td class="text-right"><b>${total_rdt} €</b></td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md-6">
<!-- graphique evolution -->
<div id="curve_chart" style="width: 200%; height: 500px;"></div>
</div>
<div class="col-md-6">
</div>
<br />
<br />
<br />
</div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
var dataSet_cible = ${donut_cible};
var dataSet_actuel = ${donut_actuel};
var dataSet_evoln = ${courbe_evoln};
function drawChart() {
var data_cible = google.visualization.arrayToDataTable(dataSet_cible);
var data_actuel = google.visualization.arrayToDataTable(dataSet_actuel);
var data_evoln = google.visualization.arrayToDataTable(dataSet_evoln);
var options_cible = {
title: 'Allocation cible',
pieHole: 0.4,
slices: {
0: {color: 'SteelBlue'}, 1: {color: 'LightSteelBlue'},
2: {color: 'Maroon'}, 3: {color: 'Brown'},
5: {offset: 0.2, color: 'DarkGreen'}, 6: {offset: 0.3, color: 'Green'},
},
};
var options_actuel = {
title: 'Allocation actuelle',
pieHole: 0.4,
slices: {
0: {color: 'SteelBlue'}, 1: {color: 'LightSteelBlue'},
2: {color: 'Maroon'}, 3: {color: 'Brown'},
5: {offset: 0.2, color: 'DarkGreen'}, 6: {offset: 0.3, color: 'Green'},
},
};
var options_evoln = {
title: 'Evolution du portefeuille VS Indice',
curveType: 'function',
legend: { position: 'top' }
};
var chart_cible = new google.visualization.PieChart(document.getElementById('donutchart_cible'));
chart_cible.draw(data_cible, options_cible);
var chart_actuel = new google.visualization.PieChart(document.getElementById('donutchart_actuel'));
chart_actuel.draw(data_actuel, options_actuel);
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data_evoln, options_evoln);
}
</script>
</div><!-- content -->
</metal:block>