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
43 changed files with 11569 additions and 106 deletions
--- a/index.html
+++ b/index.html
@@ -16,6 +16,105 @@
            margin-left: 4px;
            margin-right: 4px;
        }
        .customHeaderMenuButton{
            margin-top: 5px;
            margin-left: 4px;
            float: left;
        }
        .customHeaderLabel{
            margin-left: 5px;
            margin-top: 3px;
            float: left;
        }
        .customSortDownLabel{
            float: left;
            margin-left: 10px;
            margin-top: 5px;
        }
        .customSortUpLabel{
            float: left;
            margin-left: 3px;
            margin-top: 4px;
        }
        .customSortRemoveLabel{
            float: left;
            font-size: 11px;
            margin-left: 3px;
            margin-top: 6px;
        }
        .active {
            color: cornflowerblue;
        }
        .hidden { display:none; }
        .customHeaderLabel{
            margin-left: 5px;
            margin-top: 3px;
            float: left;
        }
        .customExpandButton{
            float:right;
            margin-top: 5px;
            margin-left: 3px;
        }
        .expanded {
            animation-name: toExpanded;
            animation-duration: 1s;
            -ms-transform: rotate(180deg); /* IE 9 */
            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
            transform: rotate(180deg);
        }
        .collapsed {
            color: cornflowerblue;
            animation-name: toCollapsed;
            animation-duration: 1s;
            -ms-transform: rotate(0deg); /* IE 9 */
            -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
            transform: rotate(0deg);
        }
        @keyframes  toExpanded{
            from {
                color: cornflowerblue;
                -ms-transform: rotate(0deg); /* IE 9 */
                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
                transform: rotate(0deg);
            }
            to {
                color: black;
                -ms-transform: rotate(180deg); /* IE 9 */
                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
                transform: rotate(180deg);
            }
        }
        @keyframes toCollapsed{
            from {
                color: black;
                -ms-transform: rotate(180deg); /* IE 9 */
                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
                transform: rotate(180deg);
            }
            to {
                color: cornflowerblue;
                -ms-transform: rotate(0deg); /* IE 9 */
                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
                transform: rotate(0deg);
            }
        }
    </style>
    <body>
--- a/olympicWinners.json
+++ b/olympicWinners.json
--- a/package.json
+++ b/package.json
@@ -1,11 +1,16 @@
 {
  "name": "ag-grid-react-example",
-  "version": "5.4.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",
-    "large": "webpack-dev-server --config webpack.config.large.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"
  },
  "repository": {
    "type": "git",
@@ -24,19 +29,31 @@
  },
  "homepage": "http://www.ag-grid.com/",
  "devDependencies": {
-    "babel-loader": "6.2.1",
+      "babel-core": "6.24.x",
-    "babel-preset-es2015": "6.3.13",
+      "babel-loader": "6.4.x",
-    "babel-preset-react": "6.3.13",
+      "babel-preset-es2015": "6.24.x",
-    "css-loader": "0.23.1",
+      "babel-preset-react": "6.24.x",
-    "style-loader": "0.13.0",
+      "babel-preset-stage-0": "6.24.x",
-    "webpack": "1.12.11",
+      "babel-preset-stage-1": "6.24.x",
-    "webpack-dev-server": "^1.14.1"
+      "css-loader": "0.23.x",
-  },
+      "style-loader": "0.13.x",
-  "dependencies": {
+      "webpack": "1.12.x",
-    "react": "0.14.6",
+      "webpack-dev-server": "1.14.x"
-    "react-dom": "0.14.6",
+    },
-    "ag-grid": "~5.4.0",
+    "dependencies": {
-    "ag-grid-enterprise": "~5.4.0",
+      "ag-grid": "10.0.x",
-    "ag-grid-react": "~5.4.0"
+      "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-grouped/ColDefFactory.jsx
+++ b/src-grouped/ColDefFactory.jsx
@@ -0,0 +1,17 @@
 export default class ColDefFactory {
    createColDefs() {
        return [
            {headerName: "Athlete", field: "athlete", width: 200},
            {headerName: "Age", field: "age", width: 90},
            {headerName: "Gold", field: "gold", width: 100, aggFunc: 'sum'},
            {headerName: "Silver", field: "silver", width: 100, aggFunc: 'sum'},
            {headerName: "Bronze", field: "bronze", width: 100, aggFunc: 'sum'},
            {headerName: "Total", field: "total", width: 100, aggFunc: 'sum'},
            {headerName: "Country", field: "country", width: 120, rowGroupIndex: 0},
            {headerName: "Year", field: "year", width: 90},
            {headerName: "Date", field: "date", width: 110},
            {headerName: "Sport", field: "sport", width: 110}
        ];
    }
 }
--- a/src-grouped/index.js
+++ b/src-grouped/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-grouped/myApp.css
+++ b/src-grouped/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-grouped/myApp.jsx
+++ b/src-grouped/myApp.jsx
@@ -0,0 +1,99 @@
 import React from "react";
 import {AgGridReact} from "ag-grid-react";
 import ColDefFactory from "./ColDefFactory.jsx";
 import "./myApp.css";
 // 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 {
    constructor() {
        super();
        this.state = {
            showToolPanel: false,
            columnDefs: new ColDefFactory().createColDefs(),
            rowData: null,
        };
        this.gridOptions = {
            groupRowInnerRenderer: function (params) {
                var FLAG_CODES = {
                    'Ireland': 'ie',
                    'United States': 'us',
                    'Russia': 'ru',
                    'Australia': 'au',
                    'Canada': 'ca',
                    'Norway': 'no',
                    'China': 'cn',
                    'Zimbabwe': 'zw',
                    'Netherlands': 'nl',
                    'South Korea': 'kr',
                    'Croatia': 'hr',
                    'France': 'fr'
                };
                var flagCode = FLAG_CODES[params.node.key];
                var html = '';
                if (flagCode) {
                    html += '<img class="flag" border="0" width="20" height="15" src="https://flags.fmcdn.net/data/flags/mini/' + flagCode + '.png">'
                }
                html += '<span class="groupTitle"> COUNTRY_NAME</span>'.replace('COUNTRY_NAME', params.node.key);
                html += '<span class="medal gold"> Gold: GOLD_COUNT</span>'.replace('GOLD_COUNT', params.data.gold);
                html += '<span class="medal silver"> Silver: SILVER_COUNT</span>'.replace('SILVER_COUNT', params.data.silver);
                html += '<span class="medal bronze"> Bronze: BRONZE_COUNT</span>'.replace('BRONZE_COUNT', params.data.bronze);
                return html;
            }
        };
    }
    onGridReady(params) {
        this.api = params.api;
        this.columnApi = params.columnApi;
        var that = this;
        var httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', '/olympicWinners.json');
        httpRequest.send();
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                var httpResult = JSON.parse(httpRequest.responseText);
                that.api.setRowData(httpResult);
            }
        };
    }
    render() {
        var 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)}
                    // binding to array properties
                    columnDefs={this.state.columnDefs}
                    rowData={this.state.rowData}
                    groupUseEntireRow="true"
                />
            </div>
        );
        return <div style={{width: '800px'}}>
            <div>
                {gridTemplate}
            </div>
        </div>;
    }
 }
