diff --git a/core/src/main/resources/org/apache/spark/ui/static/streaming-page.css b/core/src/main/resources/org/apache/spark/ui/static/streaming-page.css index 3c082e76a9ad1..0dbe9d8369703 100644 --- a/core/src/main/resources/org/apache/spark/ui/static/streaming-page.css +++ b/core/src/main/resources/org/apache/spark/ui/static/streaming-page.css @@ -22,7 +22,7 @@ .axis path, .axis line { fill: none; - stroke: #000; + stroke: gray; shape-rendering: crispEdges; } @@ -35,3 +35,12 @@ stroke: steelblue; stroke-width: 1.5px; } + +.bar rect { + fill: steelblue; + shape-rendering: crispEdges; +} + +.bar rect:hover { + fill: orange; +} diff --git a/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js b/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js index 054e068d896a6..e689583ab404c 100644 --- a/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js +++ b/core/src/main/resources/org/apache/spark/ui/static/streaming-page.js @@ -21,13 +21,15 @@ var graphTooltip = d3.select("body").append("div") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden") - .text("a simple tooltip"); + .text(""); // Show "text" at location (x, y) function showGraphTooltip(text, x, y) { + var left = x; + var top = y; graphTooltip.style("visibility", "visible") - .style("top", x + "px") - .style("left", y + "px") + .style("top", top + "px") + .style("left", left + "px") .text(text); } @@ -52,7 +54,14 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY) { var y = d3.scale.linear().domain([minY, maxY]).range([height, 0]); var timeFormat = d3.time.format("%H:%M:%S") - var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(timeFormat); + var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(10) + .tickFormat(function(d) { + if (d.getTime() == minX || d.getTime() == maxX) { + return timeFormat(d); + } else { + return "x"; + } + }); var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5); var line = d3.svg.line() @@ -77,6 +86,7 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY) { .attr("class", "y axis") .call(yAxis) .append("text") + .attr("transform", "translate(0," + (-3) + ")") .text(unitY); svg.append("path") @@ -97,7 +107,7 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY) { .attr("r", function(d) { return 3; }) .on('mouseover', function(d) { var tip = d.y + " " + unitY + " at " + timeFormat(new Date(d.x)); - showGraphTooltip(tip, event.pageY-25, event.pageX); + showGraphTooltip(tip, d3.event.pageX + 5, d3.event.pageY - 25); // show the point d3.select(this) .attr("stroke", "steelblue") @@ -126,7 +136,8 @@ function drawDistribution(id, values, minY, maxY, unitY) { var width = 300 - margin.left - margin.right; var height = 150 - margin.top - margin.bottom; - var binCount = values.length > 100 ? 100 : values.length; + //var binCount = values.length > 100 ? 100 : values.length; + var binCount = 10; var formatBinValue = d3.format(",.2f"); var y = d3.scale.linear().domain([minY, maxY]).range([height, 0]); @@ -139,10 +150,6 @@ function drawDistribution(id, values, minY, maxY, unitY) { var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5); var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5); - var line = d3.svg.line() - .x(function(d) { return x(d.y); }) - .y(function(d) { return y(d.x); }); - var svg = d3.select(id).append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) @@ -158,37 +165,35 @@ function drawDistribution(id, values, minY, maxY, unitY) { .attr("class", "y axis") .call(yAxis) .append("text") + .attr("transform", "translate(0," + (-3) + ")") .text(unitY); - svg.append("path") - .datum(data) - .attr("class", "line") - .attr("d", line); - - // Add points to the line. However, we make it invisible at first. But when the user moves mouse - // over a point, it will be displayed with its detail. - svg.selectAll(".point") + var bar = svg.selectAll(".bar") .data(data) - .enter().append("circle") - .attr("stroke", "white") // white and opacity = 0 make it invisible - .attr("fill", "white") - .attr("opacity", "0") - .attr("cx", function(d) { return x(d.y); }) - .attr("cy", function(d) { return y(d.x); }) - .attr("r", function(d) { return 3; }) - .on('mouseover', function(d) { - var tip = "[" + formatBinValue(d.x) + ", " + formatBinValue(d.x + d.dx) + "): " + d.y; - showGraphTooltip(tip, event.pageY, event.pageX + 10); - d3.select(this) - .attr("stroke", "steelblue") - .attr("fill", "steelblue") - .attr("opacity", "1"); - }) - .on('mouseout', function() { - hideGraphTooltip(); - d3.select(this) - .attr("stroke", "white") - .attr("fill", "white") - .attr("opacity", "0"); - }); + .enter().append("g") + .attr("transform", function(d) { return "translate(0," + (y(d.x) - height + y(d.dx)) + ")";}) + .attr("class", "bar").append("rect") + .attr("width", function(d) { return x(d.y); }) + .attr("height", function(d) { return height - y(d.dx); }) + .on('mouseover', function(d) { + var tip = "[" + formatBinValue(d.x) + ", " + formatBinValue(d.x + d.dx) + "): " + d.y; + + // Calculate the location for tip + var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; + var target = d3.event.target; + var matrix = target.getScreenCTM(); + var targetBBox = target.getBBox(); + var point = svg.node().ownerSVGElement.createSVGPoint(); + point.x = targetBBox.x; + point.y = targetBBox.y; + var bbox = point.matrixTransform(matrix); + var tipX = bbox.x + scrollLeft + x(d.y) + 2; + var tipY = bbox.y + scrollTop - 6; + + showGraphTooltip(tip, tipX, tipY); + }) + .on('mouseout', function() { + hideGraphTooltip(); + }); }