Permalink
Browse files

Basic build out for enabling chart hover state.

  • Loading branch information...
1 parent dff094e commit b412f991d40ef6f83fcc3dd3a6a3d823a221a8ab @matthewhudson matthewhudson committed Apr 3, 2013
Showing with 50 additions and 2 deletions.
  1. +16 −0 sixpack/static/css/style.css
  2. +32 −0 sixpack/static/js/chart.js
  3. +1 −1 sixpack/templates/dashboard.html
  4. +1 −1 sixpack/templates/details.html
@@ -174,6 +174,10 @@
ul.experiments li table tr td:nth-child(even) {
background: none repeat scroll 0 0 rgba(170, 170, 170, 0.02);
}
+ ul.experiments li table tr.highlight td {
+ color: #fff;
+ background: none repeat scroll 0 0 rgba(170,170,170,0.05);
+ }
/* The following lines are to combat a Chrome bug: http://code.google.com/p/chromium/issues/detail?id=62445 */
ul.experiments li table tr {
@@ -550,6 +554,18 @@ hr {
margin-top: 90px;
text-align: center;
}
+div.tooltip {
+ position: absolute;
+ text-align: center;
+ width: 60px;
+ height: 12px;
+ padding: 8px;
+ font: 10px sans-serif;
+ background: #ddd;
+ border: solid 1px #aaa;
+ border-radius: 8px;
+ pointer-events: none;
+}
/* Chart color values.*/
.color-1 {
View
@@ -23,6 +23,9 @@ $(function () {
my.el = null;
my.data = data;
my.experiment = experiment;
+ my.tooltip = d3.select("body").append("div")
+ .attr("class", "tooltip")
+ .style("opacity", 0);
my.getMeasurements = function () {
my.margin = {
@@ -75,6 +78,7 @@ $(function () {
my.drawLine = function (data, color) {
color = color || "#9d5012";
+ var line_id = "line-" + _.indexOf(my.colors, color);
var line = d3.svg.line()
.x(function (d) {
return my.xScale(d.date);
@@ -86,8 +90,36 @@ $(function () {
my.svg.append("path")
.datum(data)
.attr("class", "line")
+ .attr("id", line_id)
.attr("d", line)
.attr("style", "stroke:" + color);
+
+ my.svg.select("#" + line_id)
+ .data(data)
+ .on("mouseover", function (d) {
+ $('.' + d3.event.target.id).closest('table').find('tr').removeClass('highlight');
+ $('.' + d3.event.target.id).addClass('highlight');
+
+ my.tooltip.html(d.date + "<br/>" + d.close)
+ .style("left", (d3.event.pageX) + "px")
+ .style("top", (d3.event.pageY - 28) + "px");
+
+ my.tooltip.transition()
+ .duration(50)
+ .style("opacity", 1);
+ })
+ .on("mouseout", function (d) {
+ var id = d3.event.target.id;
+
+ setTimeout(function () {
+ $('.' + id).removeClass('highlight');
+
+ my.tooltip
+ .transition()
+ .duration(250)
+ .style("opacity", 0);
+ }, 850);
+ });
};
my.drawCircle = function (data, color) {
@@ -41,7 +41,7 @@ <h3 class="name">
<th>Confidence</th>
</tr>
<% _.each(experiment.alternatives, function (alt, index) { %>
- <tr>
+ <tr class="line-<%- index %>">
<td>
<span class="circle color-<%- (index + 1) %>">
<% if (alt.is_winner) { %>
@@ -55,7 +55,7 @@ <h3 class="name">
<th>Winner</th>
</tr>
<% _.each(experiment.alternatives, function (alt, index) { %>
- <tr>
+ <tr class="line-<%- index %>">
<td>
<span class="circle color-<%- (index + 1) %>">
<% if (alt.is_winner) { %>

0 comments on commit b412f99

Please sign in to comment.