fez5587/Superalgos
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

plotArea refactored Part 1

Browse Source
This commit is contained in:
Luis Fernando Molina committed 2018-03-03 12:09:49 +01:00
1 parent 3b92a293a6
commit 34514146d8
15 files changed
+119 -117
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.vs/AAWebPlatform/v15/.suo
BIN
View File
Binary file not shown.
AAWebPlatform.njsproj
+1 -1
View File
@@ -89,7 +89,7 @@
<Compile Include="Panels\CurrentVolumePanel.js" />
<Compile Include="Panels\OrderBookPanel.js" />
<Compile Include="Physics.js" />
<Compile Include="PlotArea.js" />
<Compile Include="TimeLineCoordinateSystem.js" />
<Compile Include="PriceChart.js" />
<Compile Include="Resistance.js" />
<Compile Include="FileServer.js" />
Balls.js
+1 -1
View File
@@ -3,7 +3,7 @@
function updateBallsTargets() {
/* Whenever there is a change in the currentZoom level, all targets needs to be recalculated in order to fit in the new plotArea. */
/* Whenever there is a change in the currentZoom level, all targets needs to be recalculated in order to fit in the new timeLineCoordinateSystem. */
for (var i = 0; i < balls.length; i++) {
ChartGrid.js
+15 -15
View File
@@ -9,7 +9,7 @@
return chartGrid;
function draw(container, plotArea) {
function draw(container, timeLineCoordinateSystem) {
let periods = [];
let boxes = [];
@@ -17,7 +17,7 @@
const basePeriod = {
x: 8 * 60 * 60 * 1000,
y: plotArea.max.y / 1000 / CHART_ASPECT_RATIO
y: timeLineCoordinateSystem.max.y / 1000 / CHART_ASPECT_RATIO
};
let period = {
@@ -75,7 +75,7 @@
let currentValue = box.topLeft;
currentValue = unTransformThisPoint(currentValue, container);
currentValue = plotArea.unInverseTransform(currentValue, container.frame.height);
currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height);
/* We must compare the current value on the current period, against the next period, to know which cell we are in. */
@@ -139,7 +139,7 @@
let currentValue = box.topLeft;
currentValue = unTransformThisPoint(currentValue, container);
currentValue = plotArea.unInverseTransform(currentValue, container.frame.height);
currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height);
/* We must compare the current value on the current period, against the next period, to know which cell we are in. */
@@ -310,7 +310,7 @@
let currentValue = box.topLeft;
currentValue = unTransformThisPoint(currentValue, container);
currentValue = plotArea.unInverseTransform(currentValue, container.frame.height);
currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height);
/* We must compare the current value on the current period, against the next period, to know which cell we are in. */
@@ -357,7 +357,7 @@
let currentValue = box.topLeft;
currentValue = unTransformThisPoint(currentValue, container);
currentValue = plotArea.unInverseTransform(currentValue, container.frame.height);
currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height);
let date = new Date(currentValue.x);
@@ -385,7 +385,7 @@
let currentValue = box.topLeft;
currentValue = unTransformThisPoint(currentValue, container);
currentValue = plotArea.unInverseTransform(currentValue, container.frame.height);
currentValue = timeLineCoordinateSystem.unInverseTransform(currentValue, container.frame.height);
let date = new Date(currentValue.x);
@@ -411,7 +411,7 @@
};
visiblePoint1 = unTransformThisPoint(visiblePoint1, container);
visiblePoint1 = plotArea.unInverseTransform(visiblePoint1, container.frame.height);
visiblePoint1 = timeLineCoordinateSystem.unInverseTransform(visiblePoint1, container.frame.height);
let visiblePoint2 = {
x: viewPort.visibleArea.bottomRight.x,
@@ -419,7 +419,7 @@
};
visiblePoint2 = unTransformThisPoint(visiblePoint2, container);
visiblePoint2 = plotArea.unInverseTransform(visiblePoint2, container.frame.height);
visiblePoint2 = timeLineCoordinateSystem.unInverseTransform(visiblePoint2, container.frame.height);
startingPoint = {
x: Math.trunc(visiblePoint1.x / periodWidth) * periodWidth,
@@ -464,7 +464,7 @@
for (var j = startingPoint.y; j <= endingPoint.y + periodHeight; j = j + periodHeight) {
if (j >= 0 && j <= plotArea.max.y) {
if (j >= 0 && j <= timeLineCoordinateSystem.max.y) {
let point1 = {
x: visiblePoint1.x,
@@ -476,8 +476,8 @@
y: j
};
point1 = plotArea.inverseTransform(point1, container.frame.height);
point2 = plotArea.inverseTransform(point2, container.frame.height);
point1 = timeLineCoordinateSystem.inverseTransform(point1, container.frame.height);
point2 = timeLineCoordinateSystem.inverseTransform(point2, container.frame.height);
point1 = transformThisPoint(point1, container);
point2 = transformThisPoint(point2, container);
@@ -537,11 +537,11 @@
let point4 = {
x: i,
y: plotArea.max.y
y: timeLineCoordinateSystem.max.y
};
point3 = plotArea.inverseTransform(point3, container.frame.height);
point4 = plotArea.inverseTransform(point4, container.frame.height);
point3 = timeLineCoordinateSystem.inverseTransform(point3, container.frame.height);
point4 = timeLineCoordinateSystem.inverseTransform(point4, container.frame.height);
point3 = transformThisPoint(point3, container);
point4 = transformThisPoint(point4, container);
ChartUtilities.js
+3 -3
View File
@@ -150,7 +150,7 @@ function recalculatePeriod(zoomLevel) {
}
function checkIfMoreTradesAreNeeded(trades, container, plotArea, marketTrades, callBackFunction) {
function checkIfMoreTradesAreNeeded(trades, container, timeLineCoordinateSystem, marketTrades, callBackFunction) {
/*
@@ -174,10 +174,10 @@ function checkIfMoreTradesAreNeeded(trades, container, plotArea, marketTrades, c
y: 0
};
firstTradePoint = plotArea.inverseTransform(firstTradePoint, container.frame.height);
firstTradePoint = timeLineCoordinateSystem.inverseTransform(firstTradePoint, container.frame.height);
firstTradePoint = transformThisPoint(firstTradePoint, container);
lastTradePoint = plotArea.inverseTransform(lastTradePoint, container.frame.height);
lastTradePoint = timeLineCoordinateSystem.inverseTransform(lastTradePoint, container.frame.height);
lastTradePoint = transformThisPoint(lastTradePoint, container);
let totalDistance = lastTradePoint.x - firstTradePoint.x; // Is the screen distance between the first and last trade.
OrderBookDepthChart.js
+17 -17
View File
@@ -7,7 +7,7 @@ function newOrderBookDephChart() {
*/
var plotArea = newPlotArea();
var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
var orderBookDephChart = {
addOrder: addOrder,
@@ -182,7 +182,7 @@ function newOrderBookDephChart() {
};
var minBasePoint = {
x: (bidPoints[0].rate - plotArea.min.x) * plotArea.scale.x, // We take the first Order Rate on the array for this.
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
};
@@ -200,13 +200,13 @@ function newOrderBookDephChart() {
for (var i = 0; i < bidPoints.length; i++) {
if (bidPoints[i].rate >= plotArea.min.x && bidPoints[i].rate <= plotArea.max.x) {
if (bidPoints[i].rate >= timeLineCoordinateSystem.min.x && bidPoints[i].rate <= timeLineCoordinateSystem.max.x) {
progressiveSum = progressiveSum + bidPoints[i].amountSum;
point = {
x: (bidPoints[i].rate - plotArea.min.x) * plotArea.scale.x,
y: orderBookDephChart.container.frame.height * 5 / 7 - progressiveSum * plotArea.scale.y
x: (bidPoints[i].rate - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
y: orderBookDephChart.container.frame.height * 5 / 7 - progressiveSum * timeLineCoordinateSystem.scale.y
};
var rawPosition = {
@@ -243,12 +243,12 @@ function newOrderBookDephChart() {
/* We calculate the first point of the chart */
var maxBasePoint = {
x: (plotArea.max.x - plotArea.min.x) * plotArea.scale.x,
x: (timeLineCoordinateSystem.max.x - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
y: orderBookDephChart.container.frame.height * 5 / 7
};
var minBasePoint = {
x: (askPoints[0].rate - plotArea.min.x) * plotArea.scale.x, // We take the first Order Rate on the array for this.
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
};
@@ -265,13 +265,13 @@ function newOrderBookDephChart() {
for (var i = 0; i < askPoints.length; i++) {
if (askPoints[i].rate >= plotArea.min.x && askPoints[i].rate <= plotArea.max.x) {
if (askPoints[i].rate >= timeLineCoordinateSystem.min.x && askPoints[i].rate <= timeLineCoordinateSystem.max.x) {
progressiveSum = progressiveSum + askPoints[i].amountSum;
point = {
x: (askPoints[i].rate - plotArea.min.x) * plotArea.scale.x,
y: orderBookDephChart.container.frame.height * 5 / 7 - progressiveSum * plotArea.scale.y
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);
@@ -300,15 +300,15 @@ function newOrderBookDephChart() {
function drawAxis() {
var step = (plotArea.max.x - plotArea.min.x) / 10;
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 plotArea are different. */
/* 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 = (plotArea.min.x + step * 2).toFixed(j) - (plotArea.min.x + step * 1).toFixed(j);
var diff = (timeLineCoordinateSystem.min.x + step * 2).toFixed(j) - (timeLineCoordinateSystem.min.x + step * 1).toFixed(j);
if (diff !== 0 && decimals === undefined) {
decimals = j;
@@ -318,7 +318,7 @@ function newOrderBookDephChart() {
for (var i = 1; i < 10 ; i++) {
var point = {
x: plotArea.min.x + step * i,
x: timeLineCoordinateSystem.min.x + step * i,
y: orderBookDephChart.container.frame.height * 6 / 7
};
@@ -335,7 +335,7 @@ function newOrderBookDephChart() {
/* Now we transform x on the actual coordinate on the canvas. */
point.x = (point.x - plotArea.min.x) * plotArea.scale.x; // Now x represent a 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);
@@ -349,7 +349,7 @@ function newOrderBookDephChart() {
function recalculateScale() {
/* Since the range of the data might change, we must calculate the plotArea everytime new data arrives. */
/* 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];
@@ -452,7 +452,7 @@ function newOrderBookDephChart() {
}
plotArea.initialize(
timeLineCoordinateSystem.initialize(
minValue,
maxValue,
orderBookDephChart.container.frame.width,
Panels/OrderBookPanel.js
+12 -12
View File
@@ -20,7 +20,7 @@ function newOrderBookPanel() {
let currentOrderBook;
let server;
var plotArea = newPlotArea();
var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
return orderBookPanel;
@@ -142,7 +142,7 @@ function newOrderBookPanel() {
let askPoints = currentOrderBook[0];
let position;
/* Since the range of the data might change, we must calculate the plotArea everytime new data arrives. */
/* 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];
@@ -272,7 +272,7 @@ function newOrderBookPanel() {
}
plotArea.initialize(
timeLineCoordinateSystem.initialize(
minValue,
maxValue,
orderBookPanel.container.frame.width,
@@ -308,7 +308,7 @@ function newOrderBookPanel() {
};
var minBasePoint = {
x: (position.rate - plotArea.min.x) * plotArea.scale.x, // We take the first Order Rate on the array for this.
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
};
@@ -331,13 +331,13 @@ function newOrderBookPanel() {
amount: bidPoints[i][1]
};
if (position.rate >= plotArea.min.x && position.rate <= plotArea.max.x) {
if (position.rate >= timeLineCoordinateSystem.min.x && position.rate <= timeLineCoordinateSystem.max.x) {
progressiveSum = progressiveSum + position.amount;
point = {
x: (position.rate - plotArea.min.x) * plotArea.scale.x,
y: orderBookPanel.container.frame.height * 5 / 7 - progressiveSum * plotArea.scale.y
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);
@@ -372,12 +372,12 @@ function newOrderBookPanel() {
/* We calculate the first point of the chart */
var maxBasePoint = {
x: (plotArea.max.x - plotArea.min.x) * plotArea.scale.x,
x: (timeLineCoordinateSystem.max.x - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
y: orderBookPanel.container.frame.height * 5 / 7
};
var minBasePoint = {
x: (position.rate - plotArea.min.x) * plotArea.scale.x, // We take the first Order Rate on the array for this.
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
};
@@ -399,13 +399,13 @@ function newOrderBookPanel() {
amount: askPoints[i][1]
};
if (position.rate >= plotArea.min.x && position.rate <= plotArea.max.x) {
if (position.rate >= timeLineCoordinateSystem.min.x && position.rate <= timeLineCoordinateSystem.max.x) {
progressiveSum = progressiveSum + position.amount;
point = {
x: (position.rate - plotArea.min.x) * plotArea.scale.x,
y: orderBookPanel.container.frame.height * 5 / 7 - progressiveSum * plotArea.scale.y
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);
PriceChart.js
+6 -6
View File
@@ -3,7 +3,7 @@ function newPriceChart() {
var trades = [];
var plotArea = newPlotArea();
var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
var datetime;
var datetimeRange;
@@ -134,7 +134,7 @@ function newPriceChart() {
}
plotArea.initialize(
timeLineCoordinateSystem.initialize(
minValue,
maxValue,
priceChart.container.frame.width,
@@ -149,8 +149,8 @@ function newPriceChart() {
if (trades.length > 0) {
var firstPoint = {
x: (trades[0].datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
y: priceChart.container.frame.height - (trades[0].rate - plotArea.min.y) * plotArea.scale.y
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);
@@ -162,8 +162,8 @@ function newPriceChart() {
var trade = trades[i];
point = {
x: (trade.datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
y: priceChart.container.frame.height - (trade.rate - plotArea.min.y) * plotArea.scale.y
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);
SpreadChart.js
+12 -12
View File
@@ -5,7 +5,7 @@ function newSpreadChart() {
var sells = [];
var buys = [];
var plotArea = newPlotArea();
var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
var datetime;
var datetimeRange;
@@ -137,7 +137,7 @@ function newSpreadChart() {
}
plotArea.initialize(
timeLineCoordinateSystem.initialize(
minValue,
maxValue,
spreadChart.container.frame.width,
@@ -170,14 +170,14 @@ function newSpreadChart() {
let point;
let firstPoint = {
x: (sells[0].datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
y: spreadChart.container.frame.height - (sells[0].rate - plotArea.min.y) * plotArea.scale.y
x: (sells[0].datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
y: spreadChart.container.frame.height - (sells[0].rate - timeLineCoordinateSystem.min.y) * timeLineCoordinateSystem.scale.y
};
firstPoint = transformThisPoint(firstPoint, spreadChart.container);
let seconddPoint = {
x: (sells[0].datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
x: (sells[0].datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
y: spreadChart.container.frame.height
};
@@ -196,8 +196,8 @@ function newSpreadChart() {
let sell = sells[i];
point = {
x: (sell.datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
y: spreadChart.container.frame.height - (sell.rate - plotArea.min.y) * plotArea.scale.y
x: (sell.datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
y: spreadChart.container.frame.height - (sell.rate - timeLineCoordinateSystem.min.y) * timeLineCoordinateSystem.scale.y
};
thirdPoint = {
@@ -227,14 +227,14 @@ function newSpreadChart() {
if (buys.length > 0) {
let firstPoint = {
x: (buys[0].datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
y: spreadChart.container.frame.height - (buys[0].rate - plotArea.min.y) * plotArea.scale.y
x: (buys[0].datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
y: spreadChart.container.frame.height - (buys[0].rate - timeLineCoordinateSystem.min.y) * timeLineCoordinateSystem.scale.y
};
firstPoint = transformThisPoint(firstPoint, spreadChart.container);
let seconddPoint = {
x: (buys[0].datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
x: (buys[0].datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
y: 0
};
@@ -254,8 +254,8 @@ function newSpreadChart() {
let buy = buys[i];
point = {
x: (buy.datetime.valueOf() - plotArea.min.x) * plotArea.scale.x,
y: spreadChart.container.frame.height - (buy.rate - plotArea.min.y) * plotArea.scale.y
x: (buy.datetime.valueOf() - timeLineCoordinateSystem.min.x) * timeLineCoordinateSystem.scale.x,
y: spreadChart.container.frame.height - (buy.rate - timeLineCoordinateSystem.min.y) * timeLineCoordinateSystem.scale.y
};
thirdPoint = {
PlotArea.js → TimeLineCoordinateSystem.js
+22 -20
View File
@@ -1,13 +1,15 @@
/*
The Plot Area object is responsible for defining the area of a data set that is going to be plotted and
to the scales that actual values must be multiplied by in order to fit into a certain space.
This Object object is responsible for defining the coordinate system in a TimeLine.
The scale on the X axis depends on the time.
The scale on the Y axis depends on the data that wants to be plotted. Usually we need the Max amount on that data to generate a proper scale.
*/
function newPlotArea() {
function newTimeLineCoordinateSystem() {
var plotArea = {
var thisObject = {
min: undefined,
max: undefined,
scale: undefined,
@@ -35,44 +37,44 @@ function newPlotArea() {
y: 0
};
plotArea.min = min;
plotArea.max = max;
plotArea.scale = scale;
thisObject.min = min;
thisObject.max = max;
thisObject.scale = scale;
return plotArea;
return thisObject;
function initialize(minValue, maxValue, maxWidth, maxHeight) {
/* Defines the min and max value of rate that we are going to transport to the available screen at the center position. */
plotArea.min.x = minValue.x; // * 0.999; // 0.1% less
plotArea.max.x = maxValue.x; // * 1.001; // 0.1% more
thisObject.min.x = minValue.x; // * 0.999; // 0.1% less
thisObject.max.x = maxValue.x; // * 1.001; // 0.1% more
plotArea.min.y = minValue.y; // * 0.999; // 0.1% less
plotArea.max.y = maxValue.y; // * 1.001; // 0.1% more
thisObject.min.y = minValue.y; // * 0.999; // 0.1% less
thisObject.max.y = maxValue.y; // * 1.001; // 0.1% more
/* Defines the initial Zoom level at center position. */
plotArea.scale.x = maxWidth / (plotArea.max.x - plotArea.min.x);
plotArea.scale.y = maxHeight / (plotArea.max.y - plotArea.min.y);
thisObject.scale.x = maxWidth / (thisObject.max.x - thisObject.min.x);
thisObject.scale.y = maxHeight / (thisObject.max.y - thisObject.min.y);
}
function initializeX(minValue, maxValue, maxWidth) {
plotArea.min.x = minValue.x; // * 0.999; // 0.1% less
plotArea.max.x = maxValue.x; // * 1.001; // 0.1% more
thisObject.min.x = minValue.x; // * 0.999; // 0.1% less
thisObject.max.x = maxValue.x; // * 1.001; // 0.1% more
plotArea.scale.x = maxWidth / (plotArea.max.x - plotArea.min.x);
thisObject.scale.x = maxWidth / (thisObject.max.x - thisObject.min.x);
}
function initializeY(minValue, maxValue, maxHeight) {
plotArea.min.y = minValue.y; // * 0.999; // 0.1% less
plotArea.max.y = maxValue.y; // * 1.001; // 0.1% more
thisObject.min.y = minValue.y; // * 0.999; // 0.1% less
thisObject.max.y = maxValue.y; // * 1.001; // 0.1% more
plotArea.scale.y = maxHeight / (plotArea.max.y - plotArea.min.y);
thisObject.scale.y = maxHeight / (thisObject.max.y - thisObject.min.y);
}
TimelineChart.js
+4 -4
View File
@@ -5,7 +5,7 @@ function newTimelineChart() {
let activePlotters = [];
let plotArea = newPlotArea();
let timeLineCoordinateSystem = newTimeLineCoordinateSystem();
let timePeriod = INITIAL_TIME_PERIOD;
let datetime = INITIAL_DATE;
@@ -310,7 +310,7 @@ function newTimelineChart() {
};
center = unTransformThisPoint(center, timelineChart.container);
center = plotArea.unInverseTransform(center, timelineChart.container.frame.height);
center = timeLineCoordinateSystem.unInverseTransform(center, timelineChart.container.frame.height);
let newDate = new Date(0);
newDate.setUTCSeconds(center.x / 1000);
@@ -376,7 +376,7 @@ function newTimelineChart() {
drawBackground();
chartGrid.draw(timelineChart.container, plotArea);
chartGrid.draw(timelineChart.container, timeLineCoordinateSystem);
for (var i = 0; i < activePlotters.length; i++) {
@@ -400,7 +400,7 @@ function newTimelineChart() {
};
plotArea.initialize(
timeLineCoordinateSystem.initialize(
minValue,
maxValue,
timelineChart.container.frame.width,
Utilities.js
+6 -6
View File
@@ -45,10 +45,10 @@ function pad(str, max) {
return str.length < max ? pad("0" + str, max) : str;
}
function getDateFromPoint(point, container, plotArea) {
function getDateFromPoint(point, container, timeLineCoordinateSystem) {
point = unTransformThisPoint(point, container);
point = plotArea.unInverseTransform(point, container.frame.height);
point = timeLineCoordinateSystem.unInverseTransform(point, container.frame.height);
let date = new Date(point.x);
@@ -56,19 +56,19 @@ function getDateFromPoint(point, container, plotArea) {
}
function getRateFromPoint(point, container, plotArea) {
function getRateFromPoint(point, container, timeLineCoordinateSystem) {
point = unTransformThisPoint(point, container);
point = plotArea.unInverseTransform(point, container.frame.height);
point = timeLineCoordinateSystem.unInverseTransform(point, container.frame.height);
return point.y;
}
function getMilisecondsFromPoint(point, container, plotArea) {
function getMilisecondsFromPoint(point, container, timeLineCoordinateSystem) {
point = unTransformThisPoint(point, container);
point = plotArea.unInverseTransform(point, container.frame.height);
point = timeLineCoordinateSystem.unInverseTransform(point, container.frame.height);
return point.x;
}
ViewPort.js
+1 -1
View File
@@ -142,7 +142,7 @@ function newViewPort() {
}
function displaceToDatetime(datetime, plotArea) {
function displaceToDatetime(datetime, timeLineCoordinateSystem) {
targetOffset.x = targetOffset.x + displaceVector.x;
index.html
+1 -1
View File
@@ -51,7 +51,7 @@
<script type="text/javascript" src="Physics.js"></script>
<script type="text/javascript" src="Zoom.js"></script>
<script type="text/javascript" src="Displace.js"></script>
<script type="text/javascript" src="PlotArea.js"></script>
<script type="text/javascript" src="TimeLineCoordinateSystem.js"></script>
<script type="text/javascript" src="Utilities.js"></script>
<script type="text/javascript" src="ViewPort.js"></script>
<script type="text/javascript" src="AggregatedOrdersArray.js"></script>
temp.js
+18 -18
View File
@@ -17,7 +17,7 @@ function newOrderBookChart() {
setDatetime: setDatetime,
isInitialized: false,
container: undefined,
plotArea: undefined,
timeLineCoordinateSystem: undefined,
draw: draw,
getContainer: getContainer, // returns the inner most container that holds the point received by parameter.
initialize: initialize
@@ -119,12 +119,12 @@ function newOrderBookChart() {
*/
/* Since the range of the data might change, we must calculate the plotArea everytime new data arrives. */
/* Since the range of the data might change, we must calculate the timeLineCoordinateSystem everytime new data arrives. */
var plotArea = newPlotArea();
orderBookChart.plotArea = plotArea;
var timeLineCoordinateSystem = newTimeLineCoordinateSystem();
orderBookChart.timeLineCoordinateSystem = timeLineCoordinateSystem;
orderBookChart.plotArea.initialize(
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
@@ -194,12 +194,12 @@ function newOrderBookChart() {
/* 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.plotArea.min.x) * orderBookChart.plotArea.plotArea.x, // We take the first Order Rate on the array for this.
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.plotArea.min.x) * orderBookChart.plotArea.x, // We take the first Order Rate on the array for this.
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
};
@@ -230,7 +230,7 @@ function newOrderBookChart() {
sumY = sumY + orderBookBidsChartPoints[i][1];
var point = {
x: (orderBookBidsChartPoints[i][0] - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.plotArea.x,
x: (orderBookBidsChartPoints[i][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.timeLineCoordinateSystem.x,
y: orderBookChart.container.frame.height * 5 / 7 - sumY
};
@@ -279,12 +279,12 @@ function newOrderBookChart() {
/* We calculate the first point of the chart */
var maxBasePoint = {
x: (orderBookAsksChartPoints[orderBookAsksChartPoints.length - 1][0] - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.plotArea.x, // We take the first Order Rate on the array for this.
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.plotArea.min.x) * orderBookChart.plotArea.plotArea.x, // We take the first Order Rate on the array for this.
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
};
@@ -315,7 +315,7 @@ function newOrderBookChart() {
sumY = sumY + orderBookAsksChartPoints[i][1];
var point = {
x: (orderBookAsksChartPoints[i][0] - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.plotArea.x,
x: (orderBookAsksChartPoints[i][0] - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.timeLineCoordinateSystem.x,
y: orderBookChart.container.frame.height * 5 / 7 - sumY
};
@@ -352,15 +352,15 @@ function newOrderBookChart() {
function drawXAxis() {
var step = (orderBookChart.plotArea.max.x - orderBookChart.plotArea.min.x) / 20;
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 plotArea are different. */
/* 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.plotArea.min.x + step * 2).toFixed(j) - (orderBookChart.plotArea.min.x + step * 1).toFixed(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;
@@ -370,7 +370,7 @@ function newOrderBookChart() {
for (var i = 1; i < 20; i++) {
var point = {
x: orderBookChart.plotArea.min.x + step * i,
x: orderBookChart.timeLineCoordinateSystem.min.x + step * i,
y: orderBookChart.container.frame.height * 6 / 7
};
@@ -387,7 +387,7 @@ function newOrderBookChart() {
/* Now we transform x on the actual coordinate on the canvas. */
point.x = (point.x - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.scale.x; // Now x represent a 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);
@@ -672,7 +672,7 @@ function newOrderBookChart() {
/* Position of the ball without displacement or zoon. */
var rawPosition = {
x: (order.rate - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.scale.x,
x: (order.rate - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.scale.x,
y: orderBookChart.container.frame.height * 5 / 7
};
@@ -729,7 +729,7 @@ function newOrderBookChart() {
/* This function is used to create new balls, representing labels of each point on the chart. */
var rawPosition = {
x: (rate - orderBookChart.plotArea.min.x) * orderBookChart.plotArea.scale.x,
x: (rate - orderBookChart.timeLineCoordinateSystem.min.x) * orderBookChart.timeLineCoordinateSystem.scale.x,
y: orderBookChart.container.frame.height * 5 / 7
};