<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	<title>Yangon Region</title>
	<script type="text/javascript" src="../bootstrap4/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../bootstrap4/css/bootstrap.min.css">
	<script type="text/javascript" src="../bootstrap4/canvasjs.min.js"></script>
	<style type="text/css">
		#map {
		border:2px solid green; 
		height: 400px;
		}

		body, html {
		  height: 100%;
		  margin: 0;
		 font-family: "Times New Roman", Times, serif;
		font-size: 14px;
		}

		.but
		{
			width: 100px;
			height: 50px;
			background-color: lightblue;
			text-align: center;
			font-size:10px;
		}
		.butt
		{
			width: 100px;
			height: 50px;
			background-color: navy;
			text-align: center;
			font-size:10px;
		}
		#scrol {
		
		overflow: scroll;
    	height: calc(var(--vh, 1vh) * 100); 
		}
		#scroll {
		overflow: scroll;
    	height: 700px; 
		}
		#info{
			font-size: 10px;
			font-weight: bolder;
		}
		#fix
		{
			background-color: #f8ea05;
		}
		#tim{
			color: red;
			font-size: 10px;
			font-weight: bolder;
		}
	</style>

</head>
<body>
<?php
	require "dbconnect.php";
	dbhandaler::dbconnect();
	$cc=0;
	$ch=0;
	$vd3=dbhandaler::selectgenderct('M');
	$vd4=dbhandaler::selectgenderct('F');

		$array2 = dbhandaler::selecttypeygnct();
		foreach ($array2 as $key => $value) {
			//echo $key." - ".$value[1]."=>".$value[0]."<br>";
			$dataPoints5[$key]=array("label"=>$value[1], "y"=>$value[0]);
			$cc=$cc+$value[0];
		}
		$array3 = dbhandaler::selectcontactygnct();
		foreach ($array3 as $key => $value) {
			//echo $key." - ".$value[1]."=>".$value[0]."<br>";
			$dataPoints6[$key]=array("label"=>$value[1], "y"=>$value[0]);
			$ch=$ch+$value[0];
		}

		$array4 = dbhandaler::selectygnct1();
		foreach ($array4 as $key => $value) {
			$dataPoints9[$key]=array("label"=>$value[1], "y"=>$value[0]);
		}

		$array5 = dbhandaler::selectygnct2();
		foreach ($array5 as $key => $value) {
			$dataPoints10[$key]=array("label"=>$value[1], "y"=>$value[0]);
		}

		$age6=dbhandaler::selectage4ct();
		$age7=dbhandaler::selectage5ct();
		$age8=dbhandaler::selectage6ct();
		$dataPoints7 = array( 
		array("label"=>"<15", "y"=>$age6),
		array("label"=>"15-60", "y"=>$age7),
		array("label"=>">60", "y"=>$age8),
		);
	//	echo $age6."<br>".$age7."<br>".$age8."<br>".$vd4."<br>";

		$age3=dbhandaler::selectage1ct();
		$age4=dbhandaler::selectage2ct();
		$age5=dbhandaler::selectage3ct();
		$dataPoints8 = array( 
		array("label"=>"<15", "y"=>$age3),
		array("label"=>"15-60", "y"=>$age4),
		array("label"=>">60", "y"=>$age5),
		);
	//	echo $age3."<br>".$age4."<br>".$age5."<br>".$vd3."<br>";

?>			
<script type="text/javascript">
let vh = window.innerHeight * 0.008;
document.documentElement.style.setProperty('--vh', `${vh}px`);
function exportTableToExcel(filename){
		    var downloadLink;
		    var dataType = 'application/vnd.ms-excel';
		    var tableSelect = document.getElementById("myatable");
		    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
		    
		    // Specify file name
		    filename = filename?filename+'.xls':'excel_data.xls';
		    
		    // Create download link element
		    downloadLink = document.createElement("a");
		    
		    document.body.appendChild(downloadLink);
		    
		    if(navigator.msSaveOrOpenBlob){
		        var blob = new Blob(['\ufeff', tableHTML], {
		            type: dataType
		        });
		        navigator.msSaveOrOpenBlob( blob, filename);
		    }else{
		        // Create a link to the file
		        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
		    
		        // Setting the file name
		        downloadLink.download = filename;
		        
		        //triggering the function
		        downloadLink.click();
		    }
		}

