TaskTreemap

テキスト入力でお手軽にタスクの規模と進捗を Treemap で可視化する

デモページ

https://tasktreemap.herokuapp.com/?id=demo

Usage

• URL に ?id=hoge を追加すると新規ページが作成され、同ページを開いているブラウザに更新がリアルタイムに反映される

• スペース区切り、もしくはタブ区切りで「タスクデータ(複数行可能)」を記述する

• タスクをダブルクリックすると状態遷移する。(Todo → Doing → Done → Todo)

• タスクをロングクリックすると Waiting へ遷移する

• 上部のアサイン名をタスクにドラッグするとアサイン可能

• バーンダウンの「Apply to n sprints」をクリックすると Done → Closed に状態遷移する。

• Alt + Click or Shift + Click でレイアウト切り替え(3種類)

• [Status] <-> [assignee] ボタンでタスクのグルーピング表示切り替え

• [Done] チェックボックスで Done の表示非表示切り替え

タスクデータフォーマット

タスク名	規模	進捗(Optinal)	アサイン名(Optinal)
タスク1	30	Todo	ほげさん
タスク2	40	Doing	ふがさん
タスク3	50	Done
タスク4	60

• --- で区切り行

バーンダウンチャートフォーマット

要素	説明
4	スプリント数
785/785	初期計画規模 [残り]/[総数]
585/785	1スプリント規模 [残り]/[総数]
517/785	2スプリント規模 [残り]/[総数]
:

Technology

• Vue.js
• d3.js
• socket.io

Ready

必要なもの

• node.js
• mongodb

$ npm install

Build

$ npm run build

Run

$ npm run start

Access

http://localhost:3000/?id=page_name

page_name: 任意のページ名文字列

Basic認証

$ BASIC_AUTH_USER=user BASIC_AUTH_PASS=pass npm run start

• BASIC_AUTH_USER ユーザ名
• BASIC_AUTH_PASS パスワード

Heroku button