AlgoTraderAlgoTrader Documentation

Chapter 10. Client

10.1. HTML5 UI
10.1.1. Header
10.1.2. Order Table
10.1.3. Advanced Order Form
10.1.4. Algo Order details UI
10.1.5. RFQ UI
10.1.6. Transaction Table
10.1.7. Positions Table
10.1.8. Market Data Table
10.1.9. Column Selection and Grouping
10.1.10. CSV Export
10.1.11. Chart Widget
10.1.12. About pop-up
10.1.13. Technologies
10.1.14. HTML5 Custom Widgets
10.2. AlgoTrader Eclipse IDE
10.2.1. AlgoTrader Perspective
10.2.2. Strategy Wizard
10.2.3. AlgoTrader Configuration Editor
10.2.4. Esper Colorer
10.3. Reference Data Manager
10.4. Historical Data Manager

AlgoTrader provides different types of clients all of which are targeting a different audience and use case:

The AlgoTrader UI provides the following features.

When AlgoTrader server starts, it automatically opens the client.

To manually open the client, point the browser to one of the following URL.

http://localhost:9090

Using the strategy selection menu located at the top of the screen (to the right), one can select either an aggregated view over the entire system or a strategy specific view.

When a single strategy is selected the client will show orders, transactions, positions and market data subscriptions related to the selected strategy only. When ALL is selected the client will show orders, transactions, positions and market data subscriptions for all strategies.

The header tiles show general figures (like Net Liquidity, Unrealized P&L, Cash, etc.). The default valuation currency is USD. You can change it by updating the misc.portfolioBaseCurrency value in the conf.properties file.

If one opens a menu on top right corner (hamburger menu) one can see Settings link which opens the settings form. The following settings are available there:

  1. Tiles: one can configure the visibility of general figures in header

  2. Order defaults: default order related values like default quantity and default time-in-force

  3. Tables update throttling in ms - sets the update interval of all tables, e.g. if the interval is 333ms, the tables will buffer all data updates and only make display changes every 333ms. Increasing that parameter may help if the UI is displaying a lot of data (>100 rows) and becomes unresponsive, e.g. reacts slowly to clicking on buttons, sorting columns etc.

  4. Use Trading View historical data - when checked means that the historical data for chart will be coming from TradingView's own data source, if unchecked the chart will take historical data from data source the AlgoTrader back end is configured with.


To open the general management form, click on the management menu on the top of the screen (next to Strategy selector).


The management menu provides the following operations:


Notifications are displayed in the lower right hand side of the screen


There are three types of notifications: information-s (green), warnings (orange) and alerts (red). In addition to warnings and alerts appearing in bottom right corner, a bell icon will appear at the top right of the screen.

To open the list of all warnings and alerts click on the bell icon. Alerts can be removed from the list by clicking on the close icon


This form lets one enter all types of supported orders, including Algo Orders and allows to use Smart Order Routing feature.


The first field at top left corner, Order Type, lists all available order types. When Order Type is a simple order type (i.e. Market, Limit, Stop, Stop Limit), then the form allows to specify Time in Force (TIF) and broker/exchange specific parameters, in addition to the Simple Order Form.

For Algo Orders Smart Order Routing is available as well as additional details specific to that type of an Algo Order.

There's also a possibility to use one of pre-defined Order Preferences to fill out the form, they're listed in the header of Algo Orders properties section. For further details see Section 16.2.1, “Order Preferences”

Below the order type, the Routing section is displayed which currently has two modes: Crypto and Equity


The Crypto section allows to choose a crypto currency pair from the in DB defined crypto currency pairs and to select a subset of accounts to which the order should be sent. The form will only allow to select those accounts for which corresponding crypto currency pairs are available in the DB. The system will route each child order to the exchange/account that currently has the most favourable price.


The Equity section allows to choose a single security, an account and multiple exchanges. The system will route each child order to the exchange that currently has the most favourable price.

