1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
- @no_container = true
- @breadcrumb_title = "Charts"
- page_title "Charts"
- if show_new_nav?
- add_to_breadcrumbs("Repository", project_tree_path(@project))
- content_for :page_specific_javascripts do
= page_specific_javascript_bundle_tag('common_d3')
= page_specific_javascript_bundle_tag('graphs')
= render "projects/commits/head"
.repo-charts{ class: container_class }
%h4.sub-header
Programming languages used in this repository
.row
.col-md-4
%ul.bordered-list
- @languages.each do |language|
%li
%span{ style: "color: #{language[:color]}" }
= icon('circle')
= language[:label]
.pull-right
= language[:value]
\%
.col-md-8
%canvas#languages-chart{ height: 400 }
.repo-charts{ class: container_class }
.sub-header-block.border-top
.row.tree-ref-header
.col-md-6
%h4
Commit statistics for
%strong= @ref
#{@commits_graph.start_date.strftime('%b %d')} - #{@commits_graph.end_date.strftime('%b %d')}
.col-md-6
.tree-ref-container
.tree-ref-holder
= render 'shared/ref_switcher', destination: 'graphs_commits'
%ul.breadcrumb.repo-breadcrumb
= commits_breadcrumbs
.row
.col-md-6
%ul.commit-stats
%li
Total:
%strong #{@commits_graph.commits.size} commits
%li
Average per day:
%strong #{@commits_graph.commit_per_day} commits
%li
Authors:
%strong= @commits_graph.authors
.col-md-6
%div
%p.slead
Commits per day of month
%canvas#month-chart
.row
.col-md-6
.col-md-6
%div
%p.slead
Commits per weekday
%canvas#weekday-chart
.row
.col-md-6
.col-md-6
%div
%p.slead
Commits per day hour (UTC)
%canvas#hour-chart
:javascript
var responsiveChart = function (selector, data) {
var options = { "scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2, maintainAspectRatio: false };
// get selector by context
var ctx = selector.get(0).getContext("2d");
// pointing parent container to make chart.js inherit its width
var container = $(selector).parent();
var generateChart = function() {
selector.attr('width', $(container).width());
if (window.innerWidth < 768) {
// Scale fonts if window width lower than 768px (iPad portrait)
options.scaleFontSize = 8
}
return new Chart(ctx).Bar(data, options);
};
// enabling auto-resizing
$(window).resize(generateChart);
return generateChart();
};
var chartData = function (keys, values) {
var 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
}]
};
return data;
};
var hourData = chartData(#{@commits_per_time.keys.to_json}, #{@commits_per_time.values.to_json});
responsiveChart($('#hour-chart'), hourData);
var dayData = chartData(#{@commits_per_week_days.keys.to_json}, #{@commits_per_week_days.values.to_json});
responsiveChart($('#weekday-chart'), dayData);
var monthData = chartData(#{@commits_per_month.keys.to_json}, #{@commits_per_month.values.to_json});
responsiveChart($('#month-chart'), monthData);
var data = #{@languages.to_json};
var ctx = $("#languages-chart").get(0).getContext("2d");
var options = {
scaleOverlay: true,
responsive: true,
maintainAspectRatio: false
}
var myPieChart = new Chart(ctx).Pie(data, options);
|
