Your website

Mes allocations modèle

Vitrine d'expert

La mission de cette page est de présenter les portefeuilles modèles dont vous êtes le titulaire. Votre vitrine en matière d'allocations. On a choisi 2 formats de présentation mais libre à vous et votre imagination d'en créer une qui vous soit plus juste? La 1ère présentation choisie est celle d'un graphique à bulles où chaque élément représente un portefeuille modèle, sa position étant liée à sa performance et sa 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.

Implémentation

Pour obtenir ce graphique à bulles couvrant tous vos portefeuilles modèle dans un unique espace performances/risques, déclarez les 2 scripts suivants:

, Il est personnalisable en fonction de vos besoins et de voir. 

    
    <!-- Latest version of dataviz -->
    <script src="https://lili.am/bundles/dataviz"></script>
    <!-- Latest version of controllers -->
    <script src="https://workshop.lili.am/bundles/controllers"></script>

Une fois ces scripts déclarés et l'authentification faite, pour charger tous les graphiques de la page, nous allons procéder comme ci-dessous:

    
    <script>
        // First, we create a new instance of portfolios controller to get data from the server
        $p = new LoyolApp.PortfolioController();
        // Then we call the action named UserPortfoliosKpis to get the kpis of all user portfolios (option is 1Y 3Y ...)
        $p.get('UserPortfoliosKpis', { option: option }, function (data) {
            // Then we call the function loadGrid describeb below to populate the grid
            loadGrid(data);
        });
    </script>

Mosaique

Implémentation

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>

        // This function create a custom grid of tiles,
        // one tile by portfolio displaying name, yield and standard deviation(risk)
        var loadGrid = function (data) {
            var $cx = $('#myportfolios')
            $.each(data, function (i, p) {
                var url = "url('" + 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>