Performances Risques

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://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 widgets portfolio charts -->
<script src="https://lili.am/Scripts/portfolio.charts-2.4.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>
    
    

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://lili.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://lili.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://lili.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);
    });
})

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://lili.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 ...
                });
            });
        });
    });
})