Skip to content

[SPARK-35175][BUILD] Add linter for JavaScript source files. #32274

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
sarutak wants to merge 26 commits into from
Closed

[SPARK-35175][BUILD] Add linter for JavaScript source files. #32274

Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
61b4782
Add ESLint support.
sarutak Apr 21, 2021
e2fcd9e
Add a newline at the end of .gitignore.
sarutak Apr 21, 2021
990e538
Modify .rat-exclude.
sarutak Apr 22, 2021
d6eb61a
Add docs/js for a lint target.
sarutak Apr 25, 2021
c1afc31
npm install -> npm ci to avoid package-lock.json being changed.
sarutak May 6, 2021
d858aa8
Upgrade eslint.
sarutak May 6, 2021
e459d90
Add switch-case rule.
sarutak May 6, 2021
1ad98a5
Fix style for webui.js.
sarutak May 6, 2021
feb6d76
Disable indentation rule for member expressions.
sarutak May 6, 2021
0a1a461
Fix style for utils.js.
sarutak May 6, 2021
71ea913
Fix style for timeline-view.js.
sarutak May 6, 2021
5ec9eea
Fix style for table.js.
sarutak May 6, 2021
701514a
Fix style for structured-streaming-page.js.
sarutak May 6, 2021
5b18e69
Fix style for streaming-page.js.
sarutak May 6, 2021
1d209ca
Add ignored argument rule.
sarutak May 6, 2021
4c8cb17
Fix style for stagepage.js.
sarutak May 6, 2021
4884b8e
Fix style for spark-dag-viz.js.
sarutak May 6, 2021
da34039
Fix style for log-view.js.
sarutak May 6, 2021
896b475
Modify indentation in eslint.json.
sarutak May 6, 2021
e8170eb
Fix style for initialize-tooltips.js.
sarutak May 6, 2021
e3847db
Fix style for historypage.js.
sarutak May 6, 2021
b129c4e
Fix style for historypage-common.js.
sarutak May 6, 2021
d174384
Fix style for executorspage.js.
sarutak May 6, 2021
1d67631
Revert "Fix style for stagepage.js."
sarutak May 6, 2021
82a9947
Merge branch 'master' of https://github.com/apache/spark into introdu…
sarutak May 6, 2021
5bda9fc
Fix style for stagepage.js.
sarutak May 6, 2021
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
Prev Previous commit
Next Next commit
Fix style for structured-streaming-page.js.
  • Loading branch information
@sarutak
sarutak committed May 6, 2021
commit 701514a8f59f5269a962a2d04cf04fd024a9e3e3
299 changes: 150 additions & 149 deletions core/src/main/resources/org/apache/spark/ui/static/structured-streaming-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,157 +15,158 @@
* limitations under the License.
*/

/* global d3, formattedTimeTipStrings, formattedTimeToValues, hideBootstrapTooltip, maxMarginLeftForTimeline, showBootstrapTooltip, unitLabelYOffset */
// pre-define some colors for legends.
var colorPool = ["#F8C471", "#F39C12", "#B9770E", "#73C6B6", "#16A085", "#117A65", "#B2BABB", "#7F8C8D", "#616A6B"];

/* eslint-disable no-unused-vars */
function drawAreaStack(id, labels, values, minX, maxX, minY, maxY) {
d3.select(d3.select(id).node().parentNode)
.style("padding", "8px 0 8px 8px")
.style("border-right", "0px solid white");

// Setup svg using Bostock's margin convention
var margin = {top: 20, right: 40, bottom: 30, left: maxMarginLeftForTimeline};
var width = 850 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;

var svg = d3.select(id)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = values;

var parse = d3.time.format("%H:%M:%S.%L").parse;

// Transpose the data into layers
var dataset = d3.layout.stack()(labels.map(function(fruit) {
return data.map(function(d) {
return {_x: d.x, x: parse(d.x), y: +d[fruit]};
});
}));


// Set x, y and colors
var x = d3.scale.ordinal()
.domain(dataset[0].map(function(d) { return d.x; }))
.rangeRoundBands([10, width-10], 0.02);

var y = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d3.max(d, function(d) { return d.y0 + d.y; }); })])
.range([height, 0]);

var colors = colorPool.slice(0, labels.length)

// Define and draw axes
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(7)
.tickFormat( function(d) { return d } );

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%H:%M:%S.%L"));

// Only show the first and last time in the graph
var xline = []
xline.push(x.domain()[0])
xline.push(x.domain()[x.domain().length - 1])
xAxis.tickValues(xline);

svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "translate(0," + unitLabelYOffset + ")")
.text("ms");

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

// Create groups for each series, rects for each segment
var groups = svg.selectAll("g.cost")
.data(dataset)
.enter().append("g")
.attr("class", "cost")
.style("fill", function(d, i) { return colors[i]; });

