Refactor: 統計ページの推移グラフの CSS のクラス化、固定値の定数化

Author: yasulab

app/models/high_charts_builder.rb

@@ -1,4 +1,6 @@
 class HighChartsBuilder
+  HIGH_CHARTS_WIDTH = 600
+
   class << self
     def global_options
       LazyHighCharts::HighChartGlobals.new do |f|
@@ -18,7 +20,7 @@ def build_annual_dojos(source)
           { title: { text: '増加数' },   tickInterval: 15, max: 75 },
           { title: { text: '累積合計' }, tickInterval: 50, max: 250, opposite: true }
         ]
-        f.chart(width: 600, alignTicks: false)
+        f.chart(width: HIGH_CHARTS_WIDTH, alignTicks: false)
         f.colors(["#A0D3B5", "#505D6B"])
       end
     end
@@ -35,7 +37,7 @@ def build_annual_event_histories(source)
           { title: { text: '開催回数' }, tickInterval:  500, max: 2000 },
           { title: { text: '累積合計' }, tickInterval: 3000, max: 12000, opposite: true }
         ]
-        f.chart(width: 600, alignTicks: false)
+        f.chart(width: HIGH_CHARTS_WIDTH, alignTicks: false)
         f.colors(["#F4C34F", "#BD2561"])
       end
     end
@@ -52,7 +54,7 @@ def build_annual_participants(source)
           { title: { text: '参加者数' }, tickInterval: 2500,  max: 12500 },
           { title: { text: '累積合計' }, tickInterval: 14000, max: 64000, opposite: true }
         ]
-        f.chart(width: 600, alignTicks: false)
+        f.chart(width: HIGH_CHARTS_WIDTH, alignTicks: false)
         f.colors(["#EF685E", "#35637D"])
       end
     end

app/views/stats/show.html.erb

@@ -20,17 +20,18 @@
     <a href="#graph">📊</a>
     推移グラフ
   </h2>
+
+  <style>
+    /* 中央寄せにする */
+    .chart-wrapper { margin: 40px auto; }
+  </style>
   <div align="center">
     <%= high_chart_globals(@high_charts_globals) %>
 
-    <!-- 道場数の推移 -->
-    <p style="margin: 40px auto;"><%= high_chart("annual_dojos", @annual_dojos_chart) %></p>
-
-    <!-- 開催回数の推移 -->
-    <p style="margin: 40px auto;"><%= high_chart("annual_event_histories", @annual_event_histories_chart) %></p>
-
-    <!-- 参加者数 -->
-    <p style="margin: 40px auto;"><%= high_chart("annual_participants", @annual_participants_chart) %></p>
+    <!-- 道場数、開催数、参加数の推移グラフ -->
+    <div class='chart-wrapper'><%= high_chart("annual_dojos",           @annual_dojos_chart) %></div>
+    <div class='chart-wrapper'><%= high_chart("annual_event_histories", @annual_event_histories_chart) %></div>
+    <div class='chart-wrapper'><%= high_chart("annual_participants",    @annual_participants_chart) %></div>
   </div>
 
   <h2 id="latest" style="margin-top: 70px; color: #333333;">