You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@drill.apache.org by pa...@apache.org on 2017/11/22 22:52:05 UTC
[03/12] drill git commit: DRILL-5801: Gantt chart (fragment timeline)
enhancements
DRILL-5801: Gantt chart (fragment timeline) enhancements
1. Labelled X and Y axes on the Gantt Chart that expresses the fragments' timelines
2. Support mouse hover to reveal major fragment ID
This closes #1035
Project: http://git-wip-us.apache.org/repos/asf/drill/repo
Commit: http://git-wip-us.apache.org/repos/asf/drill/commit/1285c80f
Tree: http://git-wip-us.apache.org/repos/asf/drill/tree/1285c80f
Diff: http://git-wip-us.apache.org/repos/asf/drill/diff/1285c80f
Branch: refs/heads/master
Commit: 1285c80fa91e0fe10e3a60b58bd5af71882a7ed2
Parents: 7506cfb
Author: Kunal Khatua <kk...@maprtech.com>
Authored: Tue Nov 14 10:48:36 2017 -0800
Committer: Parth Chandra <pa...@apache.org>
Committed: Wed Nov 22 10:29:40 2017 -0800
----------------------------------------------------------------------
.../src/main/resources/rest/static/js/graph.js | 60 +++++++++++++++++---
1 file changed, 51 insertions(+), 9 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/drill/blob/1285c80f/exec/java-exec/src/main/resources/rest/static/js/graph.js
----------------------------------------------------------------------
diff --git a/exec/java-exec/src/main/resources/rest/static/js/graph.js b/exec/java-exec/src/main/resources/rest/static/js/graph.js
index b646430..360e9c4 100644
--- a/exec/java-exec/src/main/resources/rest/static/js/graph.js
+++ b/exec/java-exec/src/main/resources/rest/static/js/graph.js
@@ -166,14 +166,15 @@ $(window).on('load',(function () {
.attr("height", result.graph().height + 2 * padding);
}
+ // Fragment Gantt Chart
function buildtimingchart (svgdest, timetable) {
var chartprops = {
- "w" : 800,
- "h" : -1,
+ "w" : 850,
+ "h" : 70,
"svg" : svgdest,
"bheight" : 2,
"bpad" : 0,
- "margin" : 50,
+ "margin" : 35,
"scaler" : null,
"colorer" : null,
};
@@ -193,10 +194,15 @@ $(window).on('load',(function () {
// backdrop
chartprops.svg.append("g")
- .selectAll("rect")
+ .selectAll("rect")
.data(timetable)
.enter()
- .append("rect")
+ // TODO: Prototype to jump to related Major Fragment
+ //.append("a")
+ // .attr("xlink:href", function(d) {
+ // return "#fragment-" + parseInt(d.category);
+ // })
+ .append("rect")
.attr("x", 0)
.attr("y", function(d, i) {return i * (chartprops.bheight + 2 * chartprops.bpad);})
.attr("width", chartprops.w)
@@ -205,14 +211,25 @@ $(window).on('load',(function () {
.attr("fill", function(d) {return d3.rgb(chartprops.colorer(d.category));})
.attr("opacity", 0.1)
.attr("transform", "translate(" + chartprops.margin + "," +
- chartprops.margin + ")");
+ chartprops.margin + ")")
+ .attr("style", "cursor: pointer;")
+ .append("title")
+ .text(function(d) {
+ var id = parseInt(d.category);
+ return ((id < 10) ? ("0" + id) : id) + "-XX-XX";
+ });
// bars
chartprops.svg.append('g')
- .selectAll("rect")
+ .selectAll("rect")
.data(timetable)
.enter()
- .append("rect")
+ // TODO: Prototype to jump to related Major Fragment
+ //.append("a")
+ // .attr("xlink:href", function(d) {
+ // return "#fragment-" + parseInt(d.category);
+ // })
+ .append("rect")
//.attr("rx", 3)
//.attr("ry", 3)
.attr("x", function(d) {return chartprops.scaler(d.start) + chartprops.bpad;})
@@ -222,7 +239,13 @@ $(window).on('load',(function () {
.attr("stroke", "none")
.attr("fill", function(d) {return d3.rgb(chartprops.colorer(d.category));})
.attr("transform", "translate(" + chartprops.margin + "," +
- chartprops.margin + ")");
+ chartprops.margin + ")")
+ .attr("style", "cursor: pointer;")
+ .append("title")
+ .text(function(d) {
+ var id = parseInt(d.category);
+ return ((id < 10) ? ("0" + id) : id) + "-XX-XX";
+ });
// grid lines
chartprops.svg.append("g")
@@ -248,6 +271,25 @@ $(window).on('load',(function () {
.orient('bottom')
.tickSize(0, 0)
.tickFormat(d3.format(".2f")));
+
+ // X Axis Label (Centered above graph)
+ chartprops.svg.append("text")
+ .attr("transform", "rotate(0)")
+ .attr("y", 0)
+ .attr("x", chartprops.w/2 + chartprops.margin)
+ .attr("dy", "1.5em")
+ .style("text-anchor", "middle")
+ .text("Elapsed Timeline");
+
+ //Y Axis (center of y axis)
+ chartprops.svg.append("text")
+ .attr("transform", "rotate(-90)")
+ .attr("y", 0)
+ // Aligning to center of Y-axis with minimum Svg height
+ .attr("x",0 - Math.max(chartprops.h/2 + chartprops.margin, 36))
+ .attr("dy", "1.5em")
+ .style("text-anchor", "middle")
+ .html("Fragments");
}
function loadprofile (queryid, callback) {