Performances Risques

La datavisualisation as a service

Pour cette expérience, vous devez disposer d'une clef privée valide de portefeuille. Vous pouvez reprendre celle que l'on vous propose dans le cadre du reporting client ou reprendre celle du portefeuille que vous avez peut-être créé lors de la précédente expérience. Pour analyser votre portefeuille, renseignez cette clef et activez le bouton Afficher dont l'action se résume en 2 étapes :

  • La première étape interroge le serveur distant (via son API) pour charger les données historiques du portefeuille correspondant à la clef privée ci-dessous.
  • La seconde étape consiste à charger les widgets déclarés sur ce formulaire.

Tous les widgets de cette page sont des éléments développés en open sourcce proposés et accessibles via des javascripts déclarés en local (spécifique) ou sur le serveur (standard). Leur nombre et leur fonction sont ajustables par le client.

Inventaire détaillé

Dans cette section et la suivante dénommée "Pertes et Profits", nous allons afficher la position détaillée d'un portefeuille à une date donnée (aujourd'hui et passée).

Instrument Portfolio
Code Name Category MTD YTD Market Cost Return Weight

Pertes et profits

Ci-dessous, le tableau des pertes et des profits réalisés depuis la création du portefeuille sur la plateforme.

Instrument Résultat
Code Name Category Date Cost Market Return Weight

Performance

Volatilité

Mon portefeuille Equilibre

Ci-dessous, retrouvez les encoours moyens et les performances de mon portefeuille.

Performances base 100

Résultats hebdomadaires

Contribution aux performances

Carte des résultats

Implémentation

S'agissant des widgets de cette page, on retrouve la même technique d'intégration. Sur cette page, sont déclarés deux autres librairies open source dc.js et crossfilter.js qui vont permettre la dépendance des widgets.


<!-- Latest version of d3 librairies -->
<script src="https://lili2.am/Scripts/d3/d3.js" type="text/javascript"></script>
<!-- Latest version of crossfilter librairies -->
<script src="https://lili2.am/Scripts/Crossfilter/crossfilter.js" type="text/javascript"></script>
<!-- Latest version of dc librairies -->
<script src="https://lili2.am/Scripts/dc/2.1.7/dc.js" type="text/javascript"></script>
<!-- Latest version of widgets portfolio charts -->
<script src="https://lili2.am/Scripts/portfolio.charts-1.7.js" type="text/javascript"></script>

Chaque élément pour widget a une propriété data-chart permettant de définir le type de widget qui sera déployé au sein de l'élément.


<div id="pnl-counter" class="portfolio-chart number" data-chart="number" data-number="pnl"></div>
<div id="rating-pie" class="portfolio-chart pie-chart" data-chart="pie" data-dimension="rating">
    ...
</div>

Chaque type de widget dispose d'une documentation propre permettant d'ajuster des paramètres concernant l'information analysée ou l'apparence. Par exemple, la propriété data-number est fixée sur std pour récupérer la volatilité de la période active.


    <div id="std-counter" class="portfolio-chart number" data-chart="number" data-number="std"></div>
    
    

Les widgets qui ont un comportement liés sont rassemblés par groupe d'élements. Vous pouvez définir autant de groupe que vous le souhaitez avec une seule instance. La méthode de regroupement que nous avons utilisé ici s'appuie sur la classe de style "portfolio-chart":


    <div class="portfolio-chart"></div>
    
    

Expositions géographiques

Implémentation

Pour représenter les risques d'expositions sur une map monde, rien de mieux qu'un choropleth. Intégrer un tel widget est assez simple. Veuillez d'abord déclarer une feuille de style pour les pays, les océans et des frontières. Attention, la couleur des expositions n'est pas gérée dans ce fihcier.


    <!-- Latest versions default style sheets for widgets -->
<link rel="stylesheet" href="https://lili2.am/Content/geomap-1.0.css" />

Dans la section destinée à vos javascripts, déclarez 2 premiers scriptss fournis par d3.js


    <!-- Latest versions of requested d3 scripts -->
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>

Ensuite, déclarez le script geomap en charge de la construction et du remplissage de la carte.


    <!-- Latest version of script requested for build and populating world map -->
<script src="https://lili2.am/Scripts/d3/geomap-2.0.js"></script>

Créez ensuite un élement HTML qui fera office de conteneur pour la carte, et si vous le souhaitez, un second élément qui fera office de table de synthèse pour les expositions.


...
<table id="table-exposures"></table>
...
<div id="world"></div>

Pour produire la carte, nous utilisons ici un bouton associé aux deux éléments déclarés ci-dessus (voir les deux propriétés data-). L'action (onclick) ouvre un objet geomap, qui appellera la méthode JsonGeomap pour récupérer les points permettant de dessiner la map-monde en svg. Puis, la méthode geoexpoures du controller portfolio pour obtenir les expositions du portefeuille renseigné ci-dessus, et remplir les deux éléments (carte et table). La légende est une option que l'on peut ou pas afficher.

Les données d'expositions sont accessibles en interrogeant la méthode data de geomap.


$('.btn-show-map').click(function () {
    var urlpoints = 'https://lili2.am/api/Instruments/GeoMap';
    // Create a world map using data points given by lili2 (json format)
    var map = new geomap($(this).data('map-container'), urlpoints, $(this).data('map-table'), true);
    // Get the detailed geo exposures from the server in Json format
    $p.get('geoexposures', params, function (data) {
        map.load(data);
    });
})

Allocations tactiques

Implémentation

Pour représenter la stratégie d'un portefeuille, nous utiliserons les aires empilées ou stacked area. Pour cela, il faut déclarer la dernière version du script associé:


        <!-- Latest version of stacked area librairie for fluctuations of asset classes -->
    <script src="https://lili2.am/Scripts/d3/stacked-area-1.5.js" type="text/javascript"></script>
        

Puis insérer un élement qui fera office de conteneur à ce widget


        ...
    <div id="fluctuations" class="stacked-area"></div>
        ...
    

Pour réaliser ce widget, nous allons procéder en deux étapes. Nous interrogeons d'abord l'API pour obtenir les codes couleurs associés à chaque classe d'actif. Cette interrogation est optionnelle et peut être remplacée par une méthode interne qui impose ses couleurs. Dans un second temps, nous interrogeons la méthode assetClassFluctuations du controleur Portfolio pour accéder aux données historiques. Le script est ainsi :


// button to display portfolio fluctuations
$('.btn-show-fluctuation').click(function () {
    $($(this).data('container')).empty();
    // First, create a new widget related to the element attached to the button
    var area = new stackedarea($(this).data('container'));
    // Then, we get the standard class colors using the instruments controller
    $i.get('assetclasscolors', null, function (colors) {
        // after colors setting ...
        area.setcolors(colors, function () {
            // we call the portfolio controller to get the fluctuation of its conten
            $p.get('assetClassFluctuations', params, function (data) {
                area.load(data, function () {
                    // do what you want here ...
                });
            });
        });
    });
})