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

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

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

.prepend-top-default
  %p.light
    Jobs 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);