mermaid.jsには様々な機能がある。その中でもガントチャート機能に着目した。
mermaid.jsガントチャートの特徴
そもそも論だが、ガントチャートは依存関係を書く機能を有するグラフなのか?
#
mermaid.js対応エディタがたくさんあるみたいで、彼らを使うのも手かも?
mermaid.jsのatomエディタ拡張、これはぐぅ神.
github.com
本家
レポジトリ
github.com
gitbook, readme代わり
mermaid · GitBook
特にgantt部分
Gantt diagram · GitBook
関連記事
色設定の仕方
qiita.com
簡単な使い方
qiita.com
ガントチャートjsライブラリ
magnet88jp.hateblo.jp
blog.htmlhifive.com
google chart
Gantt Charts | Charts | Google Developers
内部解析
ガントチャートソース
mermaid/src/diagrams/gantt at master · knsv/mermaid · GitHub
Jisonとやらでparserを作製・js化している模様。
ganttRenderer.js
mermaid/ganttRenderer.js at master · knsv/mermaid · GitHub
こいつがガントチャート部の肝その1。
exportしてるオブジェクトは
- setConf: configを渡すとganttRenderer内部のconfigを更新
- draw: 描写
のみ。
draw()の中ではひたすら愚直にd3.jsで要素を作っている。健気だ…
draw()内では本当にrenderingしかしておらず、依存関係に基づいたstart-time計算などはされていない。parser側かな?
gantt.yy.getTasks()でtaskArrayを取得している。このgetTasks()があやしい
ganttDb.js内のgetStartDate()が鍵だった。
“after"を正規表現で検出し、依存タスクの時間関係をDateにコンパイルしている。こうすれば後は描写するだけ
mermaid/ganttDb.js at master · knsv/mermaid · GitHub
d3.jsのバージョンは3.5.17で固定 (package.jsonより mermaid/package.json at master · knsv/mermaid · GitHub )。やっぱり古くからのライブラリはv4に移行しづらいよな。
draw
annotation by myself
/** * Draw gantt chart * @param {string} text - gantt data, which will be parsed soon * @param {string} id - id of something HTML object * @returns {void} */ function draw(text, id){}
text引数は (“./parser/gantt”).parser.parse()で即座にパースして終わり。
id引数はgetElementByIdでelemを出すために即使用して終わり.
構造まとめ
parser => "after" compiler => draw (d3.js)