Accueil Explorer Aide
S'inscrire Connexion
iapt-platform
/
mint
miroir de https://github.com/iapt-platform/mint.git
2
0
Fork 0
Fichiers Tickets 0 Wiki
Parcourir la source

:sparkles: api性能分析图形化

visuddhinanda il y a 4 ans
Parent
5fe6cb076f
commit
90926ccc4e
4 fichiers modifiés avec 455 ajouts et 0 suppressions
Vue unifiée Afficher les stats Diff
  1. 23 0
      app/log/loglist.php
  2. 10 0
      app/log/performance.html
  3. 345 0
      app/log/showlog.js
  4. 77 0
      app/log/showlog.php

+ 23 - 0
app/log/loglist.php
Voir le fichier 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE HTML>
 
+<html>
 
+<head>
 
+</head>
 
+<body>
 
+<ol>
 
+<?php
 
+require_once("../config.php");
 
+$scan = scandir(_DIR_LOG_);
 
+$fileCounter = 0;
 
+
 
+foreach($scan as $filename) {
 
+	if (is_file(_DIR_LOG_."/".$filename)){
 
+		if(substr($filename,0,5)=='pref_'){
 
+			$date = substr($filename,5,-4);
 
+			echo "<li><a href='showlog.php?file={$filename}' target='log'>".$date.'</a></li>';
 
+		}
 
+	}
 
+}
 
+?>
 
+</ol>
 
+</body>
 
+</html>

+ 10 - 0
app/log/performance.html
Voir le fichier 

@@ -0,0 +1,10 @@
 
+<html>
 
+
 
+<frameset cols="15%,85%">
 
+
 
+<frame src="./loglist.php">
 
+<frame src="" name="log">
 
+
 
+</frameset>
 
+
 
+</html>

+ 345 - 0
app/log/showlog.js
Voir le fichier 

@@ -0,0 +1,345 @@
 
+
 
+function getData(filename){
 
+	$.get("../../tmp/log/"+filename,
 
+	function(data,status){
 
+	  
+	//生成数据数组
 
+	  let rowData= data.split('\n');
 
+	  let arrData = new Array();
 
+	  for (const iterator of rowData) {
 
+		arrData.push(iterator.split(","));
 
+	  }
 
+	  console.log(arrData);
 
+	  let api = new Object;
 
+	  let delayInMinute
 
+	  
+	  //遍历所有数据
 
+	  for (const iterator of arrData) {
 
+		if (api.hasOwnProperty.call(api, iterator[0])) {
 
+			let element = api[iterator[0]];
 
+			element.times++;
 
+			element.delay += parseInt(iterator[2]);
 
+			try{
 
+				let hour = parseInt(iterator[1].split(':')[0]);
 
+				element.delayHour[hour] += parseInt(iterator[2]);
 
+				element.timesHour[hour] ++;
 
+				
+			}catch(e){
 
+
 
+			}
 
+
 
+		}else{
 
+			api[iterator[0]] = {
 
+				times:1,
 
+				timesHour:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
 
+				delay:parseInt(iterator[2]),
 
+				delayHour:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
 
+			};
 
+			try{
 
+				let hour = parseInt(iterator[1].split(':')[0]);
 
+				api[iterator[0]].delayHour[hour] = parseInt(iterator[2]);
 
+				api[iterator[0]].timesHour[hour] = 1;
 
+			}catch(e){
 
+
 
+			}
 
+
 
+		}
 
+	  }
 
+	  let api_timms = new Array();
 
+	  let api_delay = new Array();
 
+	  let ApiDelayInHour = new Array();
 
+	  let ApiTimesInHour = new Array();
 
+	  for (const key in api) {
 
+		  if (Object.hasOwnProperty.call(api, key)) {
 
+			  const element = api[key];
 
+			  api_timms.push({
 
+				  name:key,
 
+				  y:element.times
 
+			  });
 
+			  api_delay.push({
 
+				name:key,
 
+				y:element.delay
 
+			  });
 
+			  ApiDelayInHour.push({
 
+				name:key,
 
+				data:element.delayHour
 
+			  });
 
+			  ApiTimesInHour.push({
 
+				name:key,
 
+				data:element.timesHour
 
+			  })
 
+		  }
 
+	  }
 
+
 
+	  chart_1(api_timms);
 
+	  chart_2(api_delay);
 
+	  chart_3(ApiDelayInHour);
 
+	  chart_4(ApiTimesInHour);
 
+	});
 
+  
+}
 
+
 
