ajout courbe evolution du portefeuille

This commit is contained in:
2017-07-28 11:17:19 +02:00
parent 156b5093a5
commit 5e9f9ab970
5 changed files with 153 additions and 21 deletions

View File

@@ -41,15 +41,15 @@
<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)}</td>
<td tal:condition="ligne.pc_plusvalue <0" class="text-right" style="color: red;">${layout.to_percent(ligne.pc_plusvalue)}</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">${ligne.pc_allocation} %</td>
</tr>
<tr>
<td class="text-right" colspan="6"><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)}</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>
</tr>
</tbody>

View File

@@ -4,7 +4,7 @@
<div tal:condition="message" tal:content="message" class="alert alert-danger" />
<div class="row">
<div class="col-md-6">
<div class="col-md-5">
<p>
<a href="allocation_edit/0" class="btn btn-success" role="button">
<span class="glyphicon glyphicon-plus"></span> Nouvelle classe</a>
@@ -31,7 +31,36 @@
</tbody>
</table>
</div>
<div class="col-md-7">
<!-- graphique donut -->
<div id="donutchart" style="width: 100%; height: 500px;"></div>
</div>
</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 = ${donut_data};
function drawChart() {
var data = google.visualization.arrayToDataTable(dataSet);
var options = {
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 chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
</script>
</div><!-- content -->
</metal:block>

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>
@@ -30,11 +30,21 @@
</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>
<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>
<br />
<br />
<br />
<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>
<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>

View File

@@ -207,16 +207,25 @@ def allocation_list(request):
items = get_allocation(request, '0')
# calculer % total
total = 0
donut_data=[]
donut_data.append(('Allocation', 'Pourcent'))
for item in items:
# totaliser les pourcentages
total += item.pc_cible
# construire la liste pour donut
d = (item.classe, item.pc_cible)
donut_data.append(d)
if total <> 100:
message = u'Attention, le total de votre répartition cible ne fait pas 100%.'
return {
'page_title': u"Allocation d'actifs",
'page_title': u"Allocation cible",
'message': message,
'items': items,
'total': total,
'donut_data': json.dumps(donut_data),
}
@view_config(route_name='allocation_edit', renderer='../templates/actifs/allocation_edit.pt', permission='view')
@@ -273,9 +282,9 @@ def histo_list(request):
# lire l historique
items = get_histo_by_date(request, '0')
# construire la liste
liste=[]
for item in items:
# construire la liste pour datatable
d = (item.date.strftime('%d/%m/%Y'), to_euro(item.mvt_cash), to_euro(item.valeur_pf), to_euro(item.nb_part), to_euro(item.val_part), to_euro(item.nb_part_ref), to_euro(item.val_part_ref))
liste.append(d)

View File

@@ -29,6 +29,7 @@ from ..models.default import *
from ..models.actifs import (
get_actifs,
get_allocation,
get_histo_by_date,
)
from ..models.members import (
get_member_by_email,
@@ -83,24 +84,54 @@ def home(request):
# lire les categories
items = get_allocation(request, '0')
# construire la liste pour donut
donut_cible=[]
donut_cible.append(('Allocation cible', 'Pourcent'))
donut_actuel=[]
donut_actuel.append(('Allocation actuelle', 'Pourcent'))
for item in items:
# construire la liste pour donut cible
d = (item.classe, item.pc_cible)
donut_cible.append(d)
# construire la liste pour donut actuel
d = (item.classe, int(item.pc_atteint * 10))
donut_actuel.append(d)
# lire les actifs
actifs = get_actifs(request, '0')
total_valeur = 0
total_pv = 0
total_rdt = 0
for item in actifs:
total_valeur += item.valeur
total_pv += item.plus_value
total_pc_value = total_pv / total_valeur * 100
total_rdt += item.valeur * item.rdt / 100
# lire l'historique
histos = get_histo_by_date(request,'0')
courbe_evoln=[]
courbe_evoln.append(('Date', 'Valeur part PF', 'Valeur part Indice'))
for item in histos:
# construire la liste pour donut cible
d = (item.date.strftime('%d/%m/%Y'), int(item.val_part * 1000), int(item.val_part_ref * 1000))
courbe_evoln.append(d)
return {
'page_title': u"Allocation d'actifs",
'message': message,
'items': items,
'donut_cible': json.dumps(donut_cible),
'donut_actuel': json.dumps(donut_actuel),
'courbe_evoln': json.dumps(courbe_evoln),
'actifs': actifs,
'total_valeur': total_valeur,
'total_pv': total_pv,
'total_pc_value': total_pc_value,
'total_rdt': int(total_rdt)
}
@view_config(route_name='doc_list', renderer='../templates/doc_list.pt', permission='view')