view customize pluginでグラフ表示してみる(Redmine)

view customize pluginでグラフ表示してみる(Redmine)
                 
最終更新日から90日以上経過しています。

はじめに

大前提ですが、Redmineでグラフを表示するプラグインとしてGraphs PluginやCharts Plugin等、幾つか有るようですが、この記事はJavaScript/CSSを高い自由度で実装できる view customize pluginを使ってグラフ表示を実現してみる、という内容になります。

具体的には、各プロジェクトのトップページの余白部分に、トラッカー毎のチケット数をグラフで表示してみたいと思います。

環境

各バージョン等は下記の通り。

Redmine

3.0.0.stable

view customize plugin

1.2.2

設定内容

設定は下記の通りです。

Path pattern

/projects/[^\/]+$

Type

JavaScript

Code

$(function(){})イベントでscriptタグを追加して、Chart.jsを読み込み、
準備が整ってから、$(window).on(“load”, function(){})イベントで描画処理を行うのがポイントでしょうか。

42行目:Chart.jsのurlと、54行目:RedmineAPIのurlは各自の環境に置き換え

// グラフ描画処理
const drawGraph = function(source) {
    const graphLabel = [];
    const graphData = []; 
    // 元データから、グラフ用のデータを作成
    Object.keys(source).forEach(function(key) {
        graphLabel.push(source[key]['name']);
        graphData.push(source[key]['count']);
    });
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var myChart = new Chart(ctx, {
        type: "bar",
        data:{
            labels:graphLabel,
            datasets:[{
                data:graphData
            }]
        },
        options: {
            legend: {
            display: false          // 凡例表示しない
            },
            scales: { 
                yAxes: [{           // y軸設定
                    ticks: {        // 最大値最小値設定
                        min: 0,     // 最小値
                        stepSize: 1 // 軸間隔
                    },
                }],
            }
        }
    });
    // canvasをdocumentに追加
    $('#content').append(canvas);
};

// DOM読み込み後の処理
$(function(){
    // Chart.js読み込み
    var script = document.createElement('script');
    script.src = 'http://[url]/Chart.min.js';
    document.body.appendChild(script);
});

// 画像、関連データ読み込み後の処理
$(window).on("load", function() {
    // プロジェクトのチケット取得
    const url = location.href;
    // グラフ生成用元データ
    const source = {};
    $.ajax({
        type: "GET",
        url: "http://[url]/projects/" + url.substr(url.lastIndexOf('/')+1) + "/issues.json",
        dataType: "json",
        success: function(resp) {
            resp.issues.forEach(function(issue) {
                // 未保持トラッカーの場合、初期データ生成
                if(source[issue['tracker']['id']] === undefined){
                    source[issue['tracker']['id']] = {
                        name: issue['tracker']['name'],
                        count: 0
                    }
                }
                // トラッカー毎のカウント加算
                source[issue['tracker']['id']]['count']++;
            });
            // グラフ描画処理実行
            drawGraph(source);
        }
    });
});

結果

上記コードでこんな感じに表示されます。
データ数、トラッカー数が少ないので質素なグラフですな。

おわりに

Graphs PluginやCharts Plugin等のグラフ描画プラグインがどの程度自由に描画できるのか把握していませんが、
view customize pluginで実装する場合はかなり自由度高そう。

また、今回は検証として各プロジェクト毎のチケット数のグラフを表示しましたが、
作業時間の「活動」毎にグラフ化したりすると、何の作業に時間がかかっているかが計測しやすくなりそうな予感。

後は、個人毎の工数も有効かもしれない。
特定の人物に負荷が掛かっていたりするのが可視化できれば、作業分散できたり。

Redmineは標準だとUI部分が物足りないので、view cutomize pluginで補っていきたい。

参考

Chart.js

chart.js 棒グラフ オプション色々

Redmineカテゴリの最新記事