Historic Development

A picture is worth a thousand words: Put this component to work for you, and see the historic development of your entire portfolio or of individual stocks.


Requirements
Complete example
API Documentation

Requirements

To use the component, you will need these third-party libraries:

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

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

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

API Documentation

Initialize

Please provide your custom API token on initialization, otherwise the plugin won’t work. Following example shows all possible configuration options:

$("#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'
        }]
});

Required configuration options

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

Extended and optional configuration options

Key Description Default
baseUrl url to DSER API services https://api.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 %

Methods of the component

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 the peer group extension flag.

setPeergroupExtension(peerGroupEnabled) Sets new value for peer group extension flag and updates the chart

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

Create a container

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

<div id="stresstest-container"></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.stressTest'], function () {
        $("#stresstest-container").stressTest({
            token: '<your-custom-api-token>',
            portfoliosForStressTest: [
                {
                    name: "Current Portfolio",
                    wknsWithShareOfPortfolio: {'710000': 50, '856958': 50},
                    color: '#7CB5EC'
                }]
        });
    });
</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/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>
Setup and initialize the component

Add this block right after the included script files:

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