【Rails】chartkickを使用してシンプルなグラフを扱う

※rails6を使用しています

# chartkick とは
Railsで簡単にグラフを作成することができるライブラリです。
Railsで使用することが主な目的のようですが、多言語（React, Vue.js, Ruby, Python, Elixir, and Clojure）でもグラフを作成することができます。
github　[chartkick](https://github.com/ankane/chartkick)

https://chartkick.com/

![Line_chart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730527/eb4724cf-a04d-695b-b92b-272052504fae.png)
![area_chart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730527/401b2bd8-a834-0bbb-2228-bf9097426d17.png)

他にもいくつかのグラフがありますが、今回は折れ線グラフで実装します。


## 完成イメージ
![chart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730527/155914b2-d40d-547c-3587-ccbf134ef195.png)

## 前置き
今回は、タスクの投稿数を一週間(8日間)の折れ線グラフとして表したものです。
グラフのX軸が日付、Y軸が投稿数、を表したものです。


## chartkickをインストールします
![Gemfile:chartkick.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730527/ffad3ea7-3c65-af82-84b5-077b614130bd.png)
gemをbundle installしていきます。

```:Gemfile
:
:
gem "chartkick"
```

下記からは、Rails7,Rails6,Rails5以前かで手順が変わります。
![VER.chartkick.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2730527/bc5ea66e-0510-0f3d-5894-adb6558a557c.png)

### Rails 7 / Importmap
`config/importmap.rb`に追加
```:config/importmap.rb
pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"
```
`app/javascript/packs/application.js`に追加
```:app/javascript/packs/application.js
import "chartkick"
import "chart.bundle"
```

### Rails 6 / Webpacker
##### <font color="Red">※今回は、rails6を使用している為、以下を実行しています。</font>
`yarn`で`chart.js`をインストール
```:terminal
$ yarn add chartkick chart.js
```

`app/javascript/packs/application.js`に追加
```:app/javascript/packs/application.js
import "chartkick/chart.js"
```
### Rails 5 / Sprockets
`application.js` へ以下を追記
```:app/assets/javascripts/application.js
//= require chartkick
//= require Chart.bundle
```

### グラフ表示

##### controllerとviewを記述していきます

## viewに記述していきます

```:tasks/show.html.erb
  <div class="container mt-3">
    <h3 class="text-center basic">
      Commit Paraphrases
    </h3>
    <%= area_chart @line_chart_data %>  # ここでグラフ表示
  </div>
```
## controllerに記述していきます

```:tasks_controller.rb
  def show
    @task = Task.find(params[:id])

    # タスク折れ線グラフ
    @line_chart_data = [] # 空のチャート用のインスタンス変数を用意
    base_days = [*Date.current - 1.week .. Date.current]  # 日付データの配列を生成
    base_days.each do |base_day|
      # 1日の投稿数を取得
      day_count = Task.where(user_id: current_user.id).where(created_at: base_day.beginning_of_day...base_day.end_of_day).count
      # 取得した投稿数を配列としてチャート用のインスタンス変数に日付とともに代入
      @line_chart_data << [base_day.strftime('%Y/%m/%d').to_s, day_count]
    end
  end
```
説明していきます！
@line_chart_data = []
空の配列をインスタンス変数を用意します

`base_days = [*Date.current - 1.week .. Date.current]` 
`base_days`に、日付データの一週間の配列を生成する

※ `[*Date.current - 1.week .. Date.current]` のアスタリスクがないと配列として認識されず、rangeとなり、値を渡せない

`base_days.each do |base_day|`
each文で、base_dayのブロック変数には、一週間の中の一日が、入っている

`(created_at:base_day.beginning_of_day...base_day.end_of_day).count`
day_countには、現在ログインしているuserのIDと一日にtaskを投稿した数が入っている

`base_day.beginning_of_day`
0時0分0秒
`base_day.end_of_day`
23時59分59秒

 `@line_chart_data << [base_day.strftime('%Y/%m/%d').to_s, day_count]`
`@line_chart_data`に<font color="Orange"><<</font>で<font color="Orange">[]</font>の要素を追加する

お疲れ様です！

## 実装を終えて
y軸の投稿数1の時に、0.5が出現すること
y軸を最大値10にして、10以上になれば、y軸の最大値を増やしたい

# まとめ
chart.jsのようにJSの記述がない為、シンプルなグラフが簡単に作れます！