API-Banking: Wertpapieroptimierung

Home API-Banking API-Banking: Wertpapieroptimierung
Description
Integration Method 1
Integration Method 2
Complete example
API Documentation

Description

This is an example which integrates these 3 compontents: Effizienter Rand, Wertpapier-Suche und Wertpapier-Allokation.

Please refer to the documentation of the single components if you have any questions or problems.

Integration Method 1

Integration

You will need additional scripts and stylesheets to use the component:

• The app-specific CSS rules, the default theme is included by default.
• The app-specific scripts files to get the plugin up and running

Include the stylesheets to your page:

Simply copy this block into the HTML-HEAD section of your website. It is required to load the correct styling of the component.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://api.niiio.me/public/common/default-theme.css" >
<link rel="stylesheet" href="https://api.niiio.me/public/wertpapier-suche/css/wertpapier-suche.css">
<link rel="stylesheet" href="https://api.niiio.me/public/effizienter-rand/css/effizienter-rand.css">
<link rel="stylesheet" href="https://api.niiio.me/public/wertpapier-allokation/css/wertpapier-allokation.css">

Create markup

Create the required markup for the components inside your <body> tag.

<div class="container-fluid">
   <div class="row">
      <div class="col-xs-12">
         <div id="wertpapier-suche-container"></div>
      </div>
   </div>
   <div class="row">
      <div class="col-xs-12 col-md-6">
         <div id="effizienter-rand-container"></div>
      </div>
      <div class="col-xs-12 col-md-6">
         <div id="wertpapier-allokation-container"></div>
      </div>
   </div>
</div>

Asynchronous loading of required files with RequireJS:

• Advantage: You only need to import a few files, all required script will get loaded asynchronously through RequireJS.
• Disadvantage: If you already have a script file which defines an anonoymous AMD module, then sadly this method won’t work for you.

Load the plugin scripts by adding this block at the end of the BODY section.

<script type="text/javascript" src="https://api.niiio.me/public/require-config.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/require.js"></script>

Setup and initialize the component:

Add this block right after the included script files.

<script type="text/javascript">
   require(['dser.wertpapierSuche', 'dser.wertpapierAllokation', 'dser.effizienterRand'], function () {
        //... sample code (see below)
    });
</script>

Connect the components:

var token = "<your-custom-api-token>";
var baseUrl = "https://api.niiio.me";

var effizienterRand;
var wertpapierSuche;
var wertpapierAllokation;

wertpapierSuche = jQuery("#wertpapier-suche-container").wertpapierSuche({
   token: token,
   baseUrl: baseUrl,
   onStockSelected: function (stock) {
      effizienterRand.addWkn(stock.wkn);
      wertpapierAllokation.addStock(stock);
   }
});

wertpapierAllokation = jQuery("#wertpapier-allokation-container").wertpapierAllokation({
   baseUrl: baseUrl,
   token: token,
   stocks: [],
   onStockRemoved: function (stock) {
      effizienterRand.removeWkn(stock.wkn);
   }
});

effizienterRand = jQuery("#effizienter-rand-container").effizienterRand({
   token: token,
   baseUrl: baseUrl,
   wkns: [],
   onStockAllocationSelected: function (stockAllocation) {
      console.log("stockAllocation", stockAllocation);
      wertpapierAllokation.updateStockShares(stockAllocation);
   },
   onStockAllocationDeselected: function () {
      wertpapierAllokation.resetStockShares();
   }
});

Please send us an email to receive your custom API token. It is required to initialize the plugin. Replace the part with your actual token.

Integration Method 2

Integration

You will need additional scripts and stylesheets to use the component:

• The app-specific CSS rules, the default theme is included by default.
• The app-specific scripts files to get the plugin up and running

Include the stylesheets to your page:

Simply copy this block into the HTML-HEAD section of your website. It is required to load the correct styling of the component.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://api.niiio.me/public/common/default-theme.css" >
<link rel="stylesheet" href="https://api.niiio.me/public/wertpapier-suche/css/wertpapier-suche.css">
<link rel="stylesheet" href="https://api.niiio.me/public/effizienter-rand/css/effizienter-rand.css">
<link rel="stylesheet" href="https://api.niiio.me/public/wertpapier-allokation/css/wertpapier-allokation.css">

Create markup

Create the required markup for the components inside your <body> tag.

<div class="container-fluid">
   <div class="row">
      <div class="col-xs-12">
         <div id="wertpapier-suche-container"></div>
      </div>
   </div>
   <div class="row">
      <div class="col-xs-12 col-md-6">
         <div id="effizienter-rand-container"></div>
      </div>
      <div class="col-xs-12 col-md-6">
         <div id="wertpapier-allokation-container"></div>
      </div>
   </div>
</div>

Regular loading of script files, without RequireJS:

• Advantage: This method will work on most pages.
• Disadvantage: You have to include a lot more scripts.

