過去7日間の投稿をグラフ表示 Chartkick Turbolinks無効化 chart.js

<h2>やりたいこと</h2>
過去７日間の投稿数を取得し、折れ線グラフで表示する.
グラフが表示できなかったり、１２日分表示してしまったり・・・ととにかく大変でした。
そもそもJavascriptの知識が浅いため、、難しかったです。

![スクリーンショット 2021-07-26 8.51.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633266/2f664058-26d2-a516-6794-4ad749daea46.png)

<h2>注意</h2>
今回gemでChartkickを入れてますが、グラフの記述は、
完全にchart.jsの基本フォーマットで記載しています。
Chartkickはchart.jsもサポートしているため、gemがChartkickで、
グラフの記述がchart.jsの記述方法でもグラフが表示されます。

<h3>7日間の投稿データ取得</h3>

前回作成した記事と同様です。グラフ化が大変だったのでここはサクッと行きます:anchor:

https://qiita.com/ki_87/items/cbfdb803355ba4e4fe55

違う点は、、
コントローラーに記述しなくても、モデルで定義した値をviewで使用できるということです。

<h4>７日間の投稿データ取得</h4>

```perl:models/book.rb
 　　scope :created_today, -> { where(created_at: Time.zone.now.all_day) } 
  scope :created_yesterday, -> { where(created_at: 1.day.ago.all_day) } 
  scope :created_2days, -> { where(created_at: 2.days.ago.all_day) } 
  scope :created_3days, -> { where(created_at: 3.days.ago.all_day) } 
  scope :created_4days, -> { where(created_at: 4.days.ago.all_day) } 
  scope :created_5days, -> { where(created_at: 5.days.ago.all_day) } 
  scope :created_6days, -> { where(created_at: 6.days.ago.all_day) } 
```

```perl:users_controller.rb
def show
    @user=User.find(params[:id])
    @books = @user.books.page(params[:page]).reverse_order
    @today_book =  @books.created_today
    @yesterday_book = @books.created_yesterday
    @this_week_book = @books.created_this_week
    @last_week_book = @books.created_last_week
    @book=Book.new
end
```
```perl:users/show.html.erb
<table class="table">
   <thead>
    <tr>
     <th>６日前</th>
     <th>5日前</th>
     <th>4日前</th>
     <th>3日前</th>
     <th>２日前</th>
     <th>昨日</th>
     <th>今日</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <th><%= @books.created_6days.count %></th>
     <th><%= @books.created_5days.count %></th>
     <th><%= @books.created_4days.count %></th>
     <th><%= @books.created_3days.count %></th>
     <th><%= @books.created_2days.count %></th>
     <th><%= @yesterday_book.count %></th>
     <th><%= @today_book.count %></th>
    </tr>
   </tbody>
  </table>
```

<h4>:point_up:もっと綺麗なコンパクトなコードにリファクタリング可能です</h4>

https://qiita.com/ki_87/items/d22238d14b298ef22a85

  
<h2>グラフ化①・・・chart.js ? chartkick をいれる</h2>

chart.jsで検索するとchartkickが出てきます。
もう何を入れるのか分からなくなりました:cry:

→chartkickのgemはchart.jsもカバーしてるので、
chartkickを入れました。

https://qiita.com/Y_uuu/items/0d57748954c7cdb9bbcb

<h4>Gemインストール</h4>

以下の記事の通り行いました。groupdateもインストールしてしまいましたが、今回使わなかったです。
（正しくは、理解できず、うまく使えなかったです・・・)

https://qiita.com/nakamura999/items/d0ebc9fb8cb4a3c0f135

<h2>Turbolinksの無効化</h2>

無効化にしないと、グラフが表示されないのではないかと思います。
と、思っていたのですが、別のアプリケーションで無効果せずに作成したところ、
表示されました。グラフが表示されない場合は、無効化を試してみてください。

私は、とにかくTurbolinksの記述を全削除してしまいましたが、個別削除がベストですね。
以下の記事で全削除できます。

https://qiita.com/keitah/items/05f02efe4e11ab2473e8

<h2>Viewの記述</h2>

chart.jsの基本フォーマットを元に作成しております。

https://www.chartjs.org/docs/latest/

Turbolinks全削除済みの場合

```users/show.html.erb
<canvas id="myChart" width="300" height="100"> </canvas>

    <script> 
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',                      
        data: {
            labels: ['6日前', '5日前', '4日前', '3日前', '2日前', '1日前', '今日'],
            datasets: [{
                label: "投稿数",
                data: [<%= @books.created_6days.count %>, <%= @books.created_5days.count %>, <%= @books.created_4days.count %>, <%= @books.created_3days.count %>, <%= @books.created_2days.count %>, <%= @yesterday_book.count %>, <%= @today_book.count%>],
                backgroundColor: 'rgba(255, 80, 120, 1.0)',
                borderColor: 'rgba(255, 80, 120, 1.0)',
                fill: false
            }]
        },
    });
</script>
```

<details><summary>Turbolinksを個別で無効化</summary><div>

```
<canvas id="myLineChart"></canvas>
  <script>
      $(document).on('turbolinks:load', function() {
      var ctx = document.getElementById("myLineChart");
      var myLineChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['6日前', '5日前', '4日前', '3日前', '2日前', '1日前', '今日'],
          datasets: [
            {
              label: '投稿した本の数',
              data: [<%= @books.created_6days.count %>, <%= @books.created_5days.count %>, <%= @books.created_4days.count %>, <%= @books.created_3days.count %>, <%= @books.created_2days.count %>, <%= @yesterday_book.count %>, <%= @today_book.count%>],
              borderColor: "rgba(0,0,255,1)",
              backgroundColor: "rgba(0,0,0,0)"
            }
          ],
        },
        options: {
          title: {
            display: true,
            text: '7日間の投稿数の比較'
          },
          scales: {
            yAxes: [{
              ticks: {
                suggestedMax: 10,
                suggestedMin: 0,
                stepSize: 1,
                callback: function(value, index, values){
                  return  value
                }
              }
            }]
          },
        }
      });
    });
  </script>
```


</div></details>

これで、折れ線グラフの表示ができました。


<h2>参考にさせていただいた記事</h2>

以下の記事でも、グラフができましたが12日分表示されてしまいました。
どうやって７日間分に抑えれば良いのだろう？？

https://qiita.com/kei-kun1960/items/b84a7e421e3ed2620be9

今回、groupdate使えこなせてないですが、使えたら便利

https://qiita.com/nakamura999/items/d0ebc9fb8cb4a3c0f135