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