Skip to content

[SPARK-8399][Streaming][Web UI] Overlap between histograms and axis' name in Spark Streaming UI #6845

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

[SPARK-8399][Streaming][Web UI] Overlap between histograms and axis' name in Spark Streaming UI #6845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
edd0936
moved where the X axis' name (#batches) is written in histograms in t…
BenFradet Jun 16, 2015
0564b62
readjusted #batches placement
BenFradet Jun 21, 2015
dd46f98
aligned all unit labels and ticks
BenFradet Jun 22, 2015
eb610ee
readjusted #batches on the x axis
BenFradet Jun 22, 2015
b63695f
adjusted inner histograms
BenFradet Jun 23, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions streaming/src/main/resources/org/apache/spark/streaming/ui/static/streaming-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ var maxXForHistogram = 0;
var histogramBinCount = 10;
var yValueFormat = d3.format(",.2f");

var unitLabelYOffset = -10;

// Show a tooltip "text" for "node"
function showBootstrapTooltip(node, text) {
$(node).tooltip({title: text, trigger: "manual", container: "body"});
Expand Down Expand Up @@ -133,7 +135,7 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) {
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "translate(0," + (-3) + ")")
.attr("transform", "translate(0," + unitLabelYOffset + ")")
.text(unitY);


Expand Down Expand Up @@ -223,10 +225,10 @@ function drawHistogram(id, values, minY, maxY, unitY, batchInterval) {
.style("border-left", "0px solid white");

var margin = {top: 20, right: 30, bottom: 30, left: 10};
var width = 300 - margin.left - margin.right;
var width = 350 - margin.left - margin.right;
var height = 150 - margin.top - margin.bottom;

var x = d3.scale.linear().domain([0, maxXForHistogram]).range([0, width]);
var x = d3.scale.linear().domain([0, maxXForHistogram]).range([0, width - 50]);
var y = d3.scale.linear().domain([minY, maxY]).range([height, 0]);

var xAxis = d3.svg.axis().scale(x).orient("top").ticks(5);
Expand All @@ -248,7 +250,7 @@ function drawHistogram(id, values, minY, maxY, unitY, batchInterval) {
.attr("class", "x axis")
.call(xAxis)
.append("text")
.attr("transform", "translate(" + (margin.left + width - 40) + ", 15)")
.attr("transform", "translate(" + (margin.left + width - 45) + ", " + unitLabelYOffset + ")")
.text("#batches");

svg.append("g")
Expand Down
4 changes: 2 additions & 2 deletions streaming/src/main/scala/org/apache/spark/streaming/ui/StreamingPage.scala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ private[ui] class StreamingPage(parent: StreamingTab)
<tr>
<th style="width: 160px;"></th>
<th style="width: 492px;">Timelines (Last {batchTimes.length} batches, {numActiveBatches} active, {numCompletedBatches} completed)</th>
<th style="width: 300px;">Histograms</th></tr>
<th style="width: 350px;">Histograms</th></tr>
</thead>
<tbody>
<tr>
Expand Down Expand Up @@ -456,7 +456,7 @@ private[ui] class StreamingPage(parent: StreamingTab)
<td>{receiverActive}</td>
<td>{receiverLocation}</td>
<td>{receiverLastErrorTime}</td>
<td><div style="width: 292px;">{receiverLastError}</div></td>
<td><div style="width: 342px;">{receiverLastError}</div></td>
</tr>
<tr>
<td colspan="3" class="timeline">
Expand Down