- page_title "Commits", "Graphs"
= render "header_title"
.tree-ref-holder
  = render 'shared/ref_switcher', destination: 'graphs_commits'
= render 'head'

%p.lead
  Commit statistics for
  %strong #{@ref}
  #{@commits_graph.start_date.strftime('%b %d')} - #{@commits_graph.end_date.strftime('%b %d')}

.row
  .col-md-6
    %ul
      %li
        %p.lead
          %strong #{@commits_graph.commits.size}
          commits during
          %strong #{@commits_graph.duration}
          days
      %li
        %p.lead
          Average
          %strong #{@commits_graph.commit_per_day}
          commits per day
      %li
        %p.lead
          Contributed by
          %strong #{@commits_graph.authors}
          authors
  .col-md-6
    %div
      %p.slead
        Commits per day of month
      %canvas#month-chart
.row
  .col-md-6
    %div
      %p.slead
        Commits per day hour (UTC)
      %canvas#hour-chart
  .col-md-6
    %div
      %p.slead
        Commits per weekday
      %canvas#weekday-chart

:coffeescript
  responsiveChart = (selector, data) ->
    options = { "scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2, maintainAspectRatio: false }

    # get selector by context
    ctx = selector.get(0).getContext("2d")
    # pointing parent container to make chart.js inherit its width
    container = $(selector).parent()

    generateChart = ->
      selector.attr('width', $(container).width())
      new Chart(ctx).Bar(data, options)

    # enabling auto-resizing
    $(window).resize( generateChart )

    generateChart()

  chartData = (keys, values) ->
    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
      }]
  }

  hourData = chartData(#{@commits_per_time.keys.to_json}, #{@commits_per_time.values.to_json})
  responsiveChart($('#hour-chart'), hourData)

  dayData = chartData(#{@commits_per_week_days.keys.to_json}, #{@commits_per_week_days.values.to_json})
  responsiveChart($('#weekday-chart'), dayData)

  monthData = chartData(#{@commits_per_month.keys.to_json}, #{@commits_per_month.values.to_json})
  responsiveChart($('#month-chart'), monthData)