246 lines
8.9 KiB
Django/Jinja
246 lines
8.9 KiB
Django/Jinja
{% extends "cao_blogr:templates/layout.jinja2" %}
|
|
|
|
{% block content %}
|
|
|
|
<p>
|
|
<a href="allocation_edit/0">[ Nouvelle classe ]</a>
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table 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>
|
|
{% for item in items %}
|
|
<tr>
|
|
<td class="{{ item.bg_color }}"><a href="allocation_edit/{{ item.no_cat }}">{{ item.classe }}</a></td>
|
|
<td class="text-right">{{ item.pc_cible }} %</td>
|
|
<td class="text-right">{{ '{0:0.1f}'.format(item.pc_atteint) }} %</td>
|
|
{% if (item.pc_atteint - item.pc_cible) >= 0 %}
|
|
<td class="text-right" style="color: green;">{{ '{0:0.1f}'.format(item.pc_ecart) }}</td>
|
|
{% else %}
|
|
<td class="text-right" style="color: red;">{{ '{0:0.1f}'.format(item.pc_ecart) }}</td>
|
|
{% endif %}
|
|
<td class="text-right">{{ '{0:0,.0f} €'.format(item.valeur).replace(',',' ') }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</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">{{ '{0:0.2f} €'.format(total_valeur).replace(',',' ') }}</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Plus value</td>
|
|
<td class="text-right">{{ '{0:0,.0f} €'.format(total_pv).replace(',',' ') }}</td>
|
|
<td class="text-right">{{ '{0:0.1f} %'.format(total_pc_value) }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Safe Withdrawal Rate</td>
|
|
<td class="text-right text-success"><b>{{ '{0:0,.0f} €'.format(swr_amount) }}</b></td>
|
|
<td class="text-right text-success"><b>{{ '{0:0.1f} %'.format(swr_rate) }}</b></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>
|
|
<b>Allocation globale</b> : 70% actions + 30% obligations<br />
|
|
[Inspirée du
|
|
<a href="https://www.nbim.no/en/the-fund/how-we-invest/benchmark-index/" target="_blank">Fond souverain Norvégien</a>]<br />
|
|
<b>Allocation actions</b> : 80% Monde (56%) + 20% Croissance (14%)<br />
|
|
</p>
|
|
</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">
|
|
<h2>Mes actifs</h2>
|
|
<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">
|
|
<button id="updateButton" class="btn btn-primary" type="submit" name="form.submitted">
|
|
<i class="glyphicon glyphicon-refresh"></i> MAJ du portefeuille</button>
|
|
<a href="#" data-toggle="modal" data-target="#choixTypeActif">[ Nouvel actif ]</a>
|
|
<a href="/histo_list">[ Historique ]</a>
|
|
<a href="/blog/2/mouvements-du-portefeuille">[ Mouvements ]</a>
|
|
</div>
|
|
</form>
|
|
|
|
<table 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">% TER</th>
|
|
<th class="text-right">% PF</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for ligne in actifs %}
|
|
<tr>
|
|
<td class="{{ ligne.Allocation.bg_color }}">{{ ligne.Allocation.classe }}</td>
|
|
{% if ligne.Allocation.type=='ACTION' %}
|
|
<td><a href="actif_edit/{{ ligne.Actifs.no_id }}">{{ ligne.Actifs.libelle }}</a></td>
|
|
{% else %}
|
|
<td><a href="actif2_edit/{{ ligne.Actifs.no_id }}">{{ ligne.Actifs.libelle }}</a></td>
|
|
{% endif %}
|
|
{% if ligne.Actifs.devise=='EUR' %}
|
|
<td class="text-right">{{ '{0:0.2f} €'.format(ligne.Actifs.cours) }}</td>
|
|
{% else %}
|
|
<td class="text-right">{{ '{0:0.2f} $'.format(ligne.Actifs.cours) }}</td>
|
|
{% endif %}
|
|
<td class="text-right">{{ ligne.Actifs.nombre }}</td>
|
|
<td class="text-right">{{ '{0:0,.2f} €'.format(ligne.Actifs.valeur).replace(',',' ') }}</td>
|
|
{% if ligne.Actifs.plus_value >= 0 %}
|
|
<td class="text-right" style="color: green;">{{ '{0:0,.2f} €'.format(ligne.Actifs.plus_value).replace(',',' ') }}</td>
|
|
<td class="text-right" style="color: green;">{{ '{0:0.1f}'.format(ligne.Actifs.pc_plusvalue) }}</td>
|
|
{% else %}
|
|
<td class="text-right" style="color: red;">{{ '{0:0,.2f} €'.format(ligne.Actifs.plus_value).replace(',',' ') }}</td>
|
|
<td class="text-right" style="color: red;">{{ '{0:0.1f}'.format(ligne.Actifs.pc_plusvalue) }}</td>
|
|
{% endif %}
|
|
<td class="text-right">{{ '{0:0.1f}'.format(ligne.Actifs.ter) }}</td>
|
|
<td class="text-right">{{ '{0:0.1f}'.format(ligne.Actifs.pc_allocation) }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
|
|
<tr>
|
|
<td class="text-right" colspan="4"><b>Total au {{ maj_pf_le.strftime('%d/%m/%Y') }}</b></td>
|
|
<td>{{ '{0:0,.2f} €'.format(total_valeur).replace(',',' ') }}</td>
|
|
{% if total_pv >= 0 %}
|
|
<td class="text-right" style="color: green;">{{ '{0:0,.2f} €'.format(total_pv).replace(',',' ') }}</td>
|
|
<td class="text-right" style="color: green;">{{ '{0:0.1f}'.format(total_pc_value) }}</td>
|
|
{% else %}
|
|
<td class="text-right" style="color: red;">{{ '{0:0,.2f} €'.format(total_pv).replace(',',' ') }}</td>
|
|
<td class="text-right" style="color: red;">{{ '{0:0.1f}'.format(total_pc_value) }}</td>
|
|
{% endif %}
|
|
<td></td>
|
|
<td class="text-right"><b>100.0</b></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="row">
|
|
<div>
|
|
<!-- graphique evolution -->
|
|
<div id="curve_chart" style="width: 100%; height: 500px;"></div>
|
|
</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</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
Voulez-vous créer un actif de type <br />
|
|
<br />
|
|
<a href="/actif_edit/0" class="btn btn-primary" role="button">
|
|
ACTION</a> ou
|
|
<a href="/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 | safe }};
|
|
var dataSet_actuel = {{ donut_actuel | safe }};
|
|
var dataSet_evoln = {{ courbe_evoln | safe }};
|
|
|
|
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 -->
|
|
</div>
|
|
|
|
{% endblock %}
|