dnssash/adm/statistics/statistics.js

document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('myChart');
    if (!ctx) return;

    const urlParams = new URLSearchParams(window.location.search);
    let type = urlParams.get('type');
    
    const currentPage = window.location.pathname.split('/').pop();
    if (!type) {
        if (currentPage.includes('visit_list.php')) type = 'time';
        else if (currentPage.includes('keyword.php')) type = 'today';
        else if (currentPage.includes('board.php')) type = 'board_view';
        else if (currentPage.includes('banner.php')) type = 'position';
        else type = 'summary';
    }

    let myChart;
    let currentChartData;

    function createChart(chartType, chartData) {
        if (myChart) {
            myChart.destroy();
        }

        const isHorizontal = chartType === 'horizontalBar';
        const finalChartType = isHorizontal ? 'bar' : chartType;

        const options = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'top' },
                title: { display: true, text: chartData.title }
            },
            indexAxis: isHorizontal ? 'y' : 'x',
        };
        
        if (['pie', 'doughnut', 'radar'].includes(chartType)) {
            const colors = [
                'rgba(255, 99, 132, 0.5)', 'rgba(54, 162, 235, 0.5)', 'rgba(255, 206, 86, 0.5)',
                'rgba(75, 192, 192, 0.5)', 'rgba(153, 102, 255, 0.5)', 'rgba(255, 159, 64, 0.5)',
                'rgba(255, 99, 132, 0.8)', 'rgba(54, 162, 235, 0.8)', 'rgba(255, 206, 86, 0.8)',
                'rgba(75, 192, 192, 0.8)'
            ];
            chartData.datasets[0].backgroundColor = colors;
        } else {
            chartData.datasets[0].backgroundColor = 'rgba(54, 162, 235, 0.5)';
        }

        myChart = new Chart(ctx, {
            type: finalChartType,
            data: {
                labels: chartData.labels,
                datasets: chartData.datasets
            },
            options: options
        });
    }

    function fetchData(newType, startDate, endDate) {
        const requestType = newType || type;
        
        let url = `ajax.data.php?type=${requestType}`;
        if (startDate) url += `&start_day=${startDate}`;
        if (endDate) url += `&end_day=${endDate}`;

        fetch(url)
            .then(response => response.json())
            .then(data => {
                const chartContainer = document.querySelector('.chart-container');
                const dataTableBody = document.getElementById('data-table-body');

                if (data.labels && data.labels.length > 0) {
                    chartContainer.style.display = 'block';
                    currentChartData = data;
                    const initialChartType = data.type || 'bar';
                    createChart(initialChartType, currentChartData);

                    // 테이블 데이터 생성
                    if (dataTableBody) {
                        let tableHtml = '';
                        data.list.forEach(item => {
                            tableHtml += `<tr>
                                <td class="ct">${item.key}</td>
                                <td><div class="graph"><span class="bar" style="width:${item.bar_width}%"></span></div></td>
                                <td class="rt">${item.count}</td>
                                <td class="rt">${item.rate}</td>
                            </tr>`;
                        });
                        dataTableBody.innerHTML = tableHtml;
                    }

                } else {
                    if(myChart) myChart.destroy();
                    chartContainer.innerHTML = '<div class="empty-chart" style="text-align:center; padding: 50px;">표시할 데이터가 없습니다.</div>';
                    if(dataTableBody) dataTableBody.innerHTML = '<tr><td colspan="4" class="empty_table">데이터가 없습니다.</td></tr>';
                }
            })
            .catch(error => console.error('Error fetching chart data:', error));
    }

    $('#chart-type-selector').on('click', 'a.chart-btn', function(e) {
        e.preventDefault();
        const newChartType = $(this).data('chart-type');
        if (newChartType && currentChartData) {
            createChart(newChartType, currentChartData);
            $('.chart-btn').removeClass('active');
            $(this).addClass('active');
        }
    });
    
    function updateData() {
        const newType = new URLSearchParams(window.location.search).get('type') || type;
        const startDate = $('#start_day').val();
        const endDate = $('#end_day').val();
        fetchData(newType, startDate, endDate);
    }

    $('.local_sch a').on('click', function(e) {
        e.preventDefault();
        const url = new URL(this.href);
        const newType = url.searchParams.get('type');

        history.pushState({type: newType}, '', this.href);

        $('.local_sch a').removeClass('btn_ov01').addClass('btn_ov02');
        $(this).removeClass('btn_ov02').addClass('btn_ov01');
        
        $('input[name="type"]').val(newType);
        type = newType; // 현재 type 업데이트
        updateData();
    });

    $('#btn_search').on('click', function() {
        updateData();
    });

    // 초기 데이터 로드
    if (type !== 'summary') {
        updateData();
    }
});