Fix dep issue

There is a dependency (to be eliminated) in the release script and the order of the projects in the package.json
AG-420 Improve React implementation
2017-06-01 20:52:37 +02:00 · 2017-05-22 15:06:18 +01:00 · 2017-05-22 15:03:35 +01:00 · 2017-05-22 15:02:25 +01:00 · 2017-05-22 15:01:21 +01:00 · 2017-05-22 10:37:03 +01:00
23 changed files with 2113 additions and 31 deletions
--- a/package.json
+++ b/package.json
@@ -1,11 +1,13 @@
 {
  "name": "ag-grid-react-example",
-  "version": "8.0.0",
+  "version": "10.0.0",
  "description": "Example Reach applicaiton using ag-Grid.",
  "main": "dist/ag-grid-react-example.js",
  "scripts": {
+    "full-width": "webpack-dev-server --config webpack.config.full-width.js --progress --colors --hot --inline",
    "standard": "webpack-dev-server --config webpack.config.standard.js --progress --colors --hot --inline",
    "grouped": "webpack-dev-server --config webpack.config.grouped.js --progress --colors --hot --inline",
+    "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config webpack.config.trader.js --progress --colors --hot --inline",
    "large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline",
    "clean": "rimraf dist",
    "build-standard": "npm run clean && webpack --config webpack.config.standard.js --progress --profile --bail"
@@ -27,23 +29,31 @@
  },
  "homepage": "http://www.ag-grid.com/",
  "devDependencies": {
-    "babel-loader": "6.2.1",
-    "babel-preset-es2015": "6.3.13",
-    "babel-preset-react": "6.3.13",
-    "babel-core": "^6.0.0",
-    "css-loader": "0.23.1",
-    "style-loader": "0.13.0",
-    "webpack": "1.12.11",
-    "webpack-dev-server": "^1.14.1"
-  },
-  "dependencies": {
-    "rimraf": "2.5.x",
-    "react": "0.14.6",
-    "react-dom": "0.14.6",
-    "ag-grid": "8.0.x",
-    "ag-grid-enterprise": "8.0.x",
-    "ag-grid-react": "8.0.x"
-  }
+      "babel-core": "6.24.x",
+      "babel-loader": "6.4.x",
+      "babel-preset-es2015": "6.24.x",
+      "babel-preset-react": "6.24.x",
+      "babel-preset-stage-0": "6.24.x",
+      "babel-preset-stage-1": "6.24.x",
+      "css-loader": "0.23.x",
+      "style-loader": "0.13.x",
+      "webpack": "1.12.x",
+      "webpack-dev-server": "1.14.x"
+    },
+    "dependencies": {
+      "ag-grid": "10.0.x",
+      "ag-grid-enterprise": "10.0.x",
+      "ag-grid-react": "10.0.x",
+      "bootstrap": "^3.3.7",
+      "d3": "4.9.1",
+      "file-loader": "^0.11.1",
+      "lodash": "4.17.4",
+      "react": "15.5.x",
+      "react-dom": "15.5.x",
+      "react-redux": "5.0.x",
+      "redux": "3.6.x",
+      "rimraf": "2.5.x"
+    }
 }


