diff --git a/.vs/AAWeb/v15/.suo b/.vs/AAWeb/v15/.suo
index 2d3bb72d0..d6f5dcf66 100644
Binary files a/.vs/AAWeb/v15/.suo and b/.vs/AAWeb/v15/.suo differ
diff --git a/Ball.js b/Ball.js
index 7610368e7..47bd95cbe 100644
--- a/Ball.js
+++ b/Ball.js
@@ -26,8 +26,6 @@ function newBall() {
fillStyle: '',
labelStrokeStyle: '',
- labelFirstText: '',
- labelSecondText: '',
radomizeCurrentPosition: radomizeCurrentPosition,
radomizeCurrentSpeed: radomizeCurrentSpeed,
@@ -122,17 +120,6 @@ function newBall() {
function drawBallBackgrond() {
- if (thisObject.input.visible === false) { return; }
- if (thisObject.input.visible === true && thisObject.physicsEnabled === false) {
-
- /* The first time that the ball becomes visible, we need to do thisObject. */
-
- radomizeCurrentPosition(thisObject.input.position);
- radomizeCurrentSpeed();
-
- thisObject.physicsEnabled = true;
- }
-
if (thisObject.currentRadius > 1) {
/* Target Line */
@@ -165,8 +152,6 @@ function newBall() {
function drawBallForeground() {
- if (thisObject.input.visible === false) { return; }
-
if (thisObject.currentRadius > 5) {
/* Contourn */
@@ -206,10 +191,11 @@ function newBall() {
/* Image */
+ let imageSize = 50;
+
if (thisObject.input.imageId !== undefined) {
let image = document.getElementById(thisObject.input.imageId);
- let imageSize = 50;
if (image !== null) {
@@ -218,50 +204,30 @@ function newBall() {
}
}
- /* Label First Text */
+ /* Label Text */
if (thisObject.currentRadius > 6) {
browserCanvasContext.strokeStyle = thisObject.labelStrokeStyle;
- var xOffset = 0;
+ let labelPoint;
+ let fontSize = 10;
- if (thisObject.labelFirstText >= 10) {
- xOffset = thisObject.currentRadius / 10;
- }
+ browserCanvasContext.font = fontSize + 'px Courier New';
- browserCanvasContext.font = (thisObject.currentRadius / 4).toFixed(0) + 'px verdana';
+ let label = thisObject.input.label;
- try {
- browserCanvasContext.fillText(thisObject.labelFirstText.toFixed(0), thisObject.currentPosition.x - 2 - xOffset, thisObject.currentPosition.y + 2);
- } catch (err) {
- browserCanvasContext.fillText(thisObject.labelFirstText, thisObject.currentPosition.x - 2 - xOffset, thisObject.currentPosition.y + 2);
- }
+ labelPoint = {
+ x: thisObject.currentPosition.x - label.length / 2 * fontSize * 0.60,
+ y: thisObject.currentPosition.y + imageSize / 2 + fontSize * 0.60 + 5
+ };
- }
+ browserCanvasContext.font = fontSize + 'px Courier New';
+ browserCanvasContext.fillStyle = thisObject.labelStrokeStyle;
+ browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
- /* Label Second Text */
-
- if (thisObject.currentRadius > 10) {
-
- browserCanvasContext.strokeStyle = thisObject.labelStrokeStyle;
-
- var xOffset = 0;
-
-
- xOffset = thisObject.currentRadius / 2;
-
-
- browserCanvasContext.font = (thisObject.currentRadius / 6).toFixed(0) + 'px verdana';
-
- try {
- browserCanvasContext.fillText(thisObject.labelSecondText.toFixed(8), thisObject.currentPosition.x - xOffset, thisObject.currentPosition.y + xOffset);
- } catch (err) {
- browserCanvasContext.fillText(thisObject.labelSecondText, thisObject.currentPosition.x - xOffset, thisObject.currentPosition.y + xOffset);
- }
}
}
-
}
diff --git a/Canvas.js b/Canvas.js
index 4c4df8221..a2301c7b7 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -277,7 +277,7 @@ function newCanvas() {
if (ballDragStarted) {
- let ball = balls[ballBeingDragged];
+ let ball = thisObject.floatingSpace.balls[ballBeingDragged];
ball.currentPosition.x = dragVector.upX;
ball.currentPosition.y = dragVector.upY;
diff --git a/FloatingSpace.js b/FloatingSpace.js
index bb9cd245d..ef98e0f34 100644
--- a/FloatingSpace.js
+++ b/FloatingSpace.js
@@ -6,6 +6,7 @@ This space has its own physics which helps with the animation of these objects a
function newFloatingSpace() {
let thisObject = {
+ balls: undefined, // This is the array of balls being displayed
createNewBall: createNewBall,
physicsLoop: physicsLoop,
isInside: isInside,
@@ -13,25 +14,23 @@ function newFloatingSpace() {
initialize: initialize
};
- let balls; // This is the array of balls being displayed
+ let createdBalls = [];
return thisObject;
function initialize() {
- balls = []; // We initialize this in order to start the calculations in a clean way.
+ thisObject.balls = []; // We initialize this in order to start the calculations in a clean way.
}
function physicsLoop() {
- /* This function makes all the calculations to apply phisycs on all objects in this space. */
+ /* This function makes all the calculations to apply phisycs on all balls in this space. */
- for (let i = 0; i < balls.length; i++) {
+ for (let i = 0; i < thisObject.balls.length; i++) {
- let ball = balls[i];
-
- if (ball.physicsEnabled === false) { continue;}
+ let ball = thisObject.balls[i];
/* Change position based on speed */
@@ -67,13 +66,11 @@ function newFloatingSpace() {
/* Collision Control */
- for (let k = i + 1; k < balls.length; k++) {
+ for (let k = i + 1; k < thisObject.balls.length; k++) {
- if (colliding(balls[i], balls[k])) {
+ if (colliding(thisObject.balls[i], thisObject.balls[k])) {
- if (balls[k].physicsEnabled === false) { continue; }
-
- resolveCollision(balls[k], balls[i]);
+ resolveCollision(thisObject.balls[k], thisObject.balls[i]);
}
}
@@ -86,17 +83,37 @@ function newFloatingSpace() {
}
- /* Finally we draw all the balls. */
+ /* We draw all the thisObject.balls. */
- for (let i = 0; i < balls.length; i++) {
- let ball = balls[i];
+ for (let i = 0; i < thisObject.balls.length; i++) {
+ let ball = thisObject.balls[i];
ball.drawBackground();
}
- for (let i = 0; i < balls.length; i++) {
- let ball = balls[balls.length - i - 1];
+ for (let i = 0; i < thisObject.balls.length; i++) {
+ let ball = thisObject.balls[thisObject.balls.length - i - 1];
ball.drawForeground();
}
+
+ /* Finally we check if any of the created Balls where enabled to run under the Physics Engine. */
+
+ for (let i = 0; i < createdBalls.length; i++) {
+
+ let ball = createdBalls[i];
+
+ if (ball.input.visible === true) {
+
+ /* The first time that the ball becomes visible, we need to do this. */
+
+ ball.radomizeCurrentPosition(ball.input.position);
+ ball.radomizeCurrentSpeed();
+
+ thisObject.balls.push(ball);
+ createdBalls.splice(i, 1); // Delete item from array.
+ return; // Only one at the time.
+
+ }
+ }
}
function createNewBall(pInput, pContainer) {
@@ -112,17 +129,14 @@ function newFloatingSpace() {
ball.friction = .995;
ball.initializeMass(15);
- ball.initializeRadius(3);
+ ball.initializeRadius(30);
- ball.fillStyle = 'rgba(255, 155, 155, 0.5)';
- ball.labelStrokeStyle = 'rgba(255, 0, 255, 1)';
+ ball.fillStyle = 'rgba(255, 255, 255, 0.5)';
+ ball.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)';
- ball.labelFirstText = pInput.name;
- ball.labelSecondText = "Soy una bola :-)";
+ createdBalls.push(ball);
- balls.push(ball);
-
- ball.index = balls.length;
+ ball.index = thisObject.balls.length;
return ball;
}
@@ -186,13 +200,13 @@ function newFloatingSpace() {
const coulomb = 2;
- var ball1 = balls[currentBall];
+ var ball1 = thisObject.balls[currentBall];
- for (var i = 0; i < balls.length; i++) { // The force to be applied is considering all other balls...
+ for (var i = 0; i < thisObject.balls.length; i++) { // The force to be applied is considering all other balls...
if (i !== currentBall) { // ... except for the current one.
- var ball2 = balls[i]; // So, for each ball...
+ var ball2 = thisObject.balls[i]; // So, for each ball...
var d = Math.sqrt(Math.pow(ball2.currentPosition.x - ball1.currentPosition.x, 2) + Math.pow(ball2.currentPosition.y - ball1.currentPosition.y, 2)); // ... we calculate the distance ...
@@ -267,8 +281,8 @@ function newFloatingSpace() {
/* This function detects weather the point x,y is inside any of the balls. */
- for (var i = 0; i < balls.length; i++) {
- var ball = balls[i];
+ for (var i = 0; i < thisObject.balls.length; i++) {
+ var ball = thisObject.balls[i];
var distance = Math.sqrt(Math.pow(ball.currentPosition.x - x, 2) + Math.pow(ball.currentPosition.y - y, 2));
if (distance < ball.currentRadius) {
@@ -284,7 +298,7 @@ function newFloatingSpace() {
/* This function detects weather the point x,y is inside one particular balls. */
- var ball = balls[ballIndex];
+ var ball = thisObject.balls[ballIndex];
var distance = Math.sqrt(Math.pow(ball.currentPosition.x - x, 2) + Math.pow(ball.currentPosition.y - y, 2));
if (distance < ball.currentRadius) {
diff --git a/Project.njsproj b/Project.njsproj
index 140d13279..97b13e25d 100644
--- a/Project.njsproj
+++ b/Project.njsproj
@@ -104,7 +104,6 @@
Code
-
Code
diff --git a/TimelineChart.js b/TimelineChart.js
index 34ad10e3f..7ddca1f7a 100644
--- a/TimelineChart.js
+++ b/TimelineChart.js
@@ -254,7 +254,7 @@ function newTimelineChart() {
let imageId = pProductCard.bot.devTeam + "." + pProductCard.bot.profilePicture;
- productPlotter.plotter.profile.text = pProductCard.bot.displayName;
+ productPlotter.plotter.profile.label = pProductCard.bot.displayName;
productPlotter.plotter.profile.imageId = imageId;
canvas.floatingSpace.createNewBall(productPlotter.plotter.profile, thisObject.container)
diff --git a/temp.js b/temp.js
deleted file mode 100644
index 87fbc8e36..000000000
--- a/temp.js
+++ /dev/null
@@ -1,773 +0,0 @@
-
-function newOrderBookChart() {
-
- /*
-
- This particular chart, plots information valid at a certain point in time. That menas that first it needs to get that information, and it also
- has to discard information that is not valid anymore. There is one issue: some graphics elements are displayed and animated, like balls, that
- means that every time this chart request new info, it can not destroy all the current orders it is based on, since, if they are still valid
- for the next period of time, recreating them would men producing a glinch on the visualization. So that means that every time that the time period
- changes, it needs not only to incorporate new orders, but also it needs to eliminate the ones that are out of scope.
-
- */
-
- var datetime;
-
- var orderBookChart = {
- setDatetime: setDatetime,
- isInitialized: false,
- container: undefined,
- timeLineCoordinateSystem: undefined,
- draw: draw,
- getContainer: getContainer, // returns the inner most container that holds the point received by parameter.
- initialize: initialize
- };
-
-
-
- /*
-
- Here we will define the two arrays that will contain mostly the points to be plotted on the chart.
- These arrays contains an array that have the following structure:
-
- 0. Rate
- 1. Amount A This is the SUM of Amounts A that belongs to this point in the chart.
- 2. The SUM of Amount A This is the cumulative SUM of SUMs of Amounts A, begining from the smaller rate and going up.
- 3. A Label Ball object
-
- */
-
- var orderBookAsksChartPoints = [];
- var orderBookBidsChartPoints = [];
-
- var ballsOrdersQueue = []; // This is the queue of balls waiting for the order to be added to the array to be displayed.
- var orderBallsReleaseTimer;
-
- var container = newContainer();
- container.initialize();
- orderBookChart.container = container;
-
- container.displacement.containerName = "Order Book Chart";
-
- container.frame.containerName = "Order Book Chart";
-
- var orderBookSnapShot = newOrderBookSnapShot();
-
- return orderBookChart;
-
-
- function initialize() {
-
- orderBookSnapShot.initialize();
-
- orderBookSnapShot.eventHandler.listenToEvent('Order Added', onOrderAdded, undefined);
- orderBookSnapShot.eventHandler.listenToEvent('Order Removed', onOrderRemoved, undefined);
-
- orderBookSnapShot.setDatetime(datetime);
-
- orderBallsReleaseTimer = setInterval(onReleaseOneMoreBall, 100);
- // clearTimeout(orderBallsReleaseTimer); Use this to cancel the timer.
-
-
-
- }
-
-
-
- function getContainer(point) {
-
- var container;
-
- /* First we check if this point is inside this space. */
-
- if (this.container.frame.isThisPointHere(point) === true) {
-
- return this.container;
-
- } else {
-
- /* This point does not belong to this space. */
-
- return undefined;
- }
-
- }
-
- /*
-
- FUNCTIONS RELATED TO "HANDLING EVENTS"
-
- */
-
- function onOrderAdded() {
-
- }
-
-
- function onOrderRemoved() {
-
- }
-
-
-
- function onOrderBookChanged() {
-
- /*
-
- Fresh data about the order book has just arrived. We need to take it an put it in the right way so that
- this chart can show what it is supposed to show.
-
- */
-
- /* Since the range of the data might change, we must calculate the timeLineCoordinateSystem everytime new data arrives. */
-
- var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
- orderBookChart.timeLineCoordinateSystem = timeLineCoordinateSystem;
-
- orderBookChart.timeLineCoordinateSystem.initialize(
- orderBookChart.orderBook.server.orderBookStatistics.resultSet["row 1"].MIN_Rate,
- orderBookChart.orderBook.server.orderBookStatistics.resultSet["row 2"].MAX_Rate,
- orderBookChart.container.frame.width
- );
-
- /* Balls are being created, before they enter into the floating space. */
-
- transformRecivedOrdersIntoOrderBalls();
-
- orderBookChart.isInitialized = true;
- }
-
-
- function setDatetime(newDatetime) {
-
- datetime = newDatetime;
- orderBookChart.orderBookSnapShot.setDatetime(datetime);
-
- }
-
-
- function onReleaseOneMoreBall() {
-
- /*
-
- Orders that are queued to be displayed, are released, one by one every time this function is executed.
- With released, we mean that are pushed to an array of balls that are currently rendered at the Floating Space.
-
- */
-
- if (ballsOrdersQueue.length > 0) {
-
- /* We take the first order in the queue and push it to the balls array. */
-
- var ball = ballsOrdersQueue.shift();
-
- balls.push(ball);
-
- orderBookChart.addOrder(ball.linkedObject); // We add the order linked to this ball to the order book.
-
- updateBallsTargets(); // This will recalculate the target for the new ball added.
- }
-
- }
-
-
- /*
-
- FUNCTIONS RELATED TO "PLOTTING THE CHART"
-
- */
-
- function drawOrderBookChart() {
-
- /*
-
- This function is responsible for plotting the chart onto the browser canvas. It assumes that there exists 2 arrays, containing
- the points already calculated to be plotted. Those calculations happens when a new order is added to the chart, in this function
- we just plot whatever is already calculated.
-
- */
-
- /* The first part of this function will plot BIDs, the second one will plot the ASKs. */
-
- if (orderBookBidsChartPoints.length > 0) {
-
- /* We calculate the first points of the chart. These are not points representing orders, but the lower part of the hill plotted. */
-
- var maxBasePoint = {
- x: (orderBookBidsChartPoints[orderBookBidsChartPoints.length - 1][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.timeLineCoordinateSystem.x, // We take the first Order Rate on the array for this.
- y: orderBookChart.container.frame.height * 5 / 7
- };
-
- var minBasePoint = {
- x: (orderBookBidsChartPoints[0][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.x, // We take the first Order Rate on the array for this.
- y: orderBookChart.container.frame.height * 5 / 7
- };
-
- /* We make the point relative to the current frame */
-
- maxBasePoint = orderBookChart.container.frame.frameThisPoint(maxBasePoint);
- minBasePoint = orderBookChart.container.frame.frameThisPoint(minBasePoint);
-
- /* We add the possible displacement */
-
- maxBasePoint = orderBookChart.container.displacement.displaceThisPoint(maxBasePoint);
- minBasePoint = orderBookChart.container.displacement.displaceThisPoint(minBasePoint);
-
- /* Lets start the drawing. */
-
- browserCanvasContext.beginPath();
- browserCanvasContext.moveTo(minBasePoint.x, minBasePoint.y);
-
- var sumY = 0;
-
- for (var i = 0; i < orderBookBidsChartPoints.length; i++) {
-
- sumY = sumY + orderBookBidsChartPoints[i][1];
-
- var point = {
- x: (orderBookBidsChartPoints[i][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.timeLineCoordinateSystem.x,
- y: orderBookChart.container.frame.height * 5 / 7 - sumY
- };
-
- var rawPosition = {
- x: point.x,
- y: point.y
- };
-
- /* Frame the point */
-
- point = orderBookChart.container.frame.frameThisPoint(point);
-
- /* First we apply the displacement. */
-
- point = orderBookChart.container.displacement.displaceThisPoint(point);
-
- browserCanvasContext.lineTo(point.x, point.y);
-
-
-
- }
-
- browserCanvasContext.lineTo(maxBasePoint.x, maxBasePoint.y);
- browserCanvasContext.lineTo(minBasePoint.x, minBasePoint.y);
- browserCanvasContext.closePath();
- browserCanvasContext.fillStyle = 'rgba(130, 180, 30, 0.9)';
- browserCanvasContext.fill();
- browserCanvasContext.strokeStyle = 'rgba(30, 230, 30, 0.9)';
- browserCanvasContext.lineWidth = 1;
- browserCanvasContext.stroke();
-
- browserCanvasContext.closePath();
-
-
- }
-
- /* Ok, Now it is the turn of the ASKs, following is the code that plots them on the chart. */
-
-
- if (orderBookAsksChartPoints.length > 0) {
-
- /* We calculate the first point of the chart */
-
- var maxBasePoint = {
- x: (orderBookAsksChartPoints[orderBookAsksChartPoints.length - 1][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.timeLineCoordinateSystem.x, // We take the first Order Rate on the array for this.
- y: orderBookChart.container.frame.height * 5 / 7
- };
-
- var minBasePoint = {
- x: (orderBookAsksChartPoints[0][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.timeLineCoordinateSystem.x, // We take the first Order Rate on the array for this.
- y: orderBookChart.container.frame.height * 5 / 7
- };
-
- /* We make the point relative to the current frame */
-
- maxBasePoint = orderBookChart.container.frame.frameThisPoint(maxBasePoint);
- minBasePoint = orderBookChart.container.frame.frameThisPoint(minBasePoint);
-
- /* We add the possible displacement */
-
- maxBasePoint = orderBookChart.container.displacement.displaceThisPoint(maxBasePoint);
- minBasePoint = orderBookChart.container.displacement.displaceThisPoint(minBasePoint);
-
- /* Lets start the drawing. */
-
- browserCanvasContext.beginPath();
- browserCanvasContext.moveTo(minBasePoint.x, minBasePoint.y);
-
- var sumY = 0;
-
- for (var i = 0; i < orderBookAsksChartPoints.length; i++) {
-
- sumY = sumY + orderBookAsksChartPoints[i][1];
-
- var point = {
- x: (orderBookAsksChartPoints[i][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.timeLineCoordinateSystem.x,
- y: orderBookChart.container.frame.height * 5 / 7 - sumY
- };
-
- /* Frame the point */
-
- point = orderBookChart.container.frame.frameThisPoint(point);
-
- /* We add the possible displacement */
-
- point = orderBookChart.container.displacement.displaceThisPoint(point);
-
- browserCanvasContext.lineTo(point.x, point.y);
-
- }
-
- browserCanvasContext.lineTo(maxBasePoint.x, maxBasePoint.y);
- browserCanvasContext.lineTo(minBasePoint.x, minBasePoint.y);
- browserCanvasContext.closePath();
- browserCanvasContext.fillStyle = 'rgba(180, 130, 30, 0.75)';
- browserCanvasContext.fill();
- browserCanvasContext.strokeStyle = 'rgba(230, 30, 30, 0.75)';
- browserCanvasContext.lineWidth = 1;
- browserCanvasContext.stroke();
-
- browserCanvasContext.closePath();
- }
-
- }
-
-
- function drawXAxis() {
-
- var step = (orderBookChart.timeLineCoordinateSystem.max.x - orderBookChart.timeLineCoordinateSystem.min.x) / 20;
-
- var decimals;
-
- /* Lets identify how many decimals are needed to be displayed. To do that we will chekck when is the first time that two consecutives points in the timeLineCoordinateSystem are different. */
-
- for (var j = 0; j < 10; j++) {
-
- var diff = (orderBookChart.timeLineCoordinateSystem.min.x + step * 2).toFixed(j) - (orderBookChart.timeLineCoordinateSystem.min.x + step * 1).toFixed(j);
-
- if (diff !== 0 && decimals === undefined) {
- decimals = j;
- }
- }
-
- for (var i = 1; i < 20; i++) {
-
- var point = {
- x: orderBookChart.timeLineCoordinateSystem.min.x + step * i,
- y: orderBookChart.container.frame.height * 6 / 7
- };
-
-
- browserCanvasContext.strokeStyle = 'rgba(10, 103, 201, 1)';
-
- var fontSize = 10;// + orderBookChart.container.zoom.level();
-
- browserCanvasContext.font = fontSize + 'px verdana';
-
- /* Se the label */
-
- var label = point.x.toFixed(decimals);
-
- /* Now we transform x on the actual coordinate on the canvas. */
-
- point.x = (point.x - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.scale.x; // Now x represent a coordinate on the canvas.
-
- point = orderBookChart.container.frame.frameThisPoint(point);
- point = orderBookChart.container.displacement.displaceThisPoint(point);
-
-
- browserCanvasContext.fillText(label, point.x, point.y);
-
- }
- }
-
-
- function calculateOrdersSum(pointsArray) {
-
- /* In this chart we represent the cummulative sum of all orders. That means that every time a new order arrives, we need to recalculate this. */
-
- var sum = 0;
-
- for (var i = 0; i < pointsArray.length; i++) {
-
- sum = sum + pointsArray[i][1];
- pointsArray[i][2] = sum;
-
- }
- }
-
-
- /*
-
- FUNCTIONS RELATED TO "NEW ORDERS"
-
- */
-
- function removeOrder(order) {
- /*
-
- Here we will remove the order from the chart to be ploted. The chart has 2 parts: bids and asks, so we need to know which part to remove it from.
-
- */
-
- if (order.type === 'Bid') {
-
- removeOrderFromPointArray(order, orderBookBidsChartPoints);
- calculateOrdersSum(orderBookBidsChartPoints); // We sum all the amounts into the 3rd column of the array.
-
- } else {
-
- removeOrderFromPointArray(order, orderBookAsksChartPoints);
- calculateOrdersSum(orderBookAsksChartPoints); // We sum all the amounts into the 3rd column of the array.
-
- }
- }
-
-
- function removeOrderFromPointArray(order, pointsArray) {
-
- /* To remove an order, we simply scan the array received and when we find the same order rate, we substract the amount, and thats it. */
-
- for (var i = 0; i < pointsArray.length; i++) {
-
- if (pointsArray[i][0] === order.rate) { // We find the item in the pointArray where the rate is the same as the orders rate.
-
- pointsArray[i][1] = pointsArray[i][1] - order.amountA;
-
- if (pointsArray[i][1] === 0) { // If we reach zero, then there is no reason to keep this element in the array.
-
- pointsArray.splice(i, 1); // This means remove this item from the array.
-
- }
-
- }
-
- }
-
- }
-
-
- function addOrder(order) {
-
- /*
-
- This is the first function executed when a new order arrives. Here we still don't know if it is an ASK or BID. From here on we
- do all the things needed to incorporate this new order to the chart.
-
- */
-
-
- var pointIndex;
-
- if (order.type === 'Bid') {
-
- pointIndex = addNewBidOrder(order); // We add the new order to the array, if necesary.
- calculateOrdersSum(orderBookBidsChartPoints); // We sum all the amounts into the 3rd column of the array.
-
- //if (pointIndex >= 0) { // < 0 means that the amount of the order was summed into an existing item of the array.
-
- // var ball;
-
- // ball = addNewLabelBall(pointIndex, order.type, order.rate, 'rgba(30, 130, 30, 0.65)'); // We add a new ball.
- // orderBookBidsChartPoints[pointIndex][3] = ball;
- // updateLabelBallsLData(orderBookBidsChartPoints); // We update the labels of the balls we the new values, resulting of the sum calculation.
- //}
-
- } else {
-
- pointIndex = addNewAskOrder(order);
- calculateOrdersSum(orderBookAsksChartPoints); // We sum all the amounts into the 3rd column of the array.
-
- //if (pointIndex >= 0) { // < 0 means that the amount of the order was summed into an existing item of the array.
-
- // var ball;
-
- // ball = addNewLabelBall(pointIndex, order.type, order.rate, 'rgba(130, 30, 30, 0.65)'); // We add a new ball.
- // orderBookAsksChartPoints[pointIndex][3] = ball;
- // updateLabelBallsLData(orderBookAsksChartPoints);
- //}
- }
-
-
- }
-
-
- function addNewBidOrder(order) {
-
- /*
-
- Everytime a new order arrives, we need to add it to the array that contains all the chart points for this type of order.
- To add it, we need to follow certain rules, that are defined by this type of chart. This is what this function does for BID orders.
-
- */
-
- if (orderBookBidsChartPoints.length === 0) {
-
- orderBookBidsChartPoints.push([order.rate, order.amountA, 0, undefined]); // There it goes the first element of the order book.
- return 0;
-
- } else {
-
- for (var i = 0; i < orderBookBidsChartPoints.length; i++) {
-
- try {
- if (order.rate < orderBookBidsChartPoints[i][0] && order.rate > orderBookBidsChartPoints[i + 1][0]) {
-
- orderBookBidsChartPoints.splice(i + 1, 0, [order.rate, order.amountA, 0, undefined]);
- return i + 1;
- }
- } catch (err) {
- // It is fine if that does not work. It might be because the index i+1 does not exist.
- }
-
- if (order.rate === orderBookBidsChartPoints[i][0]) {
-
- /* Orders with the exact same rate that previous orders on the order book, are added to the same item of the arrray. */
-
- orderBookBidsChartPoints[i][1] = orderBookBidsChartPoints[i][1] + order.rate;
-
- return -1; // This means that no new item was added.
-
- } else {
-
- if (order.rate > orderBookBidsChartPoints[i][0] && i === 0) {
-
- orderBookBidsChartPoints.splice(i, 0, [order.rate, order.amountA, 0, undefined]);
- return i;
-
- } else {
-
- if (order.rate < orderBookBidsChartPoints[i][0] && i === orderBookBidsChartPoints.length - 1) {
-
- orderBookBidsChartPoints.push([order.rate, order.amountA, 0, undefined]);
- return orderBookBidsChartPoints.length - 1;
- }
- }
- }
- }
- }
- }
-
-
- function addNewAskOrder(order) {
-
- /*
-
- Everytime a new order arrives, we need to add it to the array that contains all the chart points for this type of order.
- To add it, we need to follow certain rules, that are defined by this type of chart. This is what this function does for ASK orders.
-
- */
-
- if (orderBookAsksChartPoints.length === 0) {
-
- orderBookAsksChartPoints.push([order.rate, order.amountA, 0, undefined]); // There it goes the first element of the order book.
- return 0;
-
- } else {
-
- for (var i = 0; i < orderBookAsksChartPoints.length; i++) {
-
- try {
- if (order.rate > orderBookAsksChartPoints[i][0] && order.rate < orderBookAsksChartPoints[i + 1][0]) {
-
- orderBookAsksChartPoints.splice(i + 1, 0, [order.rate, order.amountA, 0, undefined]);
- return i + 1;
- }
- } catch (err) {
- // It is fine if that does not work. It might be because the index i+1 does not exist.
- }
-
-
- if (order.rate === orderBookAsksChartPoints[i][0]) {
-
- /* Orders with the exact same rate that previous orders on the order book, are added to the same item of the arrray. */
-
- orderBookAsksChartPoints[i][1] = orderBookAsksChartPoints[i][1] + order.rate;
- return -1;
-
- } else {
-
- if (order.rate < orderBookAsksChartPoints[i][0]) {
-
- orderBookAsksChartPoints.splice(i, 0, [order.rate, order.amountA, 0, undefined]);
- return i;
-
- } else {
-
- if (order.rate > orderBookAsksChartPoints[i][0] && i === orderBookAsksChartPoints.length - 1) {
-
- orderBookAsksChartPoints.push([order.rate, order.amountA, 0, undefined]);
- return orderBookAsksChartPoints.length - 1;
- }
- }
- }
- }
- }
- }
-
-
- /*
-
- FUNCTIONS RELATED TO "THE ANIMATION"
-
- */
-
- function draw() {
-
- /* This function is meant to be executed to draw the whole chart, for instance, as part of some animation loop. */
-
- this.container.frame.draw();
-
- if (orderBookChart.isInitialized === true) {
-
- drawOrderBookChart();
-
- drawXAxis();
- }
-
- }
-
- /*
-
- FUNCTIONS RELATED TO "ORDER BALLS"
-
- */
-
- function transformRecivedOrdersIntoOrderBalls() {
-
- /*
-
- Every new order we receive, we automatically transform it into a new ball. That doesnt mean that the ball is going to be
- displayed right away, but anyway we have it ready for that.
-
- */
-
- var totalRows = Object.keys(orderBookChart.orderBook.server.orderBookData.resultSet).length;
-
- for (var i = 1; i <= totalRows; i++) {
-
- var row = orderBookChart.orderBook.server.orderBookData.resultSet["row " + i];
-
- /* We move the information from the result set to an order object, and use that from now on. */
-
- var order = newOrder(undefined, row.Type, row.Rate, row.AmountA, row.AmountB, undefined, undefined);
-
- /* Position of the ball without displacement or zoon. */
-
- var rawPosition = {
- x: (order.rate - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.scale.x,
- y: orderBookChart.container.frame.height * 5 / 7
- };
-
-
- var ball = newBall();
-
- ball.container = orderBookChart.container;
-
-
- ball.radomizeCurrentSpeed();
-
- ball.friction = .995;
-
- ball.rawPosition = rawPosition;
-
- ball.initializeMass(order.amountA * 5);
- ball.initializeRadius(order.amountA * 3);
- ball.initializeTargetPosition();
-
- ball.radomizeCurrentPosition(ball.targetPosition);
-
- ball.linkedObject = order;
- ball.linkedObjectType = "order";
-
- if (order.type === 'Bid') {
- ball.fillStyle = 'rgba(102, 204, 0, 0.75)';
- } else {
- ball.fillStyle = 'rgba(222, 105, 42, 0.75)';
- }
-
- if (order.type === 'Bid') {
- ball.labelStrokeStyle = 'rgba(255, 255, 255, 1)';
- } else {
- ball.labelStrokeStyle = 'rgba(255, 255, 255, 1)';
- }
-
- ball.labelFirstText = order.amountA;
- ball.labelSecondText = order.rate;
-
-
-
- ballsOrdersQueue.push(ball);
- }
- }
-
- /*
-
- FUNCTIONS RELATED TO "LABEL BALLS"
-
- */
-
- function addNewLabelBall(id, type, rate, fillStyle) {
-
- /* This function is used to create new balls, representing labels of each point on the chart. */
-
- var rawPosition = {
- x: (rate - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.scale.x,
- y: orderBookChart.container.frame.height * 5 / 7
- };
-
- var ball = newBall();
-
- ball.container = orderBookChart.container;
-
- ball.radomizeCurrentPosition(rawPosition);
- ball.radomizeCurrentSpeed();
-
- ball.friction = .995;
-
- ball.rawPosition = rawPosition;
-
- ball.initializeMass(15);
- ball.initializeRadius(3);
- ball.initializeTargetPosition();
-
-
- ball.fillStyle = fillStyle;
- ball.labelStrokeStyle = 'rgba(255, 255, 255, 1)';
-
- ball.labelFirstText = 0; //.toFixed(4);
- ball.labelSecondText = rate.toFixed(8);
-
-
- balls.push(ball);
-
- return ball;
- }
-
-
- function updateLabelBallsLData(pointsArray) {
-
- /* When a new order arrives to the chart, all labels of balls representing points in the chart must be updated. */
-
- var ball;
- var sum;
-
- for (var i = 0; i < pointsArray.length; i++) {
-
- /* We update the balls label. */
-
- ball = pointsArray[i][3];
- sum = pointsArray[i][2];
-
- ball.labelFirstText = sum.toFixed(2);
-
- /* We update the balls raw position. */
-
- var rawPositionY = orderBookChart.container.frame.height * 5 / 7 - sum;
-
- ball.rawPosition.y = rawPositionY;
- }
- }
-
-
-}
-