Open positions are listed within the Positions Table.


To close all positions, click the Close All button at the top right of the Position Table.

Note

Closing all positions through the UI requires the definition of an order_preference with the name DEFAULT. Fur further details see Section 16.2.1, “Order Preferences”

The default order preference also includes an account, which means this feature is only usable with one account/adapter.

To close a specific position, click the Close x icon besides the position.

To increase a position by a certain quantity, click the Add + icon besides the position.

To reduce a position by a certain quantity, click the Reduce - icon besides the position.

All of these three actions will pre-fill the order form with appropriate data (security, side, amount in case of close action) and move focus to the form. To send the order please validate the account setting is correct and click Submit.

To open a position's security chart, click the Chart icon besides the position.

The AlgoTrader UI also comes with the interactive TradingView chart library.

TradingView has regular and advanced chart types and it comes with a massive library of over 100 pre-built technical indicators covering the most popular trading concepts.

The chart widget is useful during strategy development (for initial idea generation, validation, etc.) and for monitoring.

Please, see the TradingView documentation.


To switch market data source between TradingView and custom ones, open settings panel.


Another feature you get while using your custom historical data source is that AlgoTrader will display your orders and executions on the chart as well. The longer arrows are your orders (aggregated by staus) and the shorter are the executions.

If you hover over an order arrow, you will see the current status and details of the orders placed in that bar:

If you hover over an execution arrow, you will see the summary of executions that took place in that bar:

To select particular security to be displayed in the chart, click on the chart icon in the operations column in Market Data or Positions grids.


It is possible to extend the AlgoTrader UI with custom widgets to visualize strategy specific data or let the user interact with strategy specific functionality (e.g. modify parameters or state of a strategy). The following screenshot shows an example of the custom widget in use by the Appendix B, Example Strategy "Box":


HTML5 custom widgets use WebSockets over STOMP to communicate with the strategy.

To integrate the HTML5 custom widget into the main AlgoTrader UI the following items need to be created inside the strategy module (in case you are using the EmbeddedStrategyStarter) or inside the algotrader-core module (in case you are using the ServerStarter). The examples are based on the Appendix B, Example Strategy "Box".

/src/main/resources/html5/index.html

This HTML file will replace the file that would normally be served by the AlgoTrader server. It should contain the layout (HTML markup) of the main UI page including the HTML markup of the new custom widget. The HTML markup of the main UI page can be obtained, for example, by opening the source of the AlgoTrader Dashboard (CTRL+U in Chrome). That source HTML can then be extended to contain a place for the custom widget ( div id="box" in below example) and code for that widget (box.js)

The code snippet below shows an example. It contains the base HTML markup of the UI and the additional markup for the custom widget.

The custom widget code is added between the comments <-- custom widget --> and <-- end of custom widget -->. The two panels in the example below are represented by two div elements with flex property 0.8 and 0.2. Please note that the relative magnitude of the flex properties determines the proportion of the screen that the panel will occupy (as a column). In the example below, the main UI occupies a column with 80% the width of the screen, and the custom widget occupies the remaining 20%.


!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, minimum-scale=1, minimal-ui" />
  <title>Dashboard - AlgoTrader</title>
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
  <link rel="manifest" href="/site.webmanifest" />
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
  <meta name="msapplication-TileColor" content="#da532c" />
  <script src="/charting_library/charting_library.min.js"></script>
  <script src="https://s3.tradingview.com/tv.js"></script>
  <script src="/outdated-browser-rework/outdated-browser-rework.min.js"></script>
  <script>
      outdatedBrowserRework();
    </script>
  <link rel="stylesheet" type="text/css" href="/outdated-browser-rework/style.css" />
</head>