--- a/src-full-width/index.js
+++ b/src-full-width/index.js
@@ -0,0 +1,18 @@
+'use strict';
+
+import ReactDOM from 'react-dom';
+import React from 'react';
+import MyApp from './myApp.jsx';
+// is there a better way of doing this?
+import 'ag-grid-root/dist/styles/ag-grid.css';
+import 'ag-grid-root/dist/styles/theme-fresh.css';
+
+// waiting for dom to load before booting react. we could alternatively
+// put the index.js reference at the end fo the index.html, but i prefer this way.
+document.addEventListener('DOMContentLoaded', ()=> {
+    var container = document.getElementById('myAppContainer');
+    ReactDOM.render(
+        React.createElement(MyApp),
+        container
+    );
+});
--- a/src-full-width/myApp.css
+++ b/src-full-width/myApp.css
@@ -0,0 +1,28 @@
+
+.ag-cell {
+    padding-top: 2px !important;
+    padding-bottom: 2px !important;
+}
+
+label {
+    font-weight: normal !important;
+}
+
+.div-percent-bar {
+    display: inline-block;
+    height: 20px;
+    position: relative;
+}
+
+.div-percent-value {
+    position: absolute;
+    padding-left: 4px;
+    font-weight: bold;
+    font-size: 13px;
+}
+
+.div-outer-div {
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+}
--- a/src-full-width/myApp.jsx
+++ b/src-full-width/myApp.jsx
@@ -0,0 +1,356 @@
+import React from "react";
+import {AgGridReact} from "ag-grid-react";
+import "./myApp.css";
+import "ag-grid-enterprise";
+
+
+export class DetailPanelCellRenderer extends React.Component{
+    
+
+
+    render (){
+        return <div><div class="full-width-panel">
+              <div class="full-width-details">
+                <div class="full-width-detail"><b>Name: </b>+parentRecord.name+</div>
+                <div class="full-width-detail"><b>Account: </b>+parentRecord.account+</div>
+              </div>
+              <div class="full-width-grid"></div>
+              <div class="full-width-grid-toolbar">
+                   <img class="full-width-phone-icon" src="https://www.ag-grid.com/images/phone.png"/>
+                   <button><img src="https://www.ag-grid.com/images/fire.png"/></button>
+                   <button><img src="https://www.ag-grid.com/images/frost.png"/></button>
+                   <button><img src="https://www.ag-grid.com/images/sun.png"/></button>
+                   <input class="full-width-search" placeholder="Search..."/>
+              </div>
+            </div></div>;
+    }
+}
+
+
+
+// take this line out if you do not want to use ag-Grid-Enterprise
+// a list of names we pick from when generating data
+var firstnames = ['Sophia','Emma','Olivia','Isabella','Mia','Ava','Lily','Zoe','Emily','Chloe','Layla','Madison','Madelyn','Abigail','Aubrey','Charlotte','Amelia','Ella','Kaylee','Avery','Aaliyah','Hailey','Hannah','Addison','Riley','Harper','Aria','Arianna','Mackenzie','Lila','Evelyn','Adalyn','Grace','Brooklyn','Ellie','Anna','Kaitlyn','Isabelle','Sophie','Scarlett','Natalie','Leah','Sarah','Nora','Mila','Elizabeth','Lillian','Kylie','Audrey','Lucy','Maya'];
+var lastnames = ['Smith','Jones','Williams','Taylor','Brown','Davies','Evans','Wilson','Thomas','Johnson'];
+
+var images = ['niall','sean','alberto','statue','horse'];
+// each call gets a unique id, nothing to do with the grid, just help make the sample
+// data more realistic
+var callIdSequence = 555;
+
+// method creates all the data, both the top level grid and the lower level grids
+function createRowData() {
+    var rowData = [];
+
+    for (var i = 0; i < 20; i++) {
+        var firstName = firstnames[Math.floor(Math.random()*firstnames.length)];
+        var lastName = lastnames[Math.floor(Math.random()*lastnames.length)];
+
+        var image = images[i % images.length];
+
+        var totalDuration = 0;
+
+        var callRecords = [];
+        // call count is random number between 20 and 120
+        var callCount = Math.floor(Math.random() * 100) + 20;
+        for (var j = 0; j<callCount; j++) {
+            // duration is random number between 20 and 120
+            var callDuration = Math.floor(Math.random() * 100) + 20;
+            var callRecord = {
+                callId: callIdSequence++,
+                duration: callDuration,
+                switchCode: 'SW' + Math.floor(Math.random() * 10),
+                // 50% chance of in vs out
+                direction: (Math.random()>.5) ? 'In' : 'Out',
+                // made up number
+                number:  '(0' + Math.floor(Math.random() * 10) + ') ' + Math.floor(Math.random() * 100000000)
+            };
+            callRecords.push(callRecord);
+            totalDuration += callDuration;
+        }
+
+        var record = {
+            name: firstName + ' ' + lastName,
+            account: i + 177000,
+            totalCalls: callCount,
+            image: image,
+            // convert from seconds to minutes
+            totalMinutes: totalDuration / 60,
+            callRecords: callRecords
+        };
+        rowData.push(record);
+    }
+
+    return rowData;
+}
+
+var minuteCellFormatter = function (params) {
+    return params.value.toLocaleString() + 'm';
+};
+
+var secondCellFormatter= function (params) {
+    return params.value.toLocaleString() + 's';
+};
+
+var masterColumnDefs = [
+    {headerName: 'Name', field: 'name',
+        // left column is going to act as group column, with the expand / contract controls
+        cellRenderer: 'group',
+        // we don't want the child count - it would be one each time anyway as each parent
+        // not has exactly one child node
+        cellRendererParams: { suppressCount: true }
+    },
+    {headerName: 'Account', field: 'account'},
+    {headerName: 'Calls', field: 'totalCalls'},
+    {headerName: 'Minutes', field: 'totalMinutes', cellFormatter: minuteCellFormatter}
+];
+
+var detailColumnDefs = [
+    {headerName: 'Call ID', field: 'callId', cellClass: 'call-record-cell'},
+    {headerName: 'Direction', field: 'direction', cellClass: 'call-record-cell'},
+    {headerName: 'Number', field: 'number', cellClass: 'call-record-cell'},
+    {headerName: 'Duration', field: 'duration', cellClass: 'call-record-cell', cellFormatter: secondCellFormatter},
+    {headerName: 'Switch', field: 'switchCode', cellClass: 'call-record-cell'}
+];
+
+var rowData = createRowData();
+export default class MyApp extends React.Component {
+
+    constructor() {
+        super();
+
+        this.state = {
+            quickFilterText: null,
+            showGrid: true,
+            showToolPanel: false,
+            icons: {
+                columnRemoveFromGroup: '<i class="fa fa-remove"/>',
+                filter: '<i class="fa fa-filter"/>',
+                sortAscending: '<i class="fa fa-long-arrow-down"/>',
+                sortDescending: '<i class="fa fa-long-arrow-up"/>',
+                groupExpanded: '<i class="fa fa-minus-square-o"/>',
+                groupContracted: '<i class="fa fa-plus-square-o"/>',
+                columnGroupOpened: '<i class="fa fa-minus-square-o"/>',
+                columnGroupClosed: '<i class="fa fa-plus-square-o"/>'
+            }
+        };
+
+        // the grid options are optional, because you can provide every property
+        // to the grid via standard React properties. however, the react interface
+        // doesn't block you from using the standard JavaScript interface if you
+        // wish. Maybe you have the gridOptions stored as JSON on your server? If
+        // you do, the providing the gridOptions as a standalone object is just
+        // what you want!
+        this.gridOptions = {
+            columnDefs: masterColumnDefs,
+            rowData: rowData,
+            //We register the react date component that ag-grid will use to render
+            // this is how you listen for events using gridOptions
+            onModelUpdated: function () {
+                console.log('event onModelUpdated received');
+            },
+            defaultColDef : {
+                headerComponentParams : {
+                    menuIcon: 'fa-bars'
+                }
+            },
+            // this is a simple property
+            rowBuffer: 10 // no need to set this, the default is fine for almost all scenarios
+        };
+    }
+
+    onShowGrid(show) {
+        this.setState({
+            showGrid: show
+        });
+    }
+
+    onToggleToolPanel(event) {
+        this.setState({showToolPanel: event.target.checked});
+    }
+
+    onGridReady(params) {
+        this.api = params.api;
+        this.columnApi = params.columnApi;
+        params.api.sizeColumnsToFit();
+    }
+
+    selectAll() {
+        this.api.selectAll();
+    }
+
+    deselectAll() {
+        this.api.deselectAll();
+    }
+
+    setCountryVisible(visible) {
+        this.columnApi.setColumnVisible('country', visible);
+    }
+
+    onQuickFilterText(event) {
+        this.setState({quickFilterText: event.target.value});
+    }
+
+    onCellClicked(event) {
+        console.log('onCellClicked: ' + event.data.name + ', col ' + event.colIndex);
+    }
+
+    onRowSelected(event) {
+        console.log('onRowSelected: ' + event.node.data.name);
+    }
+
+    onRefreshData() {
+        var newRowData = new RowDataFactory().createRowData();
+        this.setState({
+            rowData: newRowData
+        });
+    }
+
+    invokeSkillsFilterMethod() {
+        var skillsFilter = this.api.getFilterInstance('skills');
+        var componentInstance = skillsFilter.getFrameworkComponentInstance();
+        componentInstance.helloFromSkillsFilter();
+    }
+
+    dobFilter () {
+        let dateFilterComponent = this.gridOptions.api.getFilterInstance('dob');
+        dateFilterComponent.setFilterType('equals');
+        dateFilterComponent.setDateFrom('2000-01-01');
+        this.gridOptions.api.onFilterChanged();
+
+    }
+
+    onIsFullWidthCell (rowNode) {
+        return rowNode.level === 1;
+    }
+
+    onGetRowHeight (params) {
+        var rowIsDetailRow = params.node.level===1;
+        // return 100 when detail row, otherwise return 25
+        return rowIsDetailRow ? 75 : 25;
+    }
+
+    onGetNodeChildDetails (record) {
+        if (record.callRecords) {
+            return {
+                group: true,
+                // the key is used by the default group cellRenderer
+                key: record.name,
+                // provide ag-Grid with the children of this group
+                children: [record.callRecords],
+                // for demo, expand the third row by default
+                expanded: record.account === 177005
+            };
+        } else {
+            return null;
+        }
+    }
+
+    render() {
+        var gridTemplate;
+        var bottomHeaderTemplate;
+        var topHeaderTemplate;
+
+        topHeaderTemplate = (
+            <div>
+                <div style={{float: 'right'}}>
+                    <input type="text" onChange={this.onQuickFilterText.bind(this)}
+                           placeholder="Type text to filter..."/>
+                    <button id="btDestroyGrid" disabled={!this.state.showGrid}
+                            onClick={this.onShowGrid.bind(this, false)}>Destroy Grid
+                    </button>
+                    <button id="btCreateGrid" disabled={this.state.showGrid} onClick={this.onShowGrid.bind(this, true)}>
+                        Create Grid
+                    </button>
+                </div>
+                <div style={{padding: '4px'}}>
+                    <b>Employees Skills and Contact Details</b> <span id="rowCount"/>
+                </div>
+            </div>
+        );
+
+        // showing the bottom header and grid is optional, so we put in a switch
+        if (this.state.showGrid) {
+            bottomHeaderTemplate = (
+                <div>
+                    <div style={{padding: 4}} className={'toolbar'}>
+                        <span>
+                            Grid API:
+                            <button onClick={this.selectAll.bind(this)}>Select All</button>
+                            <button onClick={this.deselectAll.bind(this)}>Clear Selection</button>
+                        </span>
+                        <span style={{marginLeft: 20}}>
+                            Column API:
+                            <button onClick={this.setCountryVisible.bind(this, false)}>Hide Country Column</button>
+                            <button onClick={this.setCountryVisible.bind(this, true)}>Show Country Column</button>
+                        </span>
+                    </div>
+                    <div style={{clear: 'both'}}></div>
+                    <div style={{padding: 4}} className={'toolbar'}>
+                        <span>
+                        <label>
+                            <input type="checkbox" onChange={this.onToggleToolPanel.bind(this)}/>
+                            Show Tool Panel
+                        </label>
+                        <button onClick={this.onRefreshData.bind(this)}>Refresh Data</button>
+                            </span>
+                        <span style={{marginLeft: 20}}>
+                            Filter API:
+                            <button onClick={this.invokeSkillsFilterMethod.bind(this, false)}>Invoke Skills Filter Method</button>
+                            <button onClick={this.dobFilter.bind(this)}>DOB equals to 01/01/2000</button>
+                        </span>
+                    </div>
+                    <div style={{clear: 'both'}}></div>
+                </div>
+            );
+            gridTemplate = (
+                <div style={{height: 400}} className="ag-fresh">
+                    <AgGridReact
+                        // gridOptions is optional - it's possible to provide
+                        // all values as React props
+                        gridOptions={this.gridOptions}
+
+                        // listening for events
+                        onGridReady={this.onGridReady.bind(this)}
+                        onRowSelected={this.onRowSelected.bind(this)}
+                        onCellClicked={this.onCellClicked.bind(this)}
+
+                        // binding to simple properties
+                        showToolPanel={this.state.showToolPanel}
+                        quickFilterText={this.state.quickFilterText}
+
+                        // binding to an object property
+                        icons={this.state.icons}
+
+
+                        // no binding, just providing hard coded strings for the properties
+                        suppressRowClickSelection="true"
+                        rowSelection="multiple"
+                        enableColResize="true"
+                        enableSorting="true"
+                        enableFilter="true"
+                        groupHeaders="true"
+                        rowHeight="22"
+                        // we cannot filter on the groups, as filters work on the child nodes, and in this example
+                        // the child nodes are not aggregations of the parent.
+                        suppressMenuFilterPanel="true"
+                        isFullWidthCell = {this.onIsFullWidthCell.bind(this)}
+                        // see ag-Grid docs cellRenderer for details on how to build cellRenderers
+                        fullWidthCellRendererFramework= {DetailPanelCellRenderer}
+                        getRowHeight={this.onGetRowHeight.bind(this)}
+                        getNodeChildDetails={this.onGetNodeChildDetails.bind(this)}
+                    />
+                </div>
+            );
+        }
+
+        return <div style={{width: '1024px'}}>
+            <div style={{padding: '4px'}}>
+                {topHeaderTemplate}
+                {bottomHeaderTemplate}
+                {gridTemplate}
+            </div>
+        </div>;
+    }
+
+}
--- a/src-standard/RowDataFactory.js
+++ b/src-standard/RowDataFactory.js
@@ -5,7 +5,7 @@ export default class RowDataFactory {
    createRowData() {
        var rowData = [];

-        for (var i = 0; i < 1000; i++) {
+        for (var i = 0; i < 200; i++) {
            var countryData = RefData.COUNTRIES[i % RefData.COUNTRIES.length];
            rowData.push({
                name: RefData.FIRST_NAMES[i % RefData.FIRST_NAMES.length] + ' ' + RefData.LAST_NAMES[i % RefData.LAST_NAMES.length],
--- a/src-standard/index.js
+++ b/src-standard/index.js
@@ -3,7 +3,7 @@
 import ReactDOM from 'react-dom';
 import React from 'react';
 import MyApp from './myApp.jsx';
-// is there a better way of doing this?
+
 import 'ag-grid-root/dist/styles/ag-grid.css';
 import 'ag-grid-root/dist/styles/theme-fresh.css';

--- a/src-standard/myApp.jsx
+++ b/src-standard/myApp.jsx
@@ -5,9 +5,8 @@ import ColDefFactory from "./ColDefFactory.jsx";
 import MyReactDateComponent from "./MyReactDateComponent.jsx";
 import MyReactHeaderComponent from "./MyReactHeaderComponent.jsx";
 import "./myApp.css";
-import "ag-grid-enterprise";
-
 // take this line out if you do not want to use ag-Grid-Enterprise
+import "ag-grid-enterprise";

 export default class MyApp extends React.Component {

@@ -40,20 +39,24 @@ export default class MyApp extends React.Component {
        // what you want!
        this.gridOptions = {
            //We register the react date component that ag-grid will use to render
-            dateComponentFramework:MyReactDateComponent,
+            dateComponentFramework: MyReactDateComponent,
            // this is how you listen for events using gridOptions
            onModelUpdated: function () {
                console.log('event onModelUpdated received');
            },
-            defaultColDef : {
-                headerComponentFramework : MyReactHeaderComponent,
-                headerComponentParams : {
+            defaultColDef: {
+                headerComponentFramework: MyReactHeaderComponent,
+                headerComponentParams: {
                    menuIcon: 'fa-bars'
                }
            },
            // this is a simple property
            rowBuffer: 10 // no need to set this, the default is fine for almost all scenarios
        };
+
+        this.onGridReady = this.onGridReady.bind(this);
+        this.onRowSelected = this.onRowSelected.bind(this);
+        this.onCellClicked = this.onCellClicked.bind(this);
    }

    onShowGrid(show) {
@@ -108,7 +111,7 @@ export default class MyApp extends React.Component {
        componentInstance.helloFromSkillsFilter();
    }

-    dobFilter () {
+    dobFilter() {
        let dateFilterComponent = this.gridOptions.api.getFilterInstance('dob');
        dateFilterComponent.setFilterType('equals');
        dateFilterComponent.setDateFrom('2000-01-01');
@@ -181,9 +184,9 @@ export default class MyApp extends React.Component {
                        gridOptions={this.gridOptions}

                        // listening for events
-                        onGridReady={this.onGridReady.bind(this)}
-                        onRowSelected={this.onRowSelected.bind(this)}
-                        onCellClicked={this.onCellClicked.bind(this)}
+                        onGridReady={this.onGridReady}
+                        onRowSelected={this.onRowSelected}
+                        onCellClicked={this.onCellClicked}

                        // binding to simple properties
                        showToolPanel={this.state.showToolPanel}
@@ -204,7 +207,6 @@ export default class MyApp extends React.Component {
                        enableFilter="true"
                        groupHeaders="true"
                        rowHeight="22"
-                        debug="true"
                    />
                </div>
            );
--- a/src-trader-dashboard/components/ControlPanel.jsx
+++ b/src-trader-dashboard/components/ControlPanel.jsx
@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+
+export default class extends Component {
+    constructor(props) {
+        super(props);
+
+        this.onExchangeChanged = this.onExchangeChanged.bind(this);
+    }
+
+    onExchangeChanged(event) {
+        this.props.onExchangeChanged(event.target.value);
+    }
+
+    render() {
+        return (
+            <div>
+                <span style={{marginRight: 15}}>Control Panel</span>
+                <select value={this.props.selectedExchange.symbol} onChange={this.onExchangeChanged}>
+                    {
+                        this.props.exchanges.map((exchange) => {
+                            return <option key={exchange.symbol} value={exchange.symbol}>{exchange.name}</option>
+                        })
+                    }
+                </select>
+            </div>
+        );
+    }
+};
--- a/src-trader-dashboard/components/FxQuoteMatrix.jsx
+++ b/src-trader-dashboard/components/FxQuoteMatrix.jsx
@@ -0,0 +1,94 @@
+import React, {Component} from "react";
+import {connect} from "react-redux";
+import {AgGridReact} from "ag-grid-react";
+
+import ExchangeService from "../services/ExchangeService.jsx";
+
+class FxQuoteMatrix extends Component {
+    constructor(props) {
+        super(props);
+
+        this.exchangeService = new ExchangeService();
+
+        this.state = {
+            columnDefs: this.exchangeService.getFxMatrixHeaderNames(),
+            // rowData: this.exchangeService.getFxMatrixSnapshot()
+        };
+
+        // grid events
+        this.onGridReady = this.onGridReady.bind(this);
+    }
+
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+    }
+
+
+    // componentWillUnmount() {
+    //     this.exchangeService.removeSubscribers();
+    // }
+
+    componentWillReceiveProps(nextProps) {
+        console.log(props);
+    //     if (nextProps.selectedExchange.supportedStocks !== this.props.selectedExchange.supportedStocks) {
+    //         if (!this.gridApi) {
+    //             return;
+    //         }
+    //
+    //         const currentSymbols = this.props.selectedExchange.supportedStocks;
+    //         const nextSymbols = nextProps.selectedExchange.supportedStocks;
+    //
+    //         // Unsubscribe to current ones that will be removed
+    //         const symbolsRemoved = difference(currentSymbols, nextSymbols);
+    //         forEach(symbolsRemoved, symbol => {
+    //             this.exchangeService.removeSubscriber(this.updateQuote, symbol);
+    //         });
+    //
+    //         // Subscribe to new ones that need to be added
+    //         const symbolsAdded = difference(nextSymbols, currentSymbols);
+    //         forEach(symbolsAdded, symbol => {
+    //             this.exchangeService.addSubscriber(this.updateQuote, symbol);
+    //         });
+    //
+    //         // Remove ag-grid nodes as necessary
+    //         const nodesToRemove = [];
+    //         this.gridApi.forEachNode(node => {
+    //             const {data} = node;
+    //             if (includes(symbolsRemoved, data.symbol)) {
+    //                 nodesToRemove.push(node);
+    //             }
+    //         });
+    //         this.gridApi.removeItems(nodesToRemove);
+    //
+    //         // Insert new ag-grid nodes as necessary
+    //         this.gridApi.addItems(map(symbolsAdded, symbol => this.exchangeService.getTicker(symbol)));
+    //     }
+    }
+
+    render() {
+        return (
+            <div style={{height: 500, width: "100%"}}
+                 className="ag-fresh">
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+                    enableSorting="false"
+                    enableFilter="false"
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+            </div>
+        );
+    }
+}
+
+export default connect(
+    (state) => {
+        return {
+            rowData: state.fxRowData
+        }
+    }
+)(FxQuoteMatrix);
--- a/src-trader-dashboard/components/PriceChangesGrid.jsx
+++ b/src-trader-dashboard/components/PriceChangesGrid.jsx
@@ -0,0 +1,180 @@
+import React, {Component} from "react";
+
+// take this line out if you do not want to use ag-Grid-Enterprise
+import "ag-grid-enterprise";
+
+import {AgGridReact} from "ag-grid-react";
+
+import map from "lodash/map";
+import difference from "lodash/difference";
+import forEach from "lodash/forEach";
+import includes from "lodash/includes";
+import assign from "lodash/assign";
+
+import ExchangeService from "../services/ExchangeService.jsx";
+
+export default class extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            columnDefs: [
+                {
+                    field: 'symbol',
+                    headerName: 'Symbol',
+                    sort: 'asc'
+                },
+                {
+                    field: 'price',
+                    headerName: 'Price',
+                    cellFormatter: this.numberFormatter,
+                    cellRenderer: 'animateShowChange',
+                    cellStyle: {'text-align': 'right'}
+                },
+                {
+                    field: 'bid',
+                    headerName: 'Bid',
+                    cellFormatter: this.numberFormatter,
+                    cellRenderer: 'animateShowChange',
+                    cellStyle: {'text-align': 'right'}
+                },
+                {
+                    field: 'ask',
+                    headerName: 'Ask',
+                    cellFormatter: this.numberFormatter,
+                    cellRenderer: 'animateShowChange',
+                    cellStyle: {'text-align': 'right'}
+                },
+                {
+                    headerName: 'Recommendation',
+                    field: 'recommendation',
+                    cellEditor: 'richSelect',
+                    cellEditorParams: {
+                        values: ['Buy', 'Hold', 'Sell']
+                    },
+                    editable: true
+                }
+            ]
+        };
+
+        this.exchangeService = new ExchangeService();
+
+        // grid events
+        this.onGridReady = this.onGridReady.bind(this);
+        this.onRowClicked = this.onRowClicked.bind(this);
+
+        // component events
+        this.updateQuote = this.updateQuote.bind(this);
+    }
+
+    numberFormatter(params) {
+        if (typeof params.value === 'number') {
+            return params.value.toFixed(2);
+        } else {
+            return params.value;
+        }
+    }
+
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        // make realistic - call in a batch
+        let rowData = map(this.props.selectedExchange.supportedStocks, symbol => this.exchangeService.getTicker(symbol));
+        this.gridApi.addItems(rowData);
+
+        this.gridApi.sizeColumnsToFit();
+    }
+
+    onRowClicked(params) {
+        this.props.onRowClicked(params.data.symbol);
+    }
+
+    componentWillMount() {
+        this.props.selectedExchange.supportedStocks.forEach(symbol => {
+            this.exchangeService.addSubscriber(this.updateQuote, symbol);
+        });
+    }
+
+    componentWillUnmount() {
+        this.exchangeService.removeSubscribers();
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.selectedExchange.supportedStocks !== this.props.selectedExchange.supportedStocks) {
+            if (!this.gridApi) {
+                return;
+            }
+
+            const currentSymbols = this.props.selectedExchange.supportedStocks;
+            const nextSymbols = nextProps.selectedExchange.supportedStocks;
+
+            // Unsubscribe to current ones that will be removed
+            const symbolsRemoved = difference(currentSymbols, nextSymbols);
+            forEach(symbolsRemoved, symbol => {
+                this.exchangeService.removeSubscriber(this.updateQuote, symbol);
+            });
+
+            // Subscribe to new ones that need to be added
+            const symbolsAdded = difference(nextSymbols, currentSymbols);
+            forEach(symbolsAdded, symbol => {
+                this.exchangeService.addSubscriber(this.updateQuote, symbol);
+            });
+
+            // Remove ag-grid nodes as necessary
+            const nodesToRemove = [];
+            this.gridApi.forEachNode(node => {
+                const {data} = node;
+                if (includes(symbolsRemoved, data.symbol)) {
+                    nodesToRemove.push(node);
+                }
+            });
+            this.gridApi.removeItems(nodesToRemove);
+
+            // Insert new ag-grid nodes as necessary
+            this.gridApi.addItems(map(symbolsAdded, symbol => this.exchangeService.getTicker(symbol)));
+        }
+    }
+
+    updateQuote(quote) {
+        if (!this.gridApi) {
+            // the grid isn't ready yet
+            return;
+        }
+
+        const updatedNodes = [];
+        const updatedCols = [];
+
+        this.gridApi.forEachNode(node => {
+            const {data} = node;
+            if (data.symbol === quote.symbol) {
+                for (const def of this.state.columnDefs) {
+                    if (data[def.field] !== quote[def.field]) {
+                        updatedCols.push(def.field);
+                    }
+                }
+                assign(data, quote);
+                updatedNodes.push(node);
+            }
+        });
+
+        this.gridApi.refreshCells(updatedNodes, updatedCols);
+    };
+
+    render() {
+        return (
+            <div style={{height: 500, width: 800}}
+                 className="ag-fresh">
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    enableSorting="true"
+
+                    // events
+                    onGridReady={this.onGridReady}
+                    onRowClicked={this.onRowClicked}>
+                </AgGridReact>
+            </div>
+        );
+    }
+}
--- a/src-trader-dashboard/components/StockDetailPanel.jsx
+++ b/src-trader-dashboard/components/StockDetailPanel.jsx
@@ -0,0 +1,57 @@
+import React, {Component} from "react";
+
+import ExchangeService from "../services/ExchangeService.jsx";
+
+import StockPriceDeltaPanel from "./StockPriceDeltaPanel.jsx";
+import StockTimestampPanel from "./StockTimestampPanel.jsx";
+import StockSummaryPanel from "./StockSummaryPanel.jsx";
+import StockHistoricalChartPanel from "./StockHistoricalChartPanel.jsx";
+
+export default class extends Component {
+    constructor(props) {
+        super(props);
+
+        this.exchangeService = new ExchangeService();
+
+        this.state = {
+            priceDelta: null,
+            timestamp: null,
+            tickerSummary: null,
+            historicalData: null
+        }
+    }
+
+    componentWillReceiveProps(nextProps, nextState) {
+        if (nextProps.selectedSymbol &&
+            nextProps.selectedSymbol !== this.props.selectedSymbol) {
+            let stockDetail = this.exchangeService.getTickerDetail(nextProps.selectedSymbol);
+
+            this.setState({
+                pricingDelta: stockDetail.pricingDelta,
+                timestamp: stockDetail.timestamp,
+                tickerSummary: stockDetail.tickerSummary,
+                historicalData: stockDetail.historicalData
+            })
+        }
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextProps.selectedSymbol !== this.props.selectedSymbol;
+    }
+
+    render() {
+        if (!this.props.selectedSymbol) {
+            return null;
+        } else {
+            return (
+                <div>
+                    <StockPriceDeltaPanel pricingDelta={this.state.pricingDelta}/>
+                    <StockTimestampPanel timestamp={this.state.timestamp}
+                                         exchangeName={this.props.exchangeName}/>
+                    <StockSummaryPanel tickerSummary={this.state.tickerSummary}/>
+                    <StockHistoricalChartPanel historicalData={this.state.historicalData}/>
+                </div>
+            );
+        }
+    }
+}
--- a/src-trader-dashboard/components/StockHistoricalChartPanel.jsx
+++ b/src-trader-dashboard/components/StockHistoricalChartPanel.jsx
@@ -0,0 +1,128 @@
+import React, {Component} from "react";
+
+import * as d3 from "d3";
+
+export default class extends Component {
+    constructor(props) {
+        super(props);
+
+        this.margin = {
+            top: 20,
+            right: 20,
+            bottom: 50,
+            left: 0
+        };
+
+        this.renderingWidth = this.props.graphWidth - this.margin.left - this.margin.right;
+        this.renderingheight = this.props.graphHeight - this.margin.top - this.margin.bottom;
+
+        this.x = d3.scaleTime()
+            .range([0, this.renderingWidth]);
+
+        this.y = d3.scaleLinear()
+            .rangeRound([this.renderingheight, 0]);
+
+        this.line = d3.line()
+            .x(d => this.x(d.date))
+            .y(d => this.y(d.price));
+    }
+
+    static get defaultProps() {
+        return {
+            graphHeight: 320,
+            graphWidth: 400
+        }
+    }
+
+    componentDidMount() {
+        this.renderGraph()
+    }
+
+    componentDidUpdate() {
+        this.renderGraph()
+    }
+
+    renderGraph() {
+        if (!this.props.historicalData) {
+            return;
+        }
+
+        let data = this.props.historicalData;
+        let parseTime = d3.timeParse("%d-%m-%Y");
+        data.forEach((datum) => {
+            datum.date = parseTime(datum.date);
+            datum.price = +datum.price;
+        });
+
+        // clear out any previous graph
+        d3.select(this.refs.historyGraph)
+            .selectAll("svg")
+            .remove();
+
+        // create a new one
+        let svg = d3.select(this.refs.historyGraph)
+            .append('svg')
+            .attr('height', this.props.graphHeight)
+            .attr('width', this.props.graphWidth);
+
+        let g = svg.append("g")
+            .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
+
+        this.x.domain(d3.extent(data, d => d.date));
+
+        this.y.domain(d3.extent(data, d => d.price));
+
+        let scale = d3.scaleTime()
+            .domain(d3.extent(data, d => d.date))
+            .range([0, this.renderingWidth]);
+
+        // Add the x Axis
+        svg.append("g")
+            .attr("class", "axis")
+            .attr("transform", "translate(0," + (this.renderingheight + 20 ) + ")")
+            .call(d3.axisBottom(scale).tickFormat(d3.timeFormat("%Y-%m-%d")))
+            .selectAll("text")
+            .attr("y", 0)
+            .attr("x", 9)
+            .attr("dy", ".35em")
+            .attr("transform", "rotate(55)")
+            .style("text-anchor", "start");
+
+        // Add the y Axis
+        svg.append("g")
+            .call(d3.axisLeft(this.y));
+
+        g.append("g")
+            .call(d3.axisLeft(this.y))
+            .append("text")
+            .attr("fill", "#000")
+            .attr("transform", "rotate(-90)")
+            .attr("y", 9)
+            .attr("dy", "0.71em")
+            .attr("text-anchor", "end")
+            .text("Price ($)");
+
+        g.append("path")
+            .datum(data)
+            .attr("fill", "none")
+            .attr("stroke", "steelblue")
+            .attr("stroke-linejoin", "round")
+            .attr("stroke-linecap", "round")
+            .attr("stroke-width", 1.5)
+            .attr("d", this.line);
+    }
+
+    render() {
+        let containerStyle = {
+            marginTop: 5
+        };
+
+        if (!this.props.historicalData) {
+            return null;
+        } else {
+            return (
+                <div style={containerStyle} ref="historyGraph"></div>
+            );
+        }
+    }
+}
--- a/src-trader-dashboard/components/StockPanel.jsx
+++ b/src-trader-dashboard/components/StockPanel.jsx
@@ -0,0 +1,56 @@
+import React, {Component} from "react";
+
+import PriceChangesGrid from "./PriceChangesGrid.jsx";
+import StockDetailPanel from "./StockDetailPanel.jsx";
+import FxQuoteMatrix from "./FxQuoteMatrix.jsx";
+
+export default class extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            selectedSymbol: null
+        };
+
+        this.onRowClicked = this.onRowClicked.bind(this);
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.selectedExchange !== this.props.selectedExchange) {
+            this.setState({
+                selectedSymbol: null
+            })
+        }
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextProps.selectedExchange !== this.props.selectedExchange ||
+            nextState.selectedSymbol !== this.state.selectedSymbol;
+    }
+
+    onRowClicked(selectedSymbol) {
+        this.setState({
+            selectedSymbol
+        })
+    }
+
+    render() {
+        return (
+            <div style={{width: 1250}}>
+                {/*<div>*/}
+                    {/*<div style={{float: "left", marginRight: 25}}>*/}
+                        {/*<PriceChangesGrid selectedExchange={this.props.selectedExchange}*/}
+                                          {/*onRowClicked={this.onRowClicked}/>*/}
+                    {/*</div>*/}
+                    {/*<div style={{float: "left"}}>*/}
+                        {/*<StockDetailPanel selectedSymbol={this.state.selectedSymbol}*/}
+                                          {/*exchangeName={this.props.selectedExchange.name}/>*/}
+                    {/*</div>*/}
+                {/*</div>*/}
+                <div style={{width: "100%", clear: "both", paddingTop: 25}}>
+                    <FxQuoteMatrix/>
+                </div>
+            </div>
+        );
+    }
+};
--- a/src-trader-dashboard/components/StockPriceDeltaPanel.jsx
+++ b/src-trader-dashboard/components/StockPriceDeltaPanel.jsx
@@ -0,0 +1,95 @@
+import React, {Component} from "react";
+
+import isEqual from "lodash/isEqual";
+
+export default class extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            currentPrice: null,
+            delta: null,
+            deltaPercentage: null
+        };
+
+    }
+
+    componentDidMount() {
+        this.updatePriceDelta(this.props.pricingDelta);
+    }
+
+    componentWillReceiveProps(nextProps, nextState) {
+        if (!isEqual(this.props.pricingDelta, nextProps.pricingDelta)) {
+            this.updatePriceDelta(nextProps.pricingDelta);
+        }
+    }
+
+    updatePriceDelta(pricingDelta) {
+        let delta = pricingDelta.currentPrice - pricingDelta.previousPrice;
+        let deltaPercentage = (pricingDelta.currentPrice - pricingDelta.previousPrice) / pricingDelta.currentPrice;
+
+        this.setState({
+            currentPrice: pricingDelta.currentPrice,
+            delta,
+            deltaPercentage
+        })
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return !isEqual(this.props.pricingDelta, nextProps.pricingDelta) ||
+            !isEqual(this.state, nextState);
+    }
+
+    numberFormatter(input) {
+        return input ? input.toFixed(2) : null;
+    }
+
+    render() {
+        let containerStyle = {
+            display: "inline-block"
+        };
+
+        let priceStyle = {
+            fontSize: "2.6em",
+            fontWeight: "bold",
+            marginRight: 10
+        };
+
+        let deltaStyle = {
+            fontWeight: "normal",
+            fontSize: "1.8em",
+            verticalAlign: "bottom"
+        };
+
+        let negativeSwingStyle = {
+            color: "#d14836",
+            marginRight: 5
+        };
+
+        let positiveSwingStyle = {
+            color: "#093",
+            marginRight: 5
+        };
+
+        let swingStyle = this.state.delta >= 0 ? positiveSwingStyle : negativeSwingStyle;
+
+        if(!this.props.pricingDelta) {
+            return null;
+        } else {
+            return (
+                <div>
+                    <span style={priceStyle}>
+                        {this.numberFormatter(this.state.currentPrice)}
+                    </span>
+                    <div style={containerStyle}>
+                        <span style={deltaStyle}>
+                            <span style={swingStyle}>{this.numberFormatter(this.state.delta)}</span>
+                            <span
+                                style={swingStyle}>({this.numberFormatter(this.state.deltaPercentage)}%)</span>
+                        </span>
+                    </div>
+                </div>
+            );
+        }
+    }
+}
--- a/src-trader-dashboard/components/StockSummaryPanel.jsx
+++ b/src-trader-dashboard/components/StockSummaryPanel.jsx
@@ -0,0 +1,78 @@
+import React, {Component} from "react";
+
+export default class extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        let containerStyle = {
+            fontSize: 13
+        };
+
+        let tableStyle = {
+            display: "inline-block",
+            verticalAlign: "top",
+            borderCollapse: "collapse"
+
+        };
+
+        let keyStyle = {
+            color: "#666"
+        };
+
+        let valueStyle = {
+            textAlign: "right"
+        };
+
+        if (!this.props.tickerSummary) {
+            return null;
+        } else {
+            return (
+                <div style={containerStyle}>
+                    <table style={tableStyle}>
+                        <tbody>
+                        <tr>
+                            <td style={keyStyle}>Range</td>
+                            <td style={valueStyle}>{this.props.tickerSummary.range}</td>
+                        </tr>
+                        <tr>
+                            <td style={keyStyle}>52 week</td>
+                            <td style={valueStyle}>{this.props.tickerSummary.fiftyTwoWeek}</td>
+                        </tr>
+                        <tr>
+                            <td style={keyStyle}>Open</td>
+                            <td style={valueStyle}>{this.props.tickerSummary.open}</td>
+                        </tr>
+                        <tr>
+                            <td style={keyStyle}>Vol / Avg.</td>
+                            <td style={valueStyle}>{this.props.tickerSummary.vol}/{this.props.tickerSummary.avg}
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <table style={tableStyle}>
+                        <tbody>
+                        <tr>
+                            <td style={keyStyle}>Div/yield</td>
+                            <td style={valueStyle}>{this.props.tickerSummary.dividend}/{this.props.tickerSummary.yld}</td>
+                        </tr>
+                        <tr>
+                            <td style={keyStyle}>EPS</td>
+                            <td style={valueStyle}>{this.props.tickerSummary.eps}</td>
+                        </tr>
+                        <tr>
+                            <td style={keyStyle}>Shares</td>
+                            <td style={valueStyle}>{this.props.tickerSummary.shares}</td>
+                        </tr>
+                        <tr>
+                            <td style={keyStyle}>Market Cap</td>
+                            <td style={valueStyle}>{this.props.tickerSummary.marketCap}</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            );
+        }
+    }
+}
--- a/src-trader-dashboard/components/StockTimestampPanel.jsx
+++ b/src-trader-dashboard/components/StockTimestampPanel.jsx
@@ -0,0 +1,30 @@
+import React, {Component} from "react";
+
+export default class extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        let minorStyle = {
+            fontSize: 11,
+            color: "#6F6F6F"
+        };
+
+        if (!this.props.timestamp) {
+            return null;
+        } else {
+            return (
+                <div>
+                    <div>
+                        {this.props.timestamp}
+                        <div style={minorStyle}>
+                            <span>{this.props.exchangeName}</span>
+                            <div>Currency in USD</div>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+    }
+}
--- a/src-trader-dashboard/components/TraderDashboard.jsx
+++ b/src-trader-dashboard/components/TraderDashboard.jsx
@@ -0,0 +1,43 @@
+import React, {Component} from "react";
+
+import ExchangeService from "../services/ExchangeService.jsx";
+
+import ControlPanel from "./ControlPanel.jsx";
+import StockPanel from "./StockPanel.jsx";
+
+
+export default class TraderDashboard extends Component {
+    constructor(props) {
+        super(props);
+
+        this.exchangeService = new ExchangeService();
+
+        this.state = {
+            selectedExchange: this.exchangeService.getExchangeInformation("NASDAQ"),
+            exchanges: this.exchangeService.getExchanges()
+        };
+
+        this.onExchangeChanged = this.onExchangeChanged.bind(this);
+    }
+
+    onExchangeChanged(selectedExchange) {
+        this.setState({
+            selectedExchange: this.exchangeService.getExchangeInformation(selectedExchange)
+        });
+    }
+
+    render() {
+        return (
+            <div>
+                <div style={{marginTop: 25, marginBottom: 25}}>
+                    <ControlPanel
+                        exchanges={this.state.exchanges}
+                        selectedExchange={this.state.selectedExchange}
+                        onExchangeChanged={this.onExchangeChanged}>
+                    </ControlPanel>
+                </div>
+                <StockPanel selectedExchange={this.state.selectedExchange}/>
+            </div>
+        );
+    }
+};
--- a/src-trader-dashboard/index.html
+++ b/src-trader-dashboard/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
+
+    <style>
+        html, body {
+            height: 100%;
+        }
+
+        .align-right {
+            text-align: right
+        }
+
+        .pct-change-green {
+            background-color: lightgreen;
+        }
+
+        .pct-change-amber {
+            background-color: lightgoldenrodyellow;
+        }
+
+        .pct-change-red {
+            background-color: red;
+        }
+
+        .fx-null {
+            border-top: 20px solid #3ACFD5;
+            border-right: 20px solid #3a4ed5;
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+            background-position: 0 0, 0 100%;
+            background-repeat: no-repeat;
+            -webkit-background-size: 100% 20px;
+            -moz-background-size: 100% 20px;
+            background-size: 100% 20px;
+            /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);*/
+            background-image: -webkit-linear-gradient(top, #afbcff 0%, #c1d5c9 100%), -webkit-linear-gradient(top, #afbcff 0%, #c1d5c9 100%);
+            background-image: -moz-linear-gradient(top, #afbcff 0%, #c1d5c9 100%), -moz-linear-gradient(top, #afbcff 0%, #c1d5c9 100%);
+            background-image: -o-linear-gradient(top, #afbcff 0%, #c1d5c9 100%), -o-linear-gradient(top, #afbcff 0%, #c1d5c9 100%);
+            background-image: linear-gradient(to bottom, #afbcff 0%, #c1d5c9 100%), linear-gradient(to bottom, #afbcff 0%, #c1d5c9 100%);
+        }
+
+        .fx-postive {
+            border-top: 20px solid #3ACFD5;
+            border-right: 20px solid #3a4ed5;
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+            background-position: 0 0, 0 100%;
+            background-repeat: no-repeat;
+            -webkit-background-size: 100% 20px;
+            -moz-background-size: 100% 20px;
+            background-size: 100% 20px;
+            /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);*/
+            background-image: -webkit-linear-gradient(top, #00FF00 0%, #c1d5c9 100%), -webkit-linear-gradient(top, #00FF00 0%, #c1d5c9 100%);
+            background-image: -moz-linear-gradient(top, #00FF00 0%, #c1d5c9 100%), -moz-linear-gradient(top, #00FF00 0%, #c1d5c9 100%);
+            background-image: -o-linear-gradient(top, #00FF00 0%, #c1d5c9 100%), -o-linear-gradient(top, #00FF00 0%, #c1d5c9 100%);
+            background-image: linear-gradient(to bottom, #00FF00 0%, #c1d5c9 100%), linear-gradient(to bottom, #00FF00 0%, #c1d5c9 100%);
+        }
+
+        .fx-negative {
+            border-top: 20px solid #3ACFD5;
+            border-right: 20px solid #3a4ed5;
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+            background-position: 0 0, 0 100%;
+            background-repeat: no-repeat;
+            -webkit-background-size: 100% 20px;
+            -moz-background-size: 100% 20px;
+            background-size: 100% 20px;
+            /*background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);*/
+            background-image: -webkit-linear-gradient(top, #FF0000 0%, #d5b3af 100%), -webkit-linear-gradient(top, #FF0000 0%, #d5b3af 100%);
+            background-image: -moz-linear-gradient(top, #FF0000 0%, #d5b3af 100%), -moz-linear-gradient(top, #FF0000 0%, #d5b3af 100%);
+            background-image: -o-linear-gradient(top, #FF0000 0%, #d5b3af 100%), -o-linear-gradient(top, #FF0000 0%, #d5b3af 100%);
+            background-image: linear-gradient(to bottom, #FF0000 0%, #d5b3af 100%), linear-gradient(to bottom, #FF0000 0%, #d5b3af 100%);
+        }
+    </style>
+</head>
+
+<body>
+<div id="traderDashboard"></div>
+</body>
+</html>
--- a/src-trader-dashboard/index.js
+++ b/src-trader-dashboard/index.js
@@ -0,0 +1,26 @@
+'use strict';
+
+import React from "react";
+import {render} from "react-dom";
+
+import {Provider} from "react-redux";
+import {createStore} from "redux";
+
+import TraderDashboard from "./components/TraderDashboard.jsx";
+
+import "ag-grid-root/dist/styles/ag-grid.css";
+import "ag-grid-root/dist/styles/theme-fresh.css";
+
+import fxData from "./reducers/fxData";
+
+let store = createStore(fxData);
+
+document.addEventListener('DOMContentLoaded', () => {
+    render(
+        <Provider store={store}>
+            <TraderDashboard />
+        </Provider>,
+        document.querySelector('#traderDashboard')
+    );
+});
+
--- a/src-trader-dashboard/reducers/fxData.js
+++ b/src-trader-dashboard/reducers/fxData.js
@@ -0,0 +1,3 @@
+export default (state = {fxRowData: []}, action) => {
+    return state;
+};
--- a/src-trader-dashboard/services/ExchangeService.jsx
+++ b/src-trader-dashboard/services/ExchangeService.jsx
@@ -0,0 +1,702 @@
+import concat from "lodash/concat";
+import remove from "lodash/remove";
+import uniq from "lodash/uniq";
+import find from "lodash/find";
+import sampleSize from "lodash/sampleSize";
+import keys from "lodash/keys";
+
+export default class {
+    constructor() {
+        this.subscribers = {};
+
+        this.exchanges = [
+            {name: 'Nasdaq Stock Market', symbol: 'NASDAQ', supportedStocks: NASDAQ_SYMBOLS},
+            {name: 'London Stock Exchange', symbol: 'LSE', supportedStocks: LSE_SYMBOLS},
+            {name: 'Japan Exchange Group', symbol: 'JSE', supportedStocks: JSE_SYMBOLS},
+            {name: 'Deutsche Börse', symbol: 'DE', supportedStocks: DE_SYMBOLS}
+        ];
+
+        this.initialiseTickerData();
+
+        this.timestamp = new Date();
+    }
+
+    initialiseTickerData() {
+        this.tickerData = {};
+
+        const allSymbols = uniq(concat(NASDAQ_SYMBOLS, LSE_SYMBOLS, JSE_SYMBOLS, DE_SYMBOLS));
+        allSymbols.forEach((symbol) => {
+            this.tickerData[symbol] = this.generateTickerRow(symbol);
+        });
+    }
+
+    generateTickerRow(symbol) {
+        let price = this.random(10, 600);
+        return {
+            symbol,
+            price,
+            bid: price - this.random(1, 3),
+            ask: price + this.random(1, 3),
+            recommendation: ['Buy','Hold','Sell'][Math.floor(this.random(0, 2))]
+        }
+    }
+
+    random(min, max) {
+        return parseFloat((Math.random() * (max - min + 1) + min))
+    }
+
+    addSubscriber(subscriber, symbol) {
+        if (!this.subscribers[symbol]) {
+            this.subscribers[symbol] = [];
+        }
+        this.subscribers[symbol].push(subscriber);
+
+        if (!this.updateInterval) {
+            this.updateInterval = setInterval(this.applyDeltasToTickerData.bind(this), 500);
+        }
+    }
+
+    applyDeltasToTickerData() {
+        let symbols = keys(this.subscribers);
+        let properties = ['price', 'bid', 'ask'];
+
+        let symbolsToAlter = sampleSize(symbols, symbols.length / 4);
+        let propertyToAlter = sampleSize(properties, 1);
+
+        symbolsToAlter.forEach((symbol) => {
+            this.tickerData[symbol] = {
+                symbol,
+                price: this.tickerData[symbol].price,
+                bid: this.tickerData[symbol].bid,
+                ask: this.tickerData[symbol].ask
+            };
+
+            this.tickerData[symbol][propertyToAlter] = +this.tickerData[symbol][propertyToAlter] + this.random(-2, 2);
+        });
+
+        symbols.forEach((symbol) => {
+            this.subscribers[symbol].forEach((subscriber) => {
+                subscriber(this.tickerData[symbol]);
+            });
+        });
+    }
+
+    removeSubscriber(subscriber, symbol) {
+        remove(this.subscribers[symbol], subscriber);
+    }
+
+    getTicker(symbol) {
+        return this.tickerData[symbol];
+    }
+
+    getExchanges() {
+        return this.exchanges;
+    }
+
+    getExchangeInformation(exchangeName) {
+        return find(this.exchanges, (exchange) => {
+            return exchange.symbol === exchangeName;
+        })
+    }
+
+    formatNumber(input) {
+        return input.toFixed(2);
+    }
+
+    formatWithDecimalPlaces(x) {
+        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    }
+
+    getTickerDetail(symbol) {
+        let ticker = this.getTicker(symbol);
+        let currentPrice = ticker.price;
+        let tenthOfCurrentPrice = currentPrice / 10;
+        let previousPrice = +currentPrice + this.random(-tenthOfCurrentPrice, tenthOfCurrentPrice);
+
+        let twentiethOfCurrentPrice = currentPrice / 20;
+        let yearAgoPrice = this.random(-twentiethOfCurrentPrice, twentiethOfCurrentPrice);
+
+        let range = `${this.formatNumber(previousPrice)} - ${this.formatNumber(currentPrice)}`;
+        let fiftyTwoWeek = `${this.formatNumber(yearAgoPrice)} - ${this.formatNumber(currentPrice)}`;
+
+        let open = this.formatNumber(ticker.bid); // not the same, but will do for demo purposes
+
+        let vol = this.formatWithDecimalPlaces(this.random(5000, 20000).toFixed(2));
+        let avg = `${this.formatNumber(this.random(10, 30))}M`;
+
+        let dividend = this.random(0, 1).toFixed(2);
+        let yld = this.random(1, 2).toFixed(2);
+
+        let eps = this.random(5, 10).toFixed(2);
+
+        let shares = `${this.random(3000, 10000).toFixed(2)}M`;
+
+        let marketCap = `${this.random(100000, 900000).toFixed(2)}M`;
+
+        let historicalData = this.generateHistoricalData(100, this.timestamp, currentPrice);
+
+        return {
+            pricingDelta: {
+                currentPrice,
+                previousPrice
+            },
+            timestamp: this.timestamp.toDateString(),
+            tickerSummary: {
+                range,
+                fiftyTwoWeek,
+                open,
+                vol,
+                avg,
+                dividend,
+                yld,
+                eps,
+                shares,
+                marketCap
+            },
+            historicalData
+        }
+    }
+
+    formatDate(date) {
+        return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
+    }
+
+    generateHistoricalData(numberOfPoints, endDate, endPrice) {
+        let historicalData = [{
+            "date": this.formatDate(endDate),
+            "price": endPrice
+        }
+        ];
+
+        let numberOfTransitions = 15;
+        let pointsPerTransition = numberOfPoints / numberOfTransitions;
+
+        let lastDate = endDate;
+        let lastPrice = endPrice;
+        for (let transition = 0; transition < numberOfTransitions; transition++) {
+            let swing = (Math.random() >= 0.5) ? 1 : -1;
+
+            for (let i = 0; i <= pointsPerTransition; i++) {
+                lastDate.setDate(lastDate.getDate() - 1);
+                lastPrice = lastPrice + (swing * this.random(-1, 10));
+                lastPrice = lastPrice < 0 ? 0 : lastPrice;
+
+                historicalData.splice(0, 0, ({
+                    "date": this.formatDate(lastDate),
+                    "price": lastPrice
+                }));
+            }
+        }
+
+        return historicalData;
+    }
+
+    getFxMatrixHeaderNames() {
+        return FX_DELTA_HEADERS;
+    }
+
+    getFxMatrixSnapshot() {
+        let columns = FX_CURRENCY_MATRIX[0];
+        let data = FX_CURRENCY_MATRIX.slice(1);
+
+        let rowData = [];
+        for (let i = 0; i < data.length; i++) {
+            let currentRow = data[i];
+
+            let row = {};
+            for (let j = 0; j < columns.length; j++) {
+                row[columns[j]] = currentRow[j];
+            }
+
+            // last, net and % change are different
+            row['last'] = Math.floor(this.random(7000, 170000));
+            row['net'] = this.random(-500, 500).toFixed(2);
+            row['pct_net_change'] = this.random(-1, 1).toFixed(2);
+
+            rowData.push(row);
+        }
+        return rowData;
+    }
+}
+
+const NASDAQ_SYMBOLS = [
+    "SNCL.L",
+    "RNK.L",
+    "SWJ.L",
+    "JDT.L",
+    "UANC.L",
+    "SDP.L",
+    "HSBA.L",
+    "XPL.L",
+    "KLR.L",
+    "SSE.L",
+    "JSI.L",
+    "UBMN.L",
+    "WPC.L",
+    "VTC.L",
+    "UTG.L",
+    "DOR.L",
+    "44RS.L",
+    "GPOR.L",
+    "ASL.L",
+    "40JP.L",
+    "133716",
+    "PJF.L",
+    "MLC.L",
+    "137817",
+    "GHE.L",
+    "PML.L",
+    "SBRY.L",
+    "LEN.L",
+    "STS.L",
+    "138654",
+    "PTEC.L"
+];
+
+const LSE_SYMBOLS = [
+    "PVG.L",
+    "SN.L,",
+    "SWJ.L",
+    "JDT.L",
+    "UANC.L",
+    "SDP.L",
+    "HSBA.L",
+    "XPL.L",
+    "KLR.L",
+    "SSE.L",
+    "JSI.L",
+    "UBMN.L",
+    "DLN.L",
+    "SIR.L",
+    "SEC.L",
+    "DOR.L",
+    "44RS.L",
+    "GPOR.L",
+    "ASL.L",
+    "40JP.L",
+    "133716",
+    "PJF.L",
+    "MLC.L",
+    "137817",
+    "GHE.L",
+    "PML.L",
+    "SBRY.L",
+    "LEN.L",
+    "MAV4.L",
+    "GLEN.L",
+    "EDGD.L",
+];
+
+const JSE_SYMBOLS = [
+    "ECV.L",
+    "MHN.L",
+    "SWJ.L",
+    "JDT.L",
+    "UANC.L",
+    "PLAZ.L",
+    "CLDN.L",
+    "XPL.L",
+    "KLR.L",
+    "SSE.L",
+    "JSI.L",
+    "UBMN.L",
+    "WPC.L",
+    "VTC.L",
+    "UTG.L",
+    "DOR.L",
+    "44RS.L",
+    "GPOR.L",
+    "ASL.L",
+    "40JP.L",
+    "133716",
+    "CRW.L",
+    "JPR.L",
+    "UTLC.L",
+    "GHS.L",
+    "PML.L",
+    "SBRY.L",
+    "LEN.L",
+    "STS.L",
+    "138654",
+    "RWS.L"
+];
+
+const DE_SYMBOLS = [
+    "ECV.L",
+    "MHN.L",
+    "SWJ.L",
+    "JDT.L",
+    "UANC.L",
+    "SDP.L",
+    "KBC.L",
+    "VM.L,",
+    "KLR.L",
+    "SSE.L",
+    "JSI.L",
+    "UBMN.L",
+    "WPC.L",
+    "VTC.L",
+    "UTG.L",
+    "DOR.L",
+    "44RS.L",
+    "GPOR.L",
+    "ASL.L",
+    "40JP.L",
+    "133716",
+    "PJF.L",
+    "MLC.L",
+    "DPV6.L",
+    "LMIN.L",
+    "PML.L",
+    "SBRY.L",
+    "LEN.L",
+    "STS.L",
+    "BKIR.L",
+    "AFMF.L",
+];
+
+const FX_CURRENCY_SYMBOLS = ["USDGBP", "USDEUR", "USDAED", "USDJPY", "USDCAD", "USDCHF", "GBPUSD", "GBPEUR", "GBPAED", "GBPJPY", "GBPCAD", "GBPCHF", "EURUSD", "EURGBP", "EURAED", "EURJPY", "EURCAD", "EURCHF", "AEDUSD", "AEDGBP", "AEDEUR", "AEDJPY", "AEDCAD", "AEDCHF", "JPYUSD", "JPYGBP", "JPYEUR", "JPYAED", "JPYCAD", "JPYCHF", "CADUSD", "CADGBP", "CADEUR", "CADAED", "CADJPY", "CADCHF", "CHFUSD", "CHFGBP", "CHFEUR", "CHFAED", "CHFJPY", "CHFCAD"];
+const FX_DELTA_HEADERS = [
+    {
+        field: 'symbol',
+        headerName: 'Symbol',
+        width: 80
+    },
+    {
+        field: 'last',
+        headerName: 'Last',
+        headerClass: 'align-right',
+        cellRenderer: 'animateShowChange',
+        cellClass: 'align-right',
+        width: 70
+    },
+    {
+        field: 'net',
+        headerName: 'Net',
+        headerClass: 'align-right',
+        cellRenderer: 'animateShowChange',
+        cellStyle: {'text-align': 'right'},
+        width: 60
+    },
+    {
+        field: 'pct_net_change',
+        headerName: '% NC',
+        headerClass: 'align-right',
+        cellStyle: {'text-align': 'right'}, // to be removed once the component is in place
+        // cellRendererFramework: HorizontalBarComponent,
+        width: 67,
+        cellClassRules: {
+            'pct-change-green': 'x > 0',
+            'pct-change-amber': 'x <= 0 && x >= -0.10',
+            'pct-change-red': 'x < -0.10'
+        }
+    },
+].concat(FX_CURRENCY_SYMBOLS.map((symbol) => {
+    "use strict";
+    return {
+        field: symbol,
+        headerName: symbol,
+        headerClass: 'align-right',
+        width: 87,
+        cellStyle: {'text-align': 'right'},
+        cellClassRules: {
+            'fx-postive': 'x > 0.8',
+            'fx-null': 'x === null',
+            'fx-negative': 'x < -0.8'
+        }
+    }
+}));
+
+const FX_CURRENCY_MATRIX = [
+    ["symbol", ...FX_CURRENCY_SYMBOLS],
+    ["USDGBP", null, "0.89", "-0.01", "0.29", "0.28", "-0.04", "0.47", "0.17", "0.20", "0.11", "0.97", "0.07", "-0.20", "0.57", "0.54", "0.26", "0.33", "0.86", "0.95", "0.39", "0.21", "-0.49", "0.63", "-0.13", "-0.86", "0.18", "-0.84", "-0.89", "0.05", "-0.29", "0.34", "0.93", "0.41", "0.13", "-0.17", "0.70", "-0.17", "0.60", "0.00", "0.09", "-0.15", "0.10"],
+    ["USDEUR", "0.89", null, "0.25", "0.29", "0.86", "-0.93", "0.09", "0.63", "0.76", "0.10", "0.51", "-0.31", "-0.51", "0.20", "0.48", "-0.42", "0.73", "0.57", "0.65", "0.40", "0.12", "0.24", "0.42", "0.75", "0.13", "0.75", "0.42", "-0.80", "-0.26", "0.68", "0.68", "0.98", "0.87", "0.48", "0.52", "0.23", "0.61", "0.71", "-0.61", "0.40", "-0.80", "-0.89"],
+    ["USDAED", "0.90", "0.95", null, "0.71", "0.49", "0.50", "0.51", "0.07", "0.80", "-0.74", "0.54", "0.46", "-0.90", "-0.33", "0.75", "0.91", "0.84", "0.86", "0.89", "0.68", "0.71", "0.74", "0.58", "-0.24", "0.31", "0.85", "0.28", "0.44", "0.51", "-0.19", "0.71", "0.81", "0.85", "0.23", "0.09", "0.65", "-0.48", "0.43", "0.97", "0.11", "-0.81", "-0.69"],
+    ["USDJPY", "0.84", "0.92", "0.36", null, "0.79", "0.90", "0.86", "0.42", "0.14", "0.98", "0.47", "0.76", "0.60", "0.15", "0.04", "0.58", "0.13", "-0.16", "0.63", "0.86", "-0.63", "-0.95", "0.42", "0.08", "0.90", "-0.39", "-0.16", "0.66", "0.95", "0.31", "0.66", "-0.84", "0.06", "-0.60", "0.08", "0.57", "0.93", "0.78", "0.15", "0.36", "0.78", "0.34"],
+    ["USDCAD", "0.79", "-0.87", "0.93", "0.83", null, "0.10", "0.60", "0.34", "0.98", "0.70", "0.09", "0.46", "0.80", "0.10", "0.26", "-0.90", "0.69", "-0.22", "0.51", "-0.75", "-0.08", "0.07", "0.24", "0.68", "0.60", "0.37", "0.92", "0.02", "0.66", "0.16", "0.24", "-0.79", "0.19", "0.19", "0.08", "-0.97", "-0.93", "0.04", "-0.92", "0.86", "-0.36", "0.04"],
+    ["USDCHF", "0.94", "-0.02", "0.70", "0.82", "0.41", null, "0.76", "0.06", "0.46", "0.99", "0.07", "0.72", "0.14", "0.90", "0.23", "-0.54", "0.64", "0.80", "0.16", "0.23", "0.66", "-0.89", "-0.54", "-0.95", "0.27", "0.56", "0.42", "0.41", "0.88", "0.81", "0.37", "0.75", "0.06", "-0.75", "0.98", "0.21", "0.01", "0.03", "0.35", "-0.42", "0.55", "0.19"],
+    ["GBPUSD", "0.05", "-0.64", "0.47", "0.56", "0.51", "-0.47", null, "-0.15", "0.13", "0.55", "0.58", "0.57", "-0.49", "0.28", "0.86", "0.49", "0.12", "-0.91", "0.06", "0.12", "0.18", "-0.02", "-0.55", "0.18", "0.29", "0.76", "0.11", "0.04", "0.55", "0.16", "0.84", "0.83", "-0.94", "0.32", "0.07", "-0.33", "-0.29", "0.01", "-0.19", "0.01", "-0.60", "0.66"],
+    ["GBPEUR", "-0.32", "0.17", "0.60", "-0.52", "-0.52", "0.39", "-0.42", null, "0.07", "0.69", "0.67", "0.01", "0.72", "0.35", "0.66", "-0.66", "0.21", "0.12", "0.42", "-0.57", "-0.04", "0.48", "0.91", "0.72", "-0.16", "0.79", "0.03", "0.44", "0.17", "0.87", "-0.82", "0.20", "0.88", "0.48", "0.59", "-0.70", "0.12", "0.56", "-0.69", "0.10", "0.90", "1.00"],
+    ["GBPAED", "0.76", "0.05", "0.72", "-0.40", "0.93", "0.64", "0.90", "0.21", null, "0.91", "0.33", "-0.36", "0.28", "0.87", "0.25", "0.33", "0.44", "0.89", "0.17", "0.96", "0.86", "0.88", "0.03", "-0.25", "0.21", "0.98", "-0.60", "0.07", "0.90", "0.23", "0.41", "0.77", "0.83", "0.94", "0.12", "0.37", "0.58", "0.35", "-0.53", "0.49", "0.96", "-0.06"],
+    ["GBPJPY", "0.63", "0.72", "0.59", "0.89", "-0.54", "0.97", "0.61", "0.64", "0.85", null, "0.35", "0.57", "0.25", "0.85", "0.27", "-0.70", "-0.30", "-0.36", "0.29", "0.82", "0.26", "0.69", "0.46", "0.01", "0.09", "0.78", "0.95", "0.16", "0.07", "0.41", "0.99", "0.67", "0.34", "-0.89", "0.83", "0.32", "0.21", "-0.48", "-0.64", "0.65", "0.58", "0.69"],
+    ["GBPCAD", "0.78", "0.09", "0.33", "0.11", "0.95", "0.01", "0.96", "0.72", "0.13", "0.02", null, "0.44", "0.63", "-0.52", "0.08", "-0.85", "0.74", "0.41", "0.52", "0.15", "-0.97", "0.61", "0.58", "0.47", "0.56", "0.37", "0.54", "-0.65", "0.98", "0.44", "0.28", "0.70", "0.44", "0.34", "0.95", "0.82", "-0.09", "0.62", "0.87", "0.25", "-1.00", "0.99"],
+    ["GBPCHF", "-0.87", "0.68", "0.84", "0.83", "0.50", "0.74", "0.02", "0.11", "-0.12", "0.36", "0.71", null, "0.45", "0.02", "0.51", "0.50", "-0.03", "-0.94", "0.23", "0.38", "0.09", "0.26", "0.14", "0.39", "0.36", "0.01", "0.76", "0.21", "0.03", "0.97", "-0.89", "0.68", "0.43", "0.43", "0.26", "0.01", "0.60", "0.15", "0.77", "0.51", "-0.31", "0.37"],
+    ["EURUSD", "-0.45", "-0.05", "0.14", "-0.11", "0.36", "0.12", "0.76", "0.66", "0.50", "0.31", "0.28", "0.90", null, "-0.04", "0.73", "0.33", "0.27", "0.22", "0.86", "0.79", "-0.29", "0.30", "0.89", "0.73", "0.94", "0.24", "0.19", "0.81", "0.88", "0.46", "0.19", "0.79", "-0.16", "0.85", "0.84", "-0.57", "-0.87", "0.86", "0.69", "0.12", "0.64", "0.13"],
+    ["EURGBP", "0.06", "0.81", "0.54", "0.57", "0.57", "0.81", "0.38", "0.70", "0.37", "0.58", "-0.56", "0.77", "0.59", null, "0.98", "-0.48", "0.60", "0.78", "0.22", "0.20", "-0.62", "-0.97", "-0.55", "0.39", "0.88", "0.96", "0.32", "0.84", "0.26", "-0.47", "0.04", "0.34", "-0.24", "0.53", "-0.75", "-0.97", "0.47", "0.81", "0.49", "-0.84", "0.94", "0.09"],
+    ["EURAED", "0.61", "0.59", "0.11", "0.21", "0.41", "-0.45", "0.32", "0.90", "-0.98", "0.38", "0.27", "0.62", "0.67", "0.89", null, "0.27", "0.65", "0.72", "0.69", "0.66", "0.12", "0.32", "0.11", "-0.73", "-0.17", "0.74", "0.03", "0.96", "0.59", "-0.92", "-0.91", "-0.41", "0.09", "0.45", "0.90", "0.88", "0.96", "0.47", "0.95", "0.27", "-0.48", "0.71"],
+    ["EURJPY", "-0.01", "0.36", "0.28", "0.68", "0.50", "0.25", "0.81", "0.64", "0.12", "-0.73", "-0.47", "0.96", "-0.98", "-0.41", "0.78", null, "0.19", "-0.37", "0.24", "0.63", "0.74", "-0.24", "0.46", "0.63", "0.99", "0.65", "0.52", "0.11", "0.52", "0.39", "0.41", "0.51", "0.78", "1.00", "0.80", "-0.11", "0.90", "0.96", "0.66", "0.32", "0.02", "0.19"],
+    ["EURCAD", "-0.80", "0.40", "0.35", "0.45", "0.66", "0.21", "0.77", "0.58", "0.09", "1.00", "0.02", "-0.85", "0.89", "0.63", "-0.05", "0.46", null, "0.87", "0.96", "-0.48", "0.40", "0.18", "0.37", "0.81", "0.50", "-0.06", "-0.56", "0.38", "0.02", "0.83", "-0.93", "0.80", "0.31", "0.10", "0.70", "0.55", "0.47", "0.77", "0.98", "0.88", "0.19", "0.91"],
+    ["EURCHF", "-0.93", "0.01", "-0.29", "0.46", "-0.59", "-0.15", "0.58", "0.00", "-0.62", "0.36", "0.27", "-0.10", "-0.10", "0.57", "0.57", "0.75", "-0.10", null, "0.88", "0.21", "0.89", "0.85", "0.16", "0.93", "0.60", "0.59", "0.42", "0.70", "0.66", "0.80", "0.83", "0.52", "0.01", "0.41", "0.68", "0.94", "0.81", "0.40", "0.69", "0.04", "0.70", "0.61"],
+    ["AEDUSD", "0.10", "0.45", "0.06", "-0.37", "-0.14", "0.63", "0.10", "0.77", "0.95", "-0.12", "1.00", "-0.19", "-0.59", "0.78", "0.10", "0.76", "-0.45", "-0.99", null, "-0.46", "0.28", "0.31", "0.32", "0.42", "-0.00", "0.66", "0.24", "0.31", "0.10", "0.73", "0.02", "0.78", "0.07", "1.00", "0.43", "0.61", "0.53", "0.53", "0.41", "0.37", "0.97", "-0.19"],
+    ["AEDGBP", "0.70", "0.73", "0.34", "0.97", "0.84", "0.05", "0.21", "0.14", "0.45", "0.69", "0.41", "-0.53", "0.28", "0.13", "0.99", "0.97", "0.93", "0.62", "0.35", null, "0.18", "0.96", "0.58", "0.04", "0.00", "0.58", "-0.54", "0.35", "0.84", "0.83", "-0.20", "0.51", "0.32", "0.01", "0.95", "0.69", "-0.73", "0.36", "0.78", "0.02", "0.22", "0.39"],
+    ["AEDEUR", "0.18", "0.84", "-0.89", "0.90", "-0.25", "0.53", "0.71", "0.80", "0.60", "-0.98", "-0.81", "0.57", "0.72", "0.32", "-0.23", "0.98", "0.50", "0.93", "0.56", "0.26", null, "0.61", "0.47", "0.72", "0.58", "0.19", "0.94", "0.21", "0.47", "0.70", "0.67", "0.85", "0.98", "0.15", "0.21", "0.43", "0.03", "0.92", "0.91", "0.35", "0.70", "0.85"],
+    ["AEDJPY", "0.88", "0.62", "0.50", "0.27", "0.56", "0.61", "0.06", "-0.02", "0.42", "0.26", "0.23", "0.83", "-0.55", "0.94", "0.01", "0.72", "-0.43", "0.10", "0.01", "-0.20", "0.13", null, "0.70", "0.10", "0.05", "0.43", "-0.14", "-0.64", "0.80", "0.79", "0.57", "0.14", "0.14", "0.04", "-0.96", "0.59", "0.14", "0.51", "0.23", "0.57", "0.94", "0.88"],
+    ["AEDCAD", "0.75", "-0.99", "0.82", "-0.87", "0.79", "1.00", "0.21", "0.30", "-0.40", "0.34", "-0.85", "0.41", "0.79", "0.17", "0.58", "-0.24", "0.18", "0.15", "0.18", "0.44", "0.34", "0.90", null, "0.10", "0.34", "0.31", "0.34", "0.79", "-0.05", "0.19", "-0.86", "0.61", "-0.65", "0.23", "0.59", "0.69", "-0.65", "0.89", "0.97", "0.12", "0.63", "-0.24"],
+    ["AEDCHF", "0.67", "0.46", "0.92", "0.22", "0.91", "0.67", "0.81", "0.04", "0.29", "0.13", "0.80", "0.95", "0.29", "0.99", "-0.17", "0.58", "0.64", "0.68", "0.41", "0.69", "0.84", "0.01", "0.04", null, "0.07", "0.16", "0.26", "-0.43", "0.08", "0.58", "0.33", "-0.28", "0.03", "-0.08", "0.54", "-0.91", "0.78", "-0.10", "-0.13", "0.15", "0.62", "-0.13"],
+    ["JPYUSD", "-0.67", "0.90", "0.84", "0.10", "0.77", "0.43", "0.59", "0.69", "0.63", "0.82", "-0.61", "0.41", "0.07", "0.48", "1.00", "-0.52", "0.22", "0.89", "0.43", "0.54", "0.56", "-0.43", "0.78", "0.67", null, "0.06", "0.28", "0.04", "0.62", "0.18", "0.77", "0.63", "0.05", "0.87", "0.22", "0.21", "0.07", "0.25", "-0.55", "0.67", "0.10", "-0.67"],
+    ["JPYGBP", "0.21", "0.46", "0.23", "0.53", "-0.97", "0.78", "0.43", "0.74", "-0.95", "0.98", "0.49", "0.66", "0.18", "0.55", "-0.33", "0.67", "0.65", "0.23", "-0.07", "-0.67", "0.56", "0.74", "-0.38", "-0.83", "-0.51", null, "-0.26", "-0.79", "0.73", "-0.78", "-0.09", "0.19", "0.48", "0.97", "0.11", "0.19", "0.51", "0.32", "0.81", "-0.02", "0.17", "0.48"],
+    ["JPYEUR", "0.83", "0.86", "0.62", "-0.92", "0.64", "0.58", "0.55", "0.07", "0.81", "0.32", "0.33", "0.96", "0.48", "0.57", "0.25", "0.56", "0.33", "0.02", "-0.79", "0.44", "0.95", "0.35", "0.41", "0.06", "0.28", "0.77", null, "0.64", "0.79", "0.74", "0.67", "-0.97", "0.47", "-0.11", "0.03", "0.39", "-0.37", "0.06", "0.09", "0.13", "0.20", "0.87"],
+    ["JPYAED", "0.69", "0.80", "0.90", "0.06", "0.55", "0.90", "-0.09", "0.05", "-0.10", "0.31", "0.57", "0.69", "-0.78", "0.42", "0.64", "0.96", "0.08", "-0.76", "0.59", "0.00", "0.40", "-0.88", "0.69", "0.17", "-0.16", "0.57", "0.86", null, "-0.61", "-0.14", "0.41", "-0.16", "0.36", "0.95", "0.44", "0.41", "0.35", "-0.56", "0.25", "0.66", "0.90", "0.82"],
+    ["JPYCAD", "0.33", "0.27", "0.61", "0.01", "-0.16", "0.21", "0.57", "-0.41", "-0.56", "0.55", "0.13", "-0.87", "0.19", "0.64", "-0.38", "-0.80", "-0.10", "0.44", "0.72", "-0.72", "0.48", "0.42", "0.84", "0.73", "0.35", "0.68", "0.01", "0.09", null, "0.87", "0.17", "0.45", "0.02", "0.01", "0.77", "0.24", "0.62", "0.39", "-0.73", "0.21", "-0.08", "0.42"],
+    ["JPYCHF", "-0.45", "0.52", "0.34", "0.85", "0.16", "0.96", "0.53", "0.62", "0.46", "0.94", "0.08", "-0.68", "0.81", "0.44", "0.27", "0.75", "-0.84", "0.69", "-0.99", "0.41", "0.66", "-0.94", "0.21", "0.85", "-0.08", "0.36", "0.62", "0.25", "-0.48", null, "0.51", "-0.39", "0.60", "0.63", "0.68", "0.10", "0.62", "0.68", "0.00", "0.24", "0.61", "0.23"],
+    ["CADUSD", "-0.65", "0.73", "0.93", "0.27", "-0.00", "-0.46", "0.53", "0.36", "0.83", "0.58", "0.40", "0.03", "0.32", "0.38", "-0.53", "0.86", "0.42", "0.90", "0.83", "0.94", "0.34", "-0.56", "0.46", "-0.72", "0.13", "0.08", "0.25", "0.59", "0.75", "0.72", null, "0.62", "0.73", "0.52", "0.28", "0.03", "-0.54", "0.50", "0.76", "-0.28", "0.89", "0.97"],
+    ["CADGBP", "0.74", "0.58", "0.55", "0.01", "0.33", "0.61", "0.75", "0.86", "-0.87", "0.50", "0.57", "0.84", "-0.34", "1.00", "0.77", "0.75", "0.40", "0.12", "-0.57", "-0.16", "-0.91", "0.06", "0.67", "-0.55", "0.02", "0.78", "0.57", "0.70", "0.21", "0.95", "-0.91", null, "-0.82", "0.71", "0.36", "0.46", "0.46", "0.24", "0.15", "0.54", "0.15", "0.83"],
+    ["CADEUR", "-0.58", "0.29", "0.03", "0.70", "0.77", "0.80", "0.52", "0.04", "0.11", "0.86", "-0.98", "0.02", "0.01", "-0.19", "-0.48", "0.80", "0.90", "0.10", "0.28", "0.88", "0.98", "0.43", "0.47", "-0.41", "-0.92", "0.49", "0.64", "-0.60", "0.11", "0.61", "0.19", "-0.39", null, "-0.21", "0.56", "-0.45", "-0.48", "0.51", "0.04", "-0.44", "-0.22", "-0.29"],
+    ["CADAED", "0.07", "0.55", "0.99", "-0.41", "0.65", "0.75", "0.97", "0.74", "0.65", "0.37", "-0.04", "0.85", "0.83", "0.25", "0.14", "-0.00", "0.80", "0.78", "-0.42", "0.54", "-0.42", "-0.07", "-0.62", "0.56", "0.89", "0.92", "0.19", "0.64", "0.45", "0.24", "0.97", "0.41", "0.36", null, "-0.54", "-0.85", "-0.68", "0.48", "0.13", "0.61", "0.75", "0.21"],
+    ["CADJPY", "-0.84", "0.71", "0.59", "-0.78", "0.92", "0.93", "0.03", "0.27", "0.22", "0.71", "-0.79", "0.72", "0.27", "0.29", "0.40", "0.66", "0.44", "-0.33", "0.24", "0.99", "-0.95", "0.74", "0.42", "0.45", "0.08", "0.46", "0.22", "0.70", "0.80", "0.36", "0.36", "0.94", "0.75", "0.51", null, "0.10", "0.31", "0.54", "1.00", "0.78", "0.17", "0.32"],
+    ["CADCHF", "0.19", "0.00", "0.62", "-0.63", "0.75", "0.57", "0.28", "-0.98", "0.17", "-0.63", "0.09", "0.10", "-0.09", "0.22", "0.65", "0.20", "0.27", "-0.66", "-0.70", "0.72", "0.40", "0.96", "0.52", "0.38", "0.96", "0.90", "0.35", "-0.70", "0.37", "0.94", "0.20", "0.78", "0.34", "0.24", "-0.18", null, "0.05", "0.71", "0.05", "0.38", "0.02", "0.60"],
+    ["CHFUSD", "0.42", "0.61", "-0.30", "-0.27", "0.46", "0.63", "0.64", "0.33", "0.18", "0.88", "0.99", "0.73", "0.85", "0.07", "0.53", "0.31", "-0.63", "0.56", "-0.04", "-0.68", "0.43", "-0.96", "0.45", "0.45", "0.50", "0.17", "0.82", "0.34", "0.26", "0.16", "0.71", "0.35", "0.57", "0.79", "0.56", "0.55", null, "0.02", "-0.90", "0.84", "0.33", "0.18"],
+    ["CHFGBP", "-0.38", "0.73", "0.25", "0.64", "0.41", "-0.48", "0.75", "-0.40", "0.37", "0.62", "0.30", "0.06", "0.54", "0.15", "0.51", "0.33", "-0.79", "-0.05", "-0.54", "0.21", "0.40", "0.86", "0.96", "0.94", "0.52", "0.07", "0.71", "-0.80", "-0.40", "0.71", "0.71", "0.89", "0.43", "-0.68", "0.93", "0.05", "0.42", null, "0.59", "-0.67", "0.03", "0.17"],
+    ["CHFEUR", "-0.64", "0.96", "-0.34", "0.71", "0.53", "0.44", "0.27", "0.56", "0.96", "0.40", "0.86", "0.65", "0.82", "0.89", "-0.75", "0.29", "0.06", "0.70", "0.23", "0.68", "0.79", "0.21", "0.50", "0.14", "-0.27", "-0.83", "-0.22", "0.59", "0.40", "0.10", "0.88", "0.99", "0.21", "-0.36", "0.00", "0.53", "0.08", "0.08", null, "0.53", "-0.51", "0.03"],
+    ["CHFAED", "-0.99", "0.71", "0.51", "0.58", "0.57", "0.73", "0.60", "0.23", "0.02", "0.84", "0.90", "0.56", "0.03", "-0.93", "0.59", "0.24", "-0.67", "0.13", "0.99", "0.28", "0.72", "0.79", "-0.83", "-0.30", "0.73", "0.08", "-0.02", "0.85", "0.33", "0.57", "0.09", "0.26", "0.16", "0.80", "0.65", "-0.19", "-0.38", "-0.61", "-0.98", null, "0.57", "-0.81"],
+    ["CHFJPY", "0.60", "0.96", "0.22", "0.52", "0.63", "0.24", "0.76", "0.91", "0.80", "-0.14", "0.59", "-0.01", "0.60", "-0.08", "0.63", "0.39", "0.30", "-0.71", "0.18", "0.94", "-0.30", "0.28", "0.87", "0.92", "-0.19", "0.18", "-0.40", "0.44", "0.88", "0.52", "0.50", "0.44", "0.84", "0.24", "0.09", "0.15", "0.10", "0.30", "-0.05", "0.79", null, "0.99"],
+    ["CHFCAD", "0.93", "0.24", "0.05", "0.40", "0.75", "0.12", "0.90", "0.56", "0.46", "0.62", "0.71", "0.01", "0.04", "0.02", "0.49", "0.51", "-0.94", "0.93", "0.80", "-0.40", "0.79", "0.82", "-0.04", "0.38", "-0.24", "-0.17", "0.78", "-0.42", "0.92", "-0.83", "-0.01", "0.54", "0.73", "0.52", "0.95", "0.44", "0.90", "0.81", "0.42", "0.26", "0.36", null]
+];
+
+// for (i = 0; i < MAJOR_CURRENCIES.length; i++) {
+//     for (j = 0; j < MAJOR_CURRENCIES.length; j++) {
+//         if (i === j) {
+//             continue;
+//         }
+//         console.log(`${MAJOR_CURRENCIES[i] + MAJOR_CURRENCIES[j]}`);
+//     }
+// }
+
+// let rows = [];
+// let row = ['Symbol'];
+//
+// rows = [];
+// for (j = 0; j < FX_CURRENCY_CODE.length; j++) {
+//     row.push(FX_CURRENCY_CODE[j]);
+// }
+// rows.push(row);
+//
+// for (i = 0; i < FX_CURRENCY_CODE.length; i++) {
+//     let row = [];
+//     row.push(FX_CURRENCY_CODE[i]);
+//
+//     for (j = 0; j < FX_CURRENCY_CODE.length; j++) {
+//         if (i === j) {
+//             row.push(null);
+//         } else {
+//             var mutliplier = ((Math.random() * 10) > 8) ? -1 : 1;
+//             row.push((mutliplier * Math.random()).toFixed(2))
+//             // row.push(`${FX_CURRENCY_CODE[j]} value`)
+//         }
+//     }
+//
+//     rows.push(row);
+// }
+//
+// JSON.stringify(rows);
+
+const FX_CURRENCY_CODE = [
+    'USDGBP',
+    'USDEUR',
+    'USDAED',
+    'USDJPY',
+    'USDCAD',
+    'USDCHF',
+    'GBPUSD',
+    'GBPEUR',
+    'GBPAED',
+    'GBPJPY',
+    'GBPCAD',
+    'GBPCHF',
+    'EURUSD',
+    'EURGBP',
+    'EURAED',
+    'EURJPY',
+    'EURCAD',
+    'EURCHF',
+    'AEDUSD',
+    'AEDGBP',
+    'AEDEUR',
+    'AEDJPY',
+    'AEDCAD',
+    'AEDCHF',
+    'JPYUSD',
+    'JPYGBP',
+    'JPYEUR',
+    'JPYAED',
+    'JPYCAD',
+    'JPYCHF',
+    'CADUSD',
+    'CADGBP',
+    'CADEUR',
+    'CADAED',
+    'CADJPY',
+    'CADCHF',
+    'CHFUSD',
+    'CHFGBP',
+    'CHFEUR',
+    'CHFAED',
+    'CHFJPY',
+    'CHFCAD'
+];
+
+const MAJOR_CURRENCIES = [
+    'USD',
+    'GBP',
+    'EUR',
+    'AED',
+    'JPY',
+    'CAD',
+    'CHF'];
+
+const SECONDARY_CURRENCIES = [
+    'AFN',
+    'ALL',
+    'AMD',
+    'ANG',
+    'AOA',
+    'ARS',
+    'AUD',
+    'AWG',
+    'AZN',
+    'BAM',
+    'BBD',
+    'BDT',
+    'BGN',
+    'BHD',
+    'BIF',
+    'BMD',
+    'BND',
+    'BOB',
+    'BRL',
+    'BSD',
+    'BTN',
+    'BWP',
+    'BYN',
+    'BZD',
+    'CDF',
+    'CLP',
+    'CNY',
+    'COP',
+    'CRC',
+    'CUC',
+    'CUP',
+    'CVE',
+    'CZK',
+    'DJF',
+    'DKK',
+    'DOP',
+    'DZD',
+    'EGP',
+    'ERN',
+    'ETB',
+    'FJD',
+    'FKP',
+    'GEL',
+    'GGP',
+    'GHS',
+    'GIP',
+    'GMD',
+    'GNF',
+    'GTQ',
+    'GYD',
+    'HKD',
+    'HNL',
+    'HRK',
+    'HTG',
+    'HUF',
+    'IDR',
+    'ILS',
+    'IMP',
+    'INR',
+    'IQD',
+    'IRR',
+    'ISK',
+    'JEP',
+    'JMD',
+    'JOD',
+    'KES',
+    'KGS',
+    'KHR',
+    'KMF',
+    'KPW',
+    'KRW',
+    'KWD',
+    'KYD',
+    'KZT',
+    'LAK',
+    'LBP',
+    'LKR',
+    'LRD',
+    'LSL',
+    'LYD',
+    'MAD',
+    'MDL',
+    'MGA',
+    'MKD',
+    'MMK',
+    'MNT',
+    'MOP',
+    'MRO',
+    'MUR',
+    'MVR',
+    'MWK',
+    'MXN',
+    'MYR',
+    'MZN',
+    'NAD',
+    'NGN',
+    'NIO',
+    'NOK',
+    'NPR',
+    'NZD',
+    'OMR',
+    'PAB',
+    'PEN',
+    'PGK',
+    'PHP',
+    'PKR',
+    'PLN',
+    'PYG',
+    'QAR',
+    'RON',
+    'RSD',
+    'RUB',
+    'RWF',
+    'SAR',
+    'SBD',
+    'SCR',
+    'SDG',
+    'SEK',
+    'SGD',
+    'SHP',
+    'SLL',
+    'SOS',
+    'SPL',
+    'SRD',
+    'STD',
+    'SVC',
+    'SYP',
+    'SZL',
+    'THB',
+    'TJS',
+    'TMT',
+    'TND',
+    'TOP',
+    'TRY',
+    'TTD',
+    'TVD',
+    'TWD',
+    'TZS',
+    'UAH',
+    'UGX',
+    'UYU',
+    'UZS',
+    'VEF',
+    'VND',
+    'VUV',
+    'WST',
+    'XAF',
+    'XCD',
+    'XDR',
+    'XOF',
+    'XPF',
+    'YER',
+    'ZMW',
+    'ZWD',
+    'ZAR'];
--- a/webpack.config.full-width.js
+++ b/webpack.config.full-width.js
@@ -0,0 +1,27 @@
+module.exports = {
+    entry: "./src-full-width/index.js",
+    output: {
+        path: __dirname,
+        filename: "dist/bundle.js"
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.css$/,
+                loader: "style!css"
+            },
+            {
+                test: /\.js$|\.jsx$/,
+                loader: 'babel-loader',
+                query: {
+                    presets: ['react', 'es2015']
+                }
+            }
+        ]
+    },
+    resolve: {
+        alias: {
+            "ag-grid-root" : __dirname + "/node_modules/ag-grid"
+        }
+    }
+};
--- a/webpack.config.trader.js
+++ b/webpack.config.trader.js
@@ -0,0 +1,33 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const SRC_DIR = path.resolve(__dirname, 'src-trader-dashboard');
+
+module.exports = {
+    entry: SRC_DIR + "/index.js",
+    output: {
+        path: __dirname,
+        filename: "dist/bundle.js"
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.css$/,
+                loader: "style!css"
+            },
+            {
+                test: /\.js$|\.jsx$/,
+                include: SRC_DIR,
+                loader: 'babel-loader',
+                query: {
+                    presets: ['react', 'es2015']
+                }
+            }
+        ]
+    },
+    resolve: {
+        alias: {
+            "ag-grid-root" : __dirname + "/node_modules/ag-grid"
+        }
+    }
+};
Author	SHA1	Message	Date
Sean Landsman	5f42824c5e	Fix dep issue	2017-06-01 20:52:37 +02:00
Alberto	5fbdb690af	There is a dependency (to be eliminated) in the release script and the order of the projects in the package.json	2017-05-22 15:06:18 +01:00
Sean Landsman	93fd0fe112	AG-420 Improve React implementation	2017-05-22 15:03:35 +01:00
Sean Landsman	a8163cad16	Merge remote-tracking branch 'origin/master' # Conflicts: # package.json	2017-05-22 15:02:25 +01:00
Sean Landsman	3f54c23b4d	AG-420 Improve React implementation	2017-05-22 15:01:21 +01:00
Alberto	00dd86f4c8	Merge branch '10.0.0'	2017-05-22 10:37:03 +01:00
Alberto	e8ba0413ae	Version 10.0.0	2017-05-22 10:32:54 +01:00
Sean Landsman	a3a0336f6b	AG-420 Improve React implementation	2017-05-19 15:58:12 +01:00
Sean Landsman	a438cb6169	AG-420 Improve React implementation	2017-05-19 11:28:58 +01:00
Sean Landsman	8677118a27	AG-420 Improve React implementation	2017-05-17 13:22:59 +01:00
Alberto	4069f6bc10	Merge branch '9.1.0'	2017-04-27 15:20:38 +02:00
Alberto	575edb5b85	Release 9.1.0	2017-04-27 15:18:12 +02:00
Alberto	042dfc62a6	Merge branch '9.0.0'	2017-03-29 17:13:06 +01:00
Alberto	d59b5e8071	Version 9.0.0	2017-03-29 17:11:37 +01:00
Alberto	afa03227e4	Full width renderer with react	2017-03-09 11:03:20 +01:00
Alberto	a2952230d0	Starting work of full width Renderer with React	2017-03-08 16:46:50 +01:00
Alberto	7f8d1bb3a7	Starting work of full width Renderer with React	2017-03-08 16:36:05 +01:00
Alberto	801bf16339	Merge branch '8.2.0'	2017-03-08 15:12:51 +01:00
Alberto	cf1be920ee	Release 8.2.0	2017-03-08 14:43:47 +01:00
Sean Landsman	f8ad31c2e0	more docs work	2017-02-24 15:09:48 +00:00
Alberto	e026fb65e3	Merge branch '8.1.0'	2017-02-20 13:11:50 +00:00
Alberto	05a7371467	8.1.0	2017-02-20 12:49:05 +00:00
Alberto	4ea0b7f8b2	Merge branch '8.0.0'	2017-02-09 15:48:33 +00:00