<%@ 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>