Strong Code Cleaning
This commit is contained in:
Luis Fernando Molina committed
1 parent
6758655728
commit
8ce0384e00
13 files changed
-1690
No files matched your search
Binary file not shown.
@@ -1,18 +0,0 @@
|
||||
|
||||
|
||||
function newOrder(id, type, rate, amountA, amountB, datetimeIn, datetimeOut) {
|
||||
|
||||
var order = {
|
||||
id: id,
|
||||
rate: rate,
|
||||
amountA: amountA,
|
||||
amountB: amountB,
|
||||
type: type,
|
||||
datetimeIn: datetimeIn,
|
||||
datetimeOut: datetimeOut
|
||||
};
|
||||
|
||||
return order;
|
||||
|
||||
}
|
||||
|
||||
-135
@@ -1,135 +0,0 @@
|
||||
|
||||
|
||||
function newOrderBook() {
|
||||
|
||||
/*
|
||||
|
||||
The order book object mantains the information of an order book of a certain market.
|
||||
|
||||
It is initially empty until it receives a request for orders from any of its clients. It tries to serve the request with already existing orders,
|
||||
in case that request was done before, and if it wasnt, then it makes the request to a Server object and store the orders received.
|
||||
|
||||
*/
|
||||
|
||||
var orders = new Map(); // Here we store all the orders that we received from the server.
|
||||
var marketId;
|
||||
var server;
|
||||
var datetimeRange;
|
||||
var lastRangeLoaded;
|
||||
|
||||
var orderBook = {
|
||||
setDatetimeRange: setDatetimeRange,
|
||||
getOrdersOf: getOrdersOf,
|
||||
initialize: initialize
|
||||
};
|
||||
|
||||
return orderBook;
|
||||
|
||||
function initialize(market) {
|
||||
|
||||
marketId = market;
|
||||
|
||||
/* First we initialize the server that will allow us to retrieve data. */
|
||||
|
||||
server = newFileServer();
|
||||
server.initialize();
|
||||
|
||||
}
|
||||
|
||||
function setDatetimeRange(newDatetimeRange) {
|
||||
|
||||
datetimeRange = newDatetimeRange;
|
||||
|
||||
lastRangeLoaded = false;
|
||||
|
||||
orders = new Map();
|
||||
|
||||
}
|
||||
|
||||
|
||||
function getOrdersOf(datetime, callBackFunction) {
|
||||
|
||||
/*
|
||||
|
||||
Someone is requesting the order book to get updated with information of the datime provided. We request here the new
|
||||
information the server knows about this datetime, but only if this information we dont have it already.
|
||||
|
||||
*/
|
||||
|
||||
if (lastRangeLoaded !== true) {
|
||||
|
||||
server.getOrderBook(datetimeRange.begin, datetimeRange.end, marketId, onServerResponded);
|
||||
|
||||
} else {
|
||||
|
||||
respondToCaller();
|
||||
|
||||
}
|
||||
|
||||
|
||||
function onServerResponded(resultSet) {
|
||||
|
||||
lastRangeLoaded = true;
|
||||
|
||||
/*
|
||||
|
||||
Fresh data about the order book has just arrived from the server. We need to take it an put it in the right way.
|
||||
|
||||
*/
|
||||
|
||||
addOrders(resultSet);
|
||||
|
||||
respondToCaller();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function addOrders(resultSet) {
|
||||
|
||||
|
||||
var totalRows = Object.keys(resultSet).length;
|
||||
|
||||
for (var i = 1; i <= totalRows; i++) {
|
||||
|
||||
var row = resultSet["row " + i];
|
||||
|
||||
/* We move the information from the result set to an order object, and use that from now on. */
|
||||
|
||||
var order = newOrder(row.Id, row.Type, row.Rate, row.AmountA, row.AmountB, new Date(row.DatetimeIn), new Date(row.DatetimeOut));
|
||||
|
||||
orders.set(order.id, order);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function respondToCaller() {
|
||||
|
||||
var ordersForDatetime = [];
|
||||
|
||||
/* We are ready to create an array of the orders for the date requested. For this we need to scan the whole Order Book. */
|
||||
|
||||
for (var order of orders.values()) {
|
||||
|
||||
var valueOfDatetimeIn = order.datetimeIn.valueOf();
|
||||
var valueOfDatetimeOut = order.datetimeOut.valueOf();
|
||||
var valueOfDatetime = datetime.valueOf();
|
||||
|
||||
if (valueOfDatetimeIn <= valueOfDatetime && valueOfDatetimeOut > valueOfDatetime) {
|
||||
|
||||
ordersForDatetime.push(order);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
callBackFunction(ordersForDatetime);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
|
||||
function newOrderBookChart() {
|
||||
|
||||
/*
|
||||
|
||||
This object is responsible for putting all the pieces together that forms an order book chart. These pieces so far are:
|
||||
|
||||
1. A snapshot object, with the orders valid for a certain Datetime.
|
||||
2. A Depht chart object, that is the one that actually plots the chart.
|
||||
3. The container that allows this object to be dragged around and zoomed in or out.
|
||||
|
||||
*/
|
||||
|
||||
var datetime;
|
||||
var datetimeRange;
|
||||
|
||||
var orderBookChart = {
|
||||
setDatetime: setDatetime,
|
||||
setDatetimeRange: setDatetimeRange,
|
||||
container: undefined,
|
||||
draw: draw,
|
||||
getContainer: getContainer,
|
||||
initialize: initialize
|
||||
};
|
||||
|
||||
var container = newContainer();
|
||||
container.initialize();
|
||||
orderBookChart.container = container;
|
||||
|
||||
container.displacement.containerName = "Order Book Chart";
|
||||
container.frame.containerName = "Order Book Chart";
|
||||
|
||||
var orderBookDephChart = newOrderBookDephChart();
|
||||
var orderBookSnapShot = newOrderBookSnapShot();
|
||||
|
||||
var marketId;
|
||||
|
||||
return orderBookChart;
|
||||
|
||||
function initialize(market) {
|
||||
|
||||
marketId = market;
|
||||
|
||||
/* We initialize first the Book Depth object. */
|
||||
|
||||
orderBookDephChart.container.frame.width = this.container.frame.width * 0.90;
|
||||
orderBookDephChart.container.frame.height = this.container.frame.height * 0.90;
|
||||
|
||||
orderBookDephChart.container.frame.position.x = this.container.frame.width * 0.05;
|
||||
orderBookDephChart.container.frame.position.y = this.container.frame.height * 0.05;
|
||||
|
||||
orderBookDephChart.container.displacement.parentDisplacement = this.container.displacement;
|
||||
orderBookDephChart.container.frame.parentFrame = this.container.frame;
|
||||
|
||||
orderBookDephChart.container.parentContainer = this.container;
|
||||
|
||||
orderBookDephChart.initialize(marketId);
|
||||
|
||||
/* Then we initialize the Snap Shot object. */
|
||||
|
||||
orderBookSnapShot.initialize(marketId);
|
||||
|
||||
orderBookSnapShot.eventHandler.listenToEvent('Order Added', orderBookDephChart.addOrder, undefined);
|
||||
orderBookSnapShot.eventHandler.listenToEvent('Order Removed', orderBookDephChart.removeOrder, undefined);
|
||||
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function setDatetime(newDatetime) {
|
||||
|
||||
datetime = newDatetime;
|
||||
orderBookSnapShot.setDatetime(datetime);
|
||||
|
||||
}
|
||||
|
||||
|
||||
function setDatetimeRange(newDatetimeRange) {
|
||||
|
||||
datetimeRange = newDatetimeRange;
|
||||
orderBookSnapShot.setDatetimeRange(datetimeRange);
|
||||
|
||||
}
|
||||
|
||||
function draw() {
|
||||
|
||||
this.container.frame.draw();
|
||||
orderBookDephChart.draw();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,464 +0,0 @@
|
||||
|
||||
function newOrderBookDephChart() {
|
||||
|
||||
/*
|
||||
|
||||
This object represents the Depth chart and is able to mainain the information needed to plot it and to draw it on the canvas.
|
||||
|
||||
*/
|
||||
|
||||
var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
|
||||
|
||||
var orderBookDephChart = {
|
||||
addOrder: addOrder,
|
||||
removeOrder: removeOrder,
|
||||
container: undefined,
|
||||
draw: draw,
|
||||
getContainer: getContainer,
|
||||
initialize: initialize
|
||||
};
|
||||
|
||||
var aggBidOrders = newAggregatedOrdersArray();
|
||||
var aggAskOrders = newAggregatedOrdersArray();
|
||||
|
||||
var container = newContainer();
|
||||
container.initialize();
|
||||
orderBookDephChart.container = container;
|
||||
|
||||
container.displacement.containerName = "Order Book Depth Chart";
|
||||
container.frame.containerName = "Order Book Depth Chart";
|
||||
|
||||
var bidPoints = [];
|
||||
var askPoints = [];
|
||||
|
||||
var marketId;
|
||||
|
||||
return orderBookDephChart;
|
||||
|
||||
|
||||
function initialize(market) {
|
||||
|
||||
marketId = market;
|
||||
|
||||
aggBidOrders.initialize();
|
||||
aggAskOrders.initialize();
|
||||
|
||||
aggBidOrders.setSortOrder('descending');
|
||||
aggAskOrders.setSortOrder('ascending');
|
||||
|
||||
aggBidOrders.eventHandler.listenToEvent('Array Changed', onBidArrayChanged, undefined);
|
||||
aggAskOrders.eventHandler.listenToEvent('Array Changed', onAskArrayChanged, undefined);
|
||||
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function addOrder(order) {
|
||||
|
||||
if (order.type === 'Bid') {
|
||||
|
||||
aggBidOrders.addOrder(order);
|
||||
|
||||
} else {
|
||||
|
||||
aggAskOrders.addOrder(order);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function removeOrder(order) {
|
||||
|
||||
if (order.type === 'Bid') {
|
||||
|
||||
aggBidOrders.removeOrder(order);
|
||||
|
||||
} else {
|
||||
|
||||
aggAskOrders.removeOrder(order);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function onBidArrayChanged(array) {
|
||||
|
||||
/* In order to avoid glinches while plotting the information of the array, we use a copy of the original that is constantly manipulated. */
|
||||
|
||||
newArray = array.slice();
|
||||
bidPoints = newArray;
|
||||
|
||||
recalculateScale();
|
||||
|
||||
}
|
||||
|
||||
function onAskArrayChanged(array) {
|
||||
|
||||
/* In order to avoid glinches while plotting the information of the array, we use a copy of the original that is constantly manipulated. */
|
||||
|
||||
newArray = array.slice();
|
||||
askPoints = newArray;
|
||||
|
||||
recalculateScale();
|
||||
|
||||
}
|
||||
|
||||
|
||||
function draw() {
|
||||
|
||||
if (bidPoints.length > 0 || askPoints.length > 0) {
|
||||
|
||||
|
||||
drawAxis();
|
||||
|
||||
drawBackground();
|
||||
|
||||
plotChart();
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function drawBackground() {
|
||||
|
||||
var market = markets.get(marketId);
|
||||
var label = market.assetA + " " + market.assetB;
|
||||
|
||||
var fontSize = 50;//+ orderBookDephChart.container.zoom.level();
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px verdana';
|
||||
|
||||
/* Now we transform x on the actual coordinate on the canvas. */
|
||||
|
||||
var point = {
|
||||
x: orderBookDephChart.container.frame.width / 2 - (label.length / 2) * fontSize / 2,
|
||||
y: orderBookDephChart.container.frame.height * 3 / 8
|
||||
};
|
||||
|
||||
point = transformThisPoint(point, orderBookDephChart.container);
|
||||
|
||||
browserCanvasContext.fillStyle = 'rgba(190, 190, 190, 0.25)';
|
||||
|
||||
browserCanvasContext.fillText(label, point.x, point.y);
|
||||
|
||||
}
|
||||
|
||||
function plotChart() {
|
||||
|
||||
/*
|
||||
|
||||
This function is responsible for plotting the chart onto the browser canvas.
|
||||
|
||||
*/
|
||||
|
||||
/* The first part of this function will plot BIDs, the second one will plot the ASKs. */
|
||||
|
||||
if (bidPoints.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: 0 ,
|
||||
y: orderBookDephChart.container.frame.height * 5 / 7
|
||||
};
|
||||
|
||||
var minBasePoint = {
|
||||
x: (bidPoints[0].rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x, // We take the first Order Rate on the array for this.
|
||||
y: orderBookDephChart.container.frame.height * 5 / 7
|
||||
};
|
||||
|
||||
maxBasePoint = transformThisPoint(maxBasePoint, orderBookDephChart.container);
|
||||
minBasePoint = transformThisPoint(minBasePoint, orderBookDephChart.container);
|
||||
|
||||
/* Lets start the drawing. */
|
||||
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.moveTo(minBasePoint.x, minBasePoint.y);
|
||||
|
||||
var progressiveSum = 0;
|
||||
|
||||
var point = minBasePoint;
|
||||
|
||||
for (var i = 0; i < bidPoints.length; i++) {
|
||||
|
||||
if (bidPoints[i].rate >= timeLineCoordinateSystem.min.x && bidPoints[i].rate <= timeLineCoordinateSystem.max.x) {
|
||||
|
||||
progressiveSum = progressiveSum + bidPoints[i].amountSum;
|
||||
|
||||
point = {
|
||||
x: (bidPoints[i].rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
|
||||
y: orderBookDephChart.container.frame.height * 5 / 7 - progressiveSum * timeLineCoordinateSystem.scale.y
|
||||
};
|
||||
|
||||
var rawPosition = {
|
||||
x: point.x,
|
||||
y: point.y
|
||||
};
|
||||
|
||||
point = transformThisPoint(point, orderBookDephChart.container);
|
||||
|
||||
browserCanvasContext.lineTo(point.x, point.y);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
browserCanvasContext.lineTo(maxBasePoint.x, point.y);
|
||||
browserCanvasContext.lineTo(maxBasePoint.x, maxBasePoint.y);
|
||||
browserCanvasContext.lineTo(minBasePoint.x, minBasePoint.y);
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.fillStyle = 'rgba(130, 180, 30, 0.50)';
|
||||
browserCanvasContext.fill();
|
||||
browserCanvasContext.strokeStyle = 'rgba(50, 130, 30, 0.50)';
|
||||
browserCanvasContext.lineWidth = 2;
|
||||
browserCanvasContext.stroke();
|
||||
|
||||
browserCanvasContext.closePath();
|
||||
|
||||
}
|
||||
|
||||
/* Ok, Now it is the turn of the ASKs, following is the code that plots them on the chart. */
|
||||
|
||||
|
||||
if (askPoints.length > 0) {
|
||||
|
||||
/* We calculate the first point of the chart */
|
||||
|
||||
var maxBasePoint = {
|
||||
x: (timeLineCoordinateSystem.max.x - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
|
||||
y: orderBookDephChart.container.frame.height * 5 / 7
|
||||
};
|
||||
|
||||
var minBasePoint = {
|
||||
x: (askPoints[0].rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x, // We take the first Order Rate on the array for this.
|
||||
y: orderBookDephChart.container.frame.height * 5 / 7
|
||||
};
|
||||
|
||||
maxBasePoint = transformThisPoint(maxBasePoint, orderBookDephChart.container);
|
||||
minBasePoint = transformThisPoint(minBasePoint, orderBookDephChart.container);
|
||||
|
||||
/* Lets start the drawing. */
|
||||
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.moveTo(minBasePoint.x, minBasePoint.y);
|
||||
|
||||
var progressiveSum = 0;
|
||||
var point = minBasePoint;
|
||||
|
||||
for (var i = 0; i < askPoints.length; i++) {
|
||||
|
||||
if (askPoints[i].rate >= timeLineCoordinateSystem.min.x && askPoints[i].rate <= timeLineCoordinateSystem.max.x) {
|
||||
|
||||
progressiveSum = progressiveSum + askPoints[i].amountSum;
|
||||
|
||||
point = {
|
||||
x: (askPoints[i].rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
|
||||
y: orderBookDephChart.container.frame.height * 5 / 7 - progressiveSum * timeLineCoordinateSystem.scale.y
|
||||
};
|
||||
|
||||
point = transformThisPoint(point, orderBookDephChart.container);
|
||||
|
||||
browserCanvasContext.lineTo(point.x, point.y);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
browserCanvasContext.lineTo(maxBasePoint.x, point.y);
|
||||
browserCanvasContext.lineTo(maxBasePoint.x, maxBasePoint.y);
|
||||
browserCanvasContext.lineTo(minBasePoint.x, minBasePoint.y);
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.fillStyle = 'rgba(180, 130, 30, 0.50)';
|
||||
browserCanvasContext.fill();
|
||||
browserCanvasContext.strokeStyle = 'rgba(130, 50, 30, 0.50)';
|
||||
browserCanvasContext.lineWidth = 2;
|
||||
browserCanvasContext.stroke();
|
||||
|
||||
browserCanvasContext.closePath();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function drawAxis() {
|
||||
|
||||
var step = (timeLineCoordinateSystem.max.x - timeLineCoordinateSystem.min.x) / 10;
|
||||
|
||||
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 = (timeLineCoordinateSystem.min.x + step * 2).toFixed(j) - (timeLineCoordinateSystem.min.x + step * 1).toFixed(j);
|
||||
|
||||
if (diff !== 0 && decimals === undefined) {
|
||||
decimals = j;
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 1; i < 10 ; i++) {
|
||||
|
||||
var point = {
|
||||
x: timeLineCoordinateSystem.min.x + step * i,
|
||||
y: orderBookDephChart.container.frame.height * 6 / 7
|
||||
};
|
||||
|
||||
|
||||
browserCanvasContext.fillStyle = 'rgba(10, 10, 10, 1)';
|
||||
|
||||
fontSize = 8;
|
||||
|
||||
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 - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x; // Now x represent a coordinate on the canvas.
|
||||
|
||||
point = orderBookDephChart.container.frame.frameThisPoint(point);
|
||||
point = orderBookDephChart.container.displacement.displaceThisPoint(point);
|
||||
|
||||
browserCanvasContext.fillText(label, point.x, point.y);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function recalculateScale() {
|
||||
|
||||
/* Since the range of the data might change, we must calculate the timeLineCoordinateSystem everytime new data arrives. */
|
||||
|
||||
var minBidRate = bidPoints[bidPoints.length - 1];
|
||||
var maxBidRate = bidPoints[0];
|
||||
|
||||
var minValue = {
|
||||
x: 1,
|
||||
y: 1
|
||||
};
|
||||
|
||||
var maxValue = {
|
||||
x: 1,
|
||||
y: 1
|
||||
};
|
||||
|
||||
if (bidPoints.length > 0) {
|
||||
|
||||
/* X AXIS:
|
||||
|
||||
We calculate the min value on x on the plot in this way:
|
||||
|
||||
1. We calculate the sum of all orders.
|
||||
2. Then we find which orders are included in the 75% of the total sum.
|
||||
3. The last order included will contain the minimun rate we need for the chart.
|
||||
|
||||
Regarding the maximun, we just take ask orders that mirrors the bids orders only.
|
||||
|
||||
*/
|
||||
|
||||
var sum = 0;
|
||||
|
||||
for (var i = 0; i < bidPoints.length; i++) {
|
||||
|
||||
sum = sum + bidPoints[i].amountSum;
|
||||
|
||||
}
|
||||
|
||||
|
||||
target = sum * 0.75;
|
||||
sum = 0;
|
||||
lastOrder = bidPoints[0];
|
||||
|
||||
for (var i = 0; i < bidPoints.length; i++) {
|
||||
|
||||
sum = sum + bidPoints[i].amountSum;
|
||||
|
||||
if (sum < target) {
|
||||
lastOrder = bidPoints[i];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var minBidRate = lastOrder.rate;
|
||||
var maxBidRate = bidPoints[0].rate;
|
||||
|
||||
minValue.x = minBidRate;
|
||||
maxValue.x = maxBidRate + (maxBidRate - minBidRate);
|
||||
|
||||
/* Y AXIS:
|
||||
|
||||
Now that we know which orders are included on the plot, we must see which is the highest value of
|
||||
all of them. The highest value can be either at an ask, or at a bid order side of the chart.
|
||||
|
||||
*/
|
||||
|
||||
var selectedItem = bidPoints[0];
|
||||
var currentMax = 0;
|
||||
var sum = 0;
|
||||
|
||||
for (var i = 0; i < bidPoints.length; i++) {
|
||||
|
||||
if (bidPoints[i].rate >= minValue.x && bidPoints[i].rate <= maxValue.x) {
|
||||
|
||||
sum = sum + bidPoints[i].amountSum;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
currentMax = sum;
|
||||
var sum = 0;
|
||||
|
||||
for (var i = 0; i < askPoints.length; i++) {
|
||||
|
||||
if (askPoints[i].rate >= minValue.x && askPoints[i].rate <= maxValue.x) {
|
||||
|
||||
sum = sum + askPoints[i].amountSum;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (currentMax < sum) {
|
||||
|
||||
currentMax = sum;
|
||||
|
||||
}
|
||||
|
||||
minValue.y = 0;
|
||||
maxValue.y = currentMax;
|
||||
|
||||
}
|
||||
|
||||
timeLineCoordinateSystem.initialize(
|
||||
minValue,
|
||||
maxValue,
|
||||
orderBookDephChart.container.frame.width,
|
||||
orderBookDephChart.container.frame.height - orderBookDephChart.container.frame.height * 5 / 7
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,140 +0,0 @@
|
||||
|
||||
function newOrderBookFilesCursor() {
|
||||
|
||||
const CURSOR_SIZE = 1440 * 2;
|
||||
|
||||
let orderBookFiles = new Map;
|
||||
let cursorDate = new Date(INITIAL_DATE);
|
||||
|
||||
let orderBookFilesCursor = {
|
||||
setDatetime: setDatetime,
|
||||
orderBookFiles: undefined,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
orderBookFilesCursor.orderBookFiles = orderBookFiles;
|
||||
|
||||
let marketId;
|
||||
let exchangeId;
|
||||
|
||||
let server = newFileServer();
|
||||
|
||||
let working = false;
|
||||
|
||||
return orderBookFilesCursor;
|
||||
|
||||
function initialize(exchange, market) {
|
||||
|
||||
marketId = market;
|
||||
exchangeId = exchange;
|
||||
|
||||
server.initialize();
|
||||
|
||||
}
|
||||
|
||||
function setDatetime(datetime) {
|
||||
|
||||
cursorDate = datetime;
|
||||
|
||||
//if (working === false) {
|
||||
|
||||
getFiles();
|
||||
|
||||
working = true
|
||||
|
||||
collectGarbage();
|
||||
|
||||
//}
|
||||
}
|
||||
|
||||
function getFiles(callBackFunction) {
|
||||
|
||||
let i = 0;
|
||||
let j = 0;
|
||||
|
||||
let dateString;
|
||||
|
||||
getNextFile();
|
||||
|
||||
function getNextFile() {
|
||||
|
||||
let targetDate = new Date(cursorDate);
|
||||
targetDate.setMinutes(targetDate.getMinutes() + j);
|
||||
|
||||
if (j === 0) { j++; }
|
||||
else {
|
||||
if (j < 0) {
|
||||
j = -j;
|
||||
j++;
|
||||
}
|
||||
else {
|
||||
j = -j;
|
||||
}
|
||||
}
|
||||
|
||||
dateString = targetDate.getFullYear() + '-' + pad(targetDate.getMonth() + 1, 2) + '-' + pad(targetDate.getDate(), 2) + '-' + pad(targetDate.getHours(), 2) + '-' + pad(targetDate.getMinutes(), 2);
|
||||
|
||||
if (orderBookFilesCursor.orderBookFiles.get(dateString) === undefined) {
|
||||
|
||||
server.getAggregattedOrderBook(exchangeId, marketId, targetDate, newOrderBookFilesReady)
|
||||
|
||||
} else {
|
||||
|
||||
controlLoop();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function newOrderBookFilesReady(dailyFileReceived) {
|
||||
|
||||
orderBookFilesCursor.orderBookFiles.set(dateString, dailyFileReceived);
|
||||
|
||||
controlLoop();
|
||||
|
||||
}
|
||||
|
||||
function controlLoop() {
|
||||
|
||||
i++;
|
||||
|
||||
if (i < CURSOR_SIZE) {
|
||||
|
||||
getNextFile();
|
||||
|
||||
}
|
||||
|
||||
else {
|
||||
|
||||
if (callBackFunction !== undefined) {
|
||||
|
||||
callBackFunction();
|
||||
}
|
||||
|
||||
working = false;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function collectGarbage() {
|
||||
|
||||
date = removeTime(cursorDate);
|
||||
|
||||
let minDate = date.valueOf() - CURSOR_SIZE / 2 * 60 * 1000;
|
||||
let maxDate = date.valueOf() + CURSOR_SIZE / 2 * 60 * 1000;
|
||||
|
||||
for (let key of orderBookFilesCursor.orderBookFiles.keys()) {
|
||||
|
||||
let keyDate = new Date(key + ':00');
|
||||
|
||||
if (keyDate.valueOf() < minDate || keyDate.valueOf() > maxDate) {
|
||||
|
||||
orderBookFilesCursor.orderBookFiles.delete(key);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,107 +0,0 @@
|
||||
|
||||
function newOrderBookSnapShot() {
|
||||
|
||||
/*
|
||||
|
||||
This object contains an mantains a snapshot of an order book, which is defined as a collection of all orders valid at a certain moment in time.
|
||||
Everytime someone sets a new datetime, it goes to an OrderBook object and request new orders for this datetime. At the same time it removes all
|
||||
orders that are not valid in that new datetime.
|
||||
|
||||
For each new order that adds or removes from the snapshot, it raises an event that can be consumed by subscribers.
|
||||
|
||||
*/
|
||||
|
||||
var orderBook = newOrderBook(); // This is the order book object that is going to provide us with the orders when we shall need them.
|
||||
|
||||
var snapshotOrders = new Map(); // These are the orders that are only valid for the time the chart is plotting right now.
|
||||
|
||||
var datetime;
|
||||
var datetimeRange;
|
||||
|
||||
var marketId;
|
||||
|
||||
var orderBookSnapShot = {
|
||||
eventHandler: undefined,
|
||||
getDatetime: getDatetime,
|
||||
setDatetime: setDatetime,
|
||||
setDatetimeRange: setDatetimeRange,
|
||||
initialize: initialize
|
||||
};
|
||||
|
||||
orderBookSnapShot.eventHandler = newEventHandler();
|
||||
|
||||
return orderBookSnapShot;
|
||||
|
||||
|
||||
function initialize(market) {
|
||||
|
||||
marketId = market;
|
||||
|
||||
this.eventHandler.initialize();
|
||||
|
||||
orderBook.initialize(marketId);
|
||||
|
||||
}
|
||||
|
||||
function getDatetime() {
|
||||
|
||||
return datetime;
|
||||
|
||||
}
|
||||
|
||||
function setDatetime(newDatetime) {
|
||||
|
||||
datetime = newDatetime;
|
||||
|
||||
/* We need to check that all orders that do not belong to this time period must be removed from the snapshot. */
|
||||
|
||||
removeOutOfTimeOrders();
|
||||
|
||||
/* We also have to get the orders from the order book that belongs to this period and we dont have.*/
|
||||
|
||||
orderBook.getOrdersOf(newDatetime, addNewOrders);
|
||||
}
|
||||
|
||||
function setDatetimeRange(newDatetimeRange) {
|
||||
|
||||
datetimeRange = newDatetimeRange;
|
||||
orderBook.setDatetimeRange(datetimeRange);
|
||||
|
||||
}
|
||||
|
||||
function addNewOrders(ordersToAdd) {
|
||||
|
||||
for (var i = 0; i < ordersToAdd.length; i++) {
|
||||
|
||||
order = ordersToAdd[i];
|
||||
|
||||
var existingOrder = snapshotOrders.get(order.id);
|
||||
|
||||
if (existingOrder === undefined) {
|
||||
|
||||
snapshotOrders.set(order.id, order);
|
||||
orderBookSnapShot.eventHandler.raiseEvent('Order Added', order);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function removeOutOfTimeOrders() {
|
||||
|
||||
for (var [id, order] of snapshotOrders) {
|
||||
|
||||
if (order.datetimeIn.valueOf() > datetime.valueOf() || order.datetimeOut.valueOf() <= datetime.valueOf()) {
|
||||
|
||||
snapshotOrders.delete(id);
|
||||
|
||||
orderBookSnapShot.eventHandler.raiseEvent('Order Removed', order);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,437 +0,0 @@
|
||||
|
||||
function newOrderBookPanel() {
|
||||
|
||||
var orderBookPanel = {
|
||||
onCurrentOrderBookChanged: onCurrentOrderBookChanged,
|
||||
container: undefined,
|
||||
draw: draw,
|
||||
getContainer: getContainer,
|
||||
initialize: initialize
|
||||
};
|
||||
|
||||
var container = newContainer();
|
||||
container.initialize();
|
||||
orderBookPanel.container = container;
|
||||
|
||||
container.displacement.containerName = "Order Book Panel";
|
||||
container.frame.containerName = "Order Book Panel";
|
||||
|
||||
let currentOrderBook;
|
||||
let server;
|
||||
|
||||
var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
|
||||
|
||||
return orderBookPanel;
|
||||
|
||||
function initialize() {
|
||||
|
||||
orderBookPanel.container.frame.width = 400;
|
||||
orderBookPanel.container.frame.height = 300;
|
||||
|
||||
orderBookPanel.container.frame.position.x = 0;
|
||||
orderBookPanel.container.frame.position.y = viewPort.visibleArea.bottomLeft.y - orderBookPanel.container.frame.height;
|
||||
|
||||
server = newFileServer();
|
||||
server.initialize();
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function getContainer(point) {
|
||||
|
||||
var container;
|
||||
|
||||
/* First we check if this point is inside this space. */
|
||||
|
||||
if (this.container.frame.isThisPointHere(point, true) === true) {
|
||||
|
||||
return this.container;
|
||||
|
||||
} else {
|
||||
|
||||
/* This point does not belong to this space. */
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function onZoomChanged(event) {
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function onDragFinished() {
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
function getOrderBook() {
|
||||
|
||||
server.getOrderBook(exchangeId, marketId, onFileReady);
|
||||
|
||||
function onFileReady(file) {
|
||||
|
||||
currentOrderBook = file;
|
||||
recalculateScale();
|
||||
|
||||
viewPort.eventHandler.listenToEvent("Zoom Changed", onZoomChanged);
|
||||
canvas.eventHandler.listenToEvent("Drag Finished", onDragFinished);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function onCurrentOrderBookChanged(orderBooksMap) {
|
||||
|
||||
currentOrderBook = [[], []];
|
||||
|
||||
for (let key of orderBooksMap.keys()) {
|
||||
|
||||
let orderBookPosition = orderBooksMap.get(key);
|
||||
|
||||
let position = [orderBookPosition.rate, (orderBookPosition.open + orderBookPosition.close) / 2];
|
||||
|
||||
if (orderBookPosition.type === 'bid') {
|
||||
|
||||
currentOrderBook[1].push(position);
|
||||
|
||||
}
|
||||
|
||||
if (orderBookPosition.type === 'ask') {
|
||||
|
||||
currentOrderBook[0].push(position);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
recalculateScale();
|
||||
|
||||
}
|
||||
|
||||
|
||||
function draw() {
|
||||
|
||||
return; // Do not show for now, under construction.
|
||||
|
||||
this.container.frame.draw(false, false, true);
|
||||
|
||||
plotCurrentOrderBook();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function recalculateScale() {
|
||||
|
||||
let bidPoints = currentOrderBook[1];
|
||||
let askPoints = currentOrderBook[0];
|
||||
let position;
|
||||
|
||||
/* Since the range of the data might change, we must calculate the timeLineCoordinateSystem everytime new data arrives. */
|
||||
|
||||
var minBidRate = bidPoints[bidPoints.length - 1];
|
||||
var maxBidRate = bidPoints[0];
|
||||
|
||||
var minValue = {
|
||||
x: 1,
|
||||
y: 1
|
||||
};
|
||||
|
||||
var maxValue = {
|
||||
x: 1,
|
||||
y: 1
|
||||
};
|
||||
|
||||
if (bidPoints.length > 0) {
|
||||
|
||||
/* X AXIS:
|
||||
|
||||
We calculate the min value on x on the plot in this way:
|
||||
|
||||
1. We calculate the sum of all orders.
|
||||
2. Then we find which orders are included in the 75% of the total sum.
|
||||
3. The last order included will contain the minimun rate we need for the chart.
|
||||
|
||||
Regarding the maximun, we just take ask orders that mirrors the bids orders only.
|
||||
|
||||
*/
|
||||
|
||||
var sum = 0;
|
||||
|
||||
for (var i = 0; i < bidPoints.length; i++) {
|
||||
|
||||
position = {
|
||||
rate: bidPoints[i][0],
|
||||
amount: bidPoints[i][1]
|
||||
};
|
||||
|
||||
sum = sum + position.amount;
|
||||
|
||||
}
|
||||
|
||||
|
||||
target = sum * 0.75;
|
||||
sum = 0;
|
||||
lastOrder = bidPoints[0];
|
||||
|
||||
for (var i = 0; i < bidPoints.length; i++) {
|
||||
|
||||
position = {
|
||||
rate: bidPoints[i][0],
|
||||
amount: bidPoints[i][1]
|
||||
};
|
||||
|
||||
sum = sum + position.amount;
|
||||
|
||||
if (sum < target) {
|
||||
lastOrder = position;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
position = {
|
||||
rate: bidPoints[0][0],
|
||||
amount: bidPoints[0][1]
|
||||
};
|
||||
|
||||
var minBidRate = lastOrder.rate;
|
||||
var maxBidRate = position.rate;
|
||||
|
||||
minValue.x = minBidRate;
|
||||
maxValue.x = maxBidRate + (maxBidRate - minBidRate);
|
||||
|
||||
/* Y AXIS:
|
||||
|
||||
Now that we know which orders are included on the plot, we must see which is the highest value of
|
||||
all of them. The highest value can be either at an ask, or at a bid order side of the chart.
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
var selectedItem = position;
|
||||
var currentMax = 0;
|
||||
var sum = 0;
|
||||
|
||||
for (var i = 0; i < bidPoints.length; i++) {
|
||||
|
||||
position = {
|
||||
rate: bidPoints[i][0],
|
||||
amount: bidPoints[i][1]
|
||||
};
|
||||
|
||||
if (position.rate >= minValue.x && position.rate <= maxValue.x) {
|
||||
|
||||
sum = sum + position.amount;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
currentMax = sum;
|
||||
var sum = 0;
|
||||
|
||||
for (var i = 0; i < askPoints.length; i++) {
|
||||
|
||||
position = {
|
||||
rate: askPoints[i][0],
|
||||
amount: askPoints[i][1]
|
||||
};
|
||||
|
||||
if (position.rate >= minValue.x && position.rate <= maxValue.x) {
|
||||
|
||||
sum = sum + position.amount;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (currentMax < sum) {
|
||||
|
||||
currentMax = sum;
|
||||
|
||||
}
|
||||
|
||||
minValue.y = 0;
|
||||
maxValue.y = currentMax;
|
||||
|
||||
}
|
||||
|
||||
timeLineCoordinateSystem.initialize(
|
||||
minValue,
|
||||
maxValue,
|
||||
orderBookPanel.container.frame.width,
|
||||
orderBookPanel.container.frame.height - orderBookPanel.container.frame.height * 5 / 7
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function plotCurrentOrderBook() {
|
||||
|
||||
if (currentOrderBook === undefined) { return; }
|
||||
|
||||
let bidPoints = currentOrderBook[1];
|
||||
let askPoints = currentOrderBook[0];
|
||||
|
||||
let position;
|
||||
|
||||
/* The first part of this function will plot BIDs, the second one will plot the ASKs. */
|
||||
|
||||
if (bidPoints.length > 0) {
|
||||
|
||||
/* We calculate the first points of the chart. These are not points representing positions on the order book, but the lower part of the hill plotted. */
|
||||
|
||||
position = {
|
||||
rate: bidPoints[0][0],
|
||||
amount: bidPoints[0][1]
|
||||
};
|
||||
|
||||
var maxBasePoint = {
|
||||
x: 0,
|
||||
y: orderBookPanel.container.frame.height * 5 / 7
|
||||
};
|
||||
|
||||
var minBasePoint = {
|
||||
x: (position.rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x, // We take the first Order Rate on the array for this.
|
||||
y: orderBookPanel.container.frame.height * 5 / 7
|
||||
};
|
||||
|
||||
maxBasePoint = orderBookPanel.container.frame.frameThisPoint(maxBasePoint);
|
||||
minBasePoint = orderBookPanel.container.frame.frameThisPoint(minBasePoint);
|
||||
|
||||
/* Lets start the drawing. */
|
||||
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.moveTo(minBasePoint.x, minBasePoint.y);
|
||||
|
||||
var progressiveSum = 0;
|
||||
|
||||
var point = minBasePoint;
|
||||
|
||||
for (var i = 0; i < bidPoints.length; i++) {
|
||||
|
||||
position = {
|
||||
rate: bidPoints[i][0],
|
||||
amount: bidPoints[i][1]
|
||||
};
|
||||
|
||||
if (position.rate >= timeLineCoordinateSystem.min.x && position.rate <= timeLineCoordinateSystem.max.x) {
|
||||
|
||||
progressiveSum = progressiveSum + position.amount;
|
||||
|
||||
point = {
|
||||
x: (position.rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
|
||||
y: orderBookPanel.container.frame.height * 5 / 7 - progressiveSum * timeLineCoordinateSystem.scale.y
|
||||
};
|
||||
|
||||
point = orderBookPanel.container.frame.frameThisPoint(point);
|
||||
|
||||
browserCanvasContext.lineTo(point.x, point.y);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
browserCanvasContext.lineTo(maxBasePoint.x, point.y);
|
||||
browserCanvasContext.lineTo(maxBasePoint.x, maxBasePoint.y);
|
||||
browserCanvasContext.lineTo(minBasePoint.x, minBasePoint.y);
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.fillStyle = 'rgba(130, 180, 30, 0.50)';
|
||||
browserCanvasContext.fill();
|
||||
browserCanvasContext.strokeStyle = 'rgba(50, 130, 30, 0.50)';
|
||||
browserCanvasContext.lineWidth = 2;
|
||||
browserCanvasContext.stroke();
|
||||
|
||||
browserCanvasContext.closePath();
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (askPoints.length > 0) {
|
||||
|
||||
position = {
|
||||
rate: askPoints[0][0],
|
||||
amount: askPoints[0][1]
|
||||
};
|
||||
|
||||
/* We calculate the first point of the chart */
|
||||
|
||||
var maxBasePoint = {
|
||||
x: (timeLineCoordinateSystem.max.x - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
|
||||
y: orderBookPanel.container.frame.height * 5 / 7
|
||||
};
|
||||
|
||||
var minBasePoint = {
|
||||
x: (position.rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x, // We take the first Order Rate on the array for this.
|
||||
y: orderBookPanel.container.frame.height * 5 / 7
|
||||
};
|
||||
|
||||
maxBasePoint = orderBookPanel.container.frame.frameThisPoint(maxBasePoint);
|
||||
minBasePoint = orderBookPanel.container.frame.frameThisPoint(minBasePoint);
|
||||
|
||||
/* Lets start the drawing. */
|
||||
|
||||
browserCanvasContext.beginPath();
|
||||
browserCanvasContext.moveTo(minBasePoint.x, minBasePoint.y);
|
||||
|
||||
var progressiveSum = 0;
|
||||
var point = minBasePoint;
|
||||
|
||||
for (var i = 0; i < askPoints.length; i++) {
|
||||
|
||||
position = {
|
||||
rate: askPoints[i][0],
|
||||
amount: askPoints[i][1]
|
||||
};
|
||||
|
||||
if (position.rate >= timeLineCoordinateSystem.min.x && position.rate <= timeLineCoordinateSystem.max.x) {
|
||||
|
||||
progressiveSum = progressiveSum + position.amount;
|
||||
|
||||
point = {
|
||||
x: (position.rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
|
||||
y: orderBookPanel.container.frame.height * 5 / 7 - progressiveSum * timeLineCoordinateSystem.scale.y
|
||||
};
|
||||
|
||||
point = orderBookPanel.container.frame.frameThisPoint(point);
|
||||
|
||||
browserCanvasContext.lineTo(point.x, point.y);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
browserCanvasContext.lineTo(maxBasePoint.x, point.y);
|
||||
browserCanvasContext.lineTo(maxBasePoint.x, maxBasePoint.y);
|
||||
browserCanvasContext.lineTo(minBasePoint.x, minBasePoint.y);
|
||||
browserCanvasContext.closePath();
|
||||
browserCanvasContext.fillStyle = 'rgba(180, 130, 30, 0.50)';
|
||||
browserCanvasContext.fill();
|
||||
browserCanvasContext.strokeStyle = 'rgba(130, 50, 30, 0.50)';
|
||||
browserCanvasContext.lineWidth = 2;
|
||||
browserCanvasContext.stroke();
|
||||
|
||||
browserCanvasContext.closePath();
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
-205
@@ -1,205 +0,0 @@
|
||||
|
||||
function newPriceChart() {
|
||||
|
||||
var trades = [];
|
||||
|
||||
var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
|
||||
|
||||
var datetime;
|
||||
var datetimeRange;
|
||||
|
||||
var priceChart = {
|
||||
setDatetime: setDatetime,
|
||||
setDatetimeRange: setDatetimeRange,
|
||||
container: undefined,
|
||||
draw: draw,
|
||||
getContainer: getContainer,
|
||||
initialize: initialize
|
||||
};
|
||||
|
||||
var container = newContainer();
|
||||
container.initialize();
|
||||
priceChart.container = container;
|
||||
|
||||
container.displacement.containerName = "Price Chart";
|
||||
container.frame.containerName = "Price Chart";
|
||||
|
||||
var marketId;
|
||||
var exchangeId;
|
||||
var marketTrades;
|
||||
|
||||
return priceChart;
|
||||
|
||||
function initialize(exchange, market, trades) {
|
||||
|
||||
marketId = market;
|
||||
exchangeId = exchange;
|
||||
marketTrades = trades;
|
||||
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function setDatetime(newDatetime) {
|
||||
|
||||
datetime = newDatetime;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function setDatetimeRange(newDatetimeRange) {
|
||||
|
||||
datetimeRange = newDatetimeRange;
|
||||
|
||||
trades = [];
|
||||
|
||||
marketTrades.getTradesByDateRange(datetimeRange, onTradesReady);
|
||||
|
||||
function onTradesReady(tradesReceived) {
|
||||
|
||||
trades = tradesReceived;
|
||||
|
||||
recalculateScale();
|
||||
splitTrades();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function draw() {
|
||||
|
||||
this.container.frame.draw();
|
||||
|
||||
drawBackground();
|
||||
|
||||
plotPriceChart();
|
||||
}
|
||||
|
||||
|
||||
|
||||
function recalculateScale() {
|
||||
|
||||
var minValue = {
|
||||
x: 10000000000000,
|
||||
y: 10000000000000
|
||||
};
|
||||
|
||||
var maxValue = {
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
for (var i = 0; i < trades.length; i++) {
|
||||
|
||||
var trade = trades[i];
|
||||
|
||||
var datetime = trade.datetime.valueOf();
|
||||
|
||||
if (minValue.x > datetime) {
|
||||
minValue.x = datetime;
|
||||
}
|
||||
|
||||
if (maxValue.x < datetime) {
|
||||
maxValue.x = datetime;
|
||||
}
|
||||
|
||||
var rate = trade.rate;
|
||||
|
||||
if (minValue.y > rate) {
|
||||
minValue.y = rate;
|
||||
}
|
||||
|
||||
if (maxValue.y < rate) {
|
||||
maxValue.y = rate;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
timeLineCoordinateSystem.initialize(
|
||||
minValue,
|
||||
maxValue,
|
||||
priceChart.container.frame.width,
|
||||
priceChart.container.frame.height
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
function plotPriceChart() {
|
||||
|
||||
if (trades.length > 0) {
|
||||
|
||||
var firstPoint = {
|
||||
x: (trades[0].datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
|
||||
y: priceChart.container.frame.height - (trades[0].rate - timeLineCoordinateSystem.min.y) * timeLineCoordinateSystem.scale.y
|
||||
};
|
||||
|
||||
firstPoint = transformThisPoint(firstPoint, priceChart.container);
|
||||
|
||||
browserCanvasContext.moveTo(firstPoint.x, firstPoint.y);
|
||||
|
||||
for (var i = 0; i < trades.length; i++) {
|
||||
|
||||
var trade = trades[i];
|
||||
|
||||
point = {
|
||||
x: (trade.datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
|
||||
y: priceChart.container.frame.height - (trade.rate - timeLineCoordinateSystem.min.y) * timeLineCoordinateSystem.scale.y
|
||||
};
|
||||
|
||||
point = transformThisPoint(point, priceChart.container);
|
||||
browserCanvasContext.lineTo(point.x, point.y);
|
||||
|
||||
}
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(30, 30, 200, 0.50)';
|
||||
browserCanvasContext.lineWidth = 1;
|
||||
browserCanvasContext.stroke();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function drawBackground() {
|
||||
|
||||
var market = markets.get(marketId);
|
||||
var label = market.assetA + " " + market.assetB;
|
||||
|
||||
var fontSize = 50;//+ priceChart.container.zoom.level();
|
||||
|
||||
browserCanvasContext.font = fontSize + 'px verdana';
|
||||
|
||||
/* Now we transform x on the actual coordinate on the canvas. */
|
||||
|
||||
var point = {
|
||||
x: priceChart.container.frame.width / 2 - label.length / 2 * fontSize / 2,
|
||||
y: priceChart.container.frame.height * 3 / 8
|
||||
};
|
||||
|
||||
point = transformThisPoint(point, priceChart.container);
|
||||
|
||||
browserCanvasContext.fillStyle = 'rgba(190, 190, 190, 0.25)';
|
||||
|
||||
browserCanvasContext.fillText(label, point.x, point.y);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,17 +90,9 @@
|
||||
<Compile Include="Spaces\FloatingSpace.js" />
|
||||
<Compile Include="Frame.js" />
|
||||
<Compile Include="Markets.js" />
|
||||
<Compile Include="Order.js" />
|
||||
<Compile Include="OrderBook.js" />
|
||||
<Compile Include="OrderBookChart.js" />
|
||||
<Compile Include="OrderBookDepthChart.js" />
|
||||
<Compile Include="OrderBookFilesCursor.js" />
|
||||
<Compile Include="OrderBookSnapShot.js" />
|
||||
<Compile Include="Panels\ProductsPanel.js" />
|
||||
<Compile Include="Panels\TimeControlPanel.js" />
|
||||
<Compile Include="Panels\OrderBookPanel.js" />
|
||||
<Compile Include="TimeLineCoordinateSystem.js" />
|
||||
<Compile Include="PriceChart.js" />
|
||||
<Compile Include="Resistance.js" />
|
||||
<Compile Include="SplashScreen.js">
|
||||
<SubType>Code</SubType>
|
||||
@@ -115,8 +107,6 @@
|
||||
<Compile Include="TextButton.js" />
|
||||
<Compile Include="TimelineChart.js" />
|
||||
<Compile Include="TimeMachine.js" />
|
||||
<Compile Include="Trade.js" />
|
||||
<Compile Include="TradesCursor.js" />
|
||||
<Compile Include="Utilities.js" />
|
||||
<Compile Include="ViewPort.js" />
|
||||
<Compile Include="VolumeBar.js" />
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
|
||||
|
||||
function newTrade(id, type, rate, amountA, amountB, datetime) {
|
||||
|
||||
var trade = {
|
||||
id: id,
|
||||
type: type,
|
||||
rate: rate,
|
||||
amountA: amountA,
|
||||
amountB: amountB,
|
||||
datetime: datetime
|
||||
};
|
||||
|
||||
return trade;
|
||||
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
|
||||
function newTradesCursor() {
|
||||
|
||||
let trades = [];
|
||||
|
||||
let tradesCursor = {
|
||||
eventHandler: undefined,
|
||||
newTradesReady: newTradesReady,
|
||||
trades: undefined,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
tradesCursor.trades = trades;
|
||||
|
||||
let marketId;
|
||||
let exchangeId;
|
||||
let marketTrades;
|
||||
|
||||
tradesCursor.eventHandler = newEventHandler();
|
||||
|
||||
return tradesCursor;
|
||||
|
||||
function initialize(exchange, market, marketTrades) {
|
||||
|
||||
marketId = market;
|
||||
exchangeId = exchange;
|
||||
marketTrades = marketTrades;
|
||||
|
||||
}
|
||||
|
||||
function newTradesReady(tradesReceived) {
|
||||
|
||||
tradesCursor.trades = tradesReceived;
|
||||
tradesCursor.eventHandler.raiseEvent("Trades Changed", undefined);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -30,20 +30,12 @@
|
||||
<script type="text/javascript" src="FloatingObject.js"></script>
|
||||
<script type="text/javascript" src="Candle.js"></script>
|
||||
<script type="text/javascript" src="VolumeBar.js"></script>
|
||||
<script type="text/javascript" src="Order.js"></script>
|
||||
<script type="text/javascript" src="Trade.js"></script>
|
||||
<script type="text/javascript" src="PriceChart.js"></script>
|
||||
<script type="text/javascript" src="SpreadChart.js"></script>
|
||||
<script type="text/javascript" src="ChartUtilities.js"></script>
|
||||
<script type="text/javascript" src="OrderBookDepthChart.js"></script>
|
||||
<script type="text/javascript" src="TimelineChart.js"></script>
|
||||
<script type="text/javascript" src="OrderBookSnapShot.js"></script>
|
||||
<script type="text/javascript" src="OrderBook.js"></script>
|
||||
<script type="text/javascript" src="OrderBookChart.js"></script>
|
||||
<script type="text/javascript" src="OrderBookFilesCursor.js"></script>
|
||||
<script type="text/javascript" src="Resistance.js"></script>
|
||||
<script type="text/javascript" src="ChartGrid.js"></script>
|
||||
<script type="text/javascript" src="TradesCursor.js"></script>
|
||||
<script type="text/javascript" src="Animation.js"></script>
|
||||
<script type="text/javascript" src="Displace.js"></script>
|
||||
<script type="text/javascript" src="TimeLineCoordinateSystem.js"></script>
|
||||
@@ -58,7 +50,6 @@
|
||||
|
||||
<script type="text/javascript" src="Panels/TimeControlPanel.js"></script>
|
||||
<script type="text/javascript" src="Panels/ProductsPanel.js"></script>
|
||||
<script type="text/javascript" src="Panels/OrderBookPanel.js"></script>
|
||||
|
||||
<script type="text/javascript" src="Spaces/PanelsSpace.js"></script>
|
||||
<script type="text/javascript" src="Spaces/ChartSpace.js"></script>
|
||||
|
||||
Reference in new issue
Block a user