Redmine2.0.3のガントチャートで矢印(関係線)を

※2013/03/09　各バージョンの記載や、意味不明な記述を直しました。

Redmin2.0系には、Gantt ChartでMSプロジェクトみたいに
関係線が引くようなプラグインがないため、1.xで使われていたBetter Gantt Chart
の一部（raphael.arrow.jsとraphael-min.js）を呼び出して線を引いてみた記録。

【ブロブ内の表現】
・ソースに変更を加えた変更には赤で色づけ。

・<redmine>はインストールディレクトリ

・20130309に加えた情報には青を使用

【使用環境(CentOS 6.2)】
Environment:
Redmine version 2.0.3.stable
Ruby version 1.8.7 (x86_64-linux)
Rails version 3.2.6
Environment production
Database adapter MySQL

【変更のポイント】
raphael-xxxを解析したところ、修正するためのポイントは下記２つとわかった
Point1：　
　raphael.arrow.jsが、task_todoの要素のidとfollowsなどの要素を見て
　関係線を引くように関数が作られていること。
Point２：
　関係線の描画用のDIV領域を作ること

1. 必要ファイルをコピーする
1-1 better_gantt_chartをダウンロード(0.6.3を持ってきた）
　<http://www.redmine.org/plugins/redmine_better_gantt_chart>

1-2 解凍したファイルから下記の２つのファイルを <redmine>/public/javascripts/

にコピー
raphael-min.js

raphael-arrow.js

2. ファイルの編集

2-1 <redmine>/lib/redmine/helpers/gantt.rb を編集

sub html_task()関数で、task leaf task_todoを作っており、ここにfollowsなど

のキーワードが追加されると、javascriptで線を記載するらしい。
better_gantt_chartのソースを参考に以下のように修正…。

output = ''"

#issues

if options[:issue]

issue = options[:issue]

issue_id = "#{issue.id}"

relations = {}

issue.relations_to.each do |relation|

relation_type = relation.relation_type_for(relation.issue_to)

(relations[relation_type] ||= []) << relation.issue_from_id

end

issue_relations = relations.inject("") {|str,rel| str << " #{rel[0]}='#{rel[1].join(',')}'" }

end

# Renders the task bar, with progress and late

if coords[:bar_start] && coords[:bar_end]

output << "<div id='#{issue_id}'#{issue_relations}style='top:#{ params[:top] }px;left:#{ coords[:bar_start] }px;width:#{ coords[:bar_end] - coords[:bar_start] - 2}px;' class='#{options[:css]} task_todo'> </div>\n".html_safe

2-2. <redmine>/app/views/gantts/show.html.erb を編集

先頭行に下記２行を入れる。

<%= javascript_include_tag "raphael-min.js" %>

<%= javascript_include_tag "raphael.arrow.js" %>

最後の行にも１行追加。

<%= javascript_tag("window.redrawGanttArrows()") -%>

このバージョンでは、div要素のgantt_linesというIDを見ているようなので、

ガントチャートの描画テーブルのdivの中に<div id="gantt_lines"...>を埋め込む。

if Date.today >= @gantt.date_from and Date.today <= @gantt.date_to %>

<div style="position: absolute;height:<%= g_height %>px;top:<%= headers_height + 1 %>px;left:<%= (((Date.today - @gantt.date_from + 1) * zoom).floor() - 1).to_i %>px;width:10px;border-left: 1px dashed red;"> </div>

<% end %>

</div>

そんなこんなで、こんな感じになりました！

これだけするのに２、３週間かかってしまったけど、
これでRedmine2.0.3が使いものになりそう！

【残課題】

1. raphael-arrow.js　のライセンスがOKなのかどうかがわからない…。要調査。
<TODO : check license of raphael-xxx >
2. better_gantt_chartでなかった関係の追加（rapael-arrows.jsに修正が必要)
3. Redmine 2.1.3 + Ruby 1.9.3では、ソースの内容が変わっていてそのままつかえない
-> content_tagを使うように修正したが、jqeuryとの相性が悪いようで、raphael.arrow.jsの$$('div.task_todo')が動作しなくなって困り中。
→　20130510追記：　Redmine2.3.0からデフォルトで関係線が出るようになったので、これ以上の調査はしないことにする（AgileDwarf修正した経験から、関数名とか代えたりすると、動きそう）。
２．３の記事はコチラ

Ujsag.Takashi.Lap

身の回りのことやらメモをつれずれと。

Redmine2.0.3のガントチャートで矢印(関係線)を