kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Merge branch 'make-commit-graphs-responsive' into 'master' 

Make commit graphs responsive to window width changes

Closes #2653

See merge request !1395
This commit is contained in:
Robert Speicher 2015-09-23 16:31:32 +00:00
parent cfe6634078 ef2679d0b9
commit 32cb9d215d
2 changed files with 38 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG
View File

@ -5,6 +5,7 @@ v 8.1.0 (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)

80
app/views/projects/graphs/commits.html.haml
View File

@ -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 }
# get selector by context
ctx = selector.get(0).getContext("2d")
# pointing parent container to make chart.js inherit its width
container = $(selector).parent()
generateChart = ->
selector.attr('width', $(container).width())
new Chart(ctx).Bar(data, options)
# enabling auto-resizing
$(window).resize( generateChart )
generateChart()
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 = $("#hour-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)
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}
}]
}
dayData = chartData(#{@commits_per_week_days.keys.to_json}, #{@commits_per_week_days.values.to_json})
responsiveChart($('#weekday-chart'), dayData)
ctx = $("#weekday-chart").get(0).getContext("2d");
new Chart(ctx).Bar(data,{"scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2})
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}
}]
}
ctx = $("#month-chart").get(0).getContext("2d");
new Chart(ctx).Bar(data, {"scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2})
monthData = chartData(#{@commits_per_month.keys.to_json}, #{@commits_per_month.values.to_json})
responsiveChart($('#month-chart'), monthData)