+function chart_1(data){
 
+	// Make monochrome colors
 
+var pieColors = (function () {
 
+    var colors = [],
 
+        base = Highcharts.getOptions().colors[0],
 
+        i;
 
+
 
+    for (i = 0; i < 10; i += 1) {
 
+        // Start out with a darkened base color (negative brighten), and end
 
+        // up with a much brighter color
 
+        colors.push(Highcharts.color(base).brighten((i - 3) / 7).get());
 
+    }
 
+    return colors;
 
+}());
 
+
 
+// Build the chart
 
+Highcharts.chart('chart-1', {
 
+    chart: {
 
+        plotBackgroundColor: null,
 
+        plotBorderWidth: null,
 
+        plotShadow: false,
 
+        type: 'pie'
 
+    },
 
+    title: {
 
+        text: 'API 执行次数'
 
+    },
 
+    tooltip: {
 
+        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
 
+    },
 
+    accessibility: {
 
+        point: {
 
+            valueSuffix: '%'
 
+        }
 
+    },
 
+    plotOptions: {
 
+        pie: {
 
+            allowPointSelect: true,
 
+            cursor: 'pointer',
 
+            colors: pieColors,
 
+            dataLabels: {
 
+                enabled: true,
 
+                format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
 
+                distance: -50,
 
+                filter: {
 
+                    property: 'percentage',
 
+                    operator: '>',
 
+                    value: 4
 
+                }
 
+            }
 
+        }
 
+    },
 
+    series: [{
 
+        name: 'Share',
 
+        data: data
 
+    }]
 
+});
 
+}
 
+
 
+function chart_2(data){
 
+	// Make monochrome colors
 
+var pieColors = (function () {
 
+    var colors = [],
 
+        base = Highcharts.getOptions().colors[0],
 
+        i;
 
+
 
+    for (i = 0; i < 10; i += 1) {
 
+        // Start out with a darkened base color (negative brighten), and end
 
+        // up with a much brighter color
 
+        colors.push(Highcharts.color(base).brighten((i - 3) / 7).get());
 
+    }
 
+    return colors;
 
+}());
 
+
 
+// Build the chart
 
+Highcharts.chart('chart-2', {
 
+    chart: {
 
+        plotBackgroundColor: null,
 
+        plotBorderWidth: null,
 
+        plotShadow: false,
 
+        type: 'pie'
 
+    },
 
+    title: {
 
+        text: 'API 累积执行时间'
 
+    },
 
+    tooltip: {
 
+        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
 
+    },
 
+    accessibility: {
 
+        point: {
 
+            valueSuffix: '%'
 
+        }
 
+    },
 
+    plotOptions: {
 
+        pie: {
 
+            allowPointSelect: true,
 
+            cursor: 'pointer',
 
+            colors: pieColors,
 
+            dataLabels: {
 
+                enabled: true,
 
+                format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
 
+                distance: -50,
 
+                filter: {
 
+                    property: 'percentage',
 
+                    operator: '>',
 
+                    value: 4
 
+                }
 
+            }
 
+        }
 
+    },
 
+    series: [{
 
+        name: 'Share',
 
+        data: data
 
+    }]
 
+});
 
+}
 
+
 
+//按照小时计算的api 执行时间
 
+function chart_3(data){
 
+	Highcharts.chart('chart-3', {
 
+
 
+		title: {
 
+			text: '按照小时计算的 API 执行时间'
 
+		},
 
+	
+		subtitle: {
 
+			text: 'Source: thesolarfoundation.com'
 
+		},
 
+	
+		yAxis: {
 
+			title: {
 
+				text: '执行时间'
 
+			}
 
+		},
 
+	
+		xAxis: {
 
+			categories: [
 
+				'8',
 
+				'9',
 
+				'10',
 
+				'11',
 
+				'12',
 
+				'13',
 
+				'14',
 
+				'15',
 
+				'16',
 
+				'17',
 
+				'18',
 
+				'19',
 
+				'20',
 
+				'21',
 
+				'22',
 
+				'23',
 
+				'0',
 
+				'1',
 
+				'2',
 
+				'3',
 
+				'4',
 
+				'5',
 
+				'6',
 
+				'7'
 
+			],
 
+			accessibility: {
 
+				rangeDescription: 'Range: 0 to 23'
 
+			}
 
+		},
 
+	
+		legend: {
 
+			layout: 'vertical',
 
+			align: 'right',
 
+			verticalAlign: 'middle'
 
+		},
 
+	
+		plotOptions: {
 
+			series: {
 
+				label: {
 
+					connectorAllowed: false
 
+				},
 
+				pointStart: 0
 
+			}
 
+		},
 
+	
+		series: data,
 
+	
+		responsive: {
 
+			rules: [{
 
+				condition: {
 
+					maxWidth: 500
 
+				},
 
+				chartOptions: {
 
+					legend: {
 
+						layout: 'horizontal',
 
+						align: 'center',
 
+						verticalAlign: 'bottom'
 
+					}
 
+				}
 
+			}]
 
+		}
 
+	
+	});
 
+}
 
