$(document).ready(function() {
  var buildNumbers = <%= JSON.stringify(buildNumbers) %>;

  var failedFeatures = <%= JSON.stringify(failedFeatures) %>;
  var passedFeatures = <%= JSON.stringify(passedFeatures) %>;

  var failedScenarios = <%= JSON.stringify(failedScenarios) %>;
  var passedScenarios = <%= JSON.stringify(passedScenarios) %>;

  var passedSteps = <%= JSON.stringify(passedSteps) %>;
  var failedSteps = <%= JSON.stringify(failedSteps) %>;
  var skippedSteps = <%= JSON.stringify(skippedSteps) %>;
  var pendingSteps = <%= JSON.stringify(pendingSteps) %>;
  var undefinedSteps = <%= JSON.stringify(undefinedSteps) %>;

  var durations = <%= JSON.stringify(durations) %>;

  var chartFeaturesData = {
    labels: buildNumbers,
    datasets: [
      {
        label: "Failed",
        data: failedFeatures,
        fill: true,
        lineTension: 0.1,
        backgroundColor: "#F2928C", // same as failed class in css file
        borderColor: "rgba(192,0,0,1)",
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderColor: "rgba(0,0,0,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 5,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        spanGaps: false,
      },
      {
        label: "Passed",
        data: passedFeatures,
        fill: true,
        lineTension: 0.1,
        backgroundColor: "#92DD96", // same as passed class in css file
        borderColor: "rgba(0,192,192,1)",
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderColor: "rgba(0,0,0,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 5,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        spanGaps: false
      }
    ]
  };

  var featuresContext = document.getElementById("trends-features-chart");
  window.myBar = new Chart(featuresContext, {
    type: "line",
    data: chartFeaturesData,
    options: {
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      }
    }
  });

  var chartScenariosData = {
    labels: buildNumbers,
    datasets: [
      {
        label: "Failed",
        data: failedScenarios,
        fill: true,
        lineTension: 0.1,
        backgroundColor: "#F2928C", // same as failed class in css file
        borderColor: "rgba(192,0,0,1)",
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderColor: "rgba(0,0,0,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 5,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        spanGaps: false
      },
      {
        label: "Passed",
        data: passedScenarios,
        fill: true,
        lineTension: 0.1,
        backgroundColor: "#92DD96", // same as passed class in css file
        borderColor: "rgba(0,192,192,1)",
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderColor: "rgba(0,0,0,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 5,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        spanGaps: false
      }
    ]
  };

  var scenariosContext = document.getElementById("trends-scenarios-chart");
  window.myBar = new Chart(scenariosContext, {
    type: "line",
    data: chartScenariosData,
    options: {
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      }
    }
  });

  var chartStepsData = {
    labels: buildNumbers,
    datasets: [
      {
        label: "Failed",
        data: failedSteps,
        fill: true,
        lineTension: 0.1,
        backgroundColor: "#F2928C",
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderColor: "rgba(0,0,0,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 5,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        spanGaps: false
      },
      {
        label: "Skipped",
        data: skippedSteps,
        fill: true,
        lineTension: 0.1,
        backgroundColor: "#8AF",
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderColor: "rgba(0,0,0,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 5,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        spanGaps: false
      },
      {
        label: "Pending",
        data: pendingSteps,
        fill: true,
        lineTension: 0.1,
        backgroundColor: "#F5F28F",
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderColor: "rgba(0,0,0,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 5,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        spanGaps: false
      },
      {
        label: "Undefined",
        data: undefinedSteps,
        fill: true,
        lineTension: 0.1,
        backgroundColor: "#F5B975",
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderColor: "rgba(0,0,0,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 5,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        spanGaps: false
      },
      {
        label: "Passed",
        data: passedSteps,
        fill: true,
        lineTension: 0.1,
        backgroundColor: "#92DD96",
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderColor: "rgba(0,0,0,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 5,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        spanGaps: false
      }
    ]
  };

  var stepsContext = document.getElementById("trends-steps-chart");
  window.myBar = new Chart(stepsContext, {
    type: "line",
    data: chartStepsData,
    options: {
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      }
    }
  });



  var chartDurationsData = {
    labels: buildNumbers,
    datasets: [
      {
        label: "Duration",
        data: durations,
        fill: true,
        lineTension: 0.1,
        backgroundColor: "#C0C0C0",
        borderCapStyle: "butt",
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: "miter",
        pointBorderColor: "rgba(0,0,0,1)",
        pointBackgroundColor: "#fff",
        pointBorderWidth: 5,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(75,192,192,1)",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        spanGaps: false
      }
    ]
  };

  function formatDuration(duration) {
    // gets in nanosecs, outs in secs
    return moment.duration(duration / 1000000).humanize();
  }

  var durationsContext = document.getElementById("trends-durations-chart");
  new Chart(durationsContext, {
    type: "line",
    data: chartDurationsData,
    options: {
      scales: {
        yAxes: [{
          ticks: {
            userCallback: function(value) { return formatDuration(value); }
          }
        }]
      },
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            return data.datasets[tooltipItem.datasetIndex].label + ": " + formatDuration(tooltipItem.yLabel);
          }
        }
      }
    }
  });
});