diff options
Diffstat (limited to 'app/views/projects/graphs/charts.html.haml')
-rw-r--r-- | app/views/projects/graphs/charts.html.haml | 127 |
1 files changed, 127 insertions, 0 deletions
diff --git a/app/views/projects/graphs/charts.html.haml b/app/views/projects/graphs/charts.html.haml new file mode 100644 index 00000000000..464ac34d961 --- /dev/null +++ b/app/views/projects/graphs/charts.html.haml @@ -0,0 +1,127 @@ +- @no_container = true +- page_title "Charts" +- 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); |