HANYANG_MES/home_dir/www/kadm/visit/visit_chart_year.php

<?php
if( !$cate_area ) return;

include_once "{$_SERVER['DOCUMENT_ROOT']}/common.inc.php";
include_once _ADM_INC_PATH_ ."/auth_check.php";

$vsobj = new Visit();

$today   = $_REQUEST['sdate'] ?: date("Y-m-d");
$prevday = strtodate($today." -365 days");
$nextday = strtodate($today." +365 days");


$logdata['today']   = $vsobj->getVisitData("mon", "LOG", $cate_area, strtodate($today." -364 days"), $today);
$logdata['prevday'] = $vsobj->getVisitData("mon", "LOG", $cate_area, strtodate($prevday." -364 days"), $prevday);
$logdata['nextday'] = $vsobj->getVisitData("mon", "LOG", $cate_area, strtodate($nextday." -364 days"), $nextday);
$sessdata['today']   = $vsobj->getVisitData("mon", "SESS", $cate_area, strtodate($today." -364 days"), $today);
$sessdata['prevday'] = $vsobj->getVisitData("mon", "SESS", $cate_area, strtodate($prevday." -364 days"), $prevday);
$sessdata['nextday'] = $vsobj->getVisitData("mon", "SESS", $cate_area, strtodate($nextday." -364 days"), $nextday);
include _ADM_INC_PATH_ ."/header.html";
?>

        <form method="get" name="sform" id="sform" class="sform form-inline" action="<?=$_SERVER['PHP_SELF']?>">
          <label> <span> 날짜 :</span>
            <input type="date" max="9999-12-31" name="sdate" id="sdate" class="dpicker form-control form-control-sm" value="<?=$_REQUEST['sdate']?>">
          </label>
        </form>

        <div id="cmd_bar" class="mb-2">
          <div class="h4"><i class="bi bi-files-alt"></i> <?=$cate_title?> 방문 통계</div>
          <div class="text-right">
            <?php include __DIR__."/visit_chart.ini.php";?>
          </div>
        </div>

        <div class="container-fluid mt-3 cont_hfix">
          <div class="row">
            <div class="col">
              <h5 class="d-flex justify-content-between">
                <span><i class="bi bi-subtract"></i> <?=$cate_title?> 페이지뷰 통계</span>
              </h5>
              <div id="day_chart_pageview" style="width:99%; height:300px;"></div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <h5 class="d-flex justify-content-between">
                <span><i class="bi bi-subtract"></i> <?=$cate_title?> 접속자 통계</span>
              </h5>
              <div id="day_chart_sess" style="width:99%; height:300px;"></div>
            </div>
          </div>
        </div>
<?php

include _ADM_INC_PATH_ ."/footer.html";
?>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.36.0/dist/apexcharts.min.js"></script>
<script>
const today = "<?=$today?>";
const chart_log_data = <?=json_encode($logdata)?>;
const chart_sess_data = <?=json_encode($sessdata)?>;
const labels = [];
for (let i = 11; i >= 0; i--) {
  labels.push( luxon.DateTime.fromISO(today).plus({months: i*-1}).toFormat('yyyy-MM') );
}

let divnum = 3;
if( today >= luxon.DateTime.now().toFormat("yyyy-MM-dd") ){
  divnum = 2;
}

let options_log = {
  series: [{
    name: "평균",
    color: "#d2d7d9",
    type: 'line',
    data: Object.keys(chart_log_data.today.data).map(key => Math.round((Number(chart_log_data.today.data[key])+Number(chart_log_data.prevday.data[key])+Number(chart_log_data.nextday.data[key]))/divnum))
  },{
    name: "이번해",
    color: "#D06356",
  type: 'column',
    data: Object.keys(chart_log_data.today.data).map(key => chart_log_data.today.data[key])
  },{
    name: "지난해",
    color: "#52AFAE",
  type: 'column',
    data: Object.keys(chart_log_data.prevday.data).map(key => chart_log_data.prevday.data[key])
  },{
    name: "다음해",
    color: "#ABDCF7",
  type: 'column',
    data: Object.keys(chart_log_data.nextday.data).map(key => chart_log_data.nextday.data[key])
  }],
  chart: {
    height: 350,
    zoom: {
      enabled: false
    },
    animations: {
      enabled: false,
      easing: 'linear',
      speed: 800,
      animateGradually: {
        enabled: false,
        delay: 50
      },
      dynamicAnimation: {
        enabled: false,
        speed: 200
      }
    },
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'smooth'
  },
  title: {
    text: '<?=$today?> 년간 페이지뷰',
    align: 'center'
  },
  grid: {
    show: true,
    borderColor: '#ccc',
    strokeDashArray: 1,
    xaxis: {
      lines: {
        show: true
      }
    },
    yaxis: {
      lines: {
        show: true
      }
    },
  },
  xaxis: {
    categories: labels,
  },
};

let options_sess = {...options_log,
  series: [{
    name: "평균",
    color: "#d2d7d9",
    type: 'line',
    data: Object.keys(chart_sess_data.today.data).map(key => Math.round((Number(chart_sess_data.today.data[key])+Number(chart_sess_data.prevday.data[key])+Number(chart_sess_data.nextday.data[key]))/divnum))
  },{
    name: "이번해",
    color: "#D06356",
    type: 'column',
    data: Object.keys(chart_sess_data.today.data).map(key => chart_sess_data.today.data[key])
  },{
    name: "지난해",
    color: "#52AFAE",
    type: 'column',
    data: Object.keys(chart_sess_data.prevday.data).map(key => chart_sess_data.prevday.data[key])
  },{
    name: "다음해",
    color: "#ABDCF7",
    type: 'column',
    data: Object.keys(chart_sess_data.nextday.data).map(key => chart_sess_data.nextday.data[key])
  }],
  title: {
    text: '<?=$today?> 년간 접속자수',
    align: 'center'
  },
}

let chart_log = new ApexCharts(document.querySelector("#day_chart_pageview"), options_log);
chart_log.render();

let chart_sess = new ApexCharts(document.querySelector("#day_chart_sess"), options_sess);
chart_sess.render();


document.getElementById("sdate").addEventListener("change", (e)=>{
  location.href = '?cate_area=<?=$cate_area?>&mode=<?=$_REQUEST['mode']?>&sdate='+e.target.value;
});
</script>