Load the plugin scripts by adding this block at the end of the BODY section.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.2/tinycolor.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/bloodhound.min.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/typeahead.jquery.min.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/number/jquery.number-1.2.min.js" ></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/jquery.mustache.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public//common/highcharts.bugfix.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/color/ColorService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/services/PluginPropertyCheckService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/services/StockService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/browser/BrowserUtils.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/speech/SpeechRecognition.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/number/NumberFormatter.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/common/charts/tooltip/ChartTooltipService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/effizienter-rand/js/OptimizationService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/effizienter-rand/js/EffizienterRandChartConfigBuilder.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/effizienter-rand/js/EffizienterRandChartService.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/wertpapier-suche/jquery.wertpapierSuche.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/wertpapier-allokation/jquery.wertpapierAllokation.js"></script>
<script type="text/javascript" src="https://api.niiio.me/public/effizienter-rand/jquery.effizienter-rand.js"></script>

Setup and initialize the component:

Add this block right after the included script files.

<script type="text/javascript">
    $(function () {
        //... sample code (see below)
    });
</script>

Connect the components:

var token = "<your-custom-api-token>";
var baseUrl = "https://api.niiio.me";

var effizienterRand;
var wertpapierSuche;
var wertpapierAllokation;

wertpapierSuche = jQuery("#wertpapier-suche-container").wertpapierSuche({
   token: token,
   baseUrl: baseUrl,
   onStockSelected: function (stock) {
      effizienterRand.addWkn(stock.wkn);
      wertpapierAllokation.addStock(stock);
   }
});

wertpapierAllokation = jQuery("#wertpapier-allokation-container").wertpapierAllokation({
   baseUrl: baseUrl,
   token: token,
   stocks: [],
   onStockRemoved: function (stock) {
      effizienterRand.removeWkn(stock.wkn);
   }
});

effizienterRand = jQuery("#effizienter-rand-container").effizienterRand({
   token: token,
   baseUrl: baseUrl,
   wkns: [],
   onStockAllocationSelected: function (stockAllocation) {
      console.log("stockAllocation", stockAllocation);
      wertpapierAllokation.updateStockShares(stockAllocation);
   },
   onStockAllocationDeselected: function () {
      wertpapierAllokation.resetStockShares();
   }
});

Please send us an email to receive your custom API token. It is required to initialize the plugin. Replace the part with your actual token.

Complete example

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://api.niiio.me/public/common/default-theme.css" >
    <link rel="stylesheet" href="https://api.niiio.me/public/wertpapier-suche/css/wertpapier-suche.css">
    <link rel="stylesheet" href="https://api.niiio.me/public/effizienter-rand/css/effizienter-rand.css">
    <link rel="stylesheet" href="https://api.niiio.me/public/wertpapier-allokation/css/wertpapier-allokation.css">
</head>
<body>

<div class="container-fluid">
   <div class="row">
      <div class="col-xs-12">
         <div id="wertpapier-suche-container"></div>
      </div>
   </div>
   <div class="row">
      <div class="col-xs-12 col-md-6">
         <div id="effizienter-rand-container"></div>
      </div>
      <div class="col-xs-12 col-md-6">
         <div id="wertpapier-allokation-container"></div>
      </div>
   </div>
</div>

<script type="text/javascript" src="../local-require-config.js"></script>
<script type="text/javascript" src="../common/require.js"></script>

<script type="text/javascript">
    require(['dser.wertpapierSuche', 'dser.wertpapierAllokation', 'dser.effizienterRand'], function () {

var token = "<your-custom-api-token>";
var baseUrl = "https://api.niiio.me";

var effizienterRand;
var wertpapierSuche;
var wertpapierAllokation;

var defaultStocks = [
   {"wkn":"710000","isin":"DE0007100000", "risk": 0, "yield": 0, "name":"Daimler AG","share":0},
   {"wkn":"519000","isin":"DE0005190003", "risk": 0, "yield": 0, "name":"BMW ST","share":0},
   {"wkn":"328292","isin":"US580135BY65",  "risk": 0, "yield": 0, "name":"MCDONALDS CORP. 2028","share":0}];

wertpapierSuche = jQuery("#wertpapier-suche-container").wertpapierSuche({
   token: token,
   baseUrl: baseUrl,
   onStockSelected: function (stock) {
      effizienterRand.addWkn(stock.wkn);
      wertpapierAllokation.addStock(stock);
   }
});

wertpapierAllokation = jQuery("#wertpapier-allokation-container").wertpapierAllokation({
   baseUrl: baseUrl,
   token: token,
   stocks: defaultStocks,
   onStockRemoved: function (stock) {
      effizienterRand.removeWkn(stock.wkn);
   }
});

effizienterRand = jQuery("#effizienter-rand-container").effizienterRand({
   token: token,
   baseUrl: baseUrl,
   wkns: _.map(defaultStocks, function(stock) {
      return stock.wkn
   }),
   onStockAllocationSelected: function (stockAllocation) {
      console.log("stockAllocation", stockAllocation);
      wertpapierAllokation.updateStockShares(stockAllocation);
   },
   onStockAllocationDeselected: function () {
      wertpapierAllokation.resetStockShares();
   }
});

})
</script>
</body>
</html>

API Documentation

Please refer to the documentation of the single components for a detailed overview of all configuration options.