var rect = groups.selectAll("rect")
.data(function(d) { return d; })
.enter()
.append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
.attr("width", x.rangeBand())
.on('mouseover', function(d) {
var tip = '';
var idx = 0;
var _values = formattedTimeToValues[d._x];
_values.forEach(function (k) {
tip += labels[idx] + ': ' + k + ' ';
idx += 1;
});
tip += " at " + formattedTimeTipStrings[d._x];
showBootstrapTooltip(d3.select(this).node(), tip);
})
.on('mouseout', function() {
hideBootstrapTooltip(d3.select(this).node());
})
.on("mousemove", function(d) {
var xPosition = d3.mouse(this)[0] - 15;
var yPosition = d3.mouse(this)[1] - 25;
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltip.select("text").text(d.y);
});


// Draw legend
var legend = svg.selectAll(".legend")
.data(colors)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });

legend.append("rect")
.attr("x", width - 20)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {return colors.slice().reverse()[i];})
.on('mouseover', function(d, i) {
var len = labels.length
showBootstrapTooltip(d3.select(this).node(), labels[len - 1 - i]);
})
.on('mouseout', function() {
hideBootstrapTooltip(d3.select(this).node());
})
.on("mousemove", function(d) {
var xPosition = d3.mouse(this)[0] - 15;
var yPosition = d3.mouse(this)[1] - 25;
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltip.select("text").text(d.y);
});

// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
.attr("class", "tooltip")
.style("display", "none");

tooltip.append("rect")
.attr("width", 30)
.attr("height", 20)
.attr("fill", "white")
.style("opacity", 0.5);

tooltip.append("text")
.attr("x", 15)
.attr("dy", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold");
d3.select(d3.select(id).node().parentNode)
.style("padding", "8px 0 8px 8px")
.style("border-right", "0px solid white");

// Setup svg using Bostock's margin convention
var margin = {top: 20, right: 40, bottom: 30, left: maxMarginLeftForTimeline};
var width = 850 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;

var svg = d3.select(id)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = values;

var parse = d3.time.format("%H:%M:%S.%L").parse;

// Transpose the data into layers
var dataset = d3.layout.stack()(labels.map(function(fruit) {
return data.map(function(d) {
return {_x: d.x, x: parse(d.x), y: +d[fruit]};
});
}));

// Set x, y and colors
var x = d3.scale.ordinal()
.domain(dataset[0].map(function(d) { return d.x; }))
.rangeRoundBands([10, width-10], 0.02);

var y = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d3.max(d, function(d) { return d.y0 + d.y; }); })])
.range([height, 0]);

var colors = colorPool.slice(0, labels.length);

// Define and draw axes
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(7)
.tickFormat( function(d) { return d } );

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%H:%M:%S.%L"));

// Only show the first and last time in the graph
var xline = [];
xline.push(x.domain()[0]);
xline.push(x.domain()[x.domain().length - 1]);
xAxis.tickValues(xline);

svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "translate(0," + unitLabelYOffset + ")")
.text("ms");

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

// Create groups for each series, rects for each segment
var groups = svg.selectAll("g.cost")
.data(dataset)
.enter().append("g")
.attr("class", "cost")
.style("fill", function(d, i) { return colors[i]; });

var rect = groups.selectAll("rect")
.data(function(d) { return d; })
.enter()
.append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
.attr("width", x.rangeBand())
.on('mouseover', function(d) {
var tip = '';
var idx = 0;
var _values = formattedTimeToValues[d._x];
_values.forEach(function (k) {
tip += labels[idx] + ': ' + k + ' ';
idx += 1;
});
tip += " at " + formattedTimeTipStrings[d._x];
showBootstrapTooltip(d3.select(this).node(), tip);
})
.on('mouseout', function() {
hideBootstrapTooltip(d3.select(this).node());
})
.on("mousemove", function(d) {
var xPosition = d3.mouse(this)[0] - 15;
var yPosition = d3.mouse(this)[1] - 25;
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltip.select("text").text(d.y);
});

// Draw legend
var legend = svg.selectAll(".legend")
.data(colors)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });

legend.append("rect")
.attr("x", width - 20)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {return colors.slice().reverse()[i];})
.on('mouseover', function(d, i) {
var len = labels.length;
showBootstrapTooltip(d3.select(this).node(), labels[len - 1 - i]);
})
.on('mouseout', function() {
hideBootstrapTooltip(d3.select(this).node());
})
.on("mousemove", function(d) {
var xPosition = d3.mouse(this)[0] - 15;
var yPosition = d3.mouse(this)[1] - 25;
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltip.select("text").text(d.y);
});

// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
.attr("class", "tooltip")
.style("display", "none");

tooltip.append("rect")
.attr("width", 30)
.attr("height", 20)
.attr("fill", "white")
.style("opacity", 0.5);

tooltip.append("text")
.attr("x", 15)
.attr("dy", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold");
}
/* eslint-enable no-unused-vars */