Vollständiges Beispiel
API Documentation

Vollständiges Beispiel

<!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

Bitte beachten Sie die Dokumentation der einzelnen Komponenten für eine detaillierte Übersicht über alle Konfigurationsoptionen.

Integration

Sie benötigen zusätzliche Skripte und Stylesheets, um die Komponente verwenden zu können:
• Die App-spezifischen CSS-Regeln wird das Standard-Theme erhalten.
• Die App-spezifischen Skript-Dateien, um das PlugIn zum laufen zu bekommen.

Fügen Sie die Stylesheets in Ihre Seite ein

Kopieren Sie diesen Block in den HTML-Head Ihrer Webseite. Es ist für das korrekte Darstellen dieser Komponente erforderlich. 

<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">

Erstellen Sie das Markup

Erstellen Sie das erforderliche Markup der Komponenten in Ihrem Body-Bereich. 

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

Fügen Sie erforderliche Skriptdateien in Ihrer Seite ein

Es existieren 2 Wege um die Skriptdateien einzufügen:

Option 1: Asynchrones Laden der erforderlichen Dateien mit RequireJS

• Vorteil: Sie brauchen nur wenige Dateien implementieren, alle benötigten Skripte werden asynchron durch RequireJS bezogen.
• Nachteil: Wenn Sie bereits über eine Skriptdatei verfügen, die eine anonyme AMD definiert, funktioniert diese Option leider nicht für Sie.

Implementieren der erforderlichen JavaSkript-Dateien

Laden Sie die Plugin-Skripte, indem Sie folgenden Block an das Ende des Bodys einfügen: 

<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>
Konfiguration und Initialisierung der Komponente

Fügen Sie diesen Block nach den Skript-Dateien ein: 

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

Option 2: Regelmäßiges Laden von Skript-Dateien, ohne RequireJS

• Vorteil: Diese Methode funktioniert auf den meisten Webseiten.
• Nachteil: Sie werden mehr Skripte einbinden müssen.

Einfügen der erforderlichen Javascript-Dateien

Laden Sie die Plugin-Skripte, indem Sie folgenden Block an das Ende des Bodys einfügen: 

<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>
Konfiguration und Initialisierung der Komponente

Fügen Sie diesen Block nach den Skript-Dateien ein: 

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

Verbinden der Komponenten

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();
} });
Hier erhalten Sie Ihren API-Schlüssel

DSER GmbH

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen