Vue globale
Sur cette page, nous présentons les portefeuilles dont vous êtes le titulaire. On pourrait pu choisir tout autre critère de sélection pour afficher les supports d'une classe, d'un pays ...etc La présentation choisie est celle d'un graphique à bulles où chaque élément représente un portefeuille ou un fonds, la position étant liée à la performance et la volatilité constatée sur une période passée que nous avons normalisé mais que l'on aurait pu laisser libre. La couleur et la taille des bulles n'ont ici aucune fonction.
Déclarez les scripts suivants, les 4 premiers issus du serveur Lili, le dernier étant en local et en charge de l'organisation des widgets : de la création et du chargement des bulles. Il est personnalisable en fonction de vos besoins et de voir.
<!-- Latest version of d3 librairies -->
<script src="https://lili.am/Scripts/d3/d3.js" type="text/javascript"></script>
<!-- Latest version of crossfilter librairies -->
<script src="https://lili.am/Scripts/Crossfilter/crossfilter.js" type="text/javascript"></script>
<!-- Latest version of dc librairies -->
<script src="https://lili.am/Scripts/dc/2.1.7/dc.js" type="text/javascript"></script>
<!-- Latest version of kpi -->
<script src="https://lili.am/Scripts/portfolio.kpi-1.1.js" type="text/javascript"></script>
<!-- Your script to create and load bubbles -->
<script src="/Scripts/board.js"></script>
La construction de la mosaïque ci-dessus repose sur la même source de données (API) utilisée pour le graphique à bulles précédent. Une fois effective la récupération des données, il suffit ensuite de parourir les données du portefeuille et celle des statistiques rattachées. Vous trouverez pele mêle les rendements, volatilités et autres indicateurs de risques.
<script>
// First, we create a new instance of portfolios controller to get data from server with LILI API
$p = new LoyolApp.PortfolioController();
// Get data using API
$p.get('UserPortfoliosKpis', { option: option }, function (data) {
loadGrid(data);
});
// Load the grid
var loadGrid = function (data) {
var $cx = $('#myportfolios')
$.each(data, function (i, p) {
var url = "url('" + LoyolApp.Settings.domain + "/" + p.ImageUrl + "')";
var $cd = $('<div>').addClass('card card-img col-sm-3').attr('style', "background-image:" + url);
var $bd = $('<div>').addClass('card-body');
var $tt = $('<h3>').html(p.Name);
var $rt = $('<p>').html('Perf = ' + parseFloat(100 * p.Stats.Yield).toFixed(2) + '%');
var $st = $('<p>').html('Vola = ' + parseFloat(100 * p.Stats.StdDev).toFixed(2) + '%');
$bd.append($tt, $rt, $st);
$cd.append($bd);
$cx.append($cd);
});
</script>