Make commit graphs responsive to window width changes

Closes #2653

2 files changed, 36 insertions, 41 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 1eb97a645b8..7d9a250ba8c 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -5,6 +5,7 @@ v 8.0.2 (unreleased)
 
 v 8.0.1
   - Improve CI migration procedure and documentation
+  - Make commit graphs responsive to window width changes (Stan Hu)
 
 v 8.0.0
   - Fix Markdown links not showing up in dashboard activity feed (Stan Hu)
diff --git a/app/views/projects/graphs/commits.html.haml b/app/views/projects/graphs/commits.html.haml
index bf0cac539b8..112be875b6b 100644
--- a/app/views/projects/graphs/commits.html.haml
+++ b/app/views/projects/graphs/commits.html.haml
@@ -32,61 +32,55 @@
     %div
       %p.slead
         Commits per day of month
-      %canvas#month-chart{width: 800, height: 400}
+      %canvas#month-chart
 .row
   .col-md-6
     %div
       %p.slead
         Commits per day hour (UTC)
-      %canvas#hour-chart{width: 800, height: 400}
+      %canvas#hour-chart
   .col-md-6
     %div
       %p.slead
         Commits per weekday
-      %canvas#weekday-chart{width: 800, height: 400}
+      %canvas#weekday-chart
 
 :coffeescript
-  data = {
-    labels : #{@commits_per_time.keys.to_json},
-    datasets : [{
-      fillColor : "rgba(220,220,220,0.5)",
-      strokeColor : "rgba(220,220,220,1)",
-      barStrokeWidth: 1,
-      barValueSpacing: 1,
-      barDatasetSpacing: 1,
-      data : #{@commits_per_time.values.to_json}
-    }]
-  }
+  responsiveChart = (selector, data) ->
+    options = { "scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2, maintainAspectRatio: false }
 
-  ctx = $("#hour-chart").get(0).getContext("2d");
-  new Chart(ctx).Bar(data,{"scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2})
+    # get selector by context
+    ctx = selector.get(0).getContext("2d")
+    # pointing parent container to make chart.js inherit its width
+    container = $(selector).parent()
 
-  data = {
-    labels : #{@commits_per_week_days.keys.to_json},
-    datasets : [{
-      fillColor : "rgba(220,220,220,0.5)",
-      strokeColor : "rgba(220,220,220,1)",
-      barStrokeWidth: 1,
-      barValueSpacing: 1,
-      barDatasetSpacing: 1,
-      data : #{@commits_per_week_days.values.to_json}
-    }]
-  }
+    generateChart = ->
+      selector.attr('width', $(container).width())
+      new Chart(ctx).Bar(data, options)
+
+    # enabling auto-resizing
+    $(window).resize( generateChart )
 
-  ctx = $("#weekday-chart").get(0).getContext("2d");
-  new Chart(ctx).Bar(data,{"scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2})
+    generateChart()
 
-  data = {
-    labels : #{@commits_per_month.keys.to_json},
-    datasets : [{
-      fillColor : "rgba(220,220,220,0.5)",
-      strokeColor : "rgba(220,220,220,1)",
-      barStrokeWidth: 1,
-      barValueSpacing: 1,
-      barDatasetSpacing: 1,
-      data : #{@commits_per_month.values.to_json}
-    }]
+  chartData = (keys, values) ->
+    data = {
+      labels : keys,
+      datasets : [{
+        fillColor : "rgba(220,220,220,0.5)",
+        strokeColor : "rgba(220,220,220,1)",
+        barStrokeWidth: 1,
+        barValueSpacing: 1,
+        barDatasetSpacing: 1,
+        data : values
+      }]
   }
 
-  ctx = $("#month-chart").get(0).getContext("2d");
-  new Chart(ctx).Bar(data, {"scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2})
+  hourData = chartData(#{@commits_per_time.keys.to_json}, #{@commits_per_time.values.to_json})
+  responsiveChart($('#hour-chart'), hourData)
+
+  dayData = chartData(#{@commits_per_week_days.keys.to_json}, #{@commits_per_week_days.values.to_json})
+  responsiveChart($('#weekday-chart'), dayData)
+
+  monthData = chartData(#{@commits_per_month.keys.to_json}, #{@commits_per_month.values.to_json})
+  responsiveChart($('#month-chart'), monthData)