Rinjae
288 lines
9.3 KiB
Plaintext
288 lines
9.3 KiB
Plaintext
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>다중 API 시간별 호출 통계</title>
|
|
<script src="<c:url value="/addon/echarts/echarts.min.js"/>"></script>
|
|
<style>
|
|
.chart-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.chart {
|
|
width: 48%;
|
|
height: 400px;
|
|
}
|
|
#totalChart {
|
|
width: 100%;
|
|
height: 400px;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
th, td {
|
|
border: 1px solid black;
|
|
padding: 8px;
|
|
text-align: right;
|
|
}
|
|
th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="chart-container">
|
|
<div id="mainChart" class="chart"></div>
|
|
<div id="errorChart" class="chart"></div>
|
|
</div>
|
|
<div id="totalChart"></div>
|
|
<h2>시간별 API 호출 통계 및 오류 데이터</h2>
|
|
<div id="tableContainer"></div>
|
|
|
|
<script type="text/javascript">
|
|
window.onload = function() {
|
|
var mainChart = echarts.init(document.getElementById('mainChart'));
|
|
var errorChart = echarts.init(document.getElementById('errorChart'));
|
|
var totalChart = echarts.init(document.getElementById('totalChart'));
|
|
|
|
var times = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
|
|
var authAPI = [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123];
|
|
var dataAPI = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 120, 132, 101, 134, 90, 230];
|
|
var paymentAPI = [150, 232, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123];
|
|
|
|
var authErrors = [2, 1, 0, 3, 1, 5, 2, 1, 0, 4, 6, 3, 2, 1, 7, 4, 0, 2, 3, 1, 2, 5, 1, 2];
|
|
var dataErrors = [3, 2, 1, 4, 5, 6, 3, 1, 7, 5, 1, 2, 3, 1, 2, 5, 3, 1, 2, 1, 0, 2, 1, 3];
|
|
var paymentErrors = [1, 3, 2, 1, 2, 4, 5, 2, 1, 3, 4, 5, 3, 1, 6, 3, 1, 2, 3, 1, 2, 4, 2, 1];
|
|
|
|
var totalAPI = authAPI.map((val, idx) => val + dataAPI[idx] + paymentAPI[idx]);
|
|
var totalErrors = authErrors.map((val, idx) => val + dataErrors[idx] + paymentErrors[idx]);
|
|
|
|
var mainOption = {
|
|
title: {
|
|
text: 'API별 호출 건수'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['사용자 인증 API', '데이터 조회 API', '결제 처리 API']
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: times
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: 'API 호출 횟수'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '사용자 인증 API',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: authAPI
|
|
},
|
|
{
|
|
name: '데이터 조회 API',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: dataAPI
|
|
},
|
|
{
|
|
name: '결제 처리 API',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: paymentAPI
|
|
}
|
|
]
|
|
};
|
|
|
|
var errorOption = {
|
|
title: {
|
|
text: 'API별 오류 건수'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['사용자 인증 API 오류', '데이터 조회 API 오류', '결제 처리 API 오류']
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: times
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: 'API 오류 건수'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '사용자 인증 API 오류',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: authErrors
|
|
},
|
|
{
|
|
name: '데이터 조회 API 오류',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: dataErrors
|
|
},
|
|
{
|
|
name: '결제 처리 API 오류',
|
|
type: 'line',
|
|
stack: 'Total',
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: paymentErrors
|
|
}
|
|
]
|
|
};
|
|
|
|
var totalOption = {
|
|
title: {
|
|
text: '총 API 호출 건수 및 오류 건수'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['총 API 호출 건수', '총 오류 건수']
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: times,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '건수',
|
|
min: 0,
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '총 API 호출 건수',
|
|
type: 'bar',
|
|
data: totalAPI,
|
|
itemStyle: {
|
|
color: '#5470C6'
|
|
}
|
|
},
|
|
{
|
|
name: '총 오류 건수',
|
|
type: 'bar',
|
|
data: totalErrors,
|
|
itemStyle: {
|
|
color: '#EE6666'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
mainChart.setOption(mainOption);
|
|
errorChart.setOption(errorOption);
|
|
totalChart.setOption(totalOption);
|
|
|
|
// 테이블 생성
|
|
var tableHTML = '<table><tr><th>시간</th><th>사용자 인증 API</th><th>인증 오류</th><th>데이터 조회 API</th><th>조회 오류</th><th>결제 처리 API</th><th>결제 오류</th><th>총 호출 건수</th><th>총 오류 건수</th></tr>';
|
|
for (var i = 0; i < times.length; i++) {
|
|
tableHTML += '<tr><td>' + times[i] + '</td><td>' + authAPI[i] + '</td><td>' + authErrors[i] + '</td><td>' + dataAPI[i] + '</td><td>' + dataErrors[i] + '</td><td>' + paymentAPI[i] + '</td><td>' + paymentErrors[i] + '</td><td>' + totalAPI[i] + '</td><td>' + totalErrors[i] + '</td></tr>';
|
|
}
|
|
tableHTML += '</table>';
|
|
document.getElementById('tableContainer').innerHTML = tableHTML;
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |