API-Banking: Wertpapierallokation

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

Description

You can use the comonent „Wertpapierallokation“ to display stock allocations that contains stock data (wkn, isin, name) and a share that the specific stock has within the allocation.

Requirements

To use the component, you will need these third-party libraries:
• JQuery
• Tinycolor
• Bootstrap
• Handlebars
• DSER Services / components

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-allokation/css/wertpapier-allokation.css">

Create a container:

Create a new <div> container for the component inside your <body> tag.

<div id="wertpapier-allokation-container"></div>

Asynchronous loading of required files with RequireJS

Include the required script files to your page:

• 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.

Inlude the required javascript files:

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.wertpapierAllokation'], function () {
      $("#wertpapier-allokation-container").wertpapierAllokation({});
   });
</script>

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-allokation/css/wertpapier-allokation.css">

Create a container:

Create a new <div> container for the component inside your <body> tag.

<div id="wertpapier-allokation-container"></div>

Regular loading of script files, without RequireJS

Include the required script files to your page:

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

Inlude the required javascript files:

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="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/color/ColorService.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/wertpapier-allokation/jquery.wertpapierAllokation.js"></script>

Setup and initialize the component:

Add this block right after the included script files.

<script type="text/javascript">
   $(function () {
      $("#wertpapier-allokation-container").wertpapierAllokation({});
   });
</script>

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-allokation/css/wertpapier-allokation.css">
</head>
<body>

<div class="container">
   <div class="row">
      <div class="col-xs-2"></div>
      <div class="col-xs-4">
      </div>
      <div class="col-xs-6">
         <div id="wertpapier-allokation-container"></div>
      </div>
   </div>
</div>

<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="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/color/ColorService.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/wertpapier-allokation/jquery.wertpapierAllokation.js"></script>

<script type="text/javascript">
   $(function () {
      $("#wertpapier-allokation-container").wertpapierAllokation({
         stocks: [{
            wkn: "710000",
            isin: '08154711',
            name: "Daimler 1",
            share: "71,00"
         }, {
            wkn: "710001",
            isin: '08154712',
            name: "Daimler 2",
            share: "81,00"
         }, {
            wkn: "710002",
            isin: '08154713',
            name: "Daimler 3",
            share: "91,00"
         }],
         onStockRemoved: function (stock) {
            console.log("stock removed", stock)
         }
      });
   });
</script>

</body>
</html>

The example above displays the removed stock in the browser console.

API Documentation

Initialize

Please provide your custom API token on initialization, otherwise the plugin won’t work.

$(function () {
   $("#wertpapier-allokation-container").wertpapierAllokation({
      stocks: [{
         wkn: "710000",
         isin: '08154711',
         name: "Daimler 1",
         share: "100,00"
      }],
      onStockRemoved: function (stock) {
         console.log("stock removed", stock)
      }
   });
});

Required configuration options

There are no required options.

Extended and optional configuration options

Key Beschreibung Default
baseURL url to DSER API services https://api.niiio.me
stocks Array of stocks to be displayed

Stock: {
wkn, isin, name, share
}

onStockRemoved
(stock)
Object containing the removed stock.

Stock: {
wkn, isin, name, share
}