[AIRFLOW-1266] Increase width of gantt y axis

Increase the width of the gantt view y axis to
accommodate larger
task names.

Closes #2345 from aoen/ddavydov--
increase_width_of_gantt_y_axis


Project: http://git-wip-us.apache.org/repos/asf/incubator-airflow/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-airflow/commit/6600faf0
Tree: http://git-wip-us.apache.org/repos/asf/incubator-airflow/tree/6600faf0
Diff: http://git-wip-us.apache.org/repos/asf/incubator-airflow/diff/6600faf0

Branch: refs/heads/v1-8-test
Commit: 6600faf03a99eeb68138c88539bf847bdea2f32c
Parents: f8f4e60
Author: Dan Davydov <[email protected]>
Authored: Mon Jun 5 16:31:42 2017 -0700
Committer: Maxime Beauchemin <[email protected]>
Committed: Thu Jun 8 08:36:20 2017 -0700

----------------------------------------------------------------------
 airflow/www/static/gantt-chart-d3v2.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-airflow/blob/6600faf0/airflow/www/static/gantt-chart-d3v2.js
----------------------------------------------------------------------
diff --git a/airflow/www/static/gantt-chart-d3v2.js 
b/airflow/www/static/gantt-chart-d3v2.js
index 2aee016..d21311a 100644
--- a/airflow/www/static/gantt-chart-d3v2.js
+++ b/airflow/www/static/gantt-chart-d3v2.js
@@ -48,6 +48,7 @@ d3.gantt = function() {
     bottom : 20,
     left : 150
   };
+  var yAxisLeftOffset = 220;
   var selector = 'body';
   var timeDomainStart = d3.time.day.offset(new Date(),-3);
   var timeDomainEnd = d3.time.hour.offset(new Date(),+3);
@@ -64,10 +65,10 @@ d3.gantt = function() {
   };
 
   var rectTransform = function(d) {
-    return "translate(" + x(d.startDate) + "," + y(d.taskName) + ")";
+    return "translate(" + (x(d.startDate) + yAxisLeftOffset) + "," + 
y(d.taskName) + ")";
   };
 
-  var x = d3.time.scale().domain([ timeDomainStart, timeDomainEnd ]).range([ 
0, width ]).clamp(true);
+  var x = d3.time.scale().domain([ timeDomainStart, timeDomainEnd ]).range([ 
0, (width-yAxisLeftOffset) ]).clamp(true);
 
   var y = d3.scale.ordinal().domain(taskTypes).rangeRoundBands([ 0, height - 
margin.top - margin.bottom ], .1);
 
@@ -95,7 +96,7 @@ d3.gantt = function() {
   };
 
   var initAxis = function() {
-    x = d3.time.scale().domain([ timeDomainStart, timeDomainEnd ]).range([ 0, 
width ]).clamp(true);
+    x = d3.time.scale().domain([ timeDomainStart, timeDomainEnd ]).range([ 0, 
width-yAxisLeftOffset ]).clamp(true);
     y = d3.scale.ordinal().domain(taskTypes).rangeRoundBands([ 0, height - 
margin.top - margin.bottom ], .1);
     xAxis = 
d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format(tickFormat)).tickSubdivide(true)
     .tickSize(8).tickPadding(8);
@@ -141,11 +142,11 @@ d3.gantt = function() {
 
     svg.append("g")
     .attr("class", "x axis")
-    .attr("transform", "translate(0, " + (height - margin.top - margin.bottom) 
+ ")")
+    .attr("transform", "translate(" + yAxisLeftOffset + ", " + (height - 
margin.top - margin.bottom) + ")")
     .transition()
     .call(xAxis);
 
-    svg.append("g").attr("class", "y axis").transition().call(yAxis);
+    svg.append("g").attr("class", "y axis").transition().attr("transform", 
"translate(" + yAxisLeftOffset + ", 0)").call(yAxis);
     svg.call(tip);
 
     return gantt;

Reply via email to