Implement languages graph page

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

2 files changed, 34 insertions, 0 deletions

diff --git a/app/views/projects/graphs/_head.html.haml b/app/views/projects/graphs/_head.html.haml
index 03d0733f913..a47643bd09c 100644
--- a/app/views/projects/graphs/_head.html.haml
+++ b/app/views/projects/graphs/_head.html.haml
@@ -3,6 +3,8 @@
     = link_to 'Contributors', namespace_project_graph_path
   = nav_link(action: :commits) do
     = link_to 'Commits', commits_namespace_project_graph_path
+  = nav_link(action: :languages) do
+    = link_to 'Languages', languages_namespace_project_graph_path
   - if @project.builds_enabled?
     = nav_link(action: :ci) do
       = link_to ci_namespace_project_graph_path do
diff --git a/app/views/projects/graphs/languages.html.haml b/app/views/projects/graphs/languages.html.haml
new file mode 100644
index 00000000000..a7fab5b6d72
--- /dev/null
+++ b/app/views/projects/graphs/languages.html.haml
@@ -0,0 +1,32 @@
+- page_title "Languages", "Graphs"
+= render "header_title"
+= render 'head'
+
+.gray-content-block.append-bottom-default
+  .oneline
+    Programming languages used in this repository
+
+.row
+  .col-md-8
+    %canvas#languages-chart{ height: 400 }
+  .col-md-4
+    %ul.bordered-list
+      - @languages.each do |language|
+        %li
+          %span{ style: "color: #{language[:color]}" }
+            = icon('circle')
+           
+          = language[:label]
+          .pull-right
+            = language[:value]
+            \%
+
+:javascript
+  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);