<script type="text/javascript">
	function toggle_stats_ranged() {
		$(".range_selected").toggle(200);
	}
	
	function toggle_stats_all() {
		$(".range_all").toggle(200);		
	}
</script>
<h2><i class="fa fa-line-chart"></i> <%= I18n.t(:charts) %>: <%= @project.name || @project.identifier %></h2>

<div class="row">
	<div class="col-sm-12 col-md-6">
		
		<ul class="nav nav-tabs" id="statsTab">
		  <li class="nav-item">
		    <a class="nav-link active" data-toggle="tab" role="tab" href="#build_time_chart_div" id="first_tab" aria-selected="true">Build
		      time</a></li>
		  <li class="nav-item">
		    <a class="nav-link" data-toggle="tab" role="tab" href="#test_cases_chart_div" id="second_tab" aria-selected="false">
		      UI Test Cases</a></li>
		  <li class="nav-item">
		    <a class="nav-link" data-toggle="tab" role="tab" href="#ui_test_stats" id="third_tab" aria-selected="false">Test
		      Stats</a></li>
		</ul>
				
	</div>
	
	<div class="col-sm-12 col-md-6" style="margin-top: 5px;">
		<div id="reportrange" class="pull-right">
		  <input type="hidden" id="report_starts_at" name="starts_at" value="<%= @starts_at %>"/>
		  <input type="hidden" id="report_ends_at" name="ends_at" value="<%= @ends_at %>"/>
		  <i class="fa fa-calendar icon-large"></i>
		  <span><%= @starts_at.strftime('%Y-%m-%d') %> - <%= @ends_at.strftime('%Y-%m-%d') %></span> <b class="caret"></b>
		</div>
		
	</div>
</div>	




<div class="tab-content" style="padding: 15px; ">
  <div class="tab-pane fade show active" id="build_time_chart_div">
    <div id="build_time_chart" class="tab-pane" style="max-height: <%= @chart_height%>px; margin-left: 0px;"></div>
  </div>

  <div class="tab-pane fade" id="test_cases_chart_div">
    <div id="test_cases_chart" class="tab-pane" style="max-height: <%= @chart_height%>px; margin-left: 0px;"></div>
    <div style="margin: 10px; align:right;">
      <button id="show_failed_test_count_btn"><%= I18n.t(:show_failed_test_count)%></button>
    </div>
  </div>

  <div id="ui_test_stats" class="tab-pane fade" style="font-size: 15px;">
    <table class="table table-striped" style="width: 95%">
      <thead>
      <tr>
        <th width="30%"></th>
        <th width="35%" class="range_selected"><a href="javascript:void(0);" onclick="toggle_stats_ranged();"><%= I18n.t(:selected_date_range) %></a></th>
        <th width="35%" class="range_all"><a href="javascript:void(0);" onclick="toggle_stats_all();"><%= I18n.t(:all) %></a></th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>Builds:</td>
        <td class="range_selected">
          <b class="font_monospace"><%= @project.builds.where("start_time > ? AND start_time < ?", @starts_at, @query_ends_at).count %></b>
        </td>
        <td><b class="font_monospace"><%= @project.builds.count %></b></td>
      </tr>
      <tr>
        <td width="20%" nowrap="true"><%= I18n.t(:total_test_case_executions) %>:</td>
        <td class="range_selected"><b class="font_monospace"><%= format_comma_number(@stats[:range_executions_count]) %></b></td>
        <td><b class="font_monospace"><%= format_comma_number(@stats[:total_executions_count]) %></b></td>
      </tr>
      <tr>
        <td><%= I18n.t(:total_execution_time) %>:</td>
        <td class="range_selected"><b class="font_monospace"><%= @stats[:range_execution_time] %></b></td>
        <td><b class="font_monospace"><%= @stats[:total_execution_time] %></b></td>
      </tr>
      <tr>
        <td><%= I18n.t(:pass_rate) %>:</td>
        <td class="range_selected">
          <% if @stats[:range_pass_rate] && @stats[:range_pass_rate] >= 0 %>
              <b class="font_monospace"><%= @stats[:range_pass_rate] %>%</b>
          <% end %>
        </td>
        <td>
          <% if @stats[:total_pass_rate] && @stats[:total_pass_rate] >= 0 %>
              <b class="font_monospace"><%= @stats[:total_pass_rate] %>%</b>
          <% end %>
        </td>
      </tr>
      <tr>
        <td><%= I18n.t(:date_range) %>:</td>
        <td class="range_selected">
          <% if @stats[:range_first_build_time] %>
              <%= @stats[:range_first_build_time].strftime('%Y-%m-%d') %>
              to <%= @stats[:range_last_build_time].strftime('%Y-%m-%d') %> <br/><i>(<%= @stats[:selected_date_range] %>
          )</i>
          <% end %>
        </td>
        <td>
          <% if @stats[:first_build_time] %>
              <%= @stats[:first_build_time].strftime('%Y-%m-%d') %>
              to <%= @stats[:last_build_time].strftime('%Y-%m-%d') %> <br/> <i>(<%= @stats[:date_range] %>)</i>
          <% end %>
        </td>
      </tr>
      </tbody>
    </table>

  </div>

