From b34f72d4479504bd4b8db4364fcade77b883a325 Mon Sep 17 00:00:00 2001 From: cubedro Date: Thu, 23 Apr 2015 20:12:30 +0300 Subject: [PATCH] added tooltip to block propagation chart --- public/css/style.css | 29 +++- public/js/directives.js | 40 ++++- public/js/lib/d3.tip.v0.6.3.js | 280 +++++++++++++++++++++++++++++++++ views/layout.jade | 1 + 4 files changed, 338 insertions(+), 12 deletions(-) create mode 100644 public/js/lib/d3.tip.v0.6.3.js diff --git a/public/css/style.css b/public/css/style.css index c3660e4..6d511fb 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -291,7 +291,12 @@ table td i:before { text-align: center; } -.jqsfield .tooltip-arrow { +.d3-tip { + padding: 5px 0; +} + +.jqsfield .tooltip-arrow, +.d3-tip .tooltip-arrow { position: absolute; bottom: 0; left: 50%; @@ -330,18 +335,30 @@ svg { overflow: visible !important; } -svg .bar { - fill: #1f77b4; - shape-rendering: crispEdges; +svg .bars .bar { + fill: #10a0de; + opacity: 0.8; + shape-rendering: auto; } -svg .bar:hover { - opacity: 0.8; +svg .bars .handle { + fill: #10a0de; + opacity: 0; +} + +svg .bars .highlight { + fill: #fff; + opacity: 0; +} + +svg .bars g:hover .bar { + opacity: 1; } svg .line { fill: none; stroke: #ff0000; + opacity: 0.8; stroke-width: 2px; shape-rendering: auto; } diff --git a/public/js/directives.js b/public/js/directives.js index d0c9b04..affeef6 100644 --- a/public/js/directives.js +++ b/public/js/directives.js @@ -111,10 +111,17 @@ angular.module('netStatsApp.directives', []). .tickFormat(d3.format("%")); var line = d3.svg.line() - .x(function(d) { return x(d.x + d.dx/2); }) + .x(function(d) { return x(d.x + d.dx/2) - 1; }) .y(function(d) { return y(d.y); }) .interpolate('basis'); + var tip = d3.tip() + .attr('class', 'd3-tip') + .offset([-10, 0]) + .html(function(d) { + return '
' + (d.x/1000) + 's - ' + ((d.x + d.dx)/1000) + 's: ' + Math.round(d.y * 100) + "%" + "
"; + }) + scope.init = function() { // Init data @@ -136,6 +143,8 @@ angular.module('netStatsApp.directives', []). .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + svg.call(tip); + svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") @@ -143,16 +152,35 @@ angular.module('netStatsApp.directives', []). svg.append("g") .attr("class", "y axis") - // .attr("transform", "translate(0, 0)") .attr("transform", "translate(" + width + ", 0)") .call(yAxis); - svg.selectAll(".bar") - .data(data) - .enter().insert("rect", ".axis") + var bar = svg.insert("g", ".axis") + .attr("class", "bars") + .selectAll("g") + .data(data) + .enter().append("g") + .attr("transform", function(d) { return "translate(" + x(d.x) + ",0)"; }) + .on('mouseover', function(d) { tip.show(d, d3.select(this).select('.bar')[0][0]); }) + .on('mouseout', tip.hide); + + bar.insert("rect") + .attr("class", "handle") + .attr("y", 0) + .attr("width", x(data[0].dx + data[0].x) - x(data[0].x)) + .attr("height", function(d) { return height; }); + + bar.insert("rect") .attr("class", "bar") - .attr("x", function(d) { return x(d.x) + 1; }) + .attr("y", function(d) { return y(d.y); }) + .attr("rx", 1.2) + .attr("ry", 1.2) + .attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1) + .attr("height", function(d) { return height - y(d.y) + 1; }); + + bar.insert("rect") + .attr("class", "highlight") .attr("y", function(d) { return y(d.y); }) .attr("rx", 1) .attr("ry", 1) diff --git a/public/js/lib/d3.tip.v0.6.3.js b/public/js/lib/d3.tip.v0.6.3.js new file mode 100644 index 0000000..6cfa3cb --- /dev/null +++ b/public/js/lib/d3.tip.v0.6.3.js @@ -0,0 +1,280 @@ +// d3.tip +// Copyright (c) 2013 Justin Palmer +// +// Tooltips for d3.js SVG visualizations + +// Public - contructs a new tooltip +// +// Returns a tip +d3.tip = function() { + var direction = d3_tip_direction, + offset = d3_tip_offset, + html = d3_tip_html, + node = initNode(), + svg = null, + point = null, + target = null + + function tip(vis) { + svg = getSVGNode(vis) + point = svg.createSVGPoint() + document.body.appendChild(node) + } + + // Public - show the tooltip on the screen + // + // Returns a tip + tip.show = function() { + var args = Array.prototype.slice.call(arguments) + if(args[args.length - 1] instanceof SVGElement) target = args.pop() + + var content = html.apply(this, args), + poffset = offset.apply(this, args), + dir = direction.apply(this, args), + nodel = d3.select(node), i = 0, + coords + + nodel.html(content) + .style({ opacity: 1, 'pointer-events': 'all' }) + + while(i--) nodel.classed(directions[i], false) + coords = direction_callbacks.get(dir).apply(this) + nodel.classed(dir, true).style({ + top: (coords.top + poffset[0]) + 'px', + left: (coords.left + poffset[1]) + 'px' + }) + + return tip + } + + // Public - hide the tooltip + // + // Returns a tip + tip.hide = function() { + nodel = d3.select(node) + nodel.style({ opacity: 0, 'pointer-events': 'none' }) + return tip + } + + // Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value. + // + // n - name of the attribute + // v - value of the attribute + // + // Returns tip or attribute value + tip.attr = function(n, v) { + if (arguments.length < 2 && typeof n === 'string') { + return d3.select(node).attr(n) + } else { + var args = Array.prototype.slice.call(arguments) + d3.selection.prototype.attr.apply(d3.select(node), args) + } + + return tip + } + + // Public: Proxy style calls to the d3 tip container. Sets or gets a style value. + // + // n - name of the property + // v - value of the property + // + // Returns tip or style property value + tip.style = function(n, v) { + if (arguments.length < 2 && typeof n === 'string') { + return d3.select(node).style(n) + } else { + var args = Array.prototype.slice.call(arguments) + d3.selection.prototype.style.apply(d3.select(node), args) + } + + return tip + } + + // Public: Set or get the direction of the tooltip + // + // v - One of n(north), s(south), e(east), or w(west), nw(northwest), + // sw(southwest), ne(northeast) or se(southeast) + // + // Returns tip or direction + tip.direction = function(v) { + if (!arguments.length) return direction + direction = v == null ? v : d3.functor(v) + + return tip + } + + // Public: Sets or gets the offset of the tip + // + // v - Array of [x, y] offset + // + // Returns offset or + tip.offset = function(v) { + if (!arguments.length) return offset + offset = v == null ? v : d3.functor(v) + + return tip + } + + // Public: sets or gets the html value of the tooltip + // + // v - String value of the tip + // + // Returns html value or tip + tip.html = function(v) { + if (!arguments.length) return html + html = v == null ? v : d3.functor(v) + + return tip + } + + function d3_tip_direction() { return 'n' } + function d3_tip_offset() { return [0, 0] } + function d3_tip_html() { return ' ' } + + var direction_callbacks = d3.map({ + n: direction_n, + s: direction_s, + e: direction_e, + w: direction_w, + nw: direction_nw, + ne: direction_ne, + sw: direction_sw, + se: direction_se + }), + + directions = direction_callbacks.keys() + + function direction_n() { + var bbox = getScreenBBox() + return { + top: bbox.n.y - node.offsetHeight, + left: bbox.n.x - node.offsetWidth / 2 + } + } + + function direction_s() { + var bbox = getScreenBBox() + return { + top: bbox.s.y, + left: bbox.s.x - node.offsetWidth / 2 + } + } + + function direction_e() { + var bbox = getScreenBBox() + return { + top: bbox.e.y - node.offsetHeight / 2, + left: bbox.e.x + } + } + + function direction_w() { + var bbox = getScreenBBox() + return { + top: bbox.w.y - node.offsetHeight / 2, + left: bbox.w.x - node.offsetWidth + } + } + + function direction_nw() { + var bbox = getScreenBBox() + return { + top: bbox.nw.y - node.offsetHeight, + left: bbox.nw.x - node.offsetWidth + } + } + + function direction_ne() { + var bbox = getScreenBBox() + return { + top: bbox.ne.y - node.offsetHeight, + left: bbox.ne.x + } + } + + function direction_sw() { + var bbox = getScreenBBox() + return { + top: bbox.sw.y, + left: bbox.sw.x - node.offsetWidth + } + } + + function direction_se() { + var bbox = getScreenBBox() + return { + top: bbox.se.y, + left: bbox.e.x + } + } + + function initNode() { + var node = d3.select(document.createElement('div')) + node.style({ + position: 'absolute', + opacity: 0, + pointerEvents: 'none', + boxSizing: 'border-box' + }) + + return node.node() + } + + function getSVGNode(el) { + el = el.node() + if(el.tagName.toLowerCase() == 'svg') + return el + + return el.ownerSVGElement + } + + // Private - gets the screen coordinates of a shape + // + // Given a shape on the screen, will return an SVGPoint for the directions + // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest), + // sw(southwest). + // + // +-+-+ + // | | + // + + + // | | + // +-+-+ + // + // Returns an Object {n, s, e, w, nw, sw, ne, se} + function getScreenBBox() { + var targetel = target || d3.event.target, + bbox = {}, + matrix = targetel.getScreenCTM(), + tbbox = targetel.getBBox(), + width = tbbox.width, + height = tbbox.height, + x = tbbox.x, + y = tbbox.y, + scrollTop = document.documentElement.scrollTop || document.body.scrollTop, + scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft + + + point.x = x + scrollLeft + point.y = y + scrollTop + bbox.nw = point.matrixTransform(matrix) + point.x += width + bbox.ne = point.matrixTransform(matrix) + point.y += height + bbox.se = point.matrixTransform(matrix) + point.x -= width + bbox.sw = point.matrixTransform(matrix) + point.y -= height / 2 + bbox.w = point.matrixTransform(matrix) + point.x += width + bbox.e = point.matrixTransform(matrix) + point.x -= width / 2 + point.y -= height / 2 + bbox.n = point.matrixTransform(matrix) + point.y += height + bbox.s = point.matrixTransform(matrix) + + return bbox + } + + return tip +}; diff --git a/views/layout.jade b/views/layout.jade index 43d9574..337e1a1 100644 --- a/views/layout.jade +++ b/views/layout.jade @@ -26,6 +26,7 @@ html(ng-app="netStatsApp") script(src="/js/lib/locale/en-gb.js") script(src="/js/lib/angular-moment.min.js") script(src="/js/lib/bootstrap.min.js") + script(src="/js/lib/d3.tip.v0.6.3.js") script(src="/js/app.js") script(src="/js/services.js") script(src="/js/controllers.js")