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..d3bce45e974
--- /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('lib_chart')
+  = 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')
+            &nbsp;
+            = 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);