227 lines
8.7 KiB
XML
227 lines
8.7 KiB
XML
<metal:block use-macro="main_template">
|
|
<div metal:fill-slot="content">
|
|
|
|
<div tal:condition="message" tal:content="message" class="alert alert-success" />
|
|
|
|
<p>
|
|
<a href="allocation_edit/0" class="btn btn-success" role="button">
|
|
<span class="glyphicon glyphicon-plus"></span> Nouvelle classe</a>
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table id="categories_list" class="table table-condensed table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Classe</th>
|
|
<th class="text-right">% cible</th>
|
|
<th class="text-right">% actuel</th>
|
|
<th class="text-right">Ecart</th>
|
|
<th class="text-right">Valeur</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr tal:repeat="item items">
|
|
<td class="${item.bg_color}">${item.classe}</td>
|
|
<td class="text-right"><a href="allocation_edit/${item.no_cat}">${item.pc_cible} %</a></td>
|
|
<td class="text-right">${layout.to_percent(item.pc_atteint,1)}</td>
|
|
<td tal:condition="(item.pc_atteint - item.pc_cible)>=0" class="text-right" style="color: green;">${layout.to_percent(item.pc_atteint - item.pc_cible,1)}</td>
|
|
<td tal:condition="(item.pc_atteint - item.pc_cible) <0" class="text-right" style="color: red;">${layout.to_percent(item.pc_atteint - item.pc_cible,1)}</td>
|
|
<td class="text-right">${layout.to_euro(item.valeur)}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>Allocation inspirée du Lazy portfolio du <a href="https://portfoliocharts.com/portfolio/no-brainer-portfolio/" target="_blank">
|
|
Dr. Bernstein's No Brainer</a>.</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table id="portfolio" class="table table-condensed table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Portefeuille</th>
|
|
<th class="text-right">Montant</th>
|
|
<th class="text-right">%</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Valorisation</td>
|
|
<td class="text-right">${layout.to_euro(member.pf_valeur)}</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Plus value</td>
|
|
<td class="text-right">${layout.to_euro(member.pf_plusvalue)}</td>
|
|
<td class="text-right">${layout.to_percent(member.pf_plusvalue_pc, 1)}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Rendemant brut</td>
|
|
<td class="text-right">${layout.to_euro(member.pf_rendement)}</td>
|
|
<td class="text-right">${layout.to_percent(member.pf_rdt_pc, 1)}</td>
|
|
</tr>
|
|
</tbody>
|
|
</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>Mes actifs</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>
|
|
|
|
<form id="actif_list-form" action="${url}" method="post">
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
<button id="updateButton" class="btn btn-primary" type="submit" name="form.submitted">
|
|
<i class="glyphicon glyphicon-refresh"></i> MAJ du portefeuille</button>
|
|
<a href="#" class="btn btn-success" role="button"
|
|
data-toggle="modal" data-target="#choixTypeActif"><span class="glyphicon glyphicon-plus"></span> Nouvel actif</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<table id="actifs_list" class="table table-condensed table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Classe</th>
|
|
<th>Libellé</th>
|
|
<th class="text-right">Cours</th>
|
|
<th class="text-right">Nb</th>
|
|
<th class="text-right">Valeur</th>
|
|
<th class="text-right">+/- Valeur</th>
|
|
<th class="text-right">% de +/-</th>
|
|
<th class="text-right">Rdt brut</th>
|
|
<th class="text-right">% Rdt</th>
|
|
<th class="text-right">% PF</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr tal:repeat="ligne actifs">
|
|
<td class="${ligne.bg_color}">${ligne.classe}</td>
|
|
<td tal:condition="ligne.type=='ACTION'"><a href="actif_edit/${ligne.no_id}">${ligne.libelle}</a></td>
|
|
<td tal:condition="ligne.type<>'ACTION'"><a href="actif2_edit/${ligne.no_id}">${ligne.libelle}</a></td>
|
|
<td class="text-right">${layout.to_euro(ligne.cours)}</td>
|
|
<td class="text-right">${ligne.nombre}</td>
|
|
<td class="text-right">${layout.to_euro(ligne.valeur)}</td>
|
|
<td tal:condition="ligne.plus_value>=0" class="text-right" style="color: green;">${layout.to_euro(ligne.plus_value)}</td>
|
|
<td tal:condition="ligne.plus_value <0" class="text-right" style="color: red;">${layout.to_euro(ligne.plus_value)}</td>
|
|
<td tal:condition="ligne.pc_plusvalue>=0" class="text-right" style="color: green;">${layout.to_percent(ligne.pc_plusvalue,1)}</td>
|
|
<td tal:condition="ligne.pc_plusvalue <0" class="text-right" style="color: red;">${layout.to_percent(ligne.pc_plusvalue,1)}</td>
|
|
<td class="text-right">${u'%.0f €' % (ligne.rendement)}</td>
|
|
<td class="text-right">${layout.to_percent(ligne.pc_rdt,1)}</td>
|
|
<td class="text-right">${ligne.pc_allocation} %</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-right" colspan="4"><b>Total</b></td>
|
|
<td tal:condition="total_valeur>=0" class="text-right" style="color: green;"><b>${layout.to_euro(total_valeur)}</b></td>
|
|
<td tal:condition="total_valeur <0" class="text-right" style="color: red;"><b>${layout.to_euro(total_valeur)}</b></td>
|
|
<td tal:condition="total_pv>=0" class="text-right" style="color: green;"><b>${layout.to_euro(total_pv)}</b></td>
|
|
<td tal:condition="total_pv <0" class="text-right" style="color: red;"><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>${total_rdt} €</b></td>
|
|
<td></td>
|
|
<td class="text-right"><b>100.0 %</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>
|
|
</div>
|
|
|
|
<!-- MODAL POPUP : Affichage de la FAQ -->
|
|
<div class="modal fade" id="choixTypeActif" tabindex="-1" role="dialog" aria-labelledby="choixTypeActif" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove"></span></button>
|
|
<h4 class="modal-title" id="choixTypeActif">Choix du type d'actif à créer</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
Voulez-vous créer un actif de type <br />
|
|
<br />
|
|
<a href="${request.application_url}/actif_edit/0" class="btn btn-primary" role="button">
|
|
ACTION</a> ou
|
|
<a href="${request.application_url}/actif2_edit/0" class="btn btn-warning" role="button">
|
|
AUTRE</a>
|
|
<br />
|
|
<br />
|
|
<p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
$('#updateButton').on('click', function(){
|
|
$('i.gly-spin').removeClass('gly-spin');
|
|
$('i').addClass('gly-spin');
|
|
});
|
|
</script>
|
|
|
|
<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 fond Carmignac Investissement',
|
|
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>
|
|
|