[SPARK-8399] [STREAMING] [WEB UI] Overlap between histograms and axis' name in Spark Streaming UI
Moved where the X axis' name (#batches) is written in histograms in the spark streaming web ui so the histograms and the axis' name do not overlap.
Author: BenFradet <benjamin.fradet@gmail.com>
Closes #6845 from BenFradet/SPARK-8399 and squashes the following commits:
b63695f [BenFradet] adjusted inner histograms
eb610ee [BenFradet] readjusted #batches on the x axis
dd46f98 [BenFradet] aligned all unit labels and ticks
0564b62 [BenFradet] readjusted #batches placement
edd0936 [BenFradet] moved where the X axis' name (#batches) is written in histograms in the spark streaming web ui
(cherry picked from commit 1173483f3f
)
Signed-off-by: Tathagata Das <tathagata.das1565@gmail.com>
This commit is contained in:
parent
f6682dd6e8
commit
93793237ee
|
@ -31,6 +31,8 @@ var maxXForHistogram = 0;
|
||||||
var histogramBinCount = 10;
|
var histogramBinCount = 10;
|
||||||
var yValueFormat = d3.format(",.2f");
|
var yValueFormat = d3.format(",.2f");
|
||||||
|
|
||||||
|
var unitLabelYOffset = -10;
|
||||||
|
|
||||||
// Show a tooltip "text" for "node"
|
// Show a tooltip "text" for "node"
|
||||||
function showBootstrapTooltip(node, text) {
|
function showBootstrapTooltip(node, text) {
|
||||||
$(node).tooltip({title: text, trigger: "manual", container: "body"});
|
$(node).tooltip({title: text, trigger: "manual", container: "body"});
|
||||||
|
@ -133,7 +135,7 @@ function drawTimeline(id, data, minX, maxX, minY, maxY, unitY, batchInterval) {
|
||||||
.attr("class", "y axis")
|
.attr("class", "y axis")
|
||||||
.call(yAxis)
|
.call(yAxis)
|
||||||
.append("text")
|
.append("text")
|
||||||
.attr("transform", "translate(0," + (-3) + ")")
|
.attr("transform", "translate(0," + unitLabelYOffset + ")")
|
||||||
.text(unitY);
|
.text(unitY);
|
||||||
|
|
||||||
|
|
||||||
|
@ -223,10 +225,10 @@ function drawHistogram(id, values, minY, maxY, unitY, batchInterval) {
|
||||||
.style("border-left", "0px solid white");
|
.style("border-left", "0px solid white");
|
||||||
|
|
||||||
var margin = {top: 20, right: 30, bottom: 30, left: 10};
|
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 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 y = d3.scale.linear().domain([minY, maxY]).range([height, 0]);
|
||||||
|
|
||||||
var xAxis = d3.svg.axis().scale(x).orient("top").ticks(5);
|
var xAxis = d3.svg.axis().scale(x).orient("top").ticks(5);
|
||||||
|
@ -248,7 +250,7 @@ function drawHistogram(id, values, minY, maxY, unitY, batchInterval) {
|
||||||
.attr("class", "x axis")
|
.attr("class", "x axis")
|
||||||
.call(xAxis)
|
.call(xAxis)
|
||||||
.append("text")
|
.append("text")
|
||||||
.attr("transform", "translate(" + (margin.left + width - 40) + ", 15)")
|
.attr("transform", "translate(" + (margin.left + width - 45) + ", " + unitLabelYOffset + ")")
|
||||||
.text("#batches");
|
.text("#batches");
|
||||||
|
|
||||||
svg.append("g")
|
svg.append("g")
|
||||||
|
|
|
@ -310,7 +310,7 @@ private[ui] class StreamingPage(parent: StreamingTab)
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 160px;"></th>
|
<th style="width: 160px;"></th>
|
||||||
<th style="width: 492px;">Timelines (Last {batchTimes.length} batches, {numActiveBatches} active, {numCompletedBatches} completed)</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>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -456,7 +456,7 @@ private[ui] class StreamingPage(parent: StreamingTab)
|
||||||
<td>{receiverActive}</td>
|
<td>{receiverActive}</td>
|
||||||
<td>{receiverLocation}</td>
|
<td>{receiverLocation}</td>
|
||||||
<td>{receiverLastErrorTime}</td>
|
<td>{receiverLastErrorTime}</td>
|
||||||
<td><div style="width: 292px;">{receiverLastError}</div></td>
|
<td><div style="width: 342px;">{receiverLastError}</div></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="3" class="timeline">
|
<td colspan="3" class="timeline">
|
||||||
|
|
Loading…
Reference in a new issue