window.onload = function() 
{
var chart9 = new CanvasJS.Chart("chartContainer9", {
		animationEnabled: true,
		title: {
			text: "Conatacts by Case Number Among Health Care Provider<?php echo '-'.$ch; ?>",
			fontSize: 12,
		},
		axisY: {
		suffix: "%",
		scaleBreaks: {
			autoCalculate: true
		},
		labelFontSize: 12,
	},
	axisX: {labelFontSize: 1,labelFontColor: "white",},
		data: [{
			type: "bar",
			yValueFormatString: "#,##0",
// 		indexLabel: "{y}",
// 		indexLabelPlacement: "inside",
// 		indexLabelFontColor: "white",
// 		 indexLabelFontSize: 12,
		color:"brown",
			dataPoints: <?php echo json_encode($dataPoints10, JSON_NUMERIC_CHECK); ?>
		}]
	});
	chart9.render();

var chart4 = new CanvasJS.Chart("chartContainer4", {
		animationEnabled: true,
		title: {
			text: "Conatacts by Case Number Among Civilian<?php echo '-'.$cc; ?>",
			fontSize: 12,
		},
		axisY: {
		suffix: "%",
		scaleBreaks: {
			autoCalculate: true
		},
		labelFontSize: 12,
	},
	axisX: {labelFontSize: 1,labelFontColor: "white",},
		data: [{
			type: "bar",
			yValueFormatString: "#,##0",
// 			indexLabel: "{y}",
// 			indexLabelPlacement: "inside",
// 			indexLabelFontColor: "white",
// 			indexLabelFontSize: 12,
			color:"navy",
			dataPoints: <?php echo json_encode($dataPoints9, JSON_NUMERIC_CHECK); ?>
		}]
	});
	chart4.render();


	var chart5 = new CanvasJS.Chart("chartContainer5", {
		animationEnabled: true,
		title: {
			text: "By Contact Type Among Civilian<?php echo '-'.$cc;?>",
			fontSize: 12,
		},
		axisY: {
		suffix: "%",
		scaleBreaks: {
			autoCalculate: true
		},
		labelFontSize: 12,
	},
	axisX: {labelFontSize: 12,labelFontColor: "black",
	    labelFormatter: function (e) {
				return CanvasJS.formatDate( e.value);
			},
			labelAngle: -20
	},
		data: [{
			type: "column",
			yValueFormatString: "#,##0",
		indexLabel: "{y}",
		indexLabelPlacement: "inside",
		indexLabelFontColor: "black",
		indexLabelFontSize: 12,
			dataPoints: <?php echo json_encode($dataPoints5, JSON_NUMERIC_CHECK); ?>
		}]
	});
	chart5.render();

	var chart6 = new CanvasJS.Chart("chartContainer6", {
		animationEnabled: true,
		title: {
			text: "By Contact Type Among Health Care Provider<?php echo '-'.$ch;?>",
			fontSize: 12,
		},
		axisY: {
		suffix: "%",
		scaleBreaks: {
			autoCalculate: true
		},
		labelFontSize: 12,
	},
	axisX: {labelFontSize: 12,labelFontColor: "black",
	    labelFormatter: function (e) {
				return CanvasJS.formatDate( e.value);
			},
			labelAngle: -20
	},
		data: [{
			type: "column",
			yValueFormatString: "#,##0",
		indexLabel: "{y}",
		indexLabelPlacement: "inside",
		indexLabelFontColor: "black",
		indexLabelFontSize: 12,
			dataPoints: <?php echo json_encode($dataPoints6, JSON_NUMERIC_CHECK); ?>
		}]
	});
	chart6.render();

	var chart7 = new CanvasJS.Chart("chartContainer7", {
		animationEnabled: true,
		title: {
			text: "Age Group Among Female <?php echo '-'.$vd4; ?>",
			fontSize: 12,
		},
		axisY: {
		labelFontSize: 12,
		suffix: "%",
		scaleBreaks: {
			autoCalculate: true
		},
	},
	axisX: {labelFontSize: 12,labelFontColor: "black",},
		data: [{
			type: "column",
			yValueFormatString: "#,##0",
			indexLabel: "{y}",
			indexLabelPlacement: "inside",
			indexLabelFontColor: "white",
			indexLabelFontSize: 12,
			dataPoints: <?php echo json_encode($dataPoints7, JSON_NUMERIC_CHECK); ?>
		}]
	});
	chart7.render();

	var chart8 = new CanvasJS.Chart("chartContainer8", {
		animationEnabled: true,
		title: {
			text: "By Age Group Among Male<?php echo '-'.$vd3;?>",
			fontSize: 12,
		},
		axisY: {
		labelFontSize: 12,
		suffix: "%",
		scaleBreaks: {
			autoCalculate: true
		},
	},
	axisX: {labelFontSize: 12,labelFontColor: "black",},
		data: [{
			type: "column",
			yValueFormatString: "#,##0",
			indexLabel: "{y}",
			indexLabelPlacement: "inside",
			indexLabelFontColor: "white",
			indexLabelFontSize: 12,
			dataPoints: <?php echo json_encode($dataPoints8, JSON_NUMERIC_CHECK); ?>
		}]
	});
	chart8.render();
} 
</script>
	<div class="row" id="fix">
		<div class="col-md-2"></div>
		<div class="col-md-1" align="right"><img src="image/mohsimg.jpg" style="width:70px; height:70px;"></div>
		<div class="col-md-7" align="center" >	
		<br>
			<h7> <b> ရန်ကုန်တိုင်း‌‌‌‌‌‌‌‌‌‌‌‌‌ဒေသကြီး ကုသရေးနှင့် ပြည်သူ့ကျန်းမာရေး ဦးစီးဌာန (COVID-19) DASHBOARD</b></h7>
		</div>
		<div class="col-md-2" id="tim" align="center"><br><br><br><i><?php dbhandaler::datetime()?>(update)</i></div>
	</div>
