<!DOCTYPE html>
<html lang="en">

<head>
    <link href="https://img.icons8.com/cotton/64/000000/time-machine.png" rel="shortcut icon" type="image/x-icon"/>
    <title>Pytest Historic - Dashboard</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
    <script type="text/javascript">
	   google.charts.load('current', {packages: ['corechart']});
	</script>
    <style>
        .tabcontent {
            padding: 60px 12px 0px 12px ;
        }

        .tablinks .active {
            background-color: #666;
            color: white;
        }
         body{
            background-color:#fff;
        } 

        .tile {
                width: 100%;
                float: left;
                margin: 0px;
                list-style: none;
                font-size: 28px;
                color: #FFF;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                margin-bottom: 6px;
                position: relative;
                text-align: center;
                color: white!important;
                height:70px;
            }

            .tile.tile-fail {
                background: #fc6666!important;
            }
            .tile.tile-pass {
                background: #2ecc71!important;
            }
            .tile.tile-info {
                background: #389b91!important;
            }
            .tile.tile-head {
                /* background: #777676!important; */
                background: rgb(96, 112, 112)!important;
            }
            .tile.tile-perf {
                background: rgb(80, 140, 189)!important;
            }
            .tile.tile-apass {
                background: rgb(96, 112, 112)!important;
            }

            a, a:hover {
                text-decoration: none;
                display: block;
            }

            span, .breadcrumb-item {
                font-size: 15px;
            }

            .border-right {
				border-right: 1px solid #ddd;
			}
			.borders {
				border-left: 1px solid #ddd;
				border-right: 1px solid #ddd;
				margin: -1px;
			}
			.border-left {
				border-left: 1px solid #ddd;
			}

    </style>
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/home">Pytest Historic</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="tablinks active"><a href="./dashboard"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                    <li class="tablinks"><a href="./ehistoric"><i class="fa fa-history"></i> History</a></li>
                    <li class="tablinks"><a href="./tmetrics"><i class="fa fa-flask"></i> Metrics</a></li>
                    <li class="tablinks"><a href="./flaky"><i class="fa fa-bolt"></i> Flaky</a></li>
                    <li class="tablinks"><a href="./search"><i class="fa fa-search"></i> Search</a></li>
                    <li class="tablinks"><a href="./compare"><i class="fa fa-sliders"></i> Compare</a></li>
                </ul>
            </div>
        </div>
    </nav>
	<script>
		window.onload = function(){
            {% for item in last_exe_pie_data %}
			    createPieChart({{item[0]}}, {{item[1]}}, {{item[2]}}, {{item[3]}}, 'lastPieID', 'Last Execution Result:');
            {% endfor %}

            {% for item in last_ten_exe_pie_data %}
			    createPieChart({{item[0]}}, {{item[1]}}, {{item[2]}}, {{item[3]}}, 'lastTenPieID', 'Last Execution Result:');
            {% endfor %}

            {% for item in over_all_exe_pie_data %}
			    createPieChart({{item[0]}}, {{item[1]}}, {{item[2]}}, {{item[3]}}, 'overAllPieID', 'Overall Execution Result:');
            {% endfor %}

            createLastTenExecutionTrendzBarGraph('lastTenExecutionTrendzID');

            createLastTenPerformanceTrendzLineGraph('lastTenPerfExecutionTrendzID');
		};
   </script>

    <div class="tabcontent">
        <div class="d-flex flex-column flex-md-row align-items-center p-1 mb-3 bg-light border-bottom shadow-sm">
            <h3 class="my-0 mr-md-auto font-weight-normal" style="text-transform: capitalize;">{{db_name}} - Dashboard</h3>
        </div>
        <hr>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#"><b>Execution Statistics:</a></b></li>
            </ol>
        </nav>

        <div class="row">
            <div class="col-md-4 border-right">
                <span style="font-weight:bold; padding-left:55px;color:gray">Passed Tests:</span>
				<table style="width:100%;height:200px;text-align: center;">
					<tbody>
						<tr style="height:60%">
							<td>
								<table style="width:100%">
									<tbody>
										<tr style="height:100%">
											<td style="font-size:60px; color:#2ecc71">{{last_exe_pie_data[0][0]}}</td>
										</tr>
										<tr>
											<td><span style="color: #999999;font-size:12px">Recent</span></td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
						<tr style="height:35%">
							<td></td>
						</tr>
						<tr style="height:5%">
							<td>
								<table style="width:100%">
									<tbody>
										<tr style="height:70%;font-size:25px" align="center" valign="middle">
											<td style="width: 33%; color:red">{{execution_pass_data[0][1]}}</td>
											<td style="width: 33%; color:brown">{{execution_pass_data[0][2]}}</td>
											<td style="width: 33%; color:green">{{execution_pass_data[0][3]}}</td>
										</tr>
										<tr style="height:30%" align="center" valign="top">
											<td style="width: 33%"><span style="color: #999999;font-size:10px">Overall: Min</span></td>
											<td style="width: 33%"><span style="color: #999999;font-size:10px">Average</span></td>
											<td style="width: 33%"><span style="color: #999999;font-size:10px">Max</span></td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
					</tbody>
				</table>
            </div>
            <div class="col-md-4 borders">
                <span style="font-weight:bold; padding-left:55px;color:gray">Failed Tests:</span>
				<table style="width:100%;height:200px;text-align: center;">
					<tbody>
						<tr style="height:60%">
							<td>
								<table style="width:100%">
									<tbody>
										<tr style="height:100%">
											<td style="font-size:60px;color:#fc6666">{{last_exe_pie_data[0][1]}}</td>
										</tr>
										<tr>
											<td><span style="color: #999999;font-size:12px">Recent</span></td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
						<tr style="height:35%">
							<td></td>
						</tr>
						<tr style="height:5%">
							<td>
								<table style="width:100%">
									<tbody>
										<tr style="height:70%;font-size:25px" align="center" valign="middle">
											<td style="width: 33%; color:green">{{execution_fail_data[0][1]}}</td>
											<td style="width: 33%; color: brown">{{execution_fail_data[0][2]}}</td>
											<td style="width: 33%; color:red">{{execution_fail_data[0][3]}}</td>
										</tr>
										<tr style="height:30%" align="center" valign="top">
											<td style="width: 33%"><span style="color: #999999;font-size:10px">Overall: Min</span></td>
											<td style="width: 33%"><span style="color: #999999;font-size:10px">Average</span></td>
											<td style="width: 33%"><span style="color: #999999;font-size:10px">Max</span></td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
					</tbody>
				</table>
            </div>
            <div class="col-md-4 border-left">
                <span style="font-weight:bold; padding-left:55px;color:gray">Execution Time (s):</span>
				<table style="width:100%;height:200px;text-align: center;">
					<tbody>
						<tr style="height:60%">
							<td>
								<table style="width:100%">
									<tbody>
										<tr style="height:100%">
											<td style="font-size:60px;color:cadetblue">{{last_exe_pie_data[0][5]}}</td>
										</tr>
										<tr>
											<td><span style="color: #999999;font-size:12px">Recent</span></td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
						<tr style="height:35%">
							<td></td>
						</tr>
						<tr style="height:5%">
							<td>
								<table style="width:100%">
									<tbody>
										<tr style="height:70%;font-size:25px" align="center" valign="middle">
											<td style="width: 33%;color:green">{{execution_time_data[0][1]}}</td>
											<td style="width: 33%;color:brown">{{execution_time_data[0][2]}}</td>
											<td style="width: 33%;color:red">{{execution_time_data[0][3]}}</td>
										</tr>
										<tr style="height:30%" align="center" valign="top">
											<td style="width: 33%"><span style="color: #999999;font-size:10px">Overall: Min</span></td>
											<td style="width: 33%"><span style="color: #999999;font-size:10px">Average</span></td>
											<td style="width: 33%"><span style="color: #999999;font-size:10px">Max</span></td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
					</tbody>
				</table>
            </div>
        </div>
        <hr>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#"><b>Executions Overview:</a></b></li>
            </ol>
        </nav>
        <div class='row'>
            <div class="col-md-4">
                <div class="col-md-12">
                    <span style="font-weight:bold">Last Execution Result:</span>
                    <div id="lastPieID" style="height:300px;width:auto;"></div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="col-md-12">
                    <span style="font-weight:bold">Last 10 Execution Results:</span>
                    <div id="lastTenPieID" style="height:300px;width:auto;"></div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="col-md-12">
                    <span style="font-weight:bold">Overall Execution Results:</span>
                    <div id="overAllPieID" style="height:300px;width:auto;"></div>
                </div>
            </div>
        </div>
        <hr>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#"><b>Executions Trends:</a></b></li>
            </ol>
        </nav>
        <div class='row'>
            <div class="col-md-12">
                <div class="col-md-12">
                    <span style="font-weight:bold">Last 10 Executions Trends:</span>
                    <div id="lastTenExecutionTrendzID" style="height:300px;width:auto;"></div>
                </div>
            </div>
        </div>
        <br>
        <div class='row'>
            <div class="col-md-12">
                <div class="col-md-12">
                    <span style="font-weight:bold">Last 10 Executions Performance Trends:</span>
                    <div id="lastTenPerfExecutionTrendzID" style="height:300px;width:auto;"></div>
                </div>
            </div>
        </div>
        <br>
        <div class="row">
                <p class="text-muted" style="text-align:center;font-size:9px; width: 100%;">
                    <a href="https://github.com/adiralashiva8/pytest-historic" target="_blank">pytest-historic</a>
                </p>
         </div>
    </div>

    <script>
        function createLastTenExecutionTrendzBarGraph(ChartID){
            var status = [];
            status.push(['Execution ID', 'Pass', 'Fail', 'xPass', 'xFail']);
            {% for item in last_ten_data %}
                status.push(['EID: '.concat({{item[0]}}), {{item[1]}}, {{item[2]}}, {{item[3]}}, {{item[4]}}]);
            {% endfor %}

            var data = google.visualization.arrayToDataTable(status);
            var options = {
                isStacked:true,
                legend: 'top-right',
                chartArea: {width: "85%",height: "80%"},
                bar: {
                    groupWidth: '90%'
                },
                annotations: {
                    alwaysOutside: true,
                },
                vAxis: {title: "No. of test cases"},
                series: {
                    0:{color:'#2ecc71'},
                    1:{color:'#fc6666'},
                    2:{color:'#91cfaa'},
                    3:{color:'#d47f7f'},
                },
            };
                // Instantiate and draw the chart.
                var chart = new google.visualization.ColumnChart(document.getElementById(ChartID));
                chart.draw(data, options);
            }
       </script>
       <script>
            function createLastTenPerformanceTrendzLineGraph(ChartID){
                var status = [];
                status.push(['Execution ID', 'Time (s)']);
                {% for item in last_ten_data %}
                    status.push(['EID: '.concat({{item[0]}}), {{item[5]}}]);
                {% endfor %}

                var options = {
                    isStacked:true,
                    legend:'none',
                    pointSize: 5,
					pointShape: { type: 'diamond'},
                    chartArea: {width: "85%",height: "80%"},
                    vAxis: {title: "Duration in seconds"},

                    annotations: {
                        alwaysOutside: true,
                    },
                };
                var data = google.visualization.arrayToDataTable(status);

                    // Instantiate and draw the chart.
                    var chart = new google.visualization.LineChart(document.getElementById(ChartID));
                    chart.draw(data, options);
                }
    </script>

	<script>
	  function createPieChart(passed_count, failed_count, xpass_count, xfail_count, ChartID, ChartName){
			var status = [];
			status.push(['Status', 'Percentage']);
			status.push(['PASS',parseInt(passed_count)], ['FAIL',parseInt(failed_count)], ['xPASS', parseInt(xpass_count)], ['xFAIL', parseInt(xfail_count)]);
			var data = google.visualization.arrayToDataTable(status);

			var options = {
                pieHole: 0.6,
                chartArea: {width: "95%",height: "80%"},
                colors: ['#2ecc71', '#fc6666', '#8ed4aa', '#d47f7f'],
                legend: 'top',
			};

			var chart = new google.visualization.PieChart(document.getElementById(ChartID));
			chart.draw(data, options);
		}
	 </script>
</body>

</html>