Skip to content

Commit

Permalink
This closes #9
Browse files Browse the repository at this point in the history
  • Loading branch information
@bapinney
bapinney committed Jul 21, 2016
1 parent 6a5ab3f commit 04790fb
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 43 deletions.
80 changes: 57 additions & 23 deletions public/javascripts/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ var yDomain;

$(function() { //Document ready

$('.tooltip-wrapper').tooltip(); //Turn on Bootstrap tooltips...

console.log("Fetching symbols...");

$.ajax({
Expand Down Expand Up @@ -119,6 +121,8 @@ $(function() { //Document ready
chartData[curSymbol].length > 0)
{
$($(".stock_name")[i].parentElement).removeClass("data_pending").addClass("data_ready");
allowDraw();

}

//We have the symbol, but no data was returned
Expand All @@ -129,6 +133,13 @@ $(function() { //Document ready
}
}
};

var allowDraw = function() {
$("#draw_warning").removeClass("disabled");
$("#button_draw").removeAttr("disabled");
//Removes the Bootstrap tooltip warning a chart cannot be drawn before data is fetched
$('#draw_warning').tooltip('disable');
}

var addStock = function(symbol) {
if (stocksArr.indexOf(symbol) !== -1) {
Expand Down Expand Up @@ -173,6 +184,7 @@ $(function() { //Document ready

});

var colors;
var yDomain = [0, 100];
var tickerSymbols;
var yMin;
Expand All @@ -188,7 +200,7 @@ var chartInit = function() {
console.log("Checking for chartData...");
if (
typeof chartData == "object" &&
Object.keys(chartData).length > 1
Object.keys(chartData).length > 0
)
{
console.log("%c chartData is defined with 1 or more keys", "color:green;");
Expand All @@ -198,6 +210,8 @@ var chartInit = function() {
return false;
}

colors = d3.scaleOrdinal(d3.schemeCategory10);

console.log("Compiling X domain...");
var fromDate = new Date(chartData[Object.keys(chartData)[0]][0].date);
var toDate = new Date(chartData[Object.keys(chartData)[0]][(chartData[Object.keys(chartData)[0]].length - 1)].date);
Expand All @@ -210,7 +224,7 @@ var chartInit = function() {
//Init with the first values in the first stock, and go from there...
var yMin = chartData[tickerSymbols[0]][0].low;
var yMax = chartData[tickerSymbols[0]][0].high;
console.log(`yMin is ${yMin} and yMax is ${yMax}`);
console.log(`INITIAL yMin is ${yMin} and yMax is ${yMax}`);

for (var i=0; i<tickerSymbols.length; i++) {
console.log(`At symbol ${tickerSymbols[i]}`);
Expand All @@ -226,9 +240,9 @@ var chartInit = function() {
}
}

console.log(`yMin is ${yMin} and yMax is ${yMax}`);
console.log(`FINAL yMin is ${yMin} and yMax is ${yMax}`);

var intervalMultiple = 25; //Means that intervals should be in multiples of 25 (e.g., 25, 50, 75, etc...)
var intervalMultiple = 5; //Means that intervals should be in multiples of 25 (e.g., 25, 50, 75, etc...)

var interval = intervalMultiple * Math.ceil((yMax/yMin)/intervalMultiple);

Expand All @@ -241,7 +255,8 @@ var chartInit = function() {
var yStart = Math.floor(yMin/interval) * interval;
}

var yEnd = interval*10;
//var yEnd = yStart + (interval*11);
var yEnd = Math.ceil(yMax/interval) * interval;

console.log(`yStart is ${yStart} and yEnd is ${yEnd}`);

Expand All @@ -251,17 +266,18 @@ var chartInit = function() {

$("#chart").empty();

chart = $("#chart")[0];
//chart = $("#chart")[0];
chart = d3.select("#chart");
console.dir(chart);

var chartDOM = $("#chart")[0];
//Margins, which we'll subtract from the 'c'ontainer dimensions defined in CSS
var cMargin = {top: 20, right: 20, bottom: 10, left: 50};
cHeight = chart.clientHeight - cMargin.top - cMargin.bottom;
cWidth = chart.clientWidth - cMargin.left - cMargin.right;

cHeight = chartDOM.clientHeight - cMargin.top - cMargin.bottom;
cWidth = chartDOM.clientWidth - cMargin.left - cMargin.right;
console.log(`cHeight is ${cHeight} and cWidth is ${cWidth}`);

//d3.time.scale() in v3 is d3.scaleTime() in v4
console.log("D3.time is " + typeof d3.scaleTime);

x = d3.scaleTime().domain(xDomain).range([0, cWidth]);
//x.ticks(5);
//x.tickFormat("s");
Expand All @@ -273,30 +289,48 @@ var chartInit = function() {

//Remember, in D3v4, it is d3.line and NOT d3.svg.line
stockLine = d3.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.close);
})
.x(function(d) {
return x(new Date(d.date));
})
.y(function(d) {
return y(d.close);
});

//Remember, you have to use .append on D3 selections, in order for it to work correctly...

// *** X ***
d3.select(chart).append("g")
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + cMargin.left + "," + cHeight + ")")
.call(xAxis);

// *** Y ***
d3.select(chart).append("g")
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (cMargin.left) + ", " + (0) + ")")
.call(yAxis);

d3.select(chart).append("path")
.datum(chartData[0])
.attr("class", "line")
.attr("d", stockLine);
console.log("Drawing paths for stocks...");

var fooMo = function() {
var d3Ele = d3.select(this);
console.dir(d3Ele);
}

for (var i=0; i<tickerSymbols.length; i++) {
if (chartData[tickerSymbols[i]].length > 0) {
console.log("Drawing line " + (i + 1 + "..."));
chart.append("path")
.datum(chartData[tickerSymbols[i]])
.attr("class", "stock_line")
//Remember, we need to do a transform on the data, since everything else is also translated +50 on the xAxis
.attr("transform", "translate("+ (cMargin.left) + ", " + (0) + ")")
.attr("d", stockLine)
.style("stroke", function(d) { return colors(i); })
.on("mouseover", fooMo);
;
}
}


};
64 changes: 47 additions & 17 deletions public/stylesheets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,17 +67,26 @@ main {
}

#button_draw {
background-color: hsl(60, 50%, 95%);
border-color: hsl(60, 50%, 95%);
background-color: hsl(120, 50%, 95%);
border-color: hsl(120, 50%, 95%);
box-shadow: 0px 0px 2px 2px darkgreen;
transition: all 300ms ease-in-out;
}

#button_draw:disabled {
background-color: hsl(0, 50%, 95%);
border-color: hsl(0, 50%, 95%);
box-shadow: none;
color: darkgray;
cursor: not-allowed;
pointer-events: none;
}

#button_fetch {
background-color: hsl(180, 50%, 95%);
border-color: hsl(180, 50%, 95%);
}



#chart {
border: 1px dashed rgba(0,0,0,0.2);
display: block; /* Useful if the container is an SVG instead of a DIV */
Expand Down Expand Up @@ -138,19 +147,27 @@ main {
z-index: 1;
}

.data_ready {
background-color: hsla(100,75%, 75%, .2);
}

.data_pending {
background-color: hsla(50,75%,75%,.2);
}

.data_ready:after {
content: "\f05d";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
font-size: 100px;
color: hsla(100,50%,50%,.2);
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
z-index: 1;
content: "\f05d";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
font-size: 100px;
color: hsla(100,50%,50%,.2);
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
z-index: 1;
}

.data_unavailable:after {
Expand All @@ -170,11 +187,24 @@ main {

.stock_line {
fill: none;
stroke: steelblue;
stroke-width: 1.8px;
}

.stock_name {
font-family: 'Space Mono', monospace;
font-size: 24px;
}

.tooltip > .tooltip-inner {
background-color:black;
border: 1px solid white;
color: white;
}

.tooltip-wrapper {
display: inline-block; /* prevents our button and/or tooltip from wrapping to the next line */
}

.tooltip-wrapper #button_draw[disabled] {
pointer-events: none; /* This will prevent the disabled button from blocking the mouse events from bubbling up to the wrapper */
}
7 changes: 4 additions & 3 deletions views/index.pug
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ block content
button(id="button_fetch")
i(class="fa fa-cloud-download" aria-hidden="true")
| Fetch Data
button(id="button_draw")
i(class="fa fa-line-chart" aria-hidden="true")
| Draw Chart
div(class="tooltip-wrapper disabled" data-title="Some stock data must be fetched before a chart can be drawn" data-placement="top" id="draw_warning")
button(id="button_draw" disabled)
i(class="fa fa-line-chart" aria-hidden="true")
| Draw Chart
div(id="stock_list" class="row")
div(class="col-md-4" id="add_new")
input(id="input_add" type="text" placeholder="MSFT, GOOG, AAPL...")
Expand Down

0 comments on commit 04790fb

Please sign in to comment.