- @no_container = true
- @breadcrumb_title = "Charts"
- 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);