From a8e8f3a618ac01a7fbf2993702847f6379fb5778 Mon Sep 17 00:00:00 2001 From: Adam Spiers Date: Wed, 7 Jan 2015 15:58:19 +0000 Subject: add a basic commit tip --- html/git-deps-tips.css | 55 +++++++++++++++++++++++++++++++++++++++++++++++ html/git-deps.html | 2 ++ html/js/git-deps-graph.js | 19 +++++++++++++--- 3 files changed, 73 insertions(+), 3 deletions(-) create mode 100644 html/git-deps-tips.css (limited to 'html') diff --git a/html/git-deps-tips.css b/html/git-deps-tips.css new file mode 100644 index 0000000..fc9a4ec --- /dev/null +++ b/html/git-deps-tips.css @@ -0,0 +1,55 @@ +.d3-tip { + line-height: 1; + font-weight: bold; + padding: 12px; + background: rgba(0, 0, 0, 0.8); + color: #fff; + border-radius: 2px; + pointer-events: none; +} + +/* Creates a small triangle extender for the tooltip */ +.d3-tip:after { + box-sizing: border-box; + display: inline; + font-size: 10px; + width: 100%; + line-height: 1; + color: rgba(0, 0, 0, 0.8); + position: absolute; + pointer-events: none; +} + +/* Northward tooltips */ +.d3-tip.n:after { + content: "\25BC"; + margin: -1px 0 0 0; + top: 100%; + left: 0; + text-align: center; +} + +/* Eastward tooltips */ +.d3-tip.e:after { + content: "\25C0"; + margin: -4px 0 0 0; + top: 50%; + left: -8px; +} + +/* Southward tooltips */ +.d3-tip.s:after { + content: "\25B2"; + margin: 0 0 1px 0; + top: -8px; + left: 0; + text-align: center; +} + +/* Westward tooltips */ +.d3-tip.w:after { + content: "\25B6"; + margin: -4px 0 0 -1px; + top: 50%; + left: 100%; +} diff --git a/html/git-deps.html b/html/git-deps.html index 54bd915..a785e22 100644 --- a/html/git-deps.html +++ b/html/git-deps.html @@ -7,10 +7,12 @@ + + diff --git a/html/js/git-deps-graph.js b/html/js/git-deps-graph.js index ae7477f..94398c3 100644 --- a/html/js/git-deps-graph.js +++ b/html/js/git-deps-graph.js @@ -66,6 +66,10 @@ function draw_graph () { .attr("class", "node") .call(d3cola.drag); + // Initialize tooltip + var tip = d3.tip().attr('class', 'd3-tip').html(tip_html); + fg.call(tip); + var rect = node.append("rect") .attr("rx", 5).attr("ry", 5); @@ -86,11 +90,16 @@ function draw_graph () { // .text(function (d) { return d.name; }); rect.attr('width', function (d, i) { return d.rect_width; }) - .attr('height', function (d, i) { return d.rect_height; }); + .attr('height', function (d, i) { return d.rect_height; }) + .on('mouseover', tip.show) + .on('mouseout', tip.hide); // Centre label - label.attr("x", function (d) { return d.rect_width / 2; }) - .attr("y", function (d) { return d.rect_height / 2; }); + label + .attr("x", function (d) { return d.rect_width / 2; }) + .attr("y", function (d) { return d.rect_height / 2; }) + .on('mouseover', tip.show) + .on('mouseout', tip.hide); d3cola.start(10,20,20); @@ -146,6 +155,10 @@ function draw_graph () { }); } +function tip_html (d) { + return d.describe || d.sha; +} + var lineFunction = d3.svg.line() .x(function (d) { return d.x; }) .y(function (d) { return d.y; }) -- cgit