Permalink
Browse files

Add price tags to hourly stocks

  • Loading branch information...
1 parent cfbbe96 commit 58aedd8fe56543446f93c5f48ae14bd74e1fffc5 Samvel Khalatyan committed Nov 7, 2011
Showing with 101 additions and 16 deletions.
  1. +101 −16 js/Stock.js
View
117 js/Stock.js
@@ -146,6 +146,8 @@ HourlyStockView.prototype.drawRect = function(rect)
if (!context)
return;
+ context.save();
+
// Draw background
//
var inbounds = this.bounds().inset(5, 5);
@@ -154,13 +156,15 @@ HourlyStockView.prototype.drawRect = function(rect)
context.rect(inbounds.minX(), inbounds.minY(),
inbounds.size().width, inbounds.size().height);
- context.fillStyle = "#8ED6FF";
+ context.fillStyle = "f0f7f2";
context.shadowColor = "#bbbbbb";
context.shadowBlur = 5;
context.fill();
+ context.restore();
+
// Draw axis frame
//
var frame = inbounds.copy();
@@ -175,28 +179,39 @@ HourlyStockView.prototype.drawRect = function(rect)
if (!this.liveResize())
{
+ var container = frame.copy();
+ container.size().width -= 35;
+ container.size().height -= 10;
+
// Change frame or reference and make bottom-left corner the origin
//
- var min_x = frame.minX();
- var min_y = frame.maxY();
- var max_x = frame.maxX();
- var max_y = frame.minY();
+ var min_x = container.minX();
+ var min_y = container.maxY();
+ var max_x = container.maxX();
+ var max_y = container.minY();
- // Draw minor axis
+ // Draw minor y-axis
//
- context.strokeStyle = "#808080";
+ context.strokeStyle = "#d2dfde";
+ context.fillStyle = "#4c4c4c";
+ context.textAlign = "center";
context.lineWidth = 1;
- var step = frame.size().width / 9;
+ context.font = "8pt Arial";
+
+ var step = container.size().width / 9;
var x = min_x;
+ var text_y = min_y - 3;
for(var i = 0; 8 > i; ++i)
{
x += step;
context.beginPath();
- context.moveTo(x, min_y);
- context.lineTo(x, max_y);
+ context.moveTo(x, min_y - 1);
+ context.lineTo(x, max_y + 1);
context.stroke();
+
+ context.fillText(9 + i + "a", x, text_y + (i % 2 ? 10 : 0));
}
if (!this.data().empty())
@@ -209,15 +224,19 @@ HourlyStockView.prototype.drawRect = function(rect)
var price_max_y = min_y - (min_y - max_y) * 4 / 5;
context.beginPath();
- context.moveTo(min_x, price_min_y);
- context.lineTo(max_x, price_min_y);
+ context.moveTo(min_x + 1, price_min_y);
+ context.lineTo(max_x - 1, price_min_y);
+ context.strokeStyle = "#f4ca95";
context.stroke();
context.beginPath();
- context.moveTo(min_x, price_max_y);
- context.lineTo(max_x, price_max_y);
+ context.moveTo(min_x + 1, price_max_y);
+ context.lineTo(max_x - 1, price_max_y);
context.stroke();
+ this.drawPrice(this.data().min(), new Rect(frame.maxX() - 33, price_min_y - 6, 25, 12));
+ this.drawPrice(this.data().max(), new Rect(frame.maxX() - 33, price_max_y - 6, 25, 12));
+
var scale = (price_min_y - price_max_y) / (this.data().max() - this.data().min());
x = frame.minX();
@@ -229,17 +248,83 @@ HourlyStockView.prototype.drawRect = function(rect)
for(var i = 0; 8 > i && this.data().price().length > i; ++i)
{
x += step;
- var price_y = price_min_y - (this.data().price()[i].close - this.data().min()) * scale;
+ var price = this.data().price()[i].close;
+ var price_y = price_min_y - (price - this.data().min()) * scale;
view_rect.origin().initWithXY(x, price_y);
context.beginPath();
context.arc(view_rect.minX(),
price_y,
- 5, 0, 2 * Math.PI,
+ 3, 0, 2 * Math.PI,
false);
context.fill();
context.stroke();
+
+ if (price == this.data().max())
+ this.drawPriceTipUp(price, new Rect(x - 13, price_max_y - 23, 26, 18));
}
}
}
}
+
+HourlyStockView.prototype.drawPrice = function(price, rect)
+{
+ var context = this.context();
+ if (!context)
+ return;
+
+ context.save();
+
+ var center_y = rect.origin().y + rect.size().height / 2;
+
+ context.beginPath();
+ context.moveTo(rect.minX(), center_y);
+ context.lineTo(rect.minX() + 5, rect.minY());
+ context.lineTo(rect.maxX(), rect.minY());
+ context.lineTo(rect.maxX(), rect.maxY());
+ context.lineTo(rect.minX() + 5, rect.maxY());
+ context.closePath();
+
+ context.stroke();
+
+ context.font = "8pt Arial";
+ context.textAlign = "left";
+ context.textBaseline = "middle";
+ context.fillStyle = 'black';
+ context.fillText(price, rect.minX() + 5, center_y);
+
+ context.restore();
+}
+
+HourlyStockView.prototype.drawPriceTipUp = function(price, rect)
+{
+ var context = this.context();
+ if (!context)
+ return;
+
+ context.save();
+
+ var center_x = rect.origin().x + rect.size().width / 2;
+
+ var tip_size = 5;
+
+ context.beginPath();
+ context.moveTo(center_x, rect.maxY());
+ context.lineTo(center_x + tip_size, rect.maxY() - tip_size);
+ context.lineTo(rect.maxX(), rect.maxY() - tip_size);
+ context.lineTo(rect.maxX(), rect.minY());
+ context.lineTo(rect.minX(), rect.minY());
+ context.lineTo(rect.minX(), rect.maxY() - tip_size);
+ context.lineTo(center_x - tip_size, rect.maxY() - tip_size);
+ context.closePath();
+
+ context.stroke();
+
+ context.font = "8pt Arial";
+ context.textAlign = "center";
+ context.textBaseline = "top";
+ context.fillStyle = 'black';
+ context.fillText(price, rect.minX() + rect.size().width / 2, rect.minY() + 1);
+
+ context.restore();
+}

0 comments on commit 58aedd8

Please sign in to comment.