init
This commit is contained in:
Rinjae
@@ -0,0 +1,288 @@
|
||||
<%@ 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>
|
||||
Reference in New Issue
Block a user