[% nr = uniqnumber() %]
<div id="flotgraph[% nr %]" class="flotgraph"></div>
<script>
  var d1 = {
      label: "[% loc("Availability") %]",
      color: "rgb(82, 167, 82)",
      lines: {
        fill:  true,
        steps: true,
        fillColor: { colors: [ { opacity: 0.6 }, { opacity: 0.9 } ] }
      },
      data: [% encode_json_obj(data.tvalues) %]
  }
  if(d1.data.length > 2) {
    var tickDur = d1.data[d1.data.length-1][0] - d1.data[d1.data.length-2][0];
    d1.data.push([d1.data[d1.data.length-1][0]+tickDur, 0]); // add fake day, otherwise last day would not be plotted completely
  }
  var d2 = {
      color: "rgb(236, 193, 77)",
      lines: { show: true },
      data: [[d1.data[0][0], [% param.sla %]], [d1.data[d1.data.length-1][0], [% param.sla %]]]
  }
  var tmp      = calc_time_markings_and_ticks(d1.data, '[% param.breakdown %]');
  var ticks    = tmp[0];
  var markings = tmp[1];
  $.plot($("#flotgraph[% nr %]"), [d1,d2], {
      series: {
          lines: { show:  true }
      },
      xaxis: {
        mode: "time",
        dayNames:   [% encode_json_obj(dayNames, 1) %],
        ticks:      ticks
      },
      yaxis: {
        ticks: 10,
        min:   [% param.graph_min_sla %],
        max:  100,
        tickFormatter: function(val, axis) { return val + '%'}
      },
      grid: { markings: markings },
      legend: { position: 'se' }
  });

  function calc_time_markings_and_ticks(data, breakdown) {
    var monthNames = [% encode_json_obj(monthNames, 1) %];
    var ticks      = [];
    var markings   = [];

    /* calculate ticks when using breakdown month by days */
    if(breakdown == 'days' && data.length < 40) {
      jQuery.each(data, function(i, pt) {
        var ts  = pt[0];
        var d   = new Date(ts);
        var day = d.getUTCDate()+1;

        var tick = [ts, ''];
        ticks.push(tick);

        if(day-1 == 1) {
          if(ticks.length >= 2) {
            ticks[ticks.length-2][1] = monthNames[d.getUTCMonth()];
          } else {
            ticks.push([ts-86400000, monthNames[d.getUTCMonth()]]);
          }
          if(ticks.length >= 3) {
            ticks[ticks.length-3][1] = ""; // avoid overlapping axis text, remove day 30
          }
          markings.push({ xaxis: { from: ts-86400000, to: ts-86400000 }, color: "#FF0000", lineWidth: 2 });
        }
        else if(day%5 == 0) {
          tick[1] = day;
          markings.push({ xaxis: { from: ts, to: ts }, color: "#000000" });
        }
      });
    }

    /* calculate ticks when using breakdown year by days/weeks */
    var lastmonth = -1;
    var lastyear  = -1;
    if(breakdown == 'weeks' || (breakdown == 'days' && data.length >= 40)) {
      jQuery.each(data, function(i, pt) {
        var ts  = pt[0];
        var d   = new Date(ts);
        var month = d.getUTCMonth();
        var year  = d.strftime("%Y");
        if(year != lastyear && lastyear != -1) {
          ticks.push([ts, year]);
          markings.push({ xaxis: { from: ts, to: ts}, color: "#333333", lineWidth: 1 });
        }
        if(lastmonth != -1 && month != lastmonth) {
          // get ts for first day of month
          var first = new Date(ts);
          first.setDate(1);
          if(month == 0) {
            ticks.push([first.getTime(), ""]);
          } else {
            ticks.push([first.getTime(), monthNames[d.getUTCMonth()]]);
          }
        }
        lastmonth = month;
        lastyear  = year;
      });
    }
    return([ticks, markings]);
  }
</script>

[% IF param.breakdown == 'days' && data.tvalues.size < 40 %]
<style type="text/css">
DIV.axis_x {
  left: 6px;
  position: relative;
}
</style>
[% ELSIF param.breakdown == 'weeks' || (param.breakdown == 'days' && data.tvalues.size >= 40) %]
<style type="text/css">
DIV.axis_x {
  left: 10px;
  position: relative;
}
</style>
[% END %]
