Présentation

Cette page est un exemple de reporting client. Une partie de son contenu est dynamique et nourri d'appels à l'API de Lili. Ces actions (GET dans le jargon RESTful) porte sur un portefeuille identifié par sa clef privée, clef délivrée automatiquement par notre serveur. Pour ce reporting, nous avons interrogé quelques informations basiques et déployé 2 widgets. Ces contenus dynamiques sont repérables par le symbole . Il s'agit de textes (ex nom du portefeuille), de nombres (ex indicateurs), des listes d'objets manipulables et intégrables dans un tableau (voir tableau des Kpis), des images ou des pluggins de dataviz. toutes ces données sont collectées au format JSON. Le style (taille, couleurs, polices ...), le placement, l'ordonnancment et le comportement des contenus sont personnalisables pour coller à votre charte graphique.
IMPORTANT : nous avons laissé ici éditable la clef privée unique du portefeuille de manière à pouvoir la changer au fil de votre apprentissage et appeller d'autres modèles. Vous pouvez faire appel à une liste déroulante comme dans la prochaine expérience.

Clef privée

Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur, refertum mercatoribus opulentis, ubi annua sollemnitate prope Septembris initium mensis ad nundinas magna promiscuae fortunae convenit multitudo ad commercanda quae Indi mittunt et Seres aliaque plurima vehi terra marique consueta. Dumque ibi diu moratur commeatus opperiens, quorum translationem ex Aquitania verni imbres solito crebriores prohibebant auctique torrentes, Herculanus advenit protector domesticus, Hermogenis ex magistro equitum filius, apud Constantinopolim, ut supra rettulimus, populari quondam turbela discerpti. quo verissime referente quae Gallus egerat, damnis super praeteritis maerens et futurorum timore suspensus angorem animi quam diu potuit emendabat. Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque Fortuna plerumque dissidentes, quarum si altera defuisset, ad perfectam non venerat summitatem. Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens, quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur. Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.

Aliquam feugiat magna diam, a faucibus enim interdum ut. Vivamus accumsan urna tristique diam maximus ullamcorper. Aliquam posuere nulla erat, vitae cursus velit pellentesque quis. Vestibulum vitae sodales elit, sit amet ullamcorper nunc. Nunc ullamcorper lorem ut massa pretium viverra. Maecenas finibus vitae mauris in laoreet. Vivamus ac egestas ligula. Curabitur imperdiet sapien lorem, vitae egestas eros imperdiet vitae. Pellentesque fringilla ipsum id felis aliquam, vel tempor eros accumsan.

Praesent nec elit maximus, hendrerit lacus vitae, dignissim neque. Mauris volutpat urna quis dui dignissim dignissim. Pellentesque mollis imperdiet arcu nec malesuada. Vestibulum imperdiet lorem a sodales convallis. Duis ut nibh varius, convallis augue a, pretium lectus. Aenean id dui ullamcorper, dapibus nulla id, vehicula purus. Suspendisse suscipit mattis est non congue. Proin auctor dui ut diam placerat, eu luctus risus vulputate. Praesent congue purus velit, ac lobortis erat pharetra sed. Aenean sed rutrum arcu, id volutpat dolor. Vivamus placerat a diam a sollicitudin. Nullam sed aliquet massa, in sagittis enim

Performances and risks indicators

Option Rendement Volatilité Ratio Sharpe Min Max

Net value

Delta

Contenu de l'offre

Allocation

Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur. Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patris.

Treemap

Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur. Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.

Résultats

Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur nec eam, ut quidam docti, verborum magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos; his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur. Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.

Sunburst

Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patris. Montius nos tumore inusitato quodam et novo ut rebellis et maiestati recalcitrantes Augustae per haec quae strepit incusat iratus nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare dissimulantem formidine tenus iusserim custodiri.

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="http://lili2.am/Scripts/d3/d3.min.js" type="text/javascript"></script>
    <!-- Latest versions of treemap librairies -->
    <script src="http://lili2.am/scripts/d3/treemap-1.4.js" type="text/javascript"></script>
    <!-- Latest versions of sunburst librairies -->
    <script src="http://lili2.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://lili2.am/Content/treemap.css" />
    <link rel="stylesheet" href="https://lili2.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 () { });
    });