<body class="top-navigation">
  <div style="display:flex;flex-direction:column;height:100%;">
    <div id="navigation"></div>

    <div style="display:flex; flex: 1">
      <div style="flex:0.8; height:100%;">
        <div id="root" style="height:100%"></div>
      </div>
      <!-- custom widget -->
      <div style="flex:0.2;">
        <div class="row row-xs-12">
          <div class="col col-xs-12">
            <div id="box"></div>
          </div>
        </div>
      </div>
      <!-- end of custom widget -->
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="/runtime.js"></script>
  <script type="text/javascript" src="/vendorsDashboard.js"></script>
  <script type="text/javascript" src="/app.js"></script>
  <script src="/box.js"></script>
</body>
</html>                            
/src/main/resources/html5/box.html

This file should contain the HTML code for the custom widget. Individual tags will be referenced by JavaScript code through tag ids.


<h3>Box Strategy</h3>
<table class="table table-striped ">
    <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>State</td>
            <td id="box_state"></td>
        </tr>
    </tbody>
</table>
<button id="box_terminate" class="btn btn-danger btn-xs" role="button">
  TERMINATE TRADE
</button>
/src/main/resources/html5/box.js

This file should contain the JavaScript code for the custom widget:

$.get("box.html", function(result){1


    $("#box").html(result); 
2
    $.get(document.documentURI + "rest/broker/url/ws", function(wsURI){ 
3
        var ws = new WebSocket(wsURI, "stomp"); 
4
        var stompClient = Stomp.over(ws);
        stompClient.connect({}, function(frame) {
            stompClient.subscribe('/topic/strategy.box.metrics', function(message){
5
                var metrics = JSON.parse(message.body));
                $("#box_state").text(metrics.state);
6
            }, { "activemq.retroactive" : true});
            $('#box_terminate').on('click', function(event) { 
7
                stompClient.send("strategy.box.terminate", {})
            });
        });
    });
});
1

Loads the html content

2

Populate the <div id="box"> tag inside index.html with the html content

3

Requests the WebSocket URI via REST call

4

Connects to STOMP of WebSocket

5

Subscribes for metrics updates of the strategy which are sent to the topic strategy.box.metrics. Setting {"activemq.retroactive" : true} will allow the custom widget to get the last metrics event from the strategy.box.metrics topic upon subscription

6

Populates the content tags with the contents of the metrics events

7

Sets button actions. Clicking the terminate button will send an empty message to the strategy.box.terminate topic.

/src/main/java/ch/algotrader/strategy/box/BoxService.java

The strategy service class is responsible for sending events to the custom widget and for processing incoming events from the custom widget.

Strategy service classes can send events to the custom widget by using the JsonTemplate available inside the strategy service. The following code snippet will send a box event to the topic strategy.box.metrics:

getJsonTemplate().convertAndSend("strategy.box.metrics", box);

Strategy service class methods can be annotated with the JmsListener annotation in order to receive incoming events from the custom widget. The following code snippet will attache the terminateSeries method to the topic strategy.box.terminate:

@JmsListener(destination = "strategy.box.terminate")

public void terminateSeries() {
    ...
}

To see the full source code of above examples please see the corresponding source code of the Appendix B, Example Strategy "Box". Additional HTML5 custom widgets are available inside the example strategies Appendix D, Example Strategy "IPO" and Appendix C, Example Strategy "Pairs Trading".

The AlgoTrader Eclipse IDE provides a perspective (AlgoTrader perspective) which is ideal for quantitative / none technical users of AlgoTrader as it hides all code related artifacts. In addition the AlgoTrader Eclipse IDE contains the Strategy Wizard and the AlgoTrader Configuration Editor.

See section Section 2.1, “Development Environment Installation” for instructions on how to install the AlgoTrader Eclipse IDE.

Quantitative users can use this perspective to modify configurations of the system and trading strategies and start the system with different configurations. Code artifacts (java classes, config files etc.) are not visible in this perspective. However all log-files and reports are shown.

The perspective shows AlgoTrader projects only, i.e. projects that have the AlgoTrader nature (ch.algotrader.quant.ui.algotradernature) defined inside the .project file:


<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
    <name>...</name>
    <comment></comment>
    <projects>
    </projects>
    <buildSpec>
        <buildCommand>
            <name>org.eclipse.jdt.core.javabuilder</name>
            <arguments>
            </arguments>
        </buildCommand>
        <buildCommand>
            <name>org.eclipse.m2e.core.maven2Builder</name>
            <arguments>
            </arguments>
        </buildCommand>
    </buildSpec>
    <natures>
        <nature>org.eclipse.jdt.core.javanature</nature>
        <nature>org.eclipse.m2e.core.maven2Nature</nature>
        <nature>ch.algotrader.quant.ui.algotradernature</nature>
    </natures>
</projectDescription>

It offers the following main capabilities:

The AlgoTrader Configuration Editor provides an editor for AlgoTrader configuration files. For more information on the AlgoTrader configuration functionality please see: Chapter 26, Configuration and Preferences API.

To open the AlgoTrader Configuration Editor, right click on an AlgoTrader project, then click the menu item AlgoTrader/Configuration. The AlgoTrader/Configuration menu will only be available if a file with the name applicationContext-client-xxx.xml exists in the project class path. If that file does not exist, the menu item will be disabled and the editor cannot be opened.

Furthermore, the AlgoTrader Configuration Editor behaves differently depending on the content of the applicationContext-client-xxx.xml file.

To validate configuration file element types, the editor requires knowledge of the enumerations in the AlgoTrader common package.

If you see an error similar to the below, add the AlgoTrader common jar file to the class path of the project where you see the error.


The tab Properties shows a list of all .properties files in the class path which can be edited here


When a property file is selected, the content of that file is shown in a table viewer. The table viewer has two columns: key and value.

The AlgoTrader Configuration Editor supports in-place editing of cells under value column.

In addition to the standard key=value pairs, the AlgoTrader Configuration Editor interprets special comments. These comments provide the AlgoTrader Configuration Editor with the information needed to display the key=value data (i.e. the type of data, the widget class it should use for an in-place editor etc.).

Example:

#{"type":"String","label":"Last name:"}
lastName = Mustermann

#{"type":"String","label":"First name:"}
surName = Joe

#{"type":"Date","required":"false","label":"Date of birth:"}
dateOfBirth = 1980-01-01    

The AlgoTrader Configuration Editor remembers association of each key=value pair with its special comment. When the editor saves properties back to the .properties, all key=value pairs are written with their special comments.

Each special comment is essentially a JSON object with three attributes: type, required and label. All three attributes are optional.

The AlgoTrader Configuration Editor also supports separators/subtitles. To add a separator, a special comment needs to be defined in the Source tab as follows:

#{"type":"String","label":"Strategy Name"}
strategyName=BOX

#{"type":"Separator"}

#{"type":"Integer","label":"Maximum Units"}
maxUnits=16

#{"type":"Integer","label":"Box Length (in Minutes)"}
boxLength=90

#{"type":"Separator", "label":"Time Settings"}

#{"type":"Integer","label":"Last Day of Trading (6=Friday)"}
endDay=6

#{"type":"Integer","label":"Latest Hour on last Day to enter a new position"}
endHour=16

#{"type":"Integer","label":"Hour on last Day to terminate the series"}
terminateHour=22  

The content of this properties file will be rendered in the Properties tab as follows:


As described in the Section 10.2.1, “AlgoTrader Perspective” section, it is possible to start a back test of a strategy by right clicking on the strategy and selecting AlgoTrader/Run Strategy.

Back Tests can also be started from within the AlgoTrader Configuration Editor:

  • To start a back test please click the "Run" button at the top of the Properties tab.

AlgoTrader provides a custom Esper EPL Syntax Highlighter based on the Colorer Library.

Together with the Eclipse Colorer Plugin it provides the following features:

  • Automatic Code Outlining

  • Pairs/Brace Matching

  • Automatic Code Folding

  • Present different colors for:

    • Reserved Keywords

    • Symbols

    • Comments

    • Literals

    • Numbers


Note

The Syntax Highlighter does not provide Code Completion or Syntax Checking!

The AlgoTrader Reference Data Manager (RDM) is a web based tool accessible via the AlgoTrader UI. It provides a way to manually edit reference data related database tables with user friendly interface and without the need to restart AlgoTrader after making changes. The list of editable tables is as follows:

The Reference Data Manager also allows running the reference data download from the user interface without having to run ReferenceDataStarter separately.

In order to use RDM you need to start AlgoTrader with html5 Spring profile enabled. You can then access RDM through the top right menu of the AlgoTrader client, menu item Reference data.

If you start AlgoTrader with a reference data Spring profile enabled (see Chapter 19, Reference Data), RDM will allow you to run the reference data download from its interface. After running it, the new securities, security families, etc. will be immediately available to use with AlgoTrader without a restart. The following image shows an example where the reference data download was run with AlgoTrader set up with Bitfinex exchange reference data Spring profile.

The new securities are visible in the Security tab in RDM.

The new securities are available in the AlgoTrader UI.

It is possible to enable a FIX adapter at run time, by activating the relevant Account table entry via RDM

The Historical Data Manager (HDM) is a web based tool accessible via the AlgoTrader UI. It provides a way to download, view and edit historical data (see Chapter 18, Historical Data) stored in InfluxDB database AlgoTrader is configured with. It also has a functionality for exporting and importing the historical data from/to InfluxDB in different CSV file formats. In order to use Historical Data Manager, AlgoTrader needs to be started with html5, influxDB Spring profiles activated and a historical data adapter profile (e.g. iBHistoricalData for Interactive Brokers adapter).

You can access the HDM through the top right menu of the AlgoTrader client.

In the following screen shot, the view of 1 minute AMZN stock historical data is selected. The data table can be ordered by dateTime in ascending or descending order. After selecting an instrument in the tree menu on the left side of the screen, all instrument's data with the relevant parameters (i.e. adapter type and bar size) is displayed.

The date and time range of displayed data is visible in the Min. date and Max. date fields at the top of the screen. The date and time range of displayed data may be changed by editing the two fields and clicking the Set range button. Note also the Delete all button at the top, it removes all data that is currently visible.

After clicking on a row in the historical data table, a window is opened from where an individual measurement may be edited or deleted.

Clicking the Add new bar button opens the window for entering a new measurement.

Note

The HDM only displays dates of measurements down to seconds, even if they have smaller than a second fractions defined in the InfluxDB store. InfluxDB allows storing measurements with precision down to nanosecond. Adding a new measurement with a date that is exactly same as an existing measurement (same in nanoseconds), will effectively overwrite the existing one.

The Export into CSV button lets the user export the data currently displayed in the historical data table in CSV file format. The HDM supports several different CSV file formats.

This is an example of a CSV file exported in Excel CSV Type format.

When selecting Historical Data Import in the tree menu on the left, the following screen is displayed. It provides a facility to import CSV files in several formats. Imported data is stored in InfluxDB.

Note that importing consists of 2 phases, the file upload phase where the uploaded file is stored in a temporary file in the operating system where AlgoTrader server runs, and the file processing phase which converts and stores the data in InfluxDB.

When selecting Historical Data Download in the tree menu on the left, the following screen is displayed. It provides a facility to download data via the historical data adapter AlgoTrader is currently configured with. Downloaded data is directly stored in InfluxDB. This functionality is only available in HDM when a historical data adapter is configured. The functionality is identical to running a Historical Data Starter (see Section 18.3, “Historical Data Download”). After finishing the historical data download, the last few lines of the AlgoTrader server log is displayed.

Note

An individual historical data download might take a considerable amount of time depending on the date range and granularity (e.g. 1 year worth of 1 second bars).