Commit ef2679d0 authored by Stan Hu's avatar Stan Hu

Make commit graphs responsive to window width changes

Closes #2653
parent 9e139255
...@@ -2,6 +2,7 @@ Please view this file on the master branch, on stable branches it's out of date. ...@@ -2,6 +2,7 @@ Please view this file on the master branch, on stable branches it's out of date.
v 8.0.1 v 8.0.1
- Improve CI migration procedure and documentation - Improve CI migration procedure and documentation
- Make commit graphs responsive to window width changes (Stan Hu)
v 8.0.0 v 8.0.0
- Fix Markdown links not showing up in dashboard activity feed (Stan Hu) - Fix Markdown links not showing up in dashboard activity feed (Stan Hu)
......
...@@ -32,61 +32,55 @@ ...@@ -32,61 +32,55 @@
%div %div
%p.slead %p.slead
Commits per day of month Commits per day of month
%canvas#month-chart{width: 800, height: 400} %canvas#month-chart
.row .row
.col-md-6 .col-md-6
%div %div
%p.slead %p.slead
Commits per day hour (UTC) Commits per day hour (UTC)
%canvas#hour-chart{width: 800, height: 400} %canvas#hour-chart
.col-md-6 .col-md-6
%div %div
%p.slead %p.slead
Commits per weekday Commits per weekday
%canvas#weekday-chart{width: 800, height: 400} %canvas#weekday-chart
:coffeescript :coffeescript
data = { responsiveChart = (selector, data) ->
labels : #{@commits_per_time.keys.to_json}, options = { "scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2, maintainAspectRatio: false }
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}
}]
}
ctx = $("#hour-chart").get(0).getContext("2d"); # get selector by context
new Chart(ctx).Bar(data,{"scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2}) ctx = selector.get(0).getContext("2d")
# pointing parent container to make chart.js inherit its width
container = $(selector).parent()
data = { generateChart = ->
labels : #{@commits_per_week_days.keys.to_json}, selector.attr('width', $(container).width())
datasets : [{ new Chart(ctx).Bar(data, options)
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)", # enabling auto-resizing
barStrokeWidth: 1, $(window).resize( generateChart )
barValueSpacing: 1,
barDatasetSpacing: 1,
data : #{@commits_per_week_days.values.to_json}
}]
}
ctx = $("#weekday-chart").get(0).getContext("2d"); generateChart()
new Chart(ctx).Bar(data,{"scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2})
data = { chartData = (keys, values) ->
labels : #{@commits_per_month.keys.to_json}, data = {
datasets : [{ labels : keys,
fillColor : "rgba(220,220,220,0.5)", datasets : [{
strokeColor : "rgba(220,220,220,1)", fillColor : "rgba(220,220,220,0.5)",
barStrokeWidth: 1, strokeColor : "rgba(220,220,220,1)",
barValueSpacing: 1, barStrokeWidth: 1,
barDatasetSpacing: 1, barValueSpacing: 1,
data : #{@commits_per_month.values.to_json} barDatasetSpacing: 1,
}] data : values
}]
} }
ctx = $("#month-chart").get(0).getContext("2d"); hourData = chartData(#{@commits_per_time.keys.to_json}, #{@commits_per_time.values.to_json})
new Chart(ctx).Bar(data, {"scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2}) 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)
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment