first commit 2

adm/statistics/statistics.js

@@ -0,0 +1,142 @@
+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();
+    }
+});