+
 
+function chart_4(data){
 
+	Highcharts.chart('chart-4', {
 
+		chart: {
 
+			type: 'column'
 
+		},
 
+		title: {
 
+			text: 'API 执行次数'
 
+		},
 
+		subtitle: {
 
+			text: 'Source: WorldClimate.com'
 
+		},
 
+		xAxis: {
 
+			categories: [
 
+				'8',
 
+				'9',
 
+				'10',
 
+				'11',
 
+				'12',
 
+				'13',
 
+				'14',
 
+				'15',
 
+				'16',
 
+				'17',
 
+				'18',
 
+				'19',
 
+				'20',
 
+				'21',
 
+				'22',
 
+				'23',
 
+				'0',
 
+				'1',
 
+				'2',
 
+				'3',
 
+				'4',
 
+				'5',
 
+				'6',
 
+				'7'
 
+			],
 
+			crosshair: true
 
+		},
 
+		yAxis: {
 
+			min: 0,
 
+			title: {
 
+				text: '执行次数'
 
+			}
 
+		},
 
+		tooltip: {
 
+			headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
 
+			pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
 
+				'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
 
+			footerFormat: '</table>',
 
+			shared: true,
 
+			useHTML: true
 
+		},
 
+		plotOptions: {
 
+			column: {
 
+				pointPadding: 0.2,
 
+				borderWidth: 0
 
+			}
 
+		},
 
+		series: data
 
+	});
 
+}

+ 77 - 0
app/log/showlog.php
Voir le fichier 

@@ -0,0 +1,77 @@
 
+<!DOCTYPE HTML>
 
+<html>
 
+<head>
 
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 
+	<script src="../../node_modules/jquery/dist/jquery.js"></script>
 
+
 
+	<style type="text/css">
 
+
 
+	.highcharts-figure, .highcharts-data-table table {
 
+		flex:1;
 
+		min-width: 220px; 
+		max-width: 100%;
 
+		margin: 1em auto;
 
+	}
 
+
 
+	.highcharts-data-table table {
 
+		font-family: Verdana, sans-serif;
 
+		border-collapse: collapse;
 
+		border: 1px solid #EBEBEB;
 
+		margin: 10px auto;
 
+		text-align: center;
 
+		width: 100%;
 
+		max-width: 500px;
 
+	}
 
+	.highcharts-data-table caption {
 
+		padding: 1em 0;
 
+		font-size: 1.2em;
 
+		color: #555;
 
+	}
 
+	.highcharts-data-table th {
 
+		font-weight: 600;
 
+		padding: 0.5em;
 
+	}
 
+	.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
 
+		padding: 0.5em;
 
+	}
 
+	.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
 
+		background: #f8f8f8;
 
+	}
 
+	.highcharts-data-table tr:hover {
 
+		background: #f1f7ff;
 
+	}
 
+	.chart_head_1 {
 
+		text-align: center;
 
+		font-size: x-large;
 
+		margin-bottom: 0;
 
+		font-weight: bold;
 
+	}
 
+	.highcharts-data-label {
 
+		font-size: small;
 
+	}
 
+	</style>
 
+	<script src="../../node_modules/highcharts/highcharts.js"></script>
 
+	<script src="../../node_modules/highcharts/modules/sunburst.js"></script>
 
+	<script src="../../node_modules/highcharts/modules/exporting.js"></script>
 
+	<script src="../../node_modules/highcharts/modules/export-data.js"></script>
 
+	<script src="../../node_modules/highcharts/modules/accessibility.js"></script>
 
+
 
+	<script src="./showlog.js"></script>
 
+
 
+</head>
 
+<body>
 
+<h2><?php echo $_GET['file'];?></h2>
 
+<div style="display:flex;">
 
+<div id='chart-1'></div>
 
+<div id='chart-2'></div>
 
+</div>
 
+<div id='chart-3'></div>
 
+<div id='chart-4'></div>
 
+<div id='chart-5'></div>
 
+
 
+<script type="text/javascript">
 
+getData('<?php echo $_GET['file'];?>');
 
+</script>
 
+</body>
 
+</html>