[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;
