Positionnez vos offres dans la compétition
Sur cette page, nous allons nous intéresser aux services qui comparent un portefeuille à une liste de fonds de même classe d'actifs et de même profil de risques. Pour cela, nous afficherons à la fois les données dans un tableau et dans un graphique à plots performances/risques.
Nous allons en premier lieu renseigner une clef privée de portefeuille, ce dernier pouvant être persistent (conservées en base de données) ou en cache (voir création de portefeuilles). Indiquez ensuite la période d'analyse à partir de laquelle s'effectuera la comparaison.
Afficher - sur fonds.
S'agissant des widgets de cette page, on retrouve la même technique d'intégration. Sur cette page, sont déclarés les librairies open source dc.js et crossfilter.js qui vont permettre la dépendance des widgets. Cependant pour cette expérience, nous avons écrit notre propre script de graphes afin de modifier le contenu du tableau et le format des données restituées.
<!-- 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>
Pour personnaliser notre tableau comparatif, nous avons simplement fait une copie du script proposé par défaut (instrument-charts), script que nous avons enregistré sur notre serveur pour édition. Nous avons ici retiré quelques colonnes et redirigé certains liens.
<!-- IMPORTANT Local version of widgets instrument charts --> <script src="/Scripts/instruments-local-charts.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>