Redmine

<% content_for :header_tags do %>

  <%= javascript_include_tag 'raphael' %>

  <%= javascript_include_tag 'gantt_progress_line' %>

<% end %>

<%= javascript_tag do %>

  $(document).ready(drawGanttLinesHandler);

  $(window).resize(drawGanttLinesHandler);

<% end %>

  <%= content_tag(:div, '&nbsp;'.html_safe, :style => style, :id => 'today_red_line') %>

<%

  style  = ""

  style += "position: absolute;"

  style += "height: #{g_height}px;"

  style += "top: #{headers_height + 1}px;"

  style += "left: 0px;"

  style += "width: #{g_width - 1}px;"

%>

<%= content_tag(:div, '', :style => style, :id => "gantt_lines") %>

          html_class << ' version-closed' unless version.open?

          if version.start_date && version.due_date && version.completed_pourcent

            progress_date = calc_progress_date(version.start_date,

                                               version.due_date, version.completed_pourcent)

            html_class << ' behind-start-date' if progress_date < self.date_from

            html_class << ' over-end-date' if progress_date > self.date_to

          end

          html_subject(options, subject, :css => "version-name",

                       :id => "version-#{version.id}")

            html_task(options, coords, :css => "version task",

                      :label => label, :markers => true, :version => version)

          css_classes << ' issue-closed' if issue.closed?

          if issue.start_date && issue.due_before && issue.done_ratio

            progress_date = calc_progress_date(issue.start_date,

                                               issue.due_before, issue.done_ratio)

            css_classes << ' behind-start-date' if progress_date < self.date_from

            css_classes << ' over-end-date' if progress_date > self.date_to

          end

                       :title => issue.subject, :id => "issue-#{issue.id}") + "\n"

            progress_date = calc_progress_date(start_date, end_date, progress)

      def calc_progress_date(start_date, end_date, progress)

        start_date + (end_date - start_date + 1) * (progress / 100.0)

      end

        output = view.content_tag(:div, subject,

                                  :title => options[:title],

                                  :id => options[:id])

          html_id = "task-todo-issue-#{options[:issue].id}" if options[:issue]

          html_id = "task-todo-version-#{options[:version].id}" if options[:version]

                                     :class => "#{options[:css]} task_todo",

                                     :id => html_id)

            html_id = "task-done-issue-#{options[:issue].id}" if options[:issue]

            html_id = "task-done-version-#{options[:version].id}" if options[:version]

                                       :class => "#{options[:css]} task_done",

                                       :id => html_id)

var draw_gantt_line = null;

function drawGanttLines(holder) {

  if(draw_gantt_line != null)

    draw_gantt_line.clear();

  else

    draw_gantt_line = Raphael(holder);

  var arr = new Array();

  var today_left = $('#today_red_line').position().left;

  arr.push({left: today_left, top: 0});

  var line_top   = $("#gantt_lines").position().top;

  var line_right = $("#gantt_lines").width();

  $.each($('div.issue-subject, div.version-name'), function(index, element) {

    var t0 = $(element).position().top - line_top ;

    var h = ($(element).height() / 9);

    var t1 = t0 - h;

    var t2 = t0 + (h * 8);

    var t  = t0 + (h * 3);

    var ci = $(element).children('span').hasClass('issue-closed');

    var cv = $(element).children('span').hasClass('version-closed');

    if (ci || cv) {

      arr.push({left: today_left, top: t});

    } else {

      var issue_done = $("#task-done-" + $(element).attr("id"));

      var is_behind_start = $(element).children('span').hasClass('behind-start-date');

      var is_over_end     = $(element).children('span').hasClass('over-end-date');

      if (is_over_end) {

        arr.push({left: line_right, top: t1, is_right_edge: true});

        arr.push({left: line_right, top: t2, is_right_edge: true, none_stroke: true});

      } else if (issue_done.size() > 0) {

        var l = issue_done.first().position().left +

                    issue_done.first().width();

        arr.push({left: l, top: t});

      } else if (is_behind_start) {

        arr.push({left: 0 , top: t1, is_left_edge: true});

        arr.push({left: 0 , top: t2, is_left_edge: true, none_stroke: true});

      } else {

        var l1 = today_left;

        var issue_todo = $("#task-todo-" + $(element).attr("id"));

        if (issue_todo.size() > 0){

          l1 = issue_todo.first().position().left;

        }

        arr.push({left: Math.min(today_left, l1), top: t});

      }

    }

  });

  var i;

  for(i = 1 ; i < arr.length ; i++) {

    if (!("none_stroke" in arr[i]) &&

        (!("is_right_edge" in arr[i - 1] && "is_right_edge" in arr[i]) &&

         !("is_left_edge" in arr[i - 1] && "is_left_edge" in arr[i]))

        ) {

      draw_gantt_line.path(["M",arr[i - 1].left, arr[i - 1].top, "L", arr[i].left, arr[i].top])

            .attr({stroke: "#ff0000", "stroke-width": 2});

    }

  }

}

function drawGanttLinesHandler() {

  drawGanttLines(document.getElementById('gantt_lines'));

}