Anforderungen
Vollständiges Beispiel
API Dokumentation

Anforderungen

Um diese Komponente nutzen zu können, benötigen Sie folgende Drittanbieter-Sammlungen:

  • JQuery
  • Bootstrap
  • Backbone
  • Underscore
  • Highcharts
  • Tinycolor
  • DSER Services / components

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 rel="stylesheet" href="https://api-public.niiio.me/public/common/default-theme.css">

        <link rel="stylesheet" href="https://api-public.niiio.me/public/stresstest/css/stresstest.css">
    </head>
    <body>

    <br>
    <br>

    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div id="stresstest-container"></div>
            </div>
        </div>
		<hr/>
		<div class="row">
			<div class="col-xs-12">
				<div class="checkbox">
					<label><input id="stresstest-peergroup" type="checkbox" checked value="">PeerGroup-Verlängerung</label>
				</div>
			</div>
		</div>
    </div>

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

    <script type="text/javascript">
        require(['dser.stressTest'], function () {
			var peerGroup = $('#stresstest-peergroup').is(':checked')
            var stresstest = $("#stresstest-container").stressTest({
                token: '<your-custom-api-token>',
				peerGroup: peerGroup,
                portfoliosForStressTest: [
                    {
                        name: "Current Portfolio",
                        wknsWithShareOfPortfolio: {'710000': 50, '856958': 50},
                        color: '#7CB5EC'
                    }]
            });

			$('#stresstest-peergroup').change(function () {
   				stressTest.setPeergroupExtension($(this).is(':checked'));
			});
        });
    </script>
    </body>
</html>

Dieses Beispiel zeigt das gewählte Wertpapier in der Browser Konsole.

API Dokumentation

Initialisieren

Bitte geben Sie Ihren Benutzerdefinierten API-Schlüssel bei der Initialisierung an damit das Plug-In funktioniert. 

$("#stresstest-container").stressTest({
    baseUrl: 'https://api-public.niiio.me',
    token: '<your-custom-api-token>',
    title: 'Historical Development in %',
    portfoliosForStressTest: [
        {
            name: "Current Portfolio",
            wknsWithShareOfPortfolio: {'710000': 50, '856958': 50},
            color: '#7CB5EC'
        }]
});

Erforderliche Konfigurationsoptionen
Key Description
token The security-token to check if your connection is valid.

Erweiterte und optionale Konfigurationsmöglichkeiten
Key Description Default
baseUrl url to DSER API services https://api-public.niiio.me
portfoliosForStressTest give it an array of objects :

{ name: <The name used for the legend in the chart>,
wknsWithShareOfPortfolio: <Object with security identification numbers and the shares.
The sum of the shares must be 100 otherwise the stresstest cannot be calculated.
Example: {'710000': 50, '856958': 50}>
color: <Color of the line in the char>
}

For each of the objects one historical development gets calculated and display as line within the chart.
name: The name used for the legend in the chart.
color: Color of the line in the chart.
wknsWithShareOfPortfolio:
peerGroup bool, peer group extension enabled true
peerGroupText legend text for peer group extension, displayed above chart Ende der Peergroupverlängerung
title The title displayed above the chart Historische Entwicklung in %'

Methoden der Komponente
Name Description
resetPortfoliosForStressTest() Clears the array portfoliosForStressTest and rerenders the chart.
setSinglePortfolioForStressTest(portfolioForStressTest) Give it a single portfolioForStressTest.

{
name: <The name used for the legend in the chart>,
wknsWithShareOfPortfolio: <Object with security identification numbers and the shares.
The sum of the shares must be 100 otherwise the stresstest cannot be calculated.
Example: {'710000': 50, '856958': 50}>
color: <Color of the line in the char>
}

Reset the portfoliosForStressTest and rerenders the chart.
addStressTest(stressTestValues, name, color) Add an additional line to the chart.

stressTestValues: [
{
date: of a point in the chart>
value
}],
name: ,
color: .

This methods ignores teh peer group extension flag.
setPeergroupExtension(peerGroupEnabled) Sets new value for peer group extension flag and updates the chart

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://api-public.niiio.me/public/stresstest/css/stresstest.css">

Erstellen eines Containers

Erstellen Sie einen <div> Container für diese Komponente in dem <body> Bereich. Sie können unser Standard CSS-Style verwenden, indem Sie die Klasse „dser-theme“ für den Container nutzen. 

<div id="stresstest-container"></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.stressTest'], function () {
        $("#stresstest-container").stressTest({
            token: '<your-custom-api-token>',
            portfoliosForStressTest: [
                {
                    name: "Current Portfolio",
                    wknsWithShareOfPortfolio: {'710000': 50, '856958': 50},
                    color: '#7CB5EC'
                }]
        });
    });
</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/jquery/jquery.min.js"></script>
<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/color/tinycolor.min.js"></script>
<script type="text/javascript" src="https://api-public.niiio.me/public/common/libs/backbone/backbone-min.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/services/PluginPropertyCheckService.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/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>
Konfiguration und Initialisierung der Komponente

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

<script type="text/javascript">
   $(function () {
         $("#stresstest-container").stressTest({
            token: '<your-custom-api-token>',
            portfoliosForStressTest: [
                {
                    name: "Current Portfolio",
                    wknsWithShareOfPortfolio: {'710000': 50, '856958': 50},
                    color: '#7CB5EC'
                }]
        });
   });
</script>
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