77 lines
2.4 KiB
XML
77 lines
2.4 KiB
XML
<metal:block use-macro="main_template">
|
|
<div metal:fill-slot="content">
|
|
|
|
<div tal:condition="message" tal:content="message" class="alert alert-danger" />
|
|
|
|
<p>
|
|
<a href="${request.application_url}/" class="btn btn-default" role="button">
|
|
<span class="glyphicon glyphicon-chevron-left"></span> Retour</a>
|
|
<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-5">
|
|
<table id="allocation_list" class="table table-condensed table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Classe</th>
|
|
<th class="text-right">% cible</th>
|
|
<th class="text-center">Type</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr tal:repeat="item items">
|
|
<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-center">${item.type}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-right"><b>Total</b></td>
|
|
<td class="text-right"><b>${total} %</b></td>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="col-md-7">
|
|
<!-- graphique donut -->
|
|
<div id="donutchart" style="width: 100%; height: 500px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<p><b>Notes :</b></p>
|
|
<ul>
|
|
<li>Mon allocation est inspirée de celle du <b>Dr. Bernstein's No Brainer</b> qui a, à mon avis,
|
|
le mérite d'être le plus simple à implémenter parmi les <a href="http://www.marketwatch.com/lazyportfolio" target="_blank">8 Lazy portfolios</a> suivi par Market Watch</li>
|
|
</ul>
|
|
</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>
|
|
|