第31回/charts.jsを使って指定期間のバグ数を可視化するプラグインのサンプル作成

第31回第32回

概要

グラフの charts.js を使った HTMLのサンプルを作成しました。

1月から7月までの　7か月をX座標に、「新規バグ」「バグ総数」「バグ修正数」「バグ残数」の各月の数値のグラフにする、というものです。

同じデータで棒グラフ・折れ線グラフを表示しました。

→次回のパッチ会で、このサンプルのデータ部分(配列)をデータベースから取って、グラフを表示するプラグインのサンプル作りに挑戦したいと思っております。

サンプルHTML:

code:html

<!DOCTYPE html>

<head>

</head>

<body>

const MONTH_PERIOD = 7; //月数

let ar_labels = "1月", "2月", "3月", "4月", "5月", "6月", "7月";

let ar_new_bug = 0, 10, 10, 8, 5, 2, 1; //新規バグ

let ar_bug_sum = 0, 10, 20, 28, 33, 35, 36; //バグ総数

let ar_bug_fix = 0, 0, 5, 5, 5, 5, 5; //バグ修正

let ar_remain_bug = 0, 10, 15, 18, 18, 15, 11; //バグ残数

let max_bug_sum = Math.max(...ar_bug_sum); //バグ総数の配列最大値

let step = Math.floor( max_bug_sum / 5 ); //バグ総数の配列最大値 /5

//console.log("max_bug_sum" + max_bug_sum);

//console.log("step" + step);

let ar_datasets = [];

ar_datasets0 = {label:"新規バグ", data: ar_new_bug, backgroundColor: "rgba(0,0,255,0.5)"};

ar_datasets1 = {label:"バグ総数", data: ar_bug_sum, backgroundColor: "rgba(130,201,169,0.5)"};

ar_datasets2 = {label:"バグ修正", data: ar_bug_fix, backgroundColor: "rgba(255,183,76,0.5)"};

ar_datasets3 = {label:"バグ残数", data: ar_remain_bug, backgroundColor: "rgba(255,16,16,0.5)"};

let ctx = document.getElementById("myBarChart");

let myBarChart = new Chart(ctx, {

type: 'bar',//棒グラフを指定

data: {

labels: ar_labels, //X座標のラベル指定(配列)

datasets: ar_datasets, //データセット指定(配列)

options: {

title: {

display: true,

text: 'バグ推移'

scales: {

yAxes: [{

ticks: {

suggestedMax: max_bug_sum, //バグ総数の最大値をグラフのMAXに指定

suggestedMin: 0, //0を座標の MINに指定

stepSize: step, // バグ総数 /5 を間隔にする

callback: function(value, index, values){

return value + '件'

}

}]

}

});

</script>

</body>

</html>

設計:

プラグイン名: redmine_sample_graph

参考プラグイン: https://github.com/redmica/redmica_ui_extension/

画面(UI)

新しいタブにする?

どこかのタブの一部にする?

マクロを置いたところにレンダリングする?

まずは http://localhost:3000/bug_convergence_curve で開くことにした

グラフは、プロジェクトのVersions#indexのサイドバーにあるボタンを起点に、別ビューで開くようにする

https://mseeeen.msen.jp/plugin-hooks-in-redmine/#:~:text=issues%2F_sidebar

入力は現在のプロジェクトの全Versionsを取れれば良い

フィルタは考慮しない

ただし、プロジェクト内のロードマップ(複数バージョン)

サブプロジェクトのチケットはデフォルトでは考慮しない

トラッカーはバグだけを対象にしたい

どのトラッカーをバグとするかは設定が必要

=> 将来的にはプラグイン設定で指定できると良い

モデル

つくらないことにしよう

マイグレーションも不要

コントローラ

動的にHTMLをレンダリングする?

.html.erb などで、データを埋め込んでクライアント側はそのまま表示

静的なHTMLからAPI経由でデータを持ってくる?

javascript の document.onload(function() { let ar_new_bug = await fetch(" ... ") ;} ぽく

理想を言えば、期間の指定などでできるこちらの方式の良いが、一旦保留

データは?

基本入力は該当プロジェクトのVersions

実装:

M: (なし)

C: plugins/redmine_sample_graph/app/controllers/bug_convergence_curve_controller.rb

V: plugins/redmine_sample_graph/app/views/bug_convergence_curve/show.html.erb

ボタンを作る

新しいビューを開くためのボタン。パラメータとしてプロジェクト名を渡す。

ビュー

そのプロジェクトの全バージョン(または選択したバージョン)でクローズしたバグ数をグラフにする。

横軸はバージョン

縦軸は閉じたバグの件数

コントローラーを作る

Work In Progress ですが、https://github.com/redmine-patch-meetup/redmine_sample_graph に pushしました。

=== ここから第32回 ===

清水さん環境での更新

プロジェクト概要の右下にグラフ表示

プロジェクトのタブにグラフ表示

参考: monitoring&controlloingプラグイン

https://github.com/alexmonteiro/Redmine-Monitoring-Controlling

GitHubの方に更新適用

完了 => PullRequest作成に切り替え

高野さんのPullRequest内容確認

以下の動作確認OK

code:erb

Issues

<ol>

<% version.fixed_issues.each do |issue| %>

<% end %>

</ol>

Versionビューからなので値が入っているよう

今回はプロジェクトコントローラで設定したインスタンス変数(@project)からなので、以下で同様に動作確認

code:erb

<ol>

<% @project.versions.each do |version| %>

<% version.fixed_issues.each do |issue| %>

<% end %>

</ol>

eCookbook内でOPEN状態のバージョンが少なかったため、バージョン 1.0 をオープン、かつサブプロジェクト設定にして、プロジェクト配下のバージョンが空のチケットに設定した

期間の指定に関しては、直近Nバージョンなどで指定できる形が望ましい。

今後の課題

ChartJSにどのように統計データを渡すか？

清水さんの方で検討

なるべく負荷がかからない形が望ましい

SQLの実行回数が多くならないようにする

上に上がっているMonitoring&Controllingプラグインでは表示に時間がかかるとのこと

キャッシュを利用？

https://railsguides.jp/caching_with_rails.html

1日1回の夜間バッチ処理やJSONで中間ファイル保持など

GitHub/GitLabライクなアクティビティ表示も、同様にデータの渡し方や表示場所をどうするかも検討

可能そうであれば、同様にsample_graphプラグインへの組み込みを検討