</div>

<script>

    var chart_build_time;
    var chart_test_cases;

    function build_time_highchart() {
        chart_build_time = $('#build_time_chart').highcharts({
            chart: {
                type: 'column',
                zoomType: 'x'
            },
            title: {
                text: 'Build Results and Time'
            },
            xAxis: {
                <% if  @build_times.count > 10 %>
                categories: <%= raw @build_times.collect{|x| x[:date]}.inspect %>,
                <% else %>
                categories: <%= raw @build_times.collect{|x| x[:time ]}.inspect %>,
                <% end %>
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Time (m)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:11px">{point.x}</span><table>',
                pointFormat: '<tr><td style="color:{point.color};padding:0">{point.result}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mins</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {},
                series: {
                    turboThreshold: 10000  //set it to a larger threshold, it is by default to 1000
                }
            },
            series: [{
                showInLegend: false,
                enableMouseTracking: true,
                color: "#B5CA92",
                data: [
                    <% @build_times.each do |entry| %>
                    {
                        result: '<%= (entry[:result] > 0) ? 'Successful' : 'Failed' %>',
                        y: <%= entry[:duration] %>,
                        color: '<%= entry[:color] %>'
                    },
                    <% end %>
                ]
            }
            ]
        });
    }

    function test_cases_highchart() {
        chart_test_cases = $('#test_cases_chart').highcharts({
            chart: {
                type: 'line',
                zoomType: 'x'
            },
            title: {
                text: 'Test Count',
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    month: '%e. %b',
                    year: '%b'
                },
            },
            yAxis: [
                {
                    title: null,
                    min: 0
                },
                {
                    title: null,
                    min: 0
                },
            ],
            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function () {
                    return Highcharts.dateFormat('%A, %e %b %H:%M', new Date(this.x)) + "<br/><b>" + this.y + "</b> tests";
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: false
                    },
                    marker: {
                        enabled: false,
                        radius: 4
                    },
                    enableMouseTracking: true
                }
            },
            series: [
                {
                    name: 'Test count',
                    data: <%= raw @build_test_cases.collect{|x| [ x[:time].to_i * 1000,  x[:test_case_count] ]} %>
                },
                {
                    name: 'Failed test count',
                    visible: false,
                    color: '#CC0000',
                    data: <%= raw @build_test_cases.collect{|x| [ x[:time].to_i * 1000,  x[:failed_test_case_count] || 0 ]} %>
                },
            ]
        });
    }

    $(function () {
        build_time_highchart();
        test_cases_highchart();

        $('#second_tab').click(function (e) {
            $("#build_time_chart_div").hide();
            $("#test_cases_chart_div").show();
            var chart = $('#test_cases_chart').highcharts();
            chart.redraw();
        });

        $('#first_tab').click(function (e) {
            $("#build_time_chart_div").show();
            $("#test_cases_chart_div").hide();
        });

        $('#third_tab').click(function (e) {
            $("#build_time_chart_div").hide();
            $("#test_cases_chart_div").hide();
        });

        $('#statsTab a:first').tab('show');
        $("#test_cases_chart_div").hide();

        $('#statsTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        })


        $show_failed_test_count_button = $("#show_failed_test_count_btn");
        $show_failed_test_count_button.click(function () {
            / * var series = chart.series[0]; */
            var chart = $('#test_cases_chart').highcharts();
            var failedTestSeries = chart.series[1];
            if (failedTestSeries.visible) {
                failedTestSeries.setVisible(false, false);
            } else {
                failedTestSeries.setVisible(true, false);
            }
            chart.redraw();

        });

        $(window).resize(function () {
            build_time_highchart();
            test_cases_highchart();
            // chart_build_time.setSize(
            // 		       $(document).width(),
            // 		       $(document).height()/2,
            // 		       false
            // 		    );
            //
            // 		    chart_test_cases.setSize(
            // 		       $(document).width(),
            // 		       $(document).height()/2,
            // 		       false
            // 		    );
        });

    });

</script>

<%= partial(:'projects/date_selection', :locals => {:url_prefix => "/projects/#{@project.identifier}/report"}) %>

