Fix DepthChart axis multiplication continous increase

web/app/components/Exchange/DepthHighChart.jsx

@@ -4,6 +4,7 @@ import Immutable from "immutable";
 import Highstock from "react-highcharts/highstock";
 import utils from "common/utils";
 import counterpart from "counterpart";
+import _ from "lodash";
 
 class DepthHighChart extends React.Component {
 
@@ -38,37 +39,41 @@ class DepthHighChart extends React.Component {
 
         let power = 1;
 
+        let flatBids = _.cloneDeep(flat_bids), flatAsks = _.cloneDeep(flat_asks), flatCalls = _.cloneDeep(flat_calls);
+
         if (flat_bids.length) {
-            while ((flat_bids[flat_bids.length -1][0] * power) < 1) {
+            while ((flat_bids[flat_bids.length - 1][0] * power) < 1) {
                 power *= 10;
             }
         } else if (flat_asks.length) {
             while ((flat_asks[0][0] * power) < 1) {
                 power *= 10;
             }
         } else if (flat_calls && flat_calls.length) {
-            while ((flat_calls[flat_calls.length -1][0] * power) < 1) {
+            while ((flat_calls[flat_calls.length - 1][0] * power) < 1) {
                 power *= 10;
             }
         }
 
         power *= 10;
-
+        console.log("power:", power, flat_bids.length);
         if (power !== 1) {
-            if (flat_asks.length) {
-                flat_bids.forEach(bid => {
+            if (flatBids.length) {
+                flatBids.forEach(bid => {
                     bid[0] *= power;
                 })
             }
 
-            if (flat_asks.length) {
-                flat_asks.forEach(ask => {
+            console.log("power:", power, flatBids.length);
+
+            if (flatAsks.length) {
+                flatAsks.forEach(ask => {
                     ask[0] *= power;
                 })
             }
 
-            if (flat_calls && flat_calls.length) {
-                flat_calls.forEach(call => {
+            if (flatCalls && flatCalls.length) {
+                flatCalls.forEach(call => {
                     call[0] *= power;
                 })
             }
@@ -165,8 +170,8 @@ class DepthHighChart extends React.Component {
         }
 
         // Center the charts between bids and asks
-        if (flat_bids.length > 0 && flat_asks.length > 0) {
-            let middleValue = (flat_asks[0][0] + flat_bids[flat_bids.length - 1][0]) / 2;
+        if (flatBids.length > 0 && flatAsks.length > 0) {
+            let middleValue = (flatAsks[0][0] + flatBids[flatBids.length - 1][0]) / 2;
             config.xAxis.min = middleValue * 0.25;
             config.xAxis.max = middleValue * 1.75;
             if (spread > 0 && spread > middleValue) {
@@ -243,10 +248,10 @@ class DepthHighChart extends React.Component {
 
 
             // Add calls if present
-            if (flat_calls && flat_calls.length) {
+            if (flatCalls && flatCalls.length) {
                 config.series.push({
                     name: `Call ${quoteSymbol}`,
-                    data: this.props.flat_calls,
+                    data: flatCalls,
                     color: "#BBBF2B"
                 })
                 if (this.props.invertedCalls) {
@@ -258,18 +263,18 @@ class DepthHighChart extends React.Component {
         }
 
         // Push asks and bids
-        if (flat_bids && flat_bids.length) {
+        if (flatBids.length) {
             config.series.push({
                 name: `Bid ${quoteSymbol}`,
-                data: flat_bids,
+                data: flatBids,
                 color: "#50D2C2"
             })
         }
 
-        if (flat_asks && flat_asks.length) {
+        if (flatAsks.length) {
             config.series.push({
                 name: `Ask ${quoteSymbol}`,
-                data: flat_asks,
+                data: flatAsks,
                 color: "#E3745B"
             });
         }
@@ -281,18 +286,20 @@ class DepthHighChart extends React.Component {
             config.chart.height = this.state.offsetHeight;
         }
 
-        // Add onClick eventlistener if defined
+        // Add onClick event listener if defined
         if (this.props.onClick) {
             config.chart.events = {
                 click: this.props.onClick
             };
         }
 
+        console.log("flatBids:", flatBids.length, "flatAsks:", flatAsks.length, config);
+
         return (
             <div className="grid-content no-overflow middle-content">
                 <p className="bid-total">{utils.format_number(totalBids, base.precision)} {baseSymbol}</p>
                 <p className="ask-total">{utils.format_number(totalAsks, quote.precision)} {quoteSymbol}</p>
-                {flat_bids || flat_asks || flat_calls ? <Highstock config={config}/> : null}
+                {flatBids || flatAsks || flatCalls ? <Highstock config={config}/> : null}
             </div>
         );
     }