init

2025-09-05 17:16:26 +09:00
commit c54ef1903f
4947 changed files with 817291 additions and 0 deletions
@@ -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>
@@ -0,0 +1,124 @@
+<%@ 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>
+        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 id="main" style="width: 900px;height:500px;"></div>
+<h2>시간별 API 호출 통계 데이터</h2>
+<div id="tableContainer"></div>
+
+<script type="text/javascript">
+    window.onload = function() {
+        var myChart = echarts.init(document.getElementById('main'));
+
+        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 option = {
+            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
+                }
+            ]
+        };
+
+        myChart.setOption(option);
+
+        // 테이블 생성
+        var tableHTML = '<table><tr><th>시간</th><th>사용자 인증 API</th><th>데이터 조회 API</th><th>결제 처리 API</th></tr>';
+        for (var i = 0; i < times.length; i++) {
+            tableHTML += '<tr><td>' + times[i] + '</td><td>' + authAPI[i] + '</td><td>' + dataAPI[i] + '</td><td>' + paymentAPI[i] + '</td></tr>';
+        }
+        tableHTML += '</table>';
+        document.getElementById('tableContainer').innerHTML = tableHTML;
+    };
+</script>
+</body>
+</html>
@@ -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>