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