(Chart.js)チャートUIの改善

Statistics#indexのviewを改善する。

• labelから西暦を削除する。Viewに渡されたchartlabelを整形する。

const labels = chartlabel;

console.log(labels);
//["2020-01-20", "2020-01-21", "2020-01-22", "2020-01-23", "2020-01-24", "2020-01-25", "2020-01-26"]


var result = labels.map(function( value) {
    return value.substr(5);
});

console.log(result);
//["01-20", "01-21", "01-22", "01-23", "01-24", "01-25", "01-26"]

西暦は削除されたが、月が一桁の際に先頭に0が付いてしまい、見にくい。条件分岐で先頭が0の場合は０を削除したい。

ここまで考えたところで、Reportモデル生成時にラベルを整形した方が、DRYになると気づいた。

そこで、Reportを生成するサービスクラス内のchart_dataメソッドを書き換えた。

#app/lib/generate_report/report.rb
def chart_data(user, date_begin, date_range)
  # labels = date_begin..date_end).to_a
  labels = date_range.map { |date| date.strftime("%-m月%-d日") }
  y_axis_data = data_generator(user, date_begin)
  chart_data = { labels: labels, datasets: y_axis_data }
end

<参考>

Building a chart with Chart.js and Ruby on Rails

【JavaScript入門】配列処理をするmap()の使い方とMapオブジェクトの解説！

【Ruby入門】strftimeで日付・時刻を書式指定して文字列に変換する

---

• 画面幅が狭くなるごとにグラフの高さが縮んでしまう。

Chart.jsのオプションで高さを動的に設定できるようにしたい。

いままではViewファイルのJavascriptでオプションを設定していた。

サービスクラスのReportクラスから設定できる様に書き換える。

# app/lib/generate_report/report.rb
module GenerateReport
  class Report
    #省略
    
    def chart_options
      options = { responsive: true,
                  scales: {
                    yAxes: [{
                      ticks: {
                        max: 2,
                        min: -2,
                        stepSize: 1.0
                      }
                    }]
                  }
                }
    end
    
    #省略
  end