%h4 Build charts
%p
   
  %span.cgreen
    = icon("circle")
    success
   
  %span.cgray
    = icon("circle")
    all

.prepend-top-default
  %p.light
    Builds for last week
    (#{date_from_to(Date.today - 7.days, Date.today)})
  %canvas#weekChart{height: 200}

.prepend-top-default
  %p.light
    Builds for last month
    (#{date_from_to(Date.today - 30.days, Date.today)})
  %canvas#monthChart{height: 200}

.prepend-top-default
  %p.light
    Builds for last year
  %canvas#yearChart.padded{height: 250}

- [:week, :month, :year].each do |scope|
  :javascript
    var data = {
      labels : #{@charts[scope].labels.to_json},
      datasets : [
        {
          fillColor : "#7f8fa4",
          strokeColor : "#7f8fa4",
          pointColor : "#7f8fa4",
          pointStrokeColor : "#EEE",
          data : #{@charts[scope].total.to_json}
        },
        {
          fillColor : "#44aa22",
          strokeColor : "#44aa22",
          pointColor : "#44aa22",
          pointStrokeColor : "#fff",
          data : #{@charts[scope].success.to_json}
        }
      ]
    }
    var ctx = $("##{scope}Chart").get(0).getContext("2d");
    var options = { scaleOverlay: true, responsive: true, maintainAspectRatio: false };
    if (window.innerWidth < 768) {
      // Scale fonts if window width lower than 768px (iPad portrait)
      options.scaleFontSize = 8
    }
    new Chart(ctx).Line(data, options);