<div class="row">
	<div class="col-md-1" align="center">
		<button class="but"><b><a href="covid-19.php">မူလ</a></b></button> <br>
		<button class="but"><b><a href="patient.php">လူနာစာရင်း</a></b></button> <br>
		<button class="butt"><b><a href="contact.php">ဆက်စပ်စာရင်း</a></b></button><br>
		<button class="but"><b><a href="other.php">သတင်း</a></b></button>
	</div>

	<div class="col-md-11">
	<br>
  <div class="container" id="scrol">
	<div class="row">
	</div>
	<div class="row">
		<div class="col-md-6" align="left">
			<div id="chartContainer4" style="height: 350px; border:2px solid gray;"></div> 
		</div>
		<div class="col-md-6" align="left">
			<div id="chartContainer9" style="height: 350px; border:2px solid gray;"></div> 
		</div>
	</div> <br>
	<div class="row">
		<div class="col-md-6">
			<div id="chartContainer5" style="height: 350px; border:2px solid gray;"></div> 
		</div>
		<div class="col-md-6">
			<div id="chartContainer6" style="height: 350px; border:2px solid gray;"></div> 
		</div>
	</div> <br>
	<div class="row">
		<div class="col-md-6" align="center">
		<table>
				<tr>
				<th style="width:300px;"> No. </th>
				<th style="width:500px;"> Township </th>
				<th style="width:400px;"> Number </th>
				</tr>
		</table>
		<div style="overflow-y:scroll;" id="scroll">
		<table id="myatable">
			<?php 
			$a=0;
			$b=0;
			$c=0;
			$array4 = dbhandaler::selecttwspygnct();
			foreach ($array4 as $key => $value) { 
				++$a;
				$b=$b+$a;
				$c=$c+$value[0];
			?>
				<tr>
				<td style="width:300px;"> <?php echo $a;?></td>
				<td style="width:500px;"> <?php echo $value[1];?></td>
				<td style="width:400px;"> <?php echo $value[0];?></td>
				</tr>
			<?php } ?>  
		</table>
		</div>
		<table>
				<tr>
				<th colspam="2"style="width:800px;"> Total </th>
				<th style="width:400px;"> <?php echo $vd4+$vd3;?></th>
				</tr>
		</table>
		<br>
		<div class="row">
		<div class="col-md-12" align="left">
		<button class="btn btn-success" onclick="exportTableToExcel('Contact List');">Excel Export</button>
		</div>
		</div>
		</div>
		<div class="col-md-6">
		<div id="chartContainer7" style="height: 350px; border:2px solid gray;"></div> <br>
		<div id="chartContainer8" style="height: 350px; border:2px solid gray;"></div> 
		</div>
	</div>
</div>
</div>
</div>
</body>
</html>