AG-420 Improve React implementation

src-trader-dashboard/components/renderers/HorizontalBarComponent.jsx

@@ -0,0 +1,42 @@
+import React, {Component} from "react";
+
+export default class HorizontalBarComponent extends Component {
+
+    render() {
+        let positiveChange = {
+            fill: "green"
+        };
+
+        let negativeChange = {
+            fill: "red"
+        };
+
+        let text = {
+            position: "absolute",
+            top: 0,
+            width: "100%",
+            textAlign: "right"
+        };
+
+        let pctNetChange = this.props.value;
+        let pctNetChangeBar = Math.min(Math.abs(pctNetChange) * 100, 100) / 2;
+
+        let barWidth = `${pctNetChangeBar}%`;
+        let barStyle = pctNetChange >= 0 ? positiveChange : negativeChange;
+        let barX = `${pctNetChange >= 0 ? '50' : 50 - pctNetChangeBar}%`;
+        return (
+            <div style={{position: 'relative'}}>
+                <div style={{width: "50%"}}>
+                    <svg width="100%" preserveAspectRatio="none">
+                        <rect x={barX} y="0" width={barWidth} height="20px" rx="4" ry="4" style={barStyle}/>
+                    </svg>
+                </div>
+                <div style={text}>{pctNetChange}</div>
+            </div>
+        )
+    }
+}
+
+HorizontalBarComponent.propTypes = {
+    params: React.PropTypes.object
+};

src-trader-dashboard/index.html

@@ -48,7 +48,7 @@
             background-image: linear-gradient(to bottom, #afbcff 0%, #c1d5c9 100%), linear-gradient(to bottom, #afbcff 0%, #c1d5c9 100%);
         }
 
-        .fx-postive {
+        .fx-positive {
             border-top: 20px solid #3ACFD5;
             border-right: 20px solid #3a4ed5;
             -webkit-box-sizing: border-box;

src-trader-dashboard/index.js

@@ -7,6 +7,7 @@ import {Provider} from "react-redux";
 
 import "ag-grid-root/dist/styles/ag-grid.css";
 import "ag-grid-root/dist/styles/theme-fresh.css";
+// import "ag-grid-root/dist/styles/theme-blue.css";
 
 import StoreService from './services/StoreService';
 import TraderDashboard from "./components/TraderDashboard.jsx";

src-trader-dashboard/services/FxDataService.jsx

@@ -3,6 +3,8 @@ import sampleSize from "lodash/sampleSize";
 import StoreService from "./StoreService";
 import fxDataUpdated from "../actions/fxDataUpdated";
 
+import HorizontalBarComponent from "../components/renderers/HorizontalBarComponent.jsx";
+
 export default class {
     constructor() {
         this.store = StoreService.STORE;
@@ -27,7 +29,9 @@ export default class {
             let swing = Math.floor(this.random(-maxSwing, maxSwing));
             row.last = row.last + swing;
             row.net = swing;
-            row.pct_net_change = (row.net / row.last).toFixed(2);
+
+            let multiplier = ((Math.random() * 10) > 5) ? -1 : 1;
+            row['pct_net_change'] = multiplier * (this.random(30, 100) / 100).toFixed(2);
 
             for (let symbolToUpdate of fxSymbolsToUpdate) {
                 if(row[symbolToUpdate] === null) {
@@ -65,7 +69,9 @@ export default class {
             // last, net and % change are different
             row['last'] = Math.floor(this.random(7000, 170000));
             row['net'] = Math.floor(this.random(-500, 500));
-            row['pct_net_change'] = this.random(-1, 1).toFixed(2);
+
+            let multiplier = ((Math.random() * 10) > 5) ? -1 : 1;
+            row['pct_net_change'] = multiplier * (this.random(30, 100) / 100).toFixed(2);
 
             rowData.push(row);
         }
@@ -99,15 +105,8 @@ const FX_DELTA_HEADERS = [
     {
         field: 'pct_net_change',
         headerName: '% NC',
-        headerClass: 'align-right',
-        cellClass: 'align-right', // to be removed once the component is in place
-        // cellRendererFramework: HorizontalBarComponent,
-        width: 50,
-        cellClassRules: {
-            'pct-change-green': 'x > 0',
-            'pct-change-amber': 'x <= 0 && x >= -0.10',
-            'pct-change-red': 'x < -0.10'
-        }
+        cellRendererFramework: HorizontalBarComponent,
+        width: 85
     },
 ].concat(FX_CURRENCY_SYMBOLS.map((symbol) => {
     "use strict";
@@ -118,7 +117,7 @@ const FX_DELTA_HEADERS = [
         cellClass: 'align-right',
         cellRenderer: 'animateShowChange',
         cellClassRules: {
-            'fx-postive': 'x > 0.8',
+            'fx-positive': 'x > 0.8',
             'fx-null': 'x === null',
             'fx-negative': 'x < -0.8'
         }