Implémentation

Nous allons vous montrer comment les deux widgets ci-dessus (treemap et sunburst) ont été intégrés dans cette page HTML5. Dans un premier temps, vous allez insérer et identifier les élements HTML qui feront office de conteneurs:

    
        ...
    <div id="tree"></div>
        ...
    <div id="sun" class="sunburst-container"></div>
    
    

Déclarez les scripts permettant l'accès sécurisé aux données des portefeuilles via l'API. Le script session.js est en charge de la conservation du jeton d'accès (access token) contenant l'authentification (utisateur et mot de passe) et la durée de vie de l'accès. Le script portfolioController se charge des appels à l'API afin d'en simplifier l'usage.

    <!-- Declare the session in charge of keeping in the current session all the credentials requested to secure exchanges with LILI -->
    <script src="/Scripts/session.js"></script>
    <!-- Declare the portfolio controllers to manage all actions (get and post) with the LILI server throught its API -->
    <script src="/Scripts/portfoliosController.js"></script>

Déclarez les scripts permettant la création de ces widgets. Noter ici que ces java scripts sont versionnés et disponibles en open source pour une meilleure adaptabilité et personnalisation si besoin est. Les widgets que nous proposons s'appuient sur la librairie d3.js qui a ce jour reste l'open source le plus utilisée pour créer des expériences en datavizualisation. Cette approche nous permetra demain d'intégrer d'autres librairies innovantes.

    <!-- Latest versions of d3 librairies -->
    <script src="https://lili.am/Scripts/d3/d3.min.js" type="text/javascript"></script>
    <!-- Latest versions of treemap librairies -->
    <script src="https://lili.am/scripts/d3/treemap-1.61.js" type="text/javascript"></script>
    <!-- Latest versions of sunburst librairies -->
    <script src="https://lili.am/scripts/d3/sunburst-1.3.js" type="text/javascript"></script>

Vous déclarez les feuilles de styles permettant un affichage par défaut de ces widgets. Ces feuilles de styles sont remplaçables par d'autres feuilles de style (le vôtres) permettant ainsi une totale personnalisation des éléments affichés.

    <!-- Latest versions default style sheets for widgets -->
    <link rel="stylesheet" href="https://lili.am/Content/treemap.css" />
    <link rel="stylesheet" href="https://lili.am/Content/sunburst-1.2.css" />

Pour interroger le serveur distant, ouvrez une instance vers un contrôleur de portefeuille. Interrogez une méthode POST ou GET (comme ici un GET sur allocations). Et injectez les données ainsi collectée dans les widgets qui seront crées dynamiquement en cas de succès. IMPORTANT Chaque script et chaque feuille de style a un job précis : sécurité, collecte de données, datavisualisation. C'est l'approche retenue pour permettre un haut niveau de personnalisation dans un environnement existant.

 
    // Here we create a new instance of portfoliocontroller to get data
    var ptf = new LoyolApp.PortfolioController();
    // Les paramètres sont restreints à la seule clef privée du portefeuille
    var params = { code : $('#portfoliocode').val() }
    // Call the API to GET allocations data from the server
    ptf.get('allocations', params, function (data) {
        // first, we load the treemap with the json data
        var tree = new treemap('#tree');
        tree.load(data, function () { });
        // then, we load the sunburst with the json data
        var sun = new sunburst('#sun');
        sun.load(data, function () { });
    });