AG-420 Improve React implementation

src-trader-dashboard/components/StockPriceDeltaPanel.jsx

@@ -1,8 +1,38 @@
 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
+        }
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        return !isEqual(this.props.pricingDelta, nextProps.pricingDelta);
+    }
+
+    componentWillReceiveProps(nextProps, nextState) {
+        if (!isEqual(this.props.pricingDelta, nextProps.pricingDelta)) {
+            let pricingDelta = nextProps.pricingDelta;
+            let delta = pricingDelta.currentPrice - pricingDelta.previousPrice;
+            let deltaPercentage = (pricingDelta.currentPrice - pricingDelta.previousPrice) / pricingDelta.currentPrice;
+
+            this.setState({
+                currentPrice: pricingDelta.currentPrice,
+                delta,
+                deltaPercentage
+            })
+        }
+    }
+
+    numberFormatter(input) {
+        return input.toFixed(2);
     }
 
     render() {
@@ -32,18 +62,25 @@ export default class extends Component {
             marginRight: 5
         };
 
-        return (
-            <div>
-                <span style={priceStyle}>
-                    155.47
-                </span>
-                <div style={containerStyle}>
-                    <span style={deltaStyle}>
-                        <span style={negativeSwingStyle}>-0.23</span>
-                        <span style={negativeSwingStyle}>(-0.15%)</span>
+        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>
-            </div>
-        );
+            );
+        }
     }
 }