--- a/src-large/largeGrid.jsx
+++ b/src-large/largeGrid.jsx
@@ -48,15 +48,11 @@ export default class MyApp extends React.Component {
    createColumnDefs() {
        var columnDefs = [];
        // pass in the parent component to use for React component to the cellRenderer.
        // this is optional. if missing, then react router will not work.
        var cellRenderer = reactCellRendererFactory(SimpleCellRenderer, this);
        this.columnNames.forEach( colName => {
            columnDefs.push({
                headerName: colName.toUpperCase(),
                field: colName,
-                cellRenderer: cellRenderer,
+                cellRendererFramework: SimpleCellRenderer,
                width: 100
            });
        });
--- a/src-large/simpleCellRenderer.jsx
+++ b/src-large/simpleCellRenderer.jsx
@@ -2,12 +2,10 @@ import React from 'react';
 export default class SimpleCellRenderer extends React.Component {
    render() {
        var params = this.props.params;
        // the class below does nothing, it's just for testing, so we can inspect the dom of
        // the result and looking for it, to validate that this cellRenderer is actually getting used.
        return (
-            <span className="simple-cell-renderer">{params.value}</span>
+            <span className="simple-cell-renderer">{this.props.value}</span>
        );
    }
 }
--- a/src-standard/ColDefFactory.jsx
+++ b/src-standard/ColDefFactory.jsx
@@ -1,43 +1,59 @@
 import SkillsCellRenderer from './SkillsCellRenderer.jsx';
 import NameCellEditor from './NameCellEditor.jsx';
 import ProficiencyCellRenderer from './ProficiencyCellRenderer.jsx';
 import RefData from './RefData';
 import {reactCellRendererFactory} from 'ag-grid-react';
 import {reactFilterFactory} from 'ag-grid-react';
 import SkillsFilter from './SkillsFilter.jsx';
 import ProficiencyFilter from './ProficiencyFilter.jsx';
 import MyReactHeaderGroupComponent from './MyReactHeaderGroupComponent.jsx';
 export default class ColDefFactory {
-    createColDefs(parentReactComponent) {
+    createColDefs() {
        var columnDefs = [
            {headerName: '#', width: 30, checkboxSelection: true, suppressSorting: true,
                suppressMenu: true, pinned: true},
            {
                headerName: 'Employee',
                headerGroupComponentFramework: MyReactHeaderGroupComponent,
                children: [
-                    {headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
+                    {
-                        width: 150, pinned: true},
+                        headerName: "Name", field: "name", enableRowGroup: true, enablePivot: true,
-                    {headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
+                        width: 150, pinned: true, editable: true,
-                        // not bothering with React for country, as it's a simple HTML string
+                        // use a React cellEditor
                        cellEditorFramework: NameCellEditor
                    }, {
                        headerName: "Country", field: "country", width: 150, enableRowGroup: true, enablePivot: true,
                        // an example of using a non-React cell renderer
                        cellRenderer: countryCellRenderer, pinned: true,
-                        filterParams: {cellRenderer: countryCellRenderer, cellHeight: 20}},
+                        filterParams: {
                            cellRenderer: countryCellRenderer, cellHeight: 20
                        }, columnGroupShow: 'open'
                    }, {
                        headerName: "DOB", field: "dob", width: 110, enableRowGroup: true, enablePivot: true, filter:'date',
                        pinned: true, cellRenderer: function(params) {
                            return  pad(params.value.getDate(), 2) + '/' +
                                    pad(params.value.getMonth() + 1, 2)+ '/' +
                                    params.value.getFullYear();
                        }, columnGroupShow: 'open'
                    }
                ]
            },
            {
                headerName: 'IT Skills',
                children: [
                    {headerName: "Skills", width: 125, suppressSorting: true, field: 'skills', enableRowGroup: true, enablePivot: true,
-                        // using ag-Grid's React cellRenderer factory
+                        // supply a React component
-                        cellRenderer: reactCellRendererFactory(SkillsCellRenderer, parentReactComponent),
+                        cellRendererFramework: SkillsCellRenderer,
-                        // using ag-Grid's React filter factory
+                        // supply a React component
-                        filter: reactFilterFactory(SkillsFilter, parentReactComponent)
+                        filterFramework: SkillsFilter
                    },
-                    {headerName: "Proficiency", field: "proficiency", filter: 'number', width: 120, enableValue: true,
+                    {headerName: "Proficiency", field: "proficiency", width: 135, enableValue: true,
-                        // using ag-Grid's React cellRenderer factory
+                        // supply a React component
-                        cellRenderer: reactCellRendererFactory(ProficiencyCellRenderer, parentReactComponent),
+                        cellRendererFramework: ProficiencyCellRenderer,
-                        // using ag-Grid's React filter factory
+                        // supply a React component
-                        filter: reactFilterFactory(ProficiencyFilter, parentReactComponent)}
+                        filterFramework: ProficiencyFilter
                    }
                ]
            },
            {
@@ -65,3 +81,10 @@ function countryCellRenderer(params) {
        return null;
    }
 }
 //Utility function used to pad the date formatting.
 function pad(num, totalStringSize) {
    let asString = num + "";
    while (asString.length < totalStringSize) asString = "0" + asString;
    return asString;
 }
--- a/src-standard/MyReactDateComponent.jsx
+++ b/src-standard/MyReactDateComponent.jsx
@@ -0,0 +1,167 @@
 import React from 'react';
 // Date Component to be used in the date filter.
 // This is a very simple example of how a React component can be plugged as a DateComponentFramework
 // as you can see, the only requirement is that the React component implements the required methods
 // getDate and setDate and that it calls back into props.onDateChanged every time that the date changes.
 export default class MyReactDateComponent extends React.Component {
    constructor(props) {
        super(props);
        //The state of this component is represented of:
        //  The current date it holds, null by default, null if the date typed by the user is not valid or fields are blank
        //  The current values that the user types in the input boxes, by default ''
        //The textBoxes state is necessary since it can be set from ag-Grid. This can be seen in this example through
        // the usage of the button DOB equals to 01/01/2000 in the example page.
        this.state = {
            date: null,
            textBoxes: {
                dd: '',
                mm: '',
                yyyy: ''
            }
        }
    }
    render() {
        //Inlining styles to make simpler the component
        let filterStyle = {
            margin:'2px'
        };
        let ddStyle = {
            width: '30px'
        };
        let mmStyle = {
            width: '30px'
        };
        let yyyyStyle = {
            width: '60px'
        };
        let resetStyle = {
            padding: '2px',
            backgroundColor: 'red',
            borderRadius: '3px',
            fontSize: '10px',
            marginRight: '5px',
            color: 'white'
        };
        return (
            <div style={filterStyle}>
                <span style={resetStyle} onClick={this.resetDate.bind(this)}>x</span>
                <input onInput = {this.onDateChanged.bind(this)} ref="dd" placeholder="dd" style={ddStyle} value={this.state.textBoxes.dd} maxLength="2"/>/
                <input onInput = {this.onDateChanged.bind(this)} ref="mm" placeholder="mm" style={mmStyle} value={this.state.textBoxes.mm} maxLength="2"/>/
                <input onInput = {this.onDateChanged.bind(this)} ref="yyyy" placeholder="yyyy" style={yyyyStyle} value={this.state.textBoxes.yyyy} maxLength="4"/>
            </div>
        );
    }
    //*********************************************************************************
    //          METHODS REQUIRED BY AG-GRID
    //*********************************************************************************
    getDate (){
        //ag-grid will call us here when in need to check what the current date value is hold by this
        //component.
        return this.state.date;
    }
    setDate (date){
        //ag-grid will call us here when it needs this component to update the date that it holds.
        this.setState({
            date:date,
            textBoxes:{
                dd: date.getDate(),
                mm: date.getMonth() + 1,
                yyyy: date.getFullYear()
            }
        })
    }
    //*********************************************************************************
    //          LINKS THE INTERNAL STATE AND AG-GRID
    //*********************************************************************************
    updateAndNotifyAgGrid (date, textBoxes){
        this.setState ({
                date: date,
                textBoxes:textBoxes
            },
            //Callback after the state is set. This is where we tell ag-grid that the date has changed so
            //it will proceed with the filtering and we can then expect ag-Grid to call us back to getDate
            this.props.onDateChanged
        );
    }
    //*********************************************************************************
    //          LINKING THE UI, THE STATE AND AG-GRID
    //*********************************************************************************
    resetDate (){
        let date = null;
        let textBoxes = {
            dd : '',
            mm : '',
            yyyy : '',
        };
        this.updateAndNotifyAgGrid(date, textBoxes)
    }
    onDateChanged () {
        let date = this.parseDate(this.refs.dd.value, this.refs.mm.value, this.refs.yyyy.value);
        let textBoxes = {
            dd : this.refs.dd.value,
            mm : this.refs.mm.value,
            yyyy : this.refs.yyyy.value,
        };
        this.updateAndNotifyAgGrid(date, textBoxes)
    }
    //*********************************************************************************
    //          INTERNAL LOGIC
    //*********************************************************************************
    parseDate (dd, mm, yyyy){
        //If any of the three input date fields are empty, stop and return null
        if (dd.trim() === '' || mm.trim() === '' || yyyy.trim() === '') {
            return null;
        }
        let day = Number(dd);
        let month = Number(mm);
        let year = Number(yyyy);
        let date = new Date(year, month - 1, day);
        //If the date is not valid
        if (isNaN(date.getTime())){
            return null;
        }
        //Given that new Date takes any garbage in, it is possible for the user to specify a new Date
        //like this (-1, 35, 1) and it will return a valid javascript date. In this example, it will
        //return Sat Dec 01    1 00:00:00 GMT+0000 (GMT) - Go figure...
        //To ensure that we are not letting non sensical dates to go through we check that the resultant
        //javascript date parts (month, year and day) match the given date fields provided as parameters.
        //If the javascript date parts don't match the provided fields, we assume that the input is non
        //sensical... ie: Day=-1 or month=14, if this is the case, we return null
        //This also protects us from non sensical dates like dd=31, mm=2 of any year
        if (date.getDate() != day || date.getMonth() + 1 != month || date.getFullYear() != year){
            return null;
        }
        return date;
    }
 }
 // the grid will always pass in one props called 'params',
 // which is the grid passing you the params for the cellRenderer.
 // this piece is optional. the grid will always pass the 'params'
 // props, so little need for adding this validation meta-data.
 MyReactDateComponent.propTypes = {
    params: React.PropTypes.object
 };
--- a/src-standard/MyReactHeaderComponent.jsx
+++ b/src-standard/MyReactHeaderComponent.jsx
@@ -0,0 +1,76 @@
 import React from 'react';
 // Header component to be used as default for all the columns.
 export default class MyReactHeaderComponent extends React.Component {
    constructor(props) {
        super(props);
        this.props.column.addEventListener('sortChanged', this.onSortChanged.bind(this));
        //The state of this component contains the current sort state of this column
        //The possible values are: 'asc', 'desc' and ''
        this.state = {
           sorted: ''
        }
    }
    render() {
        let sortElements = [];
        if (this.props.enableSorting){
            let downArrowClass = "customSortDownLabel " + (this.state.sorted === 'desc' ? " active" : "");
            let upArrowClass = "customSortUpLabel " + (this.state.sorted === 'asc' ? " active" : "");
            let removeArrowClass = "customSortRemoveLabel " + (this.state.sorted === '' ? " active" : "");
            sortElements.push(<div className={downArrowClass} onClick={this.onSortRequested.bind(this, 'desc')}><i className="fa fa-long-arrow-down"/></div>)
            sortElements.push(<div className={upArrowClass} onClick={this.onSortRequested.bind(this, 'asc')}><i className="fa fa-long-arrow-up"/></div>)
            sortElements.push(<div className={removeArrowClass} onClick={this.onSortRequested.bind(this, '')}><i className="fa fa-times"/></div>)
        }
        let menuButton = null;
        if (this.props.enableMenu){
            menuButton = <div ref="menuButton" className="customHeaderMenuButton" onClick={this.onMenuClick.bind(this)}><i className={"fa " + this.props.menuIcon}/></div>
        }
        return <div>
            {menuButton}
            <div className="customHeaderLabel">{this.props.displayName}</div>
            {sortElements}
        </div>
    }
    onSortRequested (order, event) {
        this.props.setSort (order, event.shiftKey);
    };
    onSortChanged (){
        if (this.props.column.isSortAscending()){
            this.setState({
                sorted: 'asc'
            })
        } else if (this.props.column.isSortDescending()){
            this.setState({
                sorted: 'desc'
            })
        } else {
            this.setState({
                sorted: ''
            })
        }
    };
    onMenuClick (){
        this.props.showColumnMenu (this.refs.menuButton);
    };
 }
 // the grid will always pass in one props called 'params',
 // which is the grid passing you the params for the cellRenderer.
 // this piece is optional. the grid will always pass the 'params'
 // props, so little need for adding this validation meta-data.
 MyReactHeaderComponent.propTypes = {
    params: React.PropTypes.object
 };
--- a/src-standard/MyReactHeaderGroupComponent.jsx
+++ b/src-standard/MyReactHeaderGroupComponent.jsx
@@ -0,0 +1,41 @@
 import React from 'react';
 // Header component to be used as default for all the columns.
 export default class MyReactHeaderGroupComponent extends React.Component {
    constructor(props) {
        super(props);
        this.props.columnGroup.getOriginalColumnGroup().addEventListener('expandedChanged', this.onExpandChanged.bind(this));
        this.state = {
            expanded:null
        }
        this.onExpandChanged();
    }
    render() {
        let arrowClassName = "customExpandButton " + (this.state.expanded ?  " expanded": " collapsed");
        return <div>
            <div className="customHeaderLabel"> {this.props.displayName}</div>
            <div onClick={this.expandOrCollapse.bind(this)} className={arrowClassName}><i className="fa fa-arrow-right" /></div>
        </div>
    }
    expandOrCollapse (){
        this.props.setExpanded(!this.state.expanded);
    };
    onExpandChanged (){
        this.setState({
            expanded: this.props.columnGroup.getOriginalColumnGroup().isExpanded()
        })
    }
 }
 // the grid will always pass in one props called 'params',
 // which is the grid passing you the params for the cellRenderer.
 // this piece is optional. the grid will always pass the 'params'
 // props, so little need for adding this validation meta-data.
 MyReactHeaderGroupComponent.propTypes = {
    params: React.PropTypes.object
 };
--- a/src-standard/NameCellEditor.jsx
+++ b/src-standard/NameCellEditor.jsx
@@ -0,0 +1,117 @@
 import React from 'react';
 import RefData from './RefData';
 var KEY_BACKSPACE = 8;
 var KEY_DELETE = 46;
 var KEY_F2 = 113;
 // cell renderer for the proficiency column. this is a very basic cell editor,
 export default class NameCellEditor extends React.Component {
    constructor(props) {
        super(props);
        // the entire ag-Grid properties are passed as one single object inside the params
        this.state = this.createInitialState(props);
    }
    // work out how to present the data based on what the user hit. you don't need to do any of
    // this for your ag-Grid cellEditor to work, however it makes sense to do this so the user
    // experience is similar to Excel
    createInitialState(props) {
        var startValue;
        var putCursorAtEndOnFocus = false;
        var highlightAllOnFocus = false;
        if (props.keyPress === KEY_BACKSPACE || props.keyPress === KEY_DELETE) {
            // if backspace or delete pressed, we clear the cell
            startValue = '';
        } else if (props.charPress) {
            // if a letter was pressed, we start with the letter
            startValue = props.charPress;
        } else {
            // otherwise we start with the current value
            startValue = props.value;
            if (props.keyPress === KEY_F2) {
                this.putCursorAtEndOnFocus = true;
            } else {
                this.highlightAllOnFocus = true;
            }
        }
        return {
            value: startValue,
            putCursorAtEndOnFocus: putCursorAtEndOnFocus,
            highlightAllOnFocus: highlightAllOnFocus
        }
    }
    render() {
        return (
            <input ref="textField" value={this.state.value} onChange={this.onChangeListener.bind(this)}/>
        );
    }
    onChangeListener(event) {
        // if doing React, you will probably be using a library for managing immutable
        // objects better. to keep this example simple, we don't use one.
        var newState = {
            value: event.target.value,
            putCursorAtEndOnFocus: this.state.putCursorAtEndOnFocus,
            highlightAllOnFocus: this.state.highlightAllOnFocus
        };
        this.setState(newState);
    }
    // called by ag-Grid, to get the final value
    getValue() {
        return this.state.value;
    }
    // cannot use componentDidMount because although the component might be ready from React's point of
    // view, it may not yet be in the browser (put in by ag-Grid) so focus will not work
    afterGuiAttached() {
        // get ref from React component
        var eInput = this.refs.textField;
        eInput.focus();
        if (this.highlightAllOnFocus) {
            eInput.select();
        } else {
            // when we started editing, we want the carot at the end, not the start.
            // this comes into play in two scenarios: a) when user hits F2 and b)
            // when user hits a printable character, then on IE (and only IE) the carot
            // was placed after the first character, thus 'apply' would end up as 'pplea'
            var length = eInput.value ? eInput.value.length : 0;
            if (length > 0) {
                eInput.setSelectionRange(length, length);
            }
        }
    }
    // if we want the editor to appear in a popup, then return true.
    isPopup() {
        return false;
    }
    // return true here if you don't want to allow editing on the cell.
    isCancelBeforeStart() {
        return false;
    }
    // just to demonstrate, if you type in 'cancel' then the edit will not take effect
    isCancelAfterEnd() {
        if (this.state.value && this.state.value.toUpperCase()==='CANCEL') {
            return true;
        } else {
            return false;
        }
    }
 }
 // the grid will always pass in one props called 'params',
 // which is the grid passing you the params for the cellRenderer.
 // this piece is optional. the grid will always pass the 'params'
 // props, so little need for adding this validation meta-data.
 NameCellEditor.propTypes = {
    params: React.PropTypes.object
 };
--- a/src-standard/ProficiencyCellRenderer.jsx
+++ b/src-standard/ProficiencyCellRenderer.jsx
@@ -7,28 +7,19 @@ import RefData from './RefData';
 export default class ProficiencyCellRenderer extends React.Component {
    render() {
        var params = this.props.params;
        var backgroundColor;
-        if (params.value < 20) {
+        if (this.props.value < 20) {
            backgroundColor = 'red';
-        } else if (params.value < 60) {
+        } else if (this.props.value < 60) {
            backgroundColor = '#ff9900';
        } else {
            backgroundColor = '#00A000';
        }
        return (
-            <div className="div-percent-bar" style={{ width: params.value + '%', backgroundColor: backgroundColor }}>
+            <div className="div-percent-bar" style={{ width: this.props.value + '%', backgroundColor: backgroundColor }}>
-                <div className="div-percent-value">{params.value}%</div>
+                <div className="div-percent-value">{this.props.value}%</div>
            </div>
        );
    }
 }
 // the grid will always pass in one props called 'params',
 // which is the grid passing you the params for the cellRenderer.
 // this piece is optional. the grid will always pass the 'params'
 // props, so little need for adding this validation meta-data.
 ProficiencyCellRenderer.propTypes = {
    params: React.PropTypes.object
 };
--- a/src-standard/ProficiencyFilter.jsx
+++ b/src-standard/ProficiencyFilter.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
 import RefData from './RefData';
 var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
@@ -7,22 +6,16 @@ var PROFICIENCY_NAMES = ['No Filter', 'Above 40%', 'Above 60%', 'Above 80%'];
 // a React filter component with ag-Grid.
 export default class ProficiencyFilter extends React.Component {
-    constructor() {
+    constructor(props) {
        super();
        this.state = {
            selected: PROFICIENCY_NAMES[0]
        };
    }
    // called by agGrid
    init(params) {
        this.filterChangedCallback = params.filterChangedCallback;
        this.valueGetter = params.valueGetter;
    }
    // called by agGrid
    doesFilterPass(params) {
-        var value = this.valueGetter(params);
+        var value = this.props.valueGetter(params);
        var valueAsNumber = parseFloat(value);
        switch (this.state.selected) {
@@ -40,11 +33,9 @@ export default class ProficiencyFilter extends React.Component {
    onButtonPressed(name) {
        console.log(name);
-        this.setState({
+        var newState = {selected: name};
-            selected: name
+        // set the state, and once it is done, then call filterChangedCallback
-        }, ()=> {
+        this.setState(newState, this.props.filterChangedCallback);
            this.filterChangedCallback();
        });
        console.log(name);
    }
--- a/src-standard/RefData.js
+++ b/src-standard/RefData.js
@@ -56,6 +56,21 @@ RefData.COUNTRIES = [
        {country: "Uruguay", continent: "South America", language: "Spanish"}
    ];
 RefData.DOB = [
    new Date(2000, 0, 1 ),
    new Date(2001, 1, 2 ),
    new Date(2002, 2, 3 ),
    new Date(2003, 3, 4 ),
    new Date(2004, 4, 5 ),
    new Date(2005, 5, 6 ),
    new Date(2006, 6, 7 ),
    new Date(2007, 7, 8 ),
    new Date(2008, 8, 9 ),
    new Date(2009, 9, 10 ),
    new Date(2010, 10, 11 ),
    new Date(2011, 11, 12 )
 ];
 RefData.ADDRESSES = [
        '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763',
        '3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215',
--- 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],
@@ -16,6 +16,7 @@ export default class RowDataFactory {
                    windows: Math.random() < 0.4,
                    css: Math.random() < 0.4
                },
                dob: RefData.DOB[i % RefData.DOB.length],
                address: RefData.ADDRESSES[i % RefData.ADDRESSES.length],
                years: Math.round(Math.random() * 100),
                proficiency: Math.round(Math.random() * 100),
--- a/src-standard/SkillsCellRenderer.jsx
+++ b/src-standard/SkillsCellRenderer.jsx
@@ -5,7 +5,7 @@ export default class SkillsCellRenderer extends React.Component {
    render() {
        var skills = [];
-        var rowData = this.props.params.data;
+        var rowData = this.props.data;
        RefData.IT_SKILLS.forEach( (skill) => {
            if (rowData && rowData.skills && rowData.skills[skill]) {
                skills.push(<img key={skill} src={'images/skills/' + skill + '.png'} width={16} title={skill} />);
--- a/src-standard/SkillsFilter.jsx
+++ b/src-standard/SkillsFilter.jsx
@@ -8,11 +8,9 @@ import RefData from './RefData';
 // React design skills.
 export default class SkillsFilter extends React.Component {
-    constructor() {
+    constructor(props) {
-        super();
+        super(props);
        this.state = {
            skills: RefData.IT_SKILLS,
            skillNames: RefData.IT_SKILLS_NAMES,
            android: false,
            css: false,
            html5: false,
@@ -21,9 +19,24 @@ export default class SkillsFilter extends React.Component {
        };
    }
-    // called by agGrid
+    getModel() {
-    init(params) {
+        return {
-        this.filterChangedCallback = params.filterChangedCallback;
+            android: this.state.android,
            css: this.state.css,
            html5: this.state.html5,
            mac: this.state.mac,
            windows: this.state.windows
        }
    }
    setModel(model) {
        this.setState({
            android: model.android,
            css: model.css,
            html5: model.html5,
            mac: model.mac,
            windows: model.windows
        });
    }
    // called by agGrid
@@ -32,7 +45,7 @@ export default class SkillsFilter extends React.Component {
        var rowSkills = params.data.skills;
        var passed = true;
-        this.state.skills.forEach( (skill) => {
+        RefData.IT_SKILLS.forEach( (skill) => {
            if (this.state[skill]) {
                if (!rowSkills[skill]) {
                    passed = false;
@@ -54,15 +67,20 @@ export default class SkillsFilter extends React.Component {
        var newValue = event.target.checked;
        var newModel = {};
        newModel[skill] = newValue;
-        this.setState(newModel, ()=> {this.filterChangedCallback();} );
+        // set the state, and once it is done, then call filterChangedCallback
        this.setState(newModel, this.props.filterChangedCallback );
    }
    helloFromSkillsFilter() {
        alert("Hello From The Skills Filter!");
    }
    render() {
        var skillsTemplates = [];
-        this.state.skills.forEach( (skill, index) => {
+        RefData.IT_SKILLS.forEach( (skill, index) => {
-            var skillName = this.state.skillNames[index];
+            var skillName = RefData.IT_SKILLS_NAMES[index];
            var template = (
                <label key={skill} style={{border: '1px solid lightgrey', margin: 4, padding: 4, display: 'inline-block'}}>
                    <span>
@@ -91,7 +109,6 @@ export default class SkillsFilter extends React.Component {
    // these are other method that agGrid calls that we
    // could of implemented, but they are optional and
    // we have no use for them in this particular filter.
    //getApi() {}
    //afterGuiAttached(params) {}
    //onNewRowsLoaded() {}
    //onAnyFilterChanged() {}
--- 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.css
+++ b/src-standard/myApp.css
@@ -10,7 +10,7 @@ label {
 .div-percent-bar {
    display: inline-block;
-    height: 100%;
+    height: 20px;
    position: relative;
 }
--- a/src-standard/myApp.jsx
+++ b/src-standard/myApp.jsx
@@ -1,13 +1,12 @@
-import ReactDOM from 'react-dom';
+import React from "react";
-import React from 'react';
+import {AgGridReact} from "ag-grid-react";
-import {AgGridReact} from 'ag-grid-react';
+import RowDataFactory from "./RowDataFactory";
-import RefData from './RefData';
+import ColDefFactory from "./ColDefFactory.jsx";
-import RowDataFactory from './RowDataFactory';
+import MyReactDateComponent from "./MyReactDateComponent.jsx";
-import ColDefFactory from './ColDefFactory.jsx';
+import MyReactHeaderComponent from "./MyReactHeaderComponent.jsx";
-import './myApp.css';
+import "./myApp.css";
 // take this line out if you do not want to use ag-Grid-Enterprise
-import 'ag-grid-enterprise';
+import "ag-grid-enterprise";
 export default class MyApp extends React.Component {
@@ -18,8 +17,8 @@ export default class MyApp extends React.Component {
            quickFilterText: null,
            showGrid: true,
            showToolPanel: false,
-            columnDefs: new ColDefFactory().createColDefs(this),
+            columnDefs: new ColDefFactory().createColDefs(),
-            rowData: new RowDataFactory().createRowData(this),
+            rowData: new RowDataFactory().createRowData(),
            icons: {
                columnRemoveFromGroup: '<i class="fa fa-remove"/>',
                filter: '<i class="fa fa-filter"/>',
@@ -39,13 +38,25 @@ export default class MyApp extends React.Component {
        // you do, the providing the gridOptions as a standalone object is just
        // what you want!
        this.gridOptions = {
            //We register the react date component that ag-grid will use to render
            dateComponentFramework: MyReactDateComponent,
            // this is how you listen for events using gridOptions
-            onModelUpdated: function() {
+            onModelUpdated: function () {
                console.log('event onModelUpdated received');
            },
            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) {
@@ -94,6 +105,20 @@ export default class MyApp extends React.Component {
        });
    }
    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();
    }
    render() {
        var gridTemplate;
        var bottomHeaderTemplate;
@@ -102,9 +127,14 @@ export default class MyApp extends React.Component {
        topHeaderTemplate = (
            <div>
                <div style={{float: 'right'}}>
-                    <input type="text" onChange={this.onQuickFilterText.bind(this)} placeholder="Type text to filter..."/>
+                    <input type="text" onChange={this.onQuickFilterText.bind(this)}
-                    <button id="btDestroyGrid" disabled={!this.state.showGrid} onClick={this.onShowGrid.bind(this, false)}>Destroy Grid</button>
+                           placeholder="Type text to filter..."/>
-                    <button id="btCreateGrid" disabled={this.state.showGrid} onClick={this.onShowGrid.bind(this, true)}>Create Grid</button>
+                    <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"/>
@@ -130,11 +160,18 @@ export default class MyApp extends React.Component {
                    </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>
@@ -147,9 +184,9 @@ export default class MyApp extends React.Component {
                        gridOptions={this.gridOptions}
                        // listening for events
-                        onGridReady={this.onGridReady.bind(this)}
+                        onGridReady={this.onGridReady}
-                        onRowSelected={this.onRowSelected.bind(this)}
+                        onRowSelected={this.onRowSelected}
-                        onCellClicked={this.onCellClicked.bind(this)}
+                        onCellClicked={this.onCellClicked}
                        // binding to simple properties
                        showToolPanel={this.state.showToolPanel}
@@ -162,20 +199,20 @@ export default class MyApp extends React.Component {
                        columnDefs={this.state.columnDefs}
                        rowData={this.state.rowData}
-                        // no binding, just providing harde coded strings for the properties
+                        // no binding, just providing hard coded strings for the properties
                        suppressRowClickSelection="true"
                        rowSelection="multiple"
                        enableColResize="true"
                        enableSorting="true"
                        enableFilter="true"
                        groupHeaders="true"
                        rowHeight="22"
                        debug="true"
                    />
                </div>
            );
        }
-        return <div style={{width: '800px'}}>
+        return <div style={{width: '1024px'}}>
            <div style={{padding: '4px'}}>
                {topHeaderTemplate}
                {bottomHeaderTemplate}
--- 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.grouped.js
+++ b/webpack.config.grouped.js
@@ -0,0 +1,27 @@
 module.exports = {
    entry: "./src-grouped/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
Alberto	5904f47d55	8.0.0	2017-02-09 14:14:07 +00:00
Alberto	25b416b71d	Getting ready for releasing 8.0.0	2017-02-09 13:59:26 +00:00
Alberto	abb7828921	Getting ready for releasing 8.0.0	2017-02-09 13:58:19 +00:00
Alberto	ad5fd2d1ce	ag-49 Ng2 Header component	2017-02-07 10:00:52 +00:00
Alberto	6d686f1c02	ag-49 Custom Group Header example completed	2017-02-03 11:16:17 +00:00
Alberto	6376a24e3a	ag-49 Custom Header example completed	2017-02-03 10:14:20 +00:00
Sean Landsman	9c8cf08d2a	AG-195 Create react example using grouped data	2017-01-26 11:40:46 +00:00
Alberto	a8c70c0ae8	Adding the cellRenderer so the example and updating the docs to reflect the example changes	2017-01-23 14:58:26 +00:00
Alberto	3390411e8a	React date component, polishing the UI and adding documentation	2017-01-23 12:30:15 +00:00
Alberto	a280e97763	Creating React component to manage the dates in the DateFilter	2017-01-20 15:58:01 +00:00
Alberto	5451b02acd	Creating the scaffolding for the ag-grid-react DateComponent	2017-01-20 15:29:42 +00:00
Alberto	3613a26f48	Creating the scaffolding for the ag-grid-react DateComponent	2017-01-20 14:47:11 +00:00
Sean Landsman	4acdee4b72	AG-24 Add getFilterInstance to React Examples Project	2017-01-19 10:58:32 +00:00
Alberto	72dae24ebe	7.2.0	2017-01-17 17:05:38 +00:00
ceolter	0aa2f7a2be	Merge remote-tracking branch 'origin/master'	2017-01-03 14:13:12 +00:00
ceolter	6a94aee204	fixed example, the percent bar was not correct height	2017-01-03 14:13:03 +00:00
Sean Landsman	e0dfa732c7	7.1.1	2016-12-22 15:16:58 +00:00
Sean Landsman	d26876876f	7.0.0	2016-11-30 16:41:47 +00:00
Sean Landsman	3148c047b6	6.4.0	2016-11-11 13:42:22 +00:00
seanlandsman	33b006b783	6.3.0	2016-11-04 15:45:15 +00:00
seanlandsman	3b5ee65790	Release of 6.2.0	2016-10-11 16:13:26 +01:00
Sean Landsman	4829b2f6cd	Release of 6.1.0	2016-10-03 13:02:15 +01:00
Sean Landsman	67af64ea9d	Release of 6.0.1	2016-09-15 15:05:56 +01:00
ceolter	99dfa1e4f9	new component model	2016-09-14 15:58:15 +01:00
ceolter	1e9ef53316	new component model	2016-09-14 15:02:35 +01:00
ceolter	b5949d8d5d	new component model	2016-09-14 12:15:30 +01:00
ceolter	b4b8c85172	new component model	2016-09-12 22:20:20 +01:00
ceolter	c703eaf89c	new component model	2016-09-12 13:45:37 +01:00