HANYANG_REACT/www/kadm/visit2/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 src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script>
const today = "<?=$today?>";
const chart_log_data = <?=json_encode($logdata)?>;
const chart_sess_data = <?=json_encode($sessdata)?>;

let divnum = 3;

let gcdata = {
  log: [['시간','이번해','지난해','다음해','평균']],
  sess: [['시간','이번해','지난해','다음해','평균']],
};

Array.from(new Array(12)).forEach( (v, i) => {
  let st = luxon.DateTime.fromISO(today).plus({months: i-11}).toFormat('yyyy-MM');
  let stp = luxon.DateTime.fromISO(today).plus({months: i-11-12}).toFormat('yyyy-MM');
  let stn = luxon.DateTime.fromISO(today).plus({months: i-11+12}).toFormat('yyyy-MM');
  gcdata.log.push([
    {v:i, f:''},
    {v:chart_log_data.today.data[st]||0, f:luxon.DateTime.fromISO(today).plus({days: i-30}).toFormat('yyyy-MM') + ' ['+chart_log_data.today.data[st]+']'},
    {v:chart_log_data.prevday.data[stp]||0, f:luxon.DateTime.fromISO(today).plus({days: i-11-12}).toFormat('yyyy-MM') + ' ['+chart_log_data.prevday.data[stp]+']'},
    {v:chart_log_data.nextday.data[stn]||0, f:luxon.DateTime.fromISO(today).plus({days: i-11+12}).toFormat('yyyy-MM') + ' ['+chart_log_data.nextday.data[stn]+']'},
    Math.round((Number(chart_log_data.today.data[st])+Number(chart_log_data.prevday.data[stp])+Number(chart_log_data.nextday.data[stn]))*10/divnum)/10
  ]);
  gcdata.sess.push([
    {v:i, f:''},
    {v:chart_sess_data.today.data[st]||0, f:luxon.DateTime.fromISO(today).plus({days: i-30}).toFormat('yyyy-MM') + ' ['+chart_sess_data.today.data[st]+']'},
    {v:chart_sess_data.prevday.data[stp]||0, f:luxon.DateTime.fromISO(today).plus({days: i-11-12}).toFormat('yyyy-MM') + ' ['+chart_sess_data.prevday.data[stp]+']'},
    {v:chart_sess_data.nextday.data[stn]||0, f:luxon.DateTime.fromISO(today).plus({days: i-11+12}).toFormat('yyyy-MM') + ' ['+chart_sess_data.nextday.data[stn]+']'},
    Math.round((Number(chart_sess_data.today.data[st])+Number(chart_sess_data.prevday.data[stp])+Number(chart_sess_data.nextday.data[stn]))*10/divnum)/10
  ]);
});

let options_log = {
  chartArea: {
    top: 50,
    left:50,
    right:10,
    bottom: 120,
  },
  title: '<?=$today?> 년간 페이지뷰',
  titleTextStyle: {
    align: 'center',
  },
  seriesType: 'bars',
  bar: { groupWidth: '80%' },
  colors: ['#D2695C','#52AFAE','#ABDCF7','#ffd045'],

  legend: {
    position: 'bottom',
    textStyle: {
      fontSize: 12,
    }
  }, //개별
  //titlePosition: 'in',//타이틀
  //axisTitlesPosition: 'in',//가로축

  tooltip: {
    textStyle: {
      fontSize: 12,
      color: 'darkgreen',
    },
  },
  vAxis: {
    //textPosition: 'in'
    textStyle: {
      fontSize: 12,
    },
  },

  hAxis: {
    textStyle: {
     fontSize: 12,
    },
    maxTextLines:1,
    maxAlternation: 1,
    slantedTextAngle: 45,
    ticks: Array.from(new Array(12)).map( (v, i) => ({v:i, f:luxon.DateTime.fromISO(today).plus({months: i-11}).toFormat('yyyy-MM')})),
                                                           //luxon.DateTime.fromISO(today).plus({months: i-1}).toFormat('yyyy-MM');
    //title: '시간대',
    //textPosition: 'in',
    format: 'decimal',
    viewWindowMode: 'maximized',
    gridlines: {
      color: '#ccc',
      interval:1,
      units: {
        hours: {format:'Date(5)'}
      },
      minSpacing: 10
  }},
  series: {
    3: {type: 'line', a_curveType: 'function',},
  }
};

let options_sess = {...options_log, title:'<?=$today?> 년간 접속자수', };

function chartLogDraw() {
  let data = google.visualization.arrayToDataTable(gcdata.log);
  let options = options_log;
  let chart = new google.visualization.ComboChart(document.getElementById('day_chart_pageview'));
  chart.draw(data, options);
};

function chartSessDraw() {
  let data = google.visualization.arrayToDataTable(gcdata.sess);
  let options = options_sess;
  let chart = new google.visualization.ComboChart(document.getElementById('day_chart_sess'));
  chart.draw(data, options);
};

function chartDraw(){
  chartLogDraw();
  chartSessDraw();
}

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(chartDraw);

window.onresize = chartDraw;

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