<div id="build_performance_results_charts" style="margin-top: 5px; margin-bottom: 15px;">

	 <figure class="highcharts-figure">
	     <div id="container-performance-timings"></div>
	 </figure>	 

<script>
  function show_performance_operation_history(perf_test_result_id) {
    $.getScript('/performance/' + perf_test_result_id + '/history');
  }
  
	function show_performance_results_chart() {
  	var data_id; // thea data id of last retrieved
	
  	// Chart
  	var options = {
  	  chart: {
          type: 'column',
          zoomType: 'x'		  
  	  },
  	  title: {
  	    text: 'Operation Timings (average)'
  	  },
      time: {
          useUTC: false
      },    
  	  xAxis: {
  		  visible: false,
  	  },
  	  yAxis: {
  	    title: {
  	      text: 'Time (s)'
  	    }
  	  },
        tooltip: {
          formatter: function() {
            return this.series.name + ': ' + this.y;
          }
        },
  	  legend: {
  	    enabled: true
  	  },
  	  exporting: {
  	    enabled: false
  	  },
  	  plotOptions: {
  	    areaspline: {
  	        fillOpacity: 0.5
  	    }
  	  },
       series: [
          <% @performance_timings.each do |entry| %>
  		{
  	    name: "<%= entry[:operation] %>",		
  		type: 'column',							  		 
          showInLegend: true,
          enableMouseTracking: true,
          data: [
              {
                  y: <%= entry[:average_time] %>
              },
          ]
         },
        <% end %>  
        ]
  	};
  
	
  	var chart = Highcharts.chart('container-performance-timings', options)
  }
</script>
	


  <div id="performance_test_stats" class="" style="font-size: 15px;">
    <table class="table table-striped" style="width: 100%">
      <thead>
      <tr>
        <th with="10%">Time</th>
        <th>Test Script</th>
        <th width="60%">Operation</th>
        <th width="80">Duration</th>
      </tr>
      </thead>
      <tbody>
        <% @performance_test_results.each_with_index do |entry| %>
        <tr>
          <td nowrap="true"><%= entry.starts_at.localtime.strftime("%Y-%m-%d %H:%M:%S") rescue nil%></td>
          <td><%= entry.test_file.filename %></td>
          <td><a id="operation-<%= entry.id%>" href="javascript:void(0)" onclick="show_performance_operation_history(<%= entry.id %>);"><%= entry.operation %></a></td>
          <td><%= entry.duration %></td>          
        </tr>
        <% end %>
      </tbody>
    </table>
  </div>

</div>

<script>
  $(document).ready(function(){
      $(window).scrollTop(0);
      show_performance_results_chart();
  });
</script>