Stock portfolio optimization

Risk yield curve, stock search, stock allocation, stress test, and stock price history: get a component that combines these 5 components into 1. Stock portfolio optimization all-in-one.

Complete example
API Documentation

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 href="../common/default-theme.css" rel="stylesheet">
   <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

   <link rel="stylesheet" href="https://api-public.niiio.me/public/common/default-theme.css">
   <link rel="stylesheet" href="https://api-public.niiio.me/public/wertpapier-suche/css/wertpapier-suche.css">
   <link rel="stylesheet" href="https://api-public.niiio.me/public/effizienter-rand/css/effizienter-rand.css" >
   <link rel="stylesheet" href="https://api-public.niiio.me/public/wertpapier-allokation/css/wertpapier-allokation.css">
   <link rel="stylesheet" href="https://api-public.niiio.me/public/stresstest/css/stresstest.css">
   <link rel="stylesheet" href="https://api-public.niiio.me/public/stockprices/css/stockprices.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 class="row">
      <div class="col-xs-12 col-md-6">
         <div id="stresstest-container"></div>
      </div>
      <div class="col-xs-12 col-md-6">
         <div id="stockprices-container"></div>
      </div>
   </div>
</div>

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

<script type="text/javascript">
   require(['dser.wertpapierSuche', 'dser.wertpapierAllokation', 'dser.effizienterRand', 'dser.stressTest', 'dser.stockPrices'], function () {
         var token = "insert here your token";

         var effizienterRand;
         var wertpapierSuche;
         var wertpapierAllokation;
         var stressTest;
         var stockPrices;

         var defaultStocks = [
            {"id":{"value":"a2abf90e-12af-46a9-98ff-75ce88198860"}, "wkn":"710000","isin":"DE0007100000", "risk": 0, "yield": 0, "name":"Daimler AG","share":0},
            {"id":{"value":"ed90ac80-c2f6-4e95-9772-3ba6e70b38dc"}, "wkn":"519000","isin":"DE0005190003", "risk": 0, "yield": 0, "name":"BMW ST","share":0},
            {"id":{"value":"1b11b6f2-048e-4abe-bfb9-994f033cea30"}, "wkn":"328292","isin":"US580135BY65",  "risk": 0, "yield": 0, "name":"MCDONALDS CORP. 2028","share":0}];

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

         wertpapierAllokation = jQuery("#wertpapier-allokation-container").wertpapierAllokation({
            token: token,
            stocks: defaultStocks,
            onStockRemoved: function (stock) {
               effizienterRand.removeWkn(stock.wkn);
               stockPrices.hideStockPricesChart();
            },
            onStockSelected: function(stock) {
               stockPrices.renderStockPricesChart(stock.wkn, stock.color)
            },
            onResetSelection: function() {
               stockPrices.hideStockPricesChart();
            }
         });

         stressTest = $("#stresstest-container").stressTest({
            token: token
         });

         stockPrices = $("#stockprices-container").stockPrices({
            token: token,
            wkn: null
         });

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

               var wknsWithShares = {};
               _.each(stockAllocation, function(stockWithShare) {
                  wknsWithShares[stockWithShare.wkn+''] = stockWithShare.share;
               });

               stressTest.setSinglePortfolioForStressTest({
                  name: "Aktuelles Portfolio",
                  wknsWithShareOfPortfolio: wknsWithShares,
                  color: '#7CB5EC'
               });
            },
            onStockAllocationDeselected: function () {
               wertpapierAllokation.resetStockShares();
               stockPrices.hideStockPricesChart();
               stressTest.resetPortfoliosForStressTest();
            } 
        }); 
    }); 
</script> 
</body> 
</html>

API Documentation

Please have a look at the documentation of the single components for a detailed overview of all configuration options.

Integration

You will need additional scripts and stylesheets to use the component:
• The default theme for the app (CSS) 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-public.niiio.me/public/common/default-theme.css" >
<link rel="stylesheet" href="https://api-public.niiio.me/public/wertpapier-suche/css/wertpapier-suche.css">
<link rel="stylesheet" href="https://api-public.niiio.me/public/effizienter-rand/css/effizienter-rand.css">
<link rel="stylesheet" href="https://api-public.niiio.me/public/wertpapier-allokation/css/wertpapier-allokation.css">
<link rel="stylesheet" href="https://api-public.niiio.me/public/stresstest/css/stresstest.css">
<link rel="stylesheet" href="https://api-public.niiio.me/public/stockprices/css/stockprices.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 class="row">
      <div class="col-xs-12 col-md-6">
         <div id="stresstest-container"></div>
      </div>
      <div class="col-xs-12 col-md-6">
         <div id="stockprices-container"></div>
      </div>
   </div>
