Rails mapメソッドとchartkickでグラフを量産する

はじめに

こんにちは。
Rails6アプリケーションでgem"chartkick"とmapメソッドを使って、対応するデータのグラフを自動的に量産する方法について解説します。
Rails5をお使いの方はchartkick導入時のコマンドが変わるらしいので公式サイトを参考にしてください。

chartkickの導入

まず以下のようにgemfileにchartkickを追記します。

gemfile.rb

gem "chartkick"

その後いつも通りbundle installします。
yarn addコマンドでWebpackerを走らせて依存オブジェクト（cahrtkick）の追加とインストールを行います。( yarn add の解説 )

terminal

bundle install
yarn add chartkick chart.js

最後に、javascript:app/javascript/packs/application.jsに以下を追記します。

app/javascript/packs/application.js

import "chartkick/chart.js"

これでchartkickの導入は完了です。
この後mapメソッドで対応するデータのグラフを自動的に量産する方法を解説するので、「表示したいグラフは１つだけだよ！」という方はchartkick公式サイトを参考にした方が早いかもしれません。

前述　〜データの解説〜

本題に入る前に、グラフ挿入時のコードに出てくるモデルとそのカラム名について紹介します。

データモデルは以下の表の通り。
ExerciseモデルとRecordモデルは１対多のアソシエーションです。
グラフはRecordモデルのweightカラムとreps_countカラムの値をもとに算出されたRMカラムの値とdateカラムの日付で、紐づいたExerciseカラムの数だけ描画します。

Exercise	Record
id	id
name	exercise_id
	weight
	reps_count
	RM
	date

グラフの挿入

というわけで本題です。
mapメソッドを使って、対応するデータのグラフを自動的に量産する方法を解説します。

exerciseコントローラのindexアクション内でインスタンス変数にExerciseモデルの全てのデータを取得します。

exercises_controller.rb

class ExercisesController < ApplicationController
  def index
    @exercises = Exercise.all
  end
end

取得したインスタンス変数のレコードの数だけmapメソッドで繰り返します。
mapメソッド内では名前とグラフを出力します。

exercises/index.html.erb

<h2>グラフページ</h2>
<% @exercises.map do |exercise| %>
  <br>
  <%= link_to exercise.name %>
  <% graph = Record.where(name_id: exercise.id).pluck(:date, :RM) %>
  <%= line_chart graph, min: 30, max: 45 %>
<% end %>

４行目で、名前(mapメソッドで繰り返されているexerciseのnameカラムの値)を出力。

５行目で、Recordモデルのname_idカラムの値とmapで繰り返されているexerciseのidの値が一致するレコードをwhereメソッドで取り出し、そのレコードのdateカラムとRMカラムの値をgraphという変数に配列形式で代入する。
graph = [:date, :RM]

６行目で、５行目で定義したgraph変数の値を使ってグラフを描画。
line_chartはchartkickのコマンドで折れ線グラフの描画を意味します。
オプション引数でグラフの縦軸(RM)の表示範囲を30〜45に定義。

※ インスタンス変数＠exercisesとmap内で繰り返されるexerciseのスペルミスにご注意ください。

これで http://localhost:3000/exercises/index にアクセスするとグラフが表示されます。

参考

今回は折れ線グラフを挿入しましたが、他の種類のグラフを挿入する場合
chartkick公式サイトを参考にしてください。

Twitterで日々の学習をアウトプットしています。
未熟者ですが、ご興味あれば覗いてやってください。→Twitter