dnssash/adm/statistics/banner.php

<?php
$sub_menu = '720400';
include_once('./_common.php');
auth_check_menu($auth, $sub_menu, "r");

$g5['title'] = "배너 통계";
include_once(G5_ADMIN_PATH.'/admin.head.php');

$type = isset($_GET['type']) ? preg_replace('/[^a-z]/i', '', $_GET['type']) : 'position';
?>

<link rel="stylesheet" href="statistics.css?ver=<?php echo G5_CSS_VER; ?>">

<div class="notbox">
    <p>위치별, 배너별 노출수와 클릭수를 시각적으로 분석할 수 있습니다.</p>
</div>

<dl class="srchb lnb4_col bg2_col">
    <table class="bg_col">
        <tbody>
        <tr>
            <td class="ctlt bno">통계분류</td>
            <td class="wbg pl7">
                <ul class="List">
                    <li><a href="./banner.php?type=position" class="<?php echo ($type == 'position') ? 'btn_ov01' : 'btn_ov02'; ?>">위치별 통계</a></li>
                    <li><a href="./banner.php?type=each" class="<?php echo ($type == 'each') ? 'btn_ov01' : 'btn_ov02'; ?>">개별 배너 통계</a></li>
                </ul>
            </td>
        </tr>
        </tbody>
    </table>
</dl>

<div class="pt5" style="display: none;">
    <dl class="srchb lnb4_col bg2_col">
        <form name="statisticsSearchFrm" method="GET" id="statisticsSearchFrm">
            <input type="hidden" name="type" value="<?php echo $type; ?>">
            <dl class="tc pd7 wbg">
                <input name="start_day" type="date" class="frm_input" id="start_day" value="<?php echo date('Y-m-d'); ?>"> ~
                <input name="end_day" type="date" class="frm_input" id="end_day" value="<?php echo date('Y-m-d'); ?>">
                <a class="btn btn_03 set_day" data-date="today">오늘</a>
                <a class="btn btn_03 set_day" data-date="week">이번주</a>
                <a class="btn btn_03 set_day" data-date="month">이번달</a>
                <a class="btn btn_03 set_day" data-date="7day">1주일</a>
                <a class="btn btn_03 set_day" data-date="15day">15일</a>
                <a class="btn btn_03 set_day" data-date="30day">1개월</a>
                <a class="btn btn_03 set_day" data-date="60day">3개월</a>
                <a class="btn btn_03 set_day" data-date="120day">6개월</a>
                &nbsp;
                <button type="button" id="btn_search" class="btn_submit btn">검색</button>
            </dl>
        </form>
    </dl>
</div>

<div id="chart-type-selector" class="local_sch01 local_sch">
    <strong>차트 모양</strong>
    <a class="btn btn_03 chart-btn active" data-chart-type="bar">세로막대</a>
    <a class="btn btn_03 chart-btn" data-chart-type="horizontalBar">가로막대</a>
    <a class="btn btn_03 chart-btn" data-chart-type="line">선그래프</a>
    <a class="btn btn_03 chart-btn" data-chart-type="pie">원형</a>
    <a class="btn btn_03 chart-btn" data-chart-type="doughnut">도넛</a>
    <a class="btn btn_03 chart-btn" data-chart-type="radar">레이더</a>
</div>

<div class="chart-container">
    <canvas id="myChart"></canvas>
</div>

<!-- 💡 [핵심 수정] 이미지 경로 수정 -->
<dl class="ntlt lnb_col"><img src="img/bul_10.png" class="t"> 상세 데이터</dl>
<table width="100%" class="access ttlt tf">
    <thead>
    <tr class="bg">
        <th>항목</th>
        <th>그래프</th>
        <th>클릭수</th>
        <th>비율(%)</th>
    </tr>
    </thead>
    <tbody id="data-table-body">
        <!-- 데이터가 여기에 동적으로 추가됩니다. -->
    </tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="statistics.js?ver=<?php echo G5_JS_VER; ?>"></script>

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script>
    $(function(){
        $(".hasDatepicker").datepicker({
            dateFormat: "yy-mm-dd"
        });

        $('.set_day').click(function(){
            var term = $(this).data('date');
            var today = new Date();
            var start_day, end_day;

            end_day = $.datepicker.formatDate('yy-mm-dd', today);

            switch(term) {
                case 'today':
                    start_day = end_day;
                    break;
                case 'week':
                    today.setDate(today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1));
                    start_day = $.datepicker.formatDate('yy-mm-dd', today);
                    break;
                case 'month':
                    start_day = $.datepicker.formatDate('yy-mm-01', today);
                    break;
                default:
                    var days = parseInt(term.replace('day', ''));
                    today.setDate(today.getDate() - (days - 1));
                    start_day = $.datepicker.formatDate('yy-mm-dd', today);
                    break;
            }

            $('#start_day').val(start_day);
            $('#end_day').val(end_day);

// 💡 [핵심 수정] 선택된 버튼 스타일 적용
            $('.set_day').removeClass('active');
            $(this).addClass('active');
        });
        // 차트 종류 변경 버튼 이벤트
        $('.chart-btn').click(function(){
            var chartType = $(this).data('chart-type');
            // createChart(chartType);
            $('.chart-btn').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>
<?php
include_once(G5_ADMIN_PATH.'/admin.tail.php');
?>