</div>

Include the required script files to your page

There are 2 ways to include the plugin into your page:

Option 1: 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.

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-public.niiio.me/public/require-config.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/require/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', 'dser.stressTest', 'dser.stockPrices'], function () {
        //... sample code (see below)
    });
</script>

Option 2: Regular loading of script files, without RequireJS

• 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="https://api-public.niiio.me/public/common/libs/underscore/underscore-min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/color/tinycolor.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/bloodhound/bloodhound.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/typeahead.jquery.min.js"></script>

<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.number-1.2.min.js" ></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/jquery/jquery.mustache.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/charts/highstock.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/charts/highcharts.more.js"></script>

<script type="text/javascript" src="https://api-public.niiio.me/public/common/color/ColorService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/services/PluginPropertyCheckService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/services/StockService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/browser/BrowserUtils.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/speech/SpeechRecognition.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/number/NumberFormatter.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/charts/tooltip/ChartTooltipService.js"></script>

<script type="text/javascript" src="https://api-public.niiio.me/public/effizienter-rand/js/OptimizationService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/effizienter-rand/js/EffizienterRandChartConfigBuilder.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/effizienter-rand/js/EffizienterRandChartService.js"></script>

<script type="text/javascript" src="https://api-public.niiio.me/public/wertpapier-suche/jquery.wertpapierSuche.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/wertpapier-allokation/jquery.wertpapierAllokation.js"></script>

<script type="text/javascript" src="https://api-public.niiio.me/public/stresstest/js/StressTestService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/stresstest/js/StressTestChartService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/stresstest/js/StressTestChartConfigBuilder.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/stresstest/jquery.stresstest.js"></script>

<script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/js/StockPricesChartService.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/js/StockPricesChartConfigBuilder.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/stockprices/jquery.stockprices.js"></script>

<script type="text/javascript" src="https://api-public.niiio.me/public/effizienter-rand/jquery.effizienter-rand.js"></script>

<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/backbone/backbone-min.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 = "insert here your token";

var effizienterRand;
var wertpapierSuche;
var wertpapierAllokation;
var stressTest;
var stockPrices;

var defaultStocks = [
 {"id":{"value":"a2abf90e-12af-46a9-98ff-75ce88198860"}, "wkn":"710000","isin":"DE0007100000", "risk": 0, "yield": 0, "name":"Daimler AG","share":0},
 {"id":{"value":"ed90ac80-c2f6-4e95-9772-3ba6e70b38dc"}, "wkn":"519000","isin":"DE0005190003", "risk": 0, "yield": 0, "name":"BMW ST","share":0},
 {"id":{"value":"1b11b6f2-048e-4abe-bfb9-994f033cea30"}, "wkn":"328292","isin":"US580135BY65", "risk": 0, "yield": 0, "name":"MCDONALDS CORP. 2028","share":0}];

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

wertpapierAllokation = jQuery("#wertpapier-allokation-container").wertpapierAllokation({
 token: token,
 stocks: defaultStocks,
 onStockRemoved: function (stock) {
 effizienterRand.removeWkn(stock.wkn);
 stockPrices.hideStockPricesChart();
 },
 onStockSelected: function(stock) {
 stockPrices.renderStockPricesChart(stock.wkn, stock.color)
 },
 onResetSelection: function() {
 stockPrices.hideStockPricesChart();
 }
});

stressTest = $("#stresstest-container").stressTest({
 token: token
});

stockPrices = $("#stockprices-container").stockPrices({
 token: token,
 wkn: null
});

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

 var wknsWithShares = {};
 _.each(stockAllocation, function(stockWithShare) {
 wknsWithShares[stockWithShare.wkn+''] = stockWithShare.share;
 });

 stressTest.setSinglePortfolioForStressTest({
 name: "Aktuelles Portfolio",
 wknsWithShareOfPortfolio: wknsWithShares,
 color: '#7CB5EC'
 });
 },
 onStockAllocationDeselected: function () {
 wertpapierAllokation.resetStockShares();
 stockPrices.hideStockPricesChart();
 stressTest.resetPortfoliosForStressTest();
} });