Rinjae
184 lines
6.4 KiB
Plaintext
184 lines
6.4 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: 500px;
|
|
}
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
th, td {
|
|
border: 1px solid black;
|
|
padding: 8px;
|
|
text-align: right;
|
|
}
|
|
th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
#updateButton {
|
|
margin: 20px 0;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="chart-container">
|
|
<div id="normalChart" class="chart"></div>
|
|
<div id="errorChart" class="chart"></div>
|
|
</div>
|
|
<button id="updateButton">금일자 데이터 랜덤 업데이트</button>
|
|
<h2>시간별 API 호출 통계 데이터</h2>
|
|
<div id="tableContainer"></div>
|
|
|
|
<script type="text/javascript">
|
|
var normalChart, errorChart, normalOption, errorOption;
|
|
var hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11',
|
|
'12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
|
|
|
|
var todayNormal = [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330, 310, 123];
|
|
var todayError = [5, 7, 3, 6, 2, 8, 9, 5, 6, 10, 12, 15, 13, 5];
|
|
|
|
var yesterdayNormal = [110, 122, 91, 124, 80, 220, 200, 172, 181, 224, 280, 320,
|
|
300, 313, 432, 311, 280, 339, 390, 412, 423, 324, 288, 213];
|
|
var yesterdayError = [4, 6, 2, 5, 1, 7, 8, 4, 5, 9, 11, 14,
|
|
12, 14, 17, 13, 13, 16, 18, 14, 15, 13, 17, 14];
|
|
|
|
function initCharts() {
|
|
normalChart = echarts.init(document.getElementById('normalChart'));
|
|
errorChart = echarts.init(document.getElementById('errorChart'));
|
|
|
|
// 금일 데이터를 24시간으로 확장 (13시 이후는 null)
|
|
for (var i = todayNormal.length; i < 24; i++) {
|
|
todayNormal.push(null);
|
|
todayError.push(null);
|
|
}
|
|
|
|
normalOption = {
|
|
title: { text: '정상 호출 통계' },
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
|
|
},
|
|
legend: { data: ['금일 정상', '전일 정상'] },
|
|
toolbox: { feature: { saveAsImage: {} } },
|
|
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
xAxis: [{ type: 'category', boundaryGap: false, data: hours }],
|
|
yAxis: [{ type: 'value' }],
|
|
series: [
|
|
{
|
|
name: '전일 정상',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
itemStyle: { color: '#b9bcc4' },
|
|
lineStyle: { width: 2 },
|
|
areaStyle: { color: '#b9bcc4', opacity: 0.08 },
|
|
data: yesterdayNormal
|
|
},
|
|
{
|
|
name: '금일 정상',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
itemStyle: { color: '#5470C6' },
|
|
lineStyle: { width: 3 },
|
|
areaStyle: { color: '#5470C6', opacity: 0.5 },
|
|
data: todayNormal
|
|
}
|
|
]
|
|
};
|
|
|
|
errorOption = {
|
|
title: { text: '오류 호출 통계' },
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
|
|
},
|
|
legend: { data: ['금일 오류', '전일 오류'] },
|
|
toolbox: { feature: { saveAsImage: {} } },
|
|
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
|
xAxis: [{ type: 'category', boundaryGap: false, data: hours }],
|
|
yAxis: [{ type: 'value' }],
|
|
series: [
|
|
{
|
|
name: '전일 오류',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
itemStyle: { color: '#b9bcc4' },
|
|
lineStyle: { width: 2 },
|
|
areaStyle: { color: '#b9bcc4', opacity: 0.08 },
|
|
data: yesterdayError
|
|
},
|
|
{
|
|
name: '금일 오류',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
itemStyle: { color: '#EE6666' },
|
|
lineStyle: { width: 3 },
|
|
areaStyle: { color: '#EE6666', opacity: 0.5 },
|
|
data: todayError
|
|
}
|
|
]
|
|
};
|
|
|
|
normalChart.setOption(normalOption);
|
|
errorChart.setOption(errorOption);
|
|
|
|
updateTable();
|
|
}
|
|
|
|
function updateCharts() {
|
|
normalChart.setOption({
|
|
series: [
|
|
{ data: yesterdayNormal },
|
|
{ data: todayNormal }
|
|
]
|
|
});
|
|
errorChart.setOption({
|
|
series: [
|
|
{ data: yesterdayError },
|
|
{ data: todayError }
|
|
]
|
|
});
|
|
|
|
updateTable();
|
|
}
|
|
|
|
function updateTable() {
|
|
var tableHTML = '<table><tr><th>시간</th><th>금일 정상</th><th>금일 오류</th><th>전일 정상</th><th>전일 오류</th></tr>';
|
|
for (var i = 0; i < hours.length; i++) {
|
|
tableHTML += '<tr><td>' + hours[i] + '</td><td>' + (todayNormal[i] !== null ? todayNormal[i] : '-') +
|
|
'</td><td>' + (todayError[i] !== null ? todayError[i] : '-') +
|
|
'</td><td>' + yesterdayNormal[i] + '</td><td>' + yesterdayError[i] + '</td></tr>';
|
|
}
|
|
tableHTML += '</table>';
|
|
document.getElementById('tableContainer').innerHTML = tableHTML;
|
|
}
|
|
|
|
function randomizeData() {
|
|
var currentHour = new Date().getHours();
|
|
for (var i = 0; i <= currentHour; i++) {
|
|
todayNormal[i] = Math.floor(Math.random() * 500);
|
|
todayError[i] = Math.floor(Math.random() * 20);
|
|
}
|
|
updateCharts();
|
|
}
|
|
|
|
window.onload = function() {
|
|
initCharts();
|
|
document.getElementById('updateButton').addEventListener('click', randomizeData);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |