added portfolio view
This commit is contained in:
60
cao_blogr/templates/portfolio/allocation_edit.jinja2
Normal file
60
cao_blogr/templates/portfolio/allocation_edit.jinja2
Normal file
@@ -0,0 +1,60 @@
|
||||
{% extends "cao_blogr:templates/layout.jinja2" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<form action="{{ url }}" method="post" class="form">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="required-field">{{ form.classe.label }}</label>
|
||||
{{ form.classe(class_='form-control') }}
|
||||
</div>
|
||||
|
||||
{% for error in form.pc_cible.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
<div class="form-group">
|
||||
<label class="required-field" for="tag">{{form.pc_cible.label}}</label>
|
||||
{{form.pc_cible(class_='form-control')}}
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="form-group">
|
||||
<a class="btn btn-default" href="{{ request.route_url('portfolio') }}">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span> Retour</a>
|
||||
<button class="btn btn-primary" type="submit" name="form.submitted">
|
||||
<span class="glyphicon glyphicon-ok"></span> Enregistrer</button>
|
||||
{% if form.no_cat.data %}
|
||||
<button class="btn btn-danger" type="button" data-toggle="modal" data-target="#confirmDelete">
|
||||
<span class="glyphicon glyphicon-remove"></span> Supprimer</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
<!-- Modal : Confirmation SUPRESSION -->
|
||||
<div id="confirmDelete" class="modal" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title">Supprimer cette allocation</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- The form is placed inside the body of modal -->
|
||||
<p>Etes-vous certain(e) de vouloir supprimer la ligne <b>{{ form.classe.data }}</b> ?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="form-group">
|
||||
<div class="text-center">
|
||||
<form id="confirmForm" method="post">
|
||||
<button type="submit" class="btn btn-danger" name="form.deleted">Supprimer</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
@@ -1,67 +1,59 @@
|
||||
<div metal:use-macro="load: ../global_layout.pt">
|
||||
<div metal:fill-slot="content">
|
||||
{% extends "cao_blogr:templates/layout.jinja2" %}
|
||||
|
||||
<div tal:condition="message" tal:content="message" class="alert alert-danger" />
|
||||
<br />
|
||||
<div class="row">
|
||||
<form id="histo_edit-form" class="form-horizontal" action="${url}" method="post" tal:condition="item"
|
||||
data-fv-framework="bootstrap"
|
||||
data-fv-icon-valid="glyphicon glyphicon-ok"
|
||||
data-fv-icon-invalid="glyphicon glyphicon-remove"
|
||||
data-fv-icon-validating="glyphicon glyphicon-refresh">
|
||||
{% block content %}
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-xs-2 control-label">Date</label>
|
||||
<div class="col-xs-2">
|
||||
<p class="form-control-static"><b>${item.date.strftime('%d-%m-%Y')}</b></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-2" for="mvt_cash">Montant cash</label>
|
||||
<div class="col-xs-2">
|
||||
<div class="input-group">
|
||||
<div class="input-group-addon">€</div>
|
||||
<input class="form-control" type="text" id="mvt_cash" name="mvt_cash" value="${item.mvt_cash}"
|
||||
data-fv-numeric="true"
|
||||
data-fv-numeric-message="Le montant doit être composé de chiffres ou de ., +, -" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-xs-2 control-label">Nombre part</label>
|
||||
<div class="col-xs-2">
|
||||
<p class="form-control-static"><b>${item.nb_part}</b></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div class="form-group">
|
||||
<div class="col-xs-offset-2 col-xs-10">
|
||||
<div class="form-group">
|
||||
<a class="btn btn-default" href="${request.application_url}/histo_list">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span> Retour</a>
|
||||
<button class="btn btn-primary" type="submit" name="form.submitted">
|
||||
<span class="glyphicon glyphicon-ok"></span> Enregistrer</button>
|
||||
<button class="btn btn-warning" type="submit" name="form.deleted"
|
||||
tal:condition="item.no_id != 0">
|
||||
<span class="glyphicon glyphicon-remove"></span> Supprimer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form action="{{ url }}" method="post" class="form">
|
||||
|
||||
<br />
|
||||
<br />
|
||||
</div> <!-- row -->
|
||||
<div class="form-group">
|
||||
<p class="form-control-static">Date : <b>{{ item.date.strftime('%d-%m-%Y') }}</b></p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#histo_edit-form').formValidation();
|
||||
$('form input').on('keypress', function(e) {
|
||||
return e.which !== 13;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% for error in form.mvt_cash.errors %}
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endfor %}
|
||||
<div class="form-group">
|
||||
<label class="required-field" for="tag">{{form.mvt_cash.label}}</label>
|
||||
{{form.mvt_cash(class_='form-control')}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="form-group">
|
||||
<a class="btn btn-default" href="{{ request.route_url('histo_list') }}">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span> Retour</a>
|
||||
<button class="btn btn-primary" type="submit" name="form.submitted">
|
||||
<span class="glyphicon glyphicon-ok"></span> Enregistrer</button>
|
||||
{% if form.no_id.data %}
|
||||
<button class="btn btn-danger" type="button" data-toggle="modal" data-target="#confirmDelete">
|
||||
<span class="glyphicon glyphicon-remove"></span> Supprimer</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
<!-- Modal : Confirmation SUPRESSION -->
|
||||
<div id="confirmDelete" class="modal" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h4 class="modal-title">Supprimer cet historique</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- The form is placed inside the body of modal -->
|
||||
<p>Etes-vous certain(e) de vouloir supprimer la ligne <b>{{ form.no_id.data }}</b> ?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="form-group">
|
||||
<div class="text-center">
|
||||
<form id="confirmForm" method="post">
|
||||
<button type="submit" class="btn btn-danger" name="form.deleted">Supprimer</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -15,19 +15,19 @@
|
||||
<th align='right'>Nb Part</th>
|
||||
<th align='right'>Valeur Part</th>
|
||||
<th align='right'>Cours ref</th>
|
||||
<th align='right'>Valeur Part ref</th>
|
||||
<th align='right'>Nb Part ref</th>
|
||||
<th align='center'>No Id</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% for item in items %}
|
||||
<tr>
|
||||
<td>{{ item.date.strftime('%d/%m/%Y') }}</td>
|
||||
<td align='right'>{{ item.mvt_cash }} €</td>
|
||||
<td align='right'>{{ item.valeur_pf }}</td>
|
||||
<td align='right'>{{ item.nb_part }}</td>
|
||||
<td align='right'>{{ item.val_part }}</td>
|
||||
<td align='right'>{{ item.nb_part_ref }}</td>
|
||||
<td align='right'>{{ item.val_part_ref }}</td>
|
||||
<td align='right'>{{ '{0:0.2f} €'.format(item.mvt_cash) }}</td>
|
||||
<td align='right'>{{ '{0:0.2f} €'.format(item.valeur_pf) }}</td>
|
||||
<td align='right'>{{ '{0:0.2f}'.format(item.nb_part) }}</td>
|
||||
<td align='right'>{{ '{0:0.2f} €'.format(item.val_part) }}</td>
|
||||
<td align='right'>{{ '{0:0.2f} €'.format(item.cours_ref) }}</td>
|
||||
<td align='right'>{{ '{0:0.2f}'.format(item.val_part_ref) }}</td>
|
||||
<td align='center'>
|
||||
<a href="{{ request.route_url('histo_edit', no_id=item.no_id) }}">{{ item.no_id }}</a>
|
||||
</td>
|
||||
@@ -37,6 +37,7 @@
|
||||
<br />
|
||||
<br />
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
249
cao_blogr/templates/portfolio/portfolio.jinja2
Normal file
249
cao_blogr/templates/portfolio/portfolio.jinja2
Normal file
@@ -0,0 +1,249 @@
|
||||
{% extends "cao_blogr:templates/layout.jinja2" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<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 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 }}">{{ item.classe }}</td>
|
||||
<td class="text-right"><a href="allocation_edit/{{ item.no_cat }}">{{ item.pc_cible }} %</a></td>
|
||||
<td class="text-right">{{ item.pc_atteint }}</td>
|
||||
{% if (item.pc_atteint - item.pc_cible) >= 0 %}
|
||||
<td class="text-right" style="color: green;">{{ item.pc_atteint }}</td>
|
||||
{% else %}
|
||||
<td class="text-right" style="color: red;">{{ item.pc_atteint }}</td>
|
||||
{% endif %}
|
||||
<td class="text-right">{{ '{0:0.2f} €'.format(item.valeur) }}</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) }}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Plus value</td>
|
||||
<td class="text-right">{{ '{0:0.2f} €'.format(total_pv) }}</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.1f} %'.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">
|
||||
<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">
|
||||
<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>
|
||||
<a href="/histo_list" class="btn btn-default" role="button">
|
||||
<span class="glyphicon glyphicon-stats"></span> Historique</a>
|
||||
<a href="/blog/2/mouvements-du-portefeuille" class="btn btn-default" role="button">
|
||||
<span class="glyphicon glyphicon-folder-close"></span> Mouvements</a>
|
||||
</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">% TER</th>
|
||||
<th class="text-right">% PF</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for ligne in actifs %}
|
||||
<tr>
|
||||
<td class="{{ ligne.bg_color }}">{{ ligne.classe }}</td>
|
||||
{% if ligne.type=='ACTION' %}
|
||||
<td><a href="actif_edit/{{ ligne.no_id }}">{{ ligne.libelle }}</a></td>
|
||||
{% else %}
|
||||
<td><a href="actif2_edit/{{ ligne.no_id }}">{{ ligne.libelle }}</a></td>
|
||||
{% endif %}
|
||||
{% if ligne.devise=='EUR' %}
|
||||
<td>{{ '{0:0.2f} €'.format(ligne.cours) }}</td>
|
||||
{% else %}
|
||||
<td>{{ '{0:0.2f} $'.format(ligne.cours) }}</td>
|
||||
{% endif %}
|
||||
<td class="text-right">{{ ligne.nombre }}</td>
|
||||
<td class="text-right">{{ '{0:0.2f} €'.format(ligne.valeur) }}</td>
|
||||
{% if ligne.plus_value >= 0 %}
|
||||
<td class="text-right" style="color: green;">{{ '{0:0.2f} €'.format(ligne.plus_value) }}</td>
|
||||
<td class="text-right" style="color: green;">{{ '{0:0.1f}'.format(ligne.pc_plusvalue) }}</td>
|
||||
{% else %}
|
||||
<td class="text-right" style="color: red;">{{ '{0:0.2f} €'.format(ligne.plus_value) }}</td>
|
||||
<td class="text-right" style="color: red;">{{ '{0:0.1f}'.format(ligne.pc_plusvalue) }}</td>
|
||||
{% endif %}
|
||||
<td class="text-right">{{ '{0:0.1f}'.format(ligne.ter) }}</td>
|
||||
<td class="text-right">{{ '{0:0.1f}'.format(ligne.pc_allocation) }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
<tr>
|
||||
<td class="text-right" colspan="4"><b>Total</b></td>
|
||||
<td>{{ '{0:0.2f} €'.format(total_valeur) }}</td>
|
||||
{% if total_pv >= 0 %}
|
||||
<td class="text-right" style="color: green;">{{ '{0:0.1f}'.format(total_pv) }}</td>
|
||||
<td class="text-right" style="color: green;">{{ '{0:0.2f} €'.format(total_pc_value) }}</td>
|
||||
{% else %}
|
||||
<td class="text-right" style="color: red;">{{ '{0:0.1f}'.format(total_pv) }}</td>
|
||||
<td class="text-right" style="color: red;">{{ '{0:0.2f} €'.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 d'actif à créer</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 %}
|
||||
Reference in New Issue
Block a user