eapim-admin/WebContent/jsp/dashboard-modern/components/dashboard-peak.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"%>

<div class="dashboard-peak">
    <h2 class="section-title">피크 처리 성능
        <button class="peak-filter-btn active" id="peakTps">tps</button>
        <button class="peak-filter-btn" id="peakTrade">trade</button>
    </h2>

    <div class="card">
        <div class="card-title">

        </div>
        <div class="peak-grid" id="peak-tps-container">
            <!-- 피크 성능 데이터가 동적으로 추가됩니다 -->
        </div>

        <div class="peak-grid" id="peak-trade-container" style="display:none">
            <!-- 피크 성능 데이터가 동적으로 추가됩니다 -->
        </div>
    </div>
</div>

<!-- 피크 성능 카드 템플릿 -->
<template id="peak-card-template">
    <div class="peak-card">
        <div class="peak-header">
            <div class="peak-header-content">
                <h4 class="peak-service-type">서비스 유형</h4>
                <span class="peak-tps">tps</span>
                <span class="peak-date">날짜</span>
            </div>
        </div>
    </div>
</template>

<style>
    .dashboard-peak {
        position: relative;
    }

    /* FEP와 BAP를 상하로 배치하기 위한 스타일 */
    .peak-grid {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        height: 263px; /* 배치 처리 성능 높이와 일관되게 설정 */
        overflow-y: auto; /* 내용이 많을 경우 스크롤 가능하도록 */
    }

    .peak-card {
        margin-bottom: 0.3rem;
        height: auto; /* 자동 높이 설정 */
        background-color: white;
        border-radius: var(--rounded-md);
        border: 1px solid var(--color-gray-200);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .peak-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
    }

    /* 좁은 공간에 맞게 조정 */
    .peak-header {
        margin-bottom: 0.1rem;
        padding: 0.3rem 0.5rem; /* 패딩 더 축소 */
        border-bottom: 1px solid var(--color-gray-200);
    }

    .peak-header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .peak-service-type {
        font-size: 0.85rem;
        margin: 0;
        font-weight: 600;
        color: var(--color-gray-800);
    }

    .peak-date {
        font-size: 0.75rem;
        color: var(--color-gray-500);
    }

    .peak-content {
        padding: 0.3rem 0.5rem; /* 패딩 더 축소 */
        display: flex;
        align-items: center;
    }

    .peak-value-container {
        flex: 1;
    }

    .peak-value {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-gray-900);
    }

    .peak-label {
        font-size: 0.75rem;
        color: var(--color-gray-500);
    }

    /* 차트 높이 조정 */
    .peak-chart {
        height: 40px; /* 차트 높이 더 축소 */
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .peak-bar-container {
        height: 100%;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .peak-bar {
        width: 30px;
        background-color: var(--color-primary);
        border-radius: 3px 3px 0 0;
    }

    /* 피크 섹션 스타일 조정 */
    .peak-container .card {
        height: 100%;
    }

    .peak-tps {
        font-size: 1rem;
        margin-left: auto;
        margin-right: 8px;
        font-weight: 600;
        color: var(--color-gray-900);
        display: flex;
        align-items: end;
    }


</style>

<script>
    // 숫자 형식화 함수 (천 단위 콤마 추가)
    function formatNumber(num) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }

    // 피크 성능 데이터 업데이트 함수
    function updatePeakPerformance(data) {
        if (!data || !data.peakTps || !data.peakTrade) return;

        var container = document.getElementById('peak-tps-container');
        container.innerHTML = '';

        // 최대값 찾기 (스케일링을 위해)
        var maxValue = 0;
        data.peakTps.forEach(function(peak) {
            var value = peak.tps;
            if (value > maxValue) maxValue = value;
        });

        // 피크 카드 생성
        data.peakTps.forEach(function(peak) {
            var template = document.getElementById('peak-card-template');
            var clone = document.importNode(template.content, true);

            // 서비스 유형 설정
            clone.querySelector('.peak-service-type').textContent = peak.serviceType;

            // tps 설정
            clone.querySelector('.peak-tps').textContent = (0 || peak.tps);

            // 날짜 설정
            clone.querySelector('.peak-date').textContent = peak.formattedDate || peak.date;

            container.appendChild(clone);
        });

        var tradeContainer = document.getElementById('peak-trade-container');
        tradeContainer.innerHTML = '';

        // 피크 카드 생성
        data.peakTrade.forEach(function(peak) {
            var template = document.getElementById('peak-card-template');
            var clone = document.importNode(template.content, true);

            // 서비스 유형 설정
            clone.querySelector('.peak-service-type').textContent = peak.serviceType;

            // tps 설정
            clone.querySelector('.peak-tps').textContent = (0 || peak.tps);

            // 날짜 설정
            clone.querySelector('.peak-date').textContent = peak.formattedDate || peak.date;

            tradeContainer.appendChild(clone);
        });
    }

    // 피크 성능 데이터 로드 함수
    function loadPeakPerformanceData() {
        // 항상 TPS 데이터 로드 (선택 버튼 제거)
        ModernDashboardApi.getPeakPerformance('tps', function(data) {
            updatePeakPerformance(data);
        });
    }

    // 서버 필터 버튼 클릭 이벤트
    $('.peak-filter-btn').click(function() {
        var type = $(this).prop("id");

        if (type === 'peakTps') {
            // 전체 표시
            $("#peakTrade").removeClass('active');
            $("#peakTps").addClass('active');
            $("#peak-tps-container").show();
            $("#peak-trade-container").hide();

        } else if( type === 'peakTrade' ){
            // 필터링
            $("#peakTps").removeClass('active');
            $("#peakTrade").addClass('active');
            $("#peak-tps-container").hide();
            $("#peak-trade-container").show();
        }
    });

    // 초기 로드
    $(document).ready(function() {
        loadPeakPerformanceData();
    });
</script>