$(function() {
	var token = $("meta[name='_csrf']").attr("content");
	var header = $("meta[name='_csrf_header']").attr("content");   
   var searchCondition = $(".search-condition");
   
   function init() {
	
		$(".search-select").on("change", ()=>{
			var today =new Date().toJSON();
				$(".beginDate").prop("value",today.substr(0,today.indexOf("T")));
				$(".endDate").prop("value",today.substr(0,today.indexOf("T")));
				console.log(new Date().toJSON())
			
		})
	
	
	
      //조회 기준에 따른 메서드 실행
      searchCondition.on("change", () => {
         //월별 통계
         if ($(".search-condition").val() == "monthly"){ 
				searchMonthly();
			}
         //일별 통계
         if($(".search-condition").val() == "daily") searchDaily();   
         //미선택
         if($(".search-condition").val() == ""){
			  unSelectBox();
			}
      })
      
      //시작 월 선택 시 설정 부분
      $(".beginMonth").on("change", () => {
         //시작 월이 min 값으로 변경
         $(".endMonth").prop("min", $(".beginMonth").val());
         //시작 월 값으로 조회 기간 세팅
         $(".endMonth").prop("value", $(".beginMonth").val());
         //시작 해의 12월이 max 값으로 세팅
         $(".endMonth").prop("max", $(".beginMonth").val().substring(0, $(".beginMonth").val().lastIndexOf("-") + 1) + "12");
      })
       
      //시작 일 선택 시 설정 부분
      $(".beginDate").on("change", () => {
         var beginVal=$(".beginDate").val();                           
         var setEndDate = new Date(beginVal.substring(0, beginVal.indexOf("-")), //년
                                   beginVal.substring(beginVal.indexOf("-")+1, beginVal.lastIndexOf("-")),1).toJSON();
        
  
 //      (beginVal.substring(0, 4), beginVal.substring(5, 7), 1)
         
         
         setEndDate = setEndDate.substr(0,setEndDate.indexOf("T"));
         
        
         //시작 일 값으로 조회 기간 세팅
         $(".endDate").prop("value", $(".beginDate").val());
         
         //정보수집 항목에서는 일별기간을 하루로 고정
         if($(".search-select").val() == "signalStatusGather" || $(".search-select").val() == "signalStatusSend"){
			 $(".endDate").on("change", () => {
					$(".beginDate").prop("value", $(".endDate").val());
				}
			)} else  {
					  //시작 일이 min 값으로 변경
       				 $(".endDate").prop("min", $(".beginDate").val());			
			         //시작 해의 31일이 max 값으로 세팅
			         $(".endDate").prop("max", setEndDate);
			         if(beginVal == null || beginVal == "")$(".endDate").prop("max", null);                                 
      			 }  
         
        		 
      			 
	 
      })

	


   }
   
   
   init()
   
   
    //ajax통신시 로딩바 구현 현 js파일내에 ajax구동시 작동. 실제구동되는 ajax파일 안에 넣어서 사용가능
   //.ajaxSetup() : 반복 사용하는 ajax()메서드의 주요 속성을 미리 설정
   $.ajaxSetup({
		beforeSend: function (xhr) { // 보내기전 로딩바구현
              xhr.setRequestHeader(header, token);
              var width = 0;
              var height = 0;
              var left = 0;
              var top = 0;

              width = 50;
              height = 50;
              top = ( $(window).height() - height ) / 2 + $(window).scrollTop();
              left = ( $(window).width() - width ) / 2 + $(window).scrollLeft();

              if($("#div_ajax_load_image").length != 0) {
                     $("#div_ajax_load_image").css({"top": top+"px","left": left+"px"});
                     $("#div_ajax_load_image").show();
                       $('html').css("cursor", "wait");
              }
              else {
                     $('body').append('<div id="div_ajax_load_image" style="position:absolute; top:' 
                     + top + 'px; left:' + left + 'px; width:' + width + 'px; height:' + height 
                     + 'px; z-index:9999; background:#f0f0f0; filter:alpha(opacity=50); opacity:alpha*0.5; margin:auto; padding:0; "><img src="/image/loading.gif" style="width:50px; height:50px;"></div>');
              }

       }, complete: function () { // 완료후 숨기기
                     $("#div_ajax_load_image").hide();
                       $('html').css("cursor", "auto");
       }

});
   




// 조회 조건 미선택 시 CSS
   function unSelectBox(){
            $(".search-condition").css("width","400px");
            $(".search-date-select").css("display","none");
            $(".search-month-select").css("display","none");
            $(".select-button").css("display","none");
    }

   // 조회 조건 일별 통계
   function searchDaily(){
      var button = $(".select-button");
      button.off("click");
      var now=new Date().toJSON();
      $(".beginDate").prop("value",now.substr(0,now.indexOf("T")));
      $(".endDate").prop("value",now.substr(0,now.indexOf("T")));
      searchCondition.css("width", "200px");
      $(".search-date-select").css("display","block");
      $(".search-month-select").css("display", "none");
      button.css("display", "block");
      button.on("click",()=>{
         var searchSelect = $(".search-select").val();
         var begin = $(".beginDate").val()
         var end = $(".endDate").val();
         if (searchSelect == "apiInvoke" && !nullChecker(begin) && !nullChecker(end)) {
            setDailyInvokeTableData(begin, end);
         }
         if (searchSelect == "systemResuource" && !nullChecker(begin) && !nullChecker(end)) {
            systemResourceDailyData(begin, end);

         }
         if (searchSelect == "signalStatusGather" && !nullChecker(begin) && !nullChecker(end)) {
            signalStatusGatherDailyData(begin, end);

         }
         if (searchSelect == "signalStatusSend" && !nullChecker(begin) && !nullChecker(end)) {
            signalStatusSendDailyData(begin, end);

         }
         
         if(nullChecker(searchSelect)){
            alert("통계 조회 항목을 선택하세요")
            $(".search-select").focus();
            return
         }
         if(nullChecker(begin)){
            alert("일별 기간을 선택하세요")
            $(".beginDate").focus();
            return
         }
         if(nullChecker(end)){
            alert("일별 기간을 선택하세요")
            $(".endDate").focus();
            return
         }
         
      })
   }
   
   
   
   // APIDaily ajax통계 데이터 가져오기 =======================================================
   function setDailyInvokeTableData(begin, end){

      $.ajax({
         url: "/getDailyInvokeTableData.do",
         async: true,
         cache: false,
         type: "post",
         dataType: "json",
         data: {
            start: begin,
            end: end
         },
         success: function(result) {
            drawDailyTable(result)
         }, error: function(error) {
            console.log(error)
         }

      })
   }
   
   // APIDaily 통계 테이블 세팅(data는 조회 데이터) ============================================
   function drawDailyTable(data){
      //테이블
      table = $(".search-table");
      
      //테이블 초기화
      table.empty();
      //chart 초기화
      $("#monthlyChart").css("display","none");
      $("#dailyChart").css("display","block");
      //테이블 타이틀 세팅
      table.append($("<tr>" +
         "<th colspan='33' class='table-head'> API Token 인증 일별 접속 통계 (조회수)</th></tr>"))
      
      //조회 일구간 세팅
      var td = $("<tr class='thead-tr'>");
      var str = "<th>일/시</th><th>계</th>";   
      for (let i = 0; i < 24; i++) {
         if(i<10)str += "<th>0" + i + "시</th>";
         if(i>=10)str += "<th>" + i + "시</th>";
      }
      td.html(str);
      table.append(td);
      
      //시작 기간 값
      var beginVal = $(".beginDate").val();
      
      //끝 기간 값
      var endVal = $(".endDate").val();
      str = "";
      var cnt = 0;
      
      var month = beginVal.substring(beginVal.indexOf("-") + 1,beginVal.lastIndexOf("-"))
      //시작 기간에서 일만 추출
      var start = Number(beginVal.substring(beginVal.lastIndexOf("-") + 1, beginVal.lenght))
      console.log(start)      
      //끝 기간에서 일만 추출
      var end = Number(endVal.substring(endVal.lastIndexOf("-") + 1, endVal.length));
      var arr = [];
      var strArr = [];
      
      // 테이블 시간 세팅하기 
      for (let i = start; i < end + 1; i++) {
         var tr = $("<tr>");
         var timeArr = [];
         data.forEach((d) => {
            //해당 월에 해당하는 데이터 추출하여 arr에 담기, cnt는 총 누적 조회수, dailyArr는 일만 따로 추출 
            if (Number(d.daily.substring(d.daily.lastIndexOf("/") + 1, d.daily.length)) == i) {
               arr.push(d);
               cnt += d.time_count;
               timeArr.push({time:d.time.substr(0,2),count:d.time_count});
            }
         })
         
         str += "<td style='width:68px'>"+month+"/"+ i +"</td><td style='width:68px'>" + cnt + "</td>";
         cnt = 0;
         
         //00시부터 23시까지 값을 세팅, 해당 일에 조회수가 있으면 daily_count, 없으면 0으로 세팅
         for (let j = 0; j < 24; j++) {
            if (j < 10) {
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes("0" + j)){
                        cnt+=timeArr[k].count;
                     }
               }
            }
            if (j >= 10){
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes(j.toString())){
                        cnt+=timeArr[k].count;
                     }
               }
            } 
            str += "<td style='width:53px'>" + cnt + "</td>"
            cnt=0;
         }
         
         tr.html(str)
         
         //빈 배열에 세팅한 값을 담음
         strArr.push(tr);
         //세팅 작업 초기화
         str = "";
         cnt = 0;
         arr = [];
         timeArr=[];
         
      }
         console.log(strArr);
      
      //테이블에 삽입
      table.append(strArr);
      $("#monthlyChart").css("display","none");
      $("#dailyChart").css("display","block");
      
      //테이블 내용의 차트 그리는 함수
      drawDailyChart(data, start, end);
   
   }
   
   
    //APIDailyChart (그래프그리기) ===================================================
   function drawDailyChart(data, start, end){
      //차트에 세팅 값을 담을 빈배열 세팅
      var xAxis = [];
      var yAxis = [];
      var arr = [];
      var dataYArr = [];
      var cnt = 0;
      
      var month = $(".beginDate").val().substr(0,7);
      for (let i = start; i < end + 1; i++) {

         var timeArr = [];
         
         data.forEach((d) => {
            //해당 일의 값이 data 일의 값과 같을 경우 찾아 빈배열에 담기(월별 구분)
            if (Number(d.daily.substring(d.daily.lastIndexOf("/") + 1, d.daily.length)) == i) {
               arr.push(d);
               timeArr.push({time:d.time.substr(0,2),count:d.time_count});
            }
         })
         
         //00시부터 23시까지 차트 값 세팅
         cnt = 0;
         for (let j = 0; j < 24; j++) {
            if (j < 10) {
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes("0" + j)){
                        cnt+=timeArr[k].count;
                     }
               }
            }
            if (j >= 10){
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes(j.toString())){
                        cnt+=timeArr[k].count;
                     }
               }
            }
            dataYArr.push(cnt);
            cnt=0;
         } 
         //y축 값 세팅
         if(i<10){
            yAxis.push({
            name: month+"-0"+i,
            fillOpacity: 0.4,
            data: dataYArr
         })
         }
         if(i>=10){
            yAxis.push({
            name: month+"-"+i,
            fillOpacity: 0.4,
            data: dataYArr
         })

         }
         cnt = 0;
         arr = [];
         dataXArr = [];
         dataYArr = [];
         
      }
      //x축 값 세팅
      for (let i = 0; i < 24; i++) {
         if(i<10)xAxis.push("0"+i);
         if(i>=10)xAxis.push(i);
      }

      //차트 세팅(id를 monthlyChart로 부여한 곳에 차트가 그려짐)
      Highcharts.chart('dailyChart', {
         
         //chart 설정
         chart: {
            backgroundColor: '#22252b',
            width: 1780,
            height: 450,
         },
         //highchart 로고 등등 제거
         exporting: {
            enabled: false
         },
         //highchart 로고 등등 제거
         credits: {
            enabled: false
         },
         //범례 설정
         legend: {
			itemStyle:{
				color: "#eeeeee",
         	}
         },
         //마우스 오버시 나오는 이벤트 문구 설정
         tooltip: {
            headerFormat: '<b>일별 접속 통계</b><br>',
            pointFormat: '{series.name}<br>{point.y}건',
         },
         //표 제목 설정
         title: {
            text: 'Api Token 인증 일별 접속 통계(조회수)',
            style: {
               color: '#7b7c7d',
               fontSize: 20,
               fontWeight: 'bold'
            }
         },
         //x축 설정
         xAxis: {
            //시작 값
            startOntick: false,
            //끝 값
            endOntick: false,
            //x축 값
            categories: xAxis,
            //x축 보여주는 설정 
            labels: {
               style: {
                  color: '#eeeeee',
                  fontSize: '10px'
               },
               formatter: function() {
                  return this.value+'시'
               }
            }
         },
         //y축 설정
         yAxis: {
            startOntick: false,
            endOntick: false,
            title: '',
            labels: {
               style: {
                  color: '#eeeeee'
               },
               format: '{value}건'
            },
         },
         //y축 값 세팅
         series: yAxis
      });
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   // systemResourceDaily ajax통계 데이터 가져오기 =======================================================
   function systemResourceDailyData(begin, end){
      $.ajax({

         url: "/systemResourceDailyData.do",
         async: true,
         cache: false,
         type: "post",
         dataType: "json",
         data: {
            start: begin,
            end: end
         },
         
		  success: function(result) {
            systemResourceDailyDataTable(result)
         }, error: function(error) {
            console.log(error)
         }
		     	
      })
   }
   
    // systemResourceDaily 통계 테이블 세팅(data는 조회 데이터) ============================================
   function systemResourceDailyDataTable(data){
      //테이블
      table = $(".search-table");
      
      //테이블 초기화
      table.empty();
      //chart 초기화
      $("#monthlyChart").css("display","none");
      $("#dailyChart").css("display","block");
      //테이블 타이틀 세팅
      table.append($("<tr>" +
         "<th colspan='33' class='table-head'> 시스템 리소스 <br> 일별 CPU, Memory, Disk 점유율 통계 (%)</th></tr>"))
      
      //조회 일구간 세팅
      var td = $("<tr class='thead-tr'>");
      var str = "<th>일/시</th><th>평균(%)</th>";   
      for (let i = 0; i < 24; i++) {
         if(i<10)str += "<th>0" + i + "시</th>";
         if(i>=10)str += "<th>" + i + "시</th>";
      }
      td.html(str);
      table.append(td);
      
      //시작 기간 값
      var beginVal = $(".beginDate").val();
      
      //끝 기간 값
      var endVal = $(".endDate").val();
      str = "";
      var cnt = 0;
      //console.log("beginVal.indexOf=" +beginVal.indexOf("-") + 1)
      //console.log("beginVal.lastIndexOf=" +beginVal.lastIndexOf("-"))
      var month = beginVal.substring(beginVal.indexOf("-") + 1,beginVal.lastIndexOf("-"))
     
      //시작 기간에서 일만 추출
      var start = Number(beginVal.substring(beginVal.lastIndexOf("-") + 1, beginVal.length))
      console.log(start)      
      //끝 기간에서 일만 추출
      var end = Number(endVal.substring(endVal.lastIndexOf("-") + 1, endVal.length));
      var arr = [];
      var strArr = [];
      
      // 테이블 시간 세팅하기 
      for (let i = start; i < end + 1; i++) {
         var tr = $("<tr>");
         var timeArr = [];
         data.forEach((d) => {
            //해당 월에 해당하는 데이터 추출하여 arr에 담기, cnt는 총 누적 조회수, dailyArr는 일만 따로 추출 
            //if(입력값과 db에서 불러온 데이터(날짜)가 일치하면..)
            if (Number(d.daily.substring(d.daily.lastIndexOf("/") + 1, d.daily.length)) == i) {
               arr.push(d);
              cnt += d.cpuAverage;// 선택한일안에 cpurate값의 총합
              //cnt = cnt + d.cpuAverage;
              
                         //시간추출해서 time에 담아주고    
               timeArr.push({time:d.time.substr(0,2),count:d.cpuAverage});
            }
         })
         //console.log("tarr"+timeArr[0])
         if((cnt/arr.length).toFixed(2)=="NaN"){
			str += "<td style='width:68px'>"+month+"/"+ i +"<br>CPU</td><td style='width:68px'>" + 0 + "</td>";
		 }else {
         str += "<td style='width:68px'>"+month+"/"+ i +"<br>CPU</td><td style='width:68px'>" + (cnt/arr.length).toFixed(2) + "</td>";
         }
         cnt = 0;
         countArr = [];
         
         //00시부터 23시까지 값을 세팅, 해당 일에 값이 있으면 cpuAverage, 없으면 0으로 세팅
         for (let j = 0; j < 24; j++) {
	
            if (j < 10) {
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes("0" + j)){
                        cnt+=timeArr[k].count;
                        countArr.push(timeArr[k].count);
                       // cnt = cnt + timeArr[k].count;
                     }
               }
            }
            if (j >= 10){
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes(j.toString())){
                        cnt+=timeArr[k].count;
                        countArr.push(timeArr[k].count);
                     }
               }
            } 
           								      
       	 	
       	 	if((cnt/countArr.length).toFixed(2) == "NaN"||(cnt/countArr.length).toFixed(2) == "00.00"){
          	  str += "<td style='width:53px'>" + 0 + "</td>";
			} else{
				str += "<td style='width:53px'>" + (cnt/countArr.length).toFixed(2) + "</td>";
			} 								       
           								       
            cnt=0;
            countArr =[];
         }
         
         tr.html(str) //tr안에 td값을 str로 대체해라
         
         //빈 배열에 세팅한 값을 담음
         strArr.push(tr);
         //세팅 작업 초기화
         str = "";
         cnt = 0;
         arr = [];
         timeArr=[];
         
      }
      
      
      
      
      
       //Memory 테이블 시간 세팅하기 
      for (let i = start; i < end + 1; i++) {
         var tr = $("<tr>");
         var timeArr = [];
         data.forEach((d) => {
            //해당 월에 해당하는 데이터 추출하여 arr에 담기, cnt는 총 누적 조회수, dailyArr는 일만 따로 추출 
            //if(입력값과 db에서 불러온 데이터(날짜)가 일치하면..)
            if (Number(d.daily.substring(d.daily.lastIndexOf("/") + 1, d.daily.length)) == i) {
               arr.push(d);
              cnt += d.memoryAverage;// 선택한일안에 cpurate값의 총합
              
                         //시간추출해서 time에 담아주고    
               timeArr.push({time:d.time.substr(0,2),count:d.memoryAverage});
            }
         })
         //console.log("tarr"+timeArr[0])
         if((cnt/arr.length).toFixed(2)=="NaN"){
			str += "<td style='width:68px'>"+month+"/"+ i +"<br>Memory</td><td style='width:68px'>" + 0 + "</td>";
		 }else {
         str += "<td style='width:68px'>"+month+"/"+ i +"<br>Memory</td><td style='width:68px'>" + (cnt/arr.length).toFixed(2) + "</td>";
         }
         cnt = 0;
         countArr = [];
         
         //00시부터 23시까지 값을 세팅, 해당 일에 값이 있으면 Average
         for (let j = 0; j < 24; j++) {
	
            if (j < 10) {
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes("0" + j)){
                        cnt+=timeArr[k].count;
                        countArr.push(timeArr[k].count);
                       // cnt = cnt + timeArr[k].count;
                     }
               }
            }
            if (j >= 10){
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes(j.toString())){
                        cnt+=timeArr[k].count;
                        countArr.push(timeArr[k].count);
                     }
               }
            } 
           								      
       	 	
       	 	if((cnt/countArr.length).toFixed(2) == "NaN"||(cnt/countArr.length).toFixed(2) == "00.00"){
          	  str += "<td style='width:53px'>" + 0 + "</td>";
			} else{
				str += "<td style='width:53px'>" + (cnt/countArr.length).toFixed(2) + "</td>";
			} 								       
           								       
            cnt=0;
            countArr =[];
         }
         
         tr.html(str) //tr안에 td값을 str로 대체해라
         
         //빈 배열에 세팅한 값을 담음
         strArr.push(tr);
         //세팅 작업 초기화
         str = "";
         cnt = 0;
         arr = [];
         timeArr=[];
         
      }
      
      
      
      
      
      
      
       //Disk 테이블 시간 세팅하기 
      for (let i = start; i < end + 1; i++) {
         var tr = $("<tr>");
         var timeArr = [];
         data.forEach((d) => {
            //해당 월에 해당하는 데이터 추출하여 arr에 담기, cnt는 총 누적 조회수, dailyArr는 일만 따로 추출 
            //if(입력값과 db에서 불러온 데이터(날짜)가 일치하면..)
            if (Number(d.daily.substring(d.daily.lastIndexOf("/") + 1, d.daily.length)) == i) {
               arr.push(d);
              cnt += d.diskAverage;// 선택한일안에 cpurate값의 총합
              
                         //시간추출해서 time에 담아주고    
               timeArr.push({time:d.time.substr(0,2),count:d.diskAverage});
            }
         })
         //console.log("tarr"+timeArr[0])
         if((cnt/arr.length).toFixed(2)=="NaN"){
			str += "<td style='width:68px'>"+month+"/"+ i +"<br>Disk</td><td style='width:68px'>" + 0 + "</td>";
		 }else {
         str += "<td style='width:68px'>"+month+"/"+ i +"<br>Disk</td><td style='width:68px'>" + (cnt/arr.length).toFixed(2) + "</td>";
         }
         cnt = 0;
         countArr = [];
         
         //00시부터 23시까지 값을 세팅, 해당 일에 값이 있으면 Average
         for (let j = 0; j < 24; j++) {
	
            if (j < 10) {
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes("0" + j)){
                        cnt+=timeArr[k].count;
                        countArr.push(timeArr[k].count);
                       // cnt = cnt + timeArr[k].count;
                     }
               }
            }
            if (j >= 10){
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes(j.toString())){
                        cnt+=timeArr[k].count;
                        countArr.push(timeArr[k].count);
                     }
               }
            } 
           								      
       	 	
       	 	if((cnt/countArr.length).toFixed(2) == "NaN"||(cnt/countArr.length).toFixed(2) == "00.00"){
          	  str += "<td style='width:53px'>" + 0 + "</td>";
			} else{
				str += "<td style='width:53px'>" + (cnt/countArr.length).toFixed(2) + "</td>";
			} 								       
           								       
            cnt=0;
            countArr =[];
         }
         
         tr.html(str) //tr안에 td값을 str로 대체해라
         
         //빈 배열에 세팅한 값을 담음
         strArr.push(tr);
         //세팅 작업 초기화
         str = "";
         cnt = 0;
         arr = [];
         timeArr=[];
         
      }
      
      
      
      
      
      
      
      
         console.log(strArr);
      
      //테이블에 삽입
      table.append(strArr);
      $("#monthlyChart").css("display","none");
      $("#dailyChart").css("display","block");
      
      //테이블 내용의 차트 그리는 함수
      systemResourceDailyDataTableDraw(data, start, end);
   
   }
   
   
   //systemResourceDailyDataTableDraw (그래프그리기) ===================================================
   function systemResourceDailyDataTableDraw(data, start, end){
      //차트에 세팅 값을 담을 빈배열 세팅
      var xAxis = [];
      var yAxis = [];
      var arr = [];
      var dataYArr = [];
      var dataYArr2 = [];
      var dataYArr3 = [];
      var cnt = 0;
      
      var month = $(".beginDate").val().substr(0,7);
      for (let i = start; i < end + 1; i++) { // start end는 .beginDate에서 일 만추출

         var timeArr = [];
         var timeArr2 = [];
         var timeArr3 = [];
         
         data.forEach((d) => {
            //불러온 db에서의 일과 사용자가 입력한 일이 같다면.. 
            if (Number(d.daily.substring(d.daily.lastIndexOf("/") + 1, d.daily.length)) == i) {
               arr.push(d);
               timeArr.push({time:d.time.substr(0,2),count:d.cpuAverage});
               timeArr2.push({time:d.time.substr(0,2),count:d.memoryAverage});
               timeArr3.push({time:d.time.substr(0,2),count:d.diskAverage});
               			     //시간별로 담아주고        //
            }
         })
         
         //00시부터 23시까지 차트 값 세팅
         cnt = 0;
         for (let j = 0; j < 24; j++) {
            if (j < 10) {
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes("0" + j)){
                        cnt+=timeArr[k].count;
                     }
               }
            }
            if (j >= 10){
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes(j.toString())){
                        cnt+=timeArr[k].count;
                     }
               }
            }
            dataYArr.push(cnt);
            cnt=0;
         } 
         
         for (let j = 0; j < 24; j++) {
            if (j < 10) {
               for(k=0;k<timeArr2.length;k++){
                     if(timeArr2[k].time.includes("0" + j)){
                        cnt+=timeArr2[k].count;
                     }
               }
            }
            if (j >= 10){
               for(k=0;k<timeArr2.length;k++){
                     if(timeArr2[k].time.includes(j.toString())){
                        cnt+=timeArr2[k].count;
                     }
               }
            }
            dataYArr2.push(cnt);
            cnt=0;
         } 
         
         for (let j = 0; j < 24; j++) {
            if (j < 10) {
               for(k=0;k<timeArr3.length;k++){
                     if(timeArr3[k].time.includes("0" + j)){
                        cnt+=timeArr3[k].count;
                     }
               }
            }
            if (j >= 10){
               for(k=0;k<timeArr3.length;k++){
                     if(timeArr3[k].time.includes(j.toString())){
                        cnt+=timeArr3[k].count;
                     }
               }
            }
            dataYArr3.push(cnt);
            cnt=0;
         } 
         
         
         //y축 값 세팅
         if(i<10){
            yAxis.push({
            name: "CPU점유율("+ i + "일)",
            fillOpacity: 0.4,
            data: dataYArr
         })
         }
         if(i>=10){
            yAxis.push({
            name: "CPU점유율("+ i + "일)",
            fillOpacity: 0.4,
            data: dataYArr
         })

         }
         
         
         
          if(i<10){
            yAxis.push({
            name:"Memory점유율("+ i + "일)",
            fillOpacity: 0.4,
            data: dataYArr2
         })
         }
         if(i>=10){
            yAxis.push({
            name:"Memory점유율("+ i + "일)",
            fillOpacity: 0.4,
            data: dataYArr2
         })

         }
         
         
         
          if(i<10){
            yAxis.push({
            name:"Disk점유율("+ i + "일)",
            fillOpacity: 0.4,
            data: dataYArr3
         })
         }
         if(i>=10){
            yAxis.push({
            name:"Disk점유율("+ i + "일)",
            fillOpacity: 0.4,
            data: dataYArr3
         })

         }
         
         
         
         cnt = 0;
         arr = [];
         dataXArr = [];
         dataYArr = [];
         dataYArr2 = [];
         dataYArr3 = [];
         
      }
      //x축 값 세팅
      for (let i = 0; i < 24; i++) {
         if(i<10)xAxis.push("0"+i);
         if(i>=10)xAxis.push(i);
      }

      //차트 세팅(id를 monthlyChart로 부여한 곳에 차트가 그려짐)
      Highcharts.chart('dailyChart', {
         
         //chart 설정
         chart: {
            backgroundColor: '#22252b',
            width: 1780,
            height: 450,
         },
         //highchart 로고 등등 제거
         exporting: {
            enabled: false
         },
         //highchart 로고 등등 제거
         credits: {
            enabled: false
         },
         //범례 설정
         legend: {
			itemStyle:{
				color: "#eeeeee",
         	}
         },
         //마우스 오버시 나오는 이벤트 문구 설정
         tooltip: {
            headerFormat: '<b>일별 접속 통계</b><br>',
            pointFormat: '{series.name}<br>{point.y}%',
         },
         //표 제목 설정
         title: {
            text: '시스템 리소스 정보<br>일별 점유율 통계',
            style: {
               color: '#7b7c7d',
               fontSize: 20,
               fontWeight: 'bold'
            }
         },
         //x축 설정
         xAxis: {
            //시작 값
            startOntick: false,
            //끝 값
            endOntick: false,
            //x축 값
            categories: xAxis,
            //x축 보여주는 설정 
            labels: {
               style: {
                  color: '#eeeeee',
                  fontSize: '10px'
               },
               formatter: function() {
                  return this.value+'시'
               }
            }
         },
         //y축 설정
         yAxis: {
            startOntick: false,
            endOntick: false,
            title: '',
            labels: {
               style: {
                  color: '#eeeeee'
               },
               format: '{value}%'
            },
         },
         
         
         //y축 값 세팅
         series: yAxis
      });
   }
   

   
   
   
   
   
     // signalStatusGatherDaily ajax통계 데이터 가져오기 =======================================================
   function signalStatusGatherDailyData(begin, end){
      $.ajax({
         url: "/signalStatusGatherDailyData.do",
         async: true,
         cache: false,
         type: "post",
         dataType: "json",
         data: {
            start: begin,
            end: end
         }
         ,success: function(result) {
            signalStatusGatherDailyDataTable(result)
         }, error: function(error) {
            console.log(error)
         }
         


      })
   }
   
    // signalStatusDailyData 통계 테이블 세팅(data는 조회 데이터) ============================================
   function signalStatusGatherDailyDataTable(data){
      //테이블
      table = $(".search-table");
      
      //테이블 초기화
      table.empty();
      //chart 초기화
      $("#monthlyChart").css("display","none");
      $("#dailyChart").css("display","block");
      //테이블 타이틀 세팅
      table.append($("<tr>" +
         "<th colspan='33' class='table-head'> 신호상태 정보<br>일별 수집 통계</th></tr>"))
      
      //조회 일구간 세팅
      var td = $("<tr class='thead-tr'>");
      var str = "<th>일/시</th><th>계</th>";   
      for (let i = 0; i < 24; i++) {
         if(i<10)str += "<th>0" + i + "시</th>";
         if(i>=10)str += "<th>" + i + "시</th>";
      }
      td.html(str);
      table.append(td);
      
      //시작 기간 값
      var beginVal = $(".beginDate").val();
      
      //끝 기간 값
      var endVal = $(".endDate").val();
      str = "";
      var cnt = 0;
      
      var month = beginVal.substring(beginVal.indexOf("-") + 1,beginVal.lastIndexOf("-"))
      //시작 기간에서 일만 추출
      var start = Number(beginVal.substring(beginVal.lastIndexOf("-") + 1, beginVal.lenght))
      console.log(start)      
      //끝 기간에서 일만 추출
      var end = Number(endVal.substring(endVal.lastIndexOf("-") + 1, endVal.length));
      var arr = [];
      var strArr = [];
      
      // 테이블 시간 세팅하기 
      for (let i = start; i < end + 1; i++) {
         var tr = $("<tr>");
         var timeArr = [];
         data.forEach((d) => {
            //해당 월에 해당하는 데이터 추출하여 arr에 담기, cnt는 총 누적 조회수, dailyArr는 일만 따로 추출 
            if (Number(d.daily.substring(d.daily.lastIndexOf("/") + 1, d.daily.length)) == i) {
               arr.push(d);
               cnt += d.time_count;
               timeArr.push({time:d.time.substr(0,2),count:d.time_count});
            }
         })
         
         str += "<td style='width:68px'>"+month+"/"+ i +"</td><td style='width:68px'>" + cnt + "</td>";
         cnt = 0;
         
         //00시부터 23시까지 값을 세팅, 해당 일에 조회수가 있으면 daily_count, 없으면 0으로 세팅
         for (let j = 0; j < 24; j++) {
            if (j < 10) {
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes("0" + j)){
                        cnt+=timeArr[k].count;
                     }
               }
            }
            if (j >= 10){
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes(j.toString())){
                        cnt+=timeArr[k].count;
                     }
               }
            } 
            str += "<td style='width:53px'>" + cnt + "</td>"
            cnt=0;
         }
         
         tr.html(str)
         
         //빈 배열에 세팅한 값을 담음
         strArr.push(tr);
         //세팅 작업 초기화
         str = "";
         cnt = 0;
         arr = [];
         timeArr=[];
         
      }
         console.log(strArr);
      
      //테이블에 삽입
      table.append(strArr);
      $("#monthlyChart").css("display","none");
      $("#dailyChart").css("display","block");
      
      //테이블 내용의 차트 그리는 함수
      ssignalStatusGatherDailyDataTableDraw(data, start, end);
   
   }
   
   
   //signalStatusDailyDataTableDraw (그래프그리기) ===================================================
   function ssignalStatusGatherDailyDataTableDraw(data, start, end){
      //차트에 세팅 값을 담을 빈배열 세팅
      var xAxis = [];
      var yAxis = [];
      var arr = [];
      var dataYArr = [];
      var cnt = 0;
      
      var month = $(".beginDate").val().substr(0,7);
      for (let i = start; i < end + 1; i++) {

         var timeArr = [];
         
         data.forEach((d) => {
            //해당 일의 값이 data 일의 값과 같을 경우 찾아 빈배열에 담기(월별 구분)
            if (Number(d.daily.substring(d.daily.lastIndexOf("/") + 1, d.daily.length)) == i) {
               arr.push(d);
               timeArr.push({time:d.time.substr(0,2),count:d.time_count});
            }
         })
         
         //00시부터 23시까지 차트 값 세팅
         cnt = 0;
         for (let j = 0; j < 24; j++) {
            if (j < 10) {
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes("0" + j)){
                        cnt+=timeArr[k].count;
                     }
               }
            }
            if (j >= 10){
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes(j.toString())){
                        cnt+=timeArr[k].count;
                     }
               }
            }
            dataYArr.push(cnt);
            cnt=0;
         } 
         //y축 값 세팅
         if(i<10){
            yAxis.push({
            name: month+"-0"+i,
            fillOpacity: 0.4,
            data: dataYArr
         })
         }
         if(i>=10){
            yAxis.push({
            name: month+"-"+i,
            fillOpacity: 0.4,
            data: dataYArr
         })

         }
         cnt = 0;
         arr = [];
         dataXArr = [];
         dataYArr = [];
         
      }
      //x축 값 세팅
      for (let i = 0; i < 24; i++) {
        if(i<10)xAxis.push("0"+i);
         if(i>=10 )xAxis.push(i);
      }

      //차트 세팅(id를 monthlyChart로 부여한 곳에 차트가 그려짐)
      Highcharts.chart('dailyChart', {
         
         //chart 설정
         chart: {
            backgroundColor: '#22252b',
            width: 1780,
            height: 450,
         },
         //highchart 로고 등등 제거
         exporting: {
            enabled: false
         },
         //highchart 로고 등등 제거
         credits: {
            enabled: false
         },
         //범례 설정
         legend: {
			itemStyle:{
				color:'#eeeeee',
			},
		},
         //마우스 오버시 나오는 이벤트 문구 설정
         tooltip: {
            headerFormat: '<b>일별 접속 통계</b><br>',
            pointFormat: '{series.name}<br>{point.y}건',
         },
         //표 제목 설정
         title: {
            text: '신호상태 정보<br>일별 수집 통계',
            style: {
               color: '#eeeeee',
               fontSize: 20,
               fontWeight: 'bold'
            }
         },
         //x축 설정
         xAxis: {
            //시작 값
            startOntick: false,
            //끝 값
            endOntick: false,
            //x축 값
            categories: xAxis,
            //x축 보여주는 설정 
            labels: {
               style: {
                  color: '#eeeeee',
                  fontSize: '10px'
               },
               formatter: function() {
                  return this.value+'시'
               }
            }
         },
         //y축 설정
         yAxis: {
            startOntick: false,
            endOntick: false,
            title: '',
            labels: {
               style: {
                  color: '#eeeeee'
               },
               format: '{value}건'
            },
         },
         //y축 값 세팅
         series: yAxis
      });
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
        // signalStatus ajax통계 데이터 가져오기 =======================================================
   function signalStatusSendDailyData(begin, end){
      $.ajax({
         url: "/signalStatusSendDailyData.do",
         async: true,
         cache: false,
         type: "post",
         dataType: "json",
         data: {
            start: begin,
            end: end
         },
         success: function(result) {
            signalStatusSendDailyDataTable(result)
         }, error: function(error) {
            console.log(error)
         }

      })
   }
   
    // signalStatusDailyData 통계 테이블 세팅(data는 조회 데이터) ============================================
   function signalStatusSendDailyDataTable(data){
      //테이블
      table = $(".search-table");
      
      //테이블 초기화
      table.empty();
      //chart 초기화
      $("#monthlyChart").css("display","none");
      $("#dailyChart").css("display","block");
      //테이블 타이틀 세팅
      table.append($("<tr>" +
         "<th colspan='33' class='table-head'> 신호상태 정보<br>일별 발송 통계</th></tr>"))
      
      //조회 일구간 세팅
      var td = $("<tr class='thead-tr'>");
      var str = "<th>일/시</th><th>계</th>";   
      for (let i = 0; i < 24; i++) {
         if(i<10)str += "<th>0" + i + "시</th>";
         if(i>=10)str += "<th>" + i + "시</th>";
      }
      td.html(str);
      table.append(td);
      
      //시작 기간 값
      var beginVal = $(".beginDate").val();
      
      //끝 기간 값
      var endVal = $(".endDate").val();
      str = "";
      var cnt = 0;
      
      var month = beginVal.substring(beginVal.indexOf("-") + 1,beginVal.lastIndexOf("-"))
      //시작 기간에서 일만 추출
      var start = Number(beginVal.substring(beginVal.lastIndexOf("-") + 1, beginVal.lenght))
      console.log(start)      
      //끝 기간에서 일만 추출
      var end = Number(endVal.substring(endVal.lastIndexOf("-") + 1, endVal.length));
      var arr = [];
      var strArr = [];
      
      // 테이블 시간 세팅하기 
      for (let i = start; i < end + 1; i++) {
         var tr = $("<tr>");
         var timeArr = [];
         data.forEach((d) => {
            //해당 월에 해당하는 데이터 추출하여 arr에 담기, cnt는 총 누적 조회수, dailyArr는 일만 따로 추출 
            if (Number(d.daily.substring(d.daily.lastIndexOf("/") + 1, d.daily.length)) == i) {
               arr.push(d);
               cnt += d.time_count;
               timeArr.push({time:d.time.substr(0,2),count:d.time_count});
            }
         })
         
         str += "<td style='width:68px'>"+month+"/"+ i +"</td><td style='width:68px'>" + cnt + "</td>";
         cnt = 0;
         
         //00시부터 23시까지 값을 세팅, 해당 일에 조회수가 있으면 daily_count, 없으면 0으로 세팅
         for (let j = 0; j < 24; j++) {
            if (j < 10) {
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes("0" + j)){
                        cnt+=timeArr[k].count;
                     }
               }
            }
            if (j >= 10){
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes(j.toString())){
                        cnt+=timeArr[k].count;
                     }
               }
            } 
            str += "<td style='width:53px'>" + cnt + "</td>"
            cnt=0;
         }
         
         tr.html(str)
         
         //빈 배열에 세팅한 값을 담음
         strArr.push(tr);
         //세팅 작업 초기화
         str = "";
         cnt = 0;
         arr = [];
         timeArr=[];
         
      }
         console.log(strArr);
      
      //테이블에 삽입
      table.append(strArr);
      $("#monthlyChart").css("display","none");
      $("#dailyChart").css("display","block");
      
      //테이블 내용의 차트 그리는 함수
      signalStatusSendDailyDataTableDraw(data, start, end);
   
   }
   
   
   //signalStatusDailyDataTableDraw (그래프그리기) ===================================================
   function signalStatusSendDailyDataTableDraw(data, start, end){
      //차트에 세팅 값을 담을 빈배열 세팅
      var xAxis = [];
      var yAxis = [];
      var arr = [];
      var dataYArr = [];
      var cnt = 0;
      
      var month = $(".beginDate").val().substr(0,7);
      for (let i = start; i < end + 1; i++) {

         var timeArr = [];
         
         data.forEach((d) => {
            //해당 일의 값이 data 일의 값과 같을 경우 찾아 빈배열에 담기(월별 구분)
            if (Number(d.daily.substring(d.daily.lastIndexOf("/") + 1, d.daily.length)) == i) {
               arr.push(d);
               timeArr.push({time:d.time.substr(0,2),count:d.time_count});
            }
         })
         
         //00시부터 23시까지 차트 값 세팅
         cnt = 0;
         for (let j = 0; j < 24; j++) {
            if (j < 10) {
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes("0" + j)){
                        cnt+=timeArr[k].count;
                     }
               }
            }
            if (j >= 10){
               for(k=0;k<timeArr.length;k++){
                     if(timeArr[k].time.includes(j.toString())){
                        cnt+=timeArr[k].count;
                     }
               }
            }
            dataYArr.push(cnt);
            cnt=0;
         } 
         //y축 값 세팅
         if(i<10){
            yAxis.push({
            name: month+"-0"+i,
            fillOpacity: 0.4,
            data: dataYArr
         })
         }
         if(i>=10){
            yAxis.push({
            name: month+"-"+i,
            fillOpacity: 0.4,
            data: dataYArr
         })

         }
         cnt = 0;
         arr = [];
         dataXArr = [];
         dataYArr = [];
         
      }
      //x축 값 세팅
      for (let i = 0; i < 24; i++) {
         if(i<10)xAxis.push("0"+i);
         if(i>=10)xAxis.push(i);
      }

      //차트 세팅(id를 monthlyChart로 부여한 곳에 차트가 그려짐)
      Highcharts.chart('dailyChart', {
         
         //chart 설정
         chart: {
            backgroundColor: '#22252b',
            width: 1780,
            height: 450,
         },
         //highchart 로고 등등 제거
         exporting: {
            enabled: false
         },
         //highchart 로고 등등 제거
         credits: {
            enabled: false
         },
         //범례 설정
         legend: {
			itemStyle:{
				color: "#eeeeee",
         	}
		 },
         //마우스 오버시 나오는 이벤트 문구 설정
         tooltip: {
            headerFormat: '<b>일별 접속 통계</b><br>',
            pointFormat: '{series.name}<br>{point.y}건',
         },
         //표 제목 설정
         title: {
            text: '신호상태 정보<br>일별 발송 통계',
            style: {
               color: '#7b7c7d',
               fontSize: 20,
               fontWeight: 'bold'
            }
         },
         //x축 설정
         xAxis: {
            //시작 값
            startOntick: false,
            //끝 값
            endOntick: false,
            //x축 값
            categories: xAxis,
            //x축 보여주는 설정 
            labels: {
               style: {
                  color: '#eeeeee',
                  fontSize: '10px'
               },
               formatter: function() {
                  return this.value+'시'
               }
            }
         },
         //y축 설정
         yAxis: {
            startOntick: false,
            endOntick: false,
            title: '',
            labels: {
               style: {
                  color: '#eeeeee'
               },
               format: '{value}건'
            },
         },
         //y축 값 세팅
         series: yAxis
      });
   }
   
   
   
   
  
   
   
   
   
   
   //====Montly Daily 구분============================================================================================
   //====Montly Daily 구분============================================================================================
   //====Montly Daily 구분============================================================================================
   
   
   
   
   
   
   // 조회 조건 월별 통계
   function searchMonthly() {

      var button = $(".select-button");
      button.off("click");
      var now=new Date().toJSON();
      $(".beginMonth").prop("value",now.substr(0,7))
      $(".endMonth").prop("value",now.substr(0,7))
      searchCondition.css("width", "200px");
      $(".search-date-select").css("display","none");
      $(".search-month-select").css("display", "block");
      button.css("display", "block");
      button.on("click", () => {
         var searchSelect = $(".search-select").val();
         var begin = $(".beginMonth").val()
         var end = $(".endMonth").val();
         if (searchSelect == "apiInvoke" && !nullChecker(begin) && !nullChecker(end)) {
            setMonthInvokeTableData("/getMonthInvokeTableData.do",begin, end);
         }
          if (searchSelect == "systemResuource" && !nullChecker(begin) && !nullChecker(end)) {
            systemResuourceMonthlyData("/systemResuourceMonthlyData.do",begin, end);
         }
         if (searchSelect == "signalStatusGather" && !nullChecker(begin) && !nullChecker(end)) {
            signalStatusGatherMonthlyData("/signalStatusGatherMonthlyData.do",begin, end);
         }
         if (searchSelect == "signalStatusSend" && !nullChecker(begin) && !nullChecker(end)) {
            signalStatusSendMonthlyData("/signalStatusSendMonthlyData.do",begin, end);
         }
         
         if(nullChecker(searchSelect)){
            alert("통계 조회 항목을 선택하세요")
            $(".search-select").focus();
            return
         }
         if(nullChecker(begin)){
            alert("월별 기간을 선택하세요")
            $(".beginMonth").focus();
            return
         }
         if(nullChecker(end)){
            alert("월별 기간을 선택하세요")
            $(".endMonth").focus();
            return
         }
      })


   }
   function nullChecker(value){
      var result=(value == null || value =="" || value == undefined)?true:false
      return result; 
   }
   
   

   
   //APIMontly 통계 데이터 가져오기 ajax ================================================================
   function setMonthInvokeTableData(url,start, end) {

      $.ajax({
         url: url,
         async: true,
         cache: false,
         type: "post",
         dataType: "json",
         data: {
            start: start,
            end: end
         },
         success: function(result) {
            drawMonthTable(result)
         }, error: function(error) {
            console.log(error)
         }

      })
   }
   
   //APIMontly 통계 테이블 세팅(data는 조회 데이터) ================================================================
   function drawMonthTable(data) {
      //테이블
      table = $(".search-table");
      
      //테이블 초기화
      table.empty();
    
      //테이블 타이틀 세팅
      table.append($("<tr><th colspan='33' class='table-head'> Api Token 인증 월별 접속 통계(조회수)</th></tr>"))
      
      //조회 일구간 세팅
      var td = $("<tr class='thead-tr'>"); // 빈방과 같은 개녕, <tr></tr> 과 같다
      var str = "<th>월/일</th><th>계</th>";
      for (let i = 1; i < 32; i++) {
         str += "<th>" + i + "일</th>";
      }
      td.html(str) // .html()는 이전내용을 지우고 새로운내용을 넣어준다
      table.append(td) // .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다.
      
      //시작 기간 값
      var beginVal = $(".beginMonth").val();
     // console.log("beginVal = "+beginVal)
      
      //끝 기간 값
      var endVal = $(".endMonth").val();
      str = "";
      var cnt = 0;	          //console.log("beginVal = "+beginVal) = 2 0 1 0 - 1 0   , console.log("start = "+ start) = 10
                                    //  substring index 위치          0 1 2 3 4 5 6 7
      
      //시작 기간에서 월만 추출              // (beginVal.lastIndexOf("-")는 substring의 한 값일뿐. 즉 susbstring(5,7)이랑 같다
      var start = Number(beginVal.substring((beginVal.indexOf("-") + 1), 7)) 
     // console.log("start = "+ start)      // indexof("-")는 -의 위치를 앞에서 부터 찾는것이고
     // console.log("end = "+ end)      // indexof("-")는 -의 위치를 앞에서 부터 찾는것이고
                                          //lastIndexof는 - 의 위치를 뒤에서 부터 찾아서 위치값을 반환한다. 
                                          // 찾고자하는 "-"값이 하나이기때문에 앞에서 찾건 뒤에서 찾건 여기서는 똑같이 4를 리턴한다.
    
     //끝 기간에서 월만 추출               
      var end = Number(endVal.substring(endVal.lastIndexOf("-") + 1, 7)); //Number()은 문자열을 숫자로 변환하는 함수입니다.
      var arr = [];
      var strArr = [];
      var result;
     // console.log("start = "+ start)
     // console.log("end = "+ end)
      //시작 월부터 끝 월까지 테이블 세팅하기 
      for (let i = start; i < end + 1; i++) {
         var tr = $("<tr>");
         var dailyArr = [];
         
         data.forEach((d) => {
            //해당 월에 해당하는 데이터 추출하여 arr에 담기, cnt는 총 누적 조회수, dailyArr는 일만 따로 추출 
            if (Number(d.monthly.substring(d.monthly.lastIndexOf("-") + 1, 7)) == i) { // montly에서 추출하여 00월 일때
               arr.push(d);
               
               cnt += d.daily_count;
              // console.log("cnt = "+cnt)
               dailyArr.push(d.daily);
            }                 //9월 dailyArr [10, 14, 16, 27 28]     10월 [01]
         })
      		// 월, 합계 표로붙여주기
         str += "<td style='width:68px'>" + i + "월</td><td style='width:68px'>" + cnt + "</td>";
         cnt = 0;
         arraycount = 0;
         //일의 최대값인 31일까지 값을 세팅, 해당 일에 조회수가 있으면 daily_count, 없으면 0으로 세팅
         //includes() 함수는 배열이 특정값을 포함하고 있는지의 여부를 확이한고 값이 있으면 true 없으면 false 즉 boolean 값으로 반환한다
         for (let j = 1; j < 32; j++) { 
            if (j < 10) result = dailyArr.includes("0" + j) ? arr[arraycount++].daily_count : 0;
            							                     //arraycount는 그냥 빈방만들어 사용한것. 초기화된 아무방이나(cnt) 사용해도  똑같다
              // dailyArr배열안에  예를들어 ("0" + j)뜻은 01 02 03...등)으로 되어있으면 그배열 번호에 맞는 daily_count값을 반환해줘
              //  
              // daily_count값이 없는경우 daily값도 없기때문..
           
            if (j >= 10) result = dailyArr.includes(j.toString()) ? arr[arraycount++].daily_count : 0;
            str += "<td style='width:53px'>" + result + "</td>"
         }
         
         tr.html(str) // <tr></tr>테그 내용을 str로 변경해준다 tr은 table row, 즉 한줄을 뜻한다
         
         //빈 배열에 세팅한 값을 담음
         strArr.push(tr);
         
         //세팅 작업 초기화
         str = "";
         cnt = 0;
         arr = [];
         arraycount = 0;
      }
      
      //테이블에 삽입 ,지금은 테이블에 th만 담겨있어서 밑에 td 값들을 넣어주어 표를 완성한다
      table.append(strArr);
      $("#monthlyChart").css("display","block"); // 표밑에 월별 그래프
      $("#dailyChart").css("display","none"); // 표밑에 일별 그래프
      
      //테이블 내용의 차트 그리는 함수
      drawMonthChart(data, start, end);
   }
   
   
    //APIMontly chart (그래프 그리기) ================================================================
   function drawMonthChart(data, start, end) {
      
      //차트에 세팅 값을 담을 빈배열 세팅
      var xAxis = [];
      var yAxis = [];
      var arr = [];
      var result;
      var dataYArr = [];
      var cnt = 0;
      
      //년은 검색한 년으로 대체 (*년은 시작해를 넘기지 못하게 세팅하여 조회 년으로 대체 가능)
      var year = $(".beginMonth").val().substring(0, 4); // 시작값으로 선택한 년도
     
      for (let i = start; i < end + 1; i++) {

         var dailyArr = [];
         
        //입력한 날짜의 월과 불러온 db의 월이 같을경우 arr에는 object(월,일,일조회수)를 dailyArr에는 날짜를 담아준다
         data.forEach((db) => {
            //해당 월의 값이 data 월의 값과 같을 경우 찾아 빈배열에 담기(월별 구분)
            if (Number(db.monthly.substring(db.monthly.lastIndexOf("-") + 1, 7)) == i) {
						      // substring(5,7)      (db에서 가져온 montly에서 월 값)과 (입력한 월) 값 이 같다면 
               
               arr.push(db); //그 object를 담고
               dailyArr.push(db.daily); // dailyArr 배열함엔 그날짜(db.daily)를 담아준다 
             //console.log("arr = " + arr)
            // console.log("dailyArr = " + dailyArr)
            }
         })
         
         //차트 1일~31일까지 값을 세팅하기 위한 작업
         //dailyArr에 담겨있는 날짜 대로 arr에서 일 조회수를 꺼내와서 dataYArr배열안에 담아준다
         for (let j = 1; j < 32; j++) {
            if (j < 10) { 
				//.includes 함수, 배열안에 ex) 01, 02, 03..등 지정한 그 문자열이 포함된경우 
				//삼항연산자를 사용하여 true일경우 object가 담긴 arr에서 일조회수를 꺼내온다
               result = dailyArr.includes("0" + j) ? arr[cnt++].daily_count : 0;
            }
            if (j >= 10) {
               result = dailyArr.includes(j.toString()) ? arr[cnt++].daily_count : 0;
            }
            dataYArr.push(result);
         }
         
         
         //y축 값 세팅 (세팅해두고 하이차트에서 끌어쓰는듯)
         yAxis.push({
            name: i + "월",
            fillOpacity: 0.1, //투명도 0 - 1 
            data: dataYArr // 차트 1일~31일까지 값 (일조회수)
         })
       
     
         cnt = 0;
         arr = [];
         dataXArr = [];
         dataYArr = [];
      }
      
      //x축 값 세팅
      for (let i = 1; i < 32; i++) {
         xAxis.push(i + "일");
      }
     // console.log(xAxis)
     // console.log(yAxis)

      //차트 세팅(id를 monthlyChart로 부여한 곳에 차트가 그려짐)
      //statistics.jsp에 다른 라이브러리와 마찬가지로 CDN으로 외부에서 하이차트 스크립트를 불러온 상태이다 그래서 사용가능
      Highcharts.chart('monthlyChart', { //id값이 부여된 태그를 불러온다 CSS 선택자를 위해서 id 값을 입력하는 것과 같다.
         
         //chart 설정
         chart: {
            backgroundColor: '#22252b',
            width: 1780,
            height: 450,
         },
         //highchart 로고 등등 제거
         exporting: { //우측상단 목록아이콘
            enabled: false
         },
         //highchart 로고 등등 제거
         credits: { // 우측하단 로고
            enabled: false
         },
         //범례(지도나 도표의 내용을 알기 위해 본보기로 표시해 둔 기호나 부호의 설명) 설정 0이 중앙인듯
         legend: { 
         	itemStyle:{
				color: "#eeeeee",
         }
		 },
         //마우스 오버시 나오는 이벤트 문구 설정
         tooltip: {         //series.name은 yAxis의 name
            headerFormat: '<b>{series.name} 통계</b><br>',
            pointFormat: year + '년 {series.name} {point.category}<br>{point.y}건'
         },            //point.categorys은 xAxis에 들어있는 값 : (i+"일")    // point.y은  yAxis data 값
         //표 제목 설정
         title: {
            text: 'Api Token 인증 월별 접속 통계(조회수)',
            style: {
               color: '#7b7c7d',
               fontSize: 20,
               fontWeight: 'bold'
            }
         },
         //x축 설정
         xAxis: {
            //시작 값
            startOntick: false,
            
            //끝 값
            endOntick: false,
            
            //x축 값
            categories: xAxis, // 월의 데이터값 (1~31일)
            
            
            //x축 보여주는 설정 
            labels: {
               style: {
                  color: '#eeeeee',
                  fontSize: '10px'
               },
               formatter: function() {
                  return this.value
                  
               }
            }
         },
         
         //y축 설정
         yAxis: {
            startOntick: false,
            endOntick: false,
            title: '',
            labels: {
               style: {
                  color: '#eeeeee'
               },
               format: '{value}건'
            
            },
         },
         //y축 값 세팅
         series: yAxis
      });
   }
   
   
     
     
      //SystemRecourcMontly 통계 데이터 가져오기 ajax ================================================================
   function systemResuourceMonthlyData(url,start, end) {

      $.ajax({
         url: url,
         async: true,
         cache: false,
         type: "post",
         dataType: "json",
         data: {
            start: start,
            end: end
         },
         success: function(result) {
            systemResuourceMonthlyDataTable(result)
         }, error: function(error) {
            console.log(error)
         }

      })
   }
   
   
   
   //SystemRecourceMontly 통계 테이블 세팅(data는 조회 데이터) ================================================================
     function systemResuourceMonthlyDataTable(data) {

      //테이블
      table = $(".search-table");
      
      //테이블 초기화
      table.empty();
    
      //테이블 타이틀 세팅
      table.append($("<tr><th colspan='33' class='table-head'> 시스템 리소스 <br> 월별 CPU, Memory, Disk 점유율 통계 (%)</th></tr>"))
      
      //조회 일구간 세팅
      var td = $("<tr class='thead-tr'>"); // 빈방과 같은 개녕, <tr></tr> 과 같다
      var str = "<th>월/일</th><th>평균(%)</th>";
      for (let i = 1; i < 32; i++) {
         str += "<th>" + i + "일</th>";
      }
      
      td.html(str) // .html()는 이전내용을 지우고 새로운내용을 넣어준다
      table.append(td) // .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다.
      
      //시작 기간 값
      var beginVal = $(".beginMonth").val();
     // console.log("beginVal = "+beginVal)
      
      //끝 기간 값
      var endVal = $(".endMonth").val();
      str = "";
      var cnt = 0;	          //console.log("beginVal = "+beginVal) = 2 0 1 0 - 1 0   , console.log("start = "+ start) = 10
                                    //  substring index 위치          0 1 2 3 4 5 6 7
      
      //시작 기간에서 월만 추출              // (beginVal.lastIndexOf("-")는 substring의 한 값일뿐. 즉 susbstring(5,7)이랑 같다
      var start = Number(beginVal.substring((beginVal.indexOf("-") + 1), 7)) 
     // console.log("start = "+ start)      // indexof("-")는 -의 위치를 앞에서 부터 찾는것이고
     // console.log("end = "+ end)      // indexof("-")는 -의 위치를 앞에서 부터 찾는것이고
                                          //lastIndexof는 - 의 위치를 뒤에서 부터 찾아서 위치값을 반환한다. 
                                          // 찾고자하는 "-"값이 하나이기때문에 앞에서 찾건 뒤에서 찾건 여기서는 똑같이 4를 리턴한다.
    
     //끝 기간에서 월만 추출               
      var end = Number(endVal.substring(endVal.lastIndexOf("-") + 1, 7)); //Number()은 문자열을 숫자로 변환하는 함수입니다.
      var arr = [];
      var strArr = [];
      var result;
     // console.log("start = "+ start)
     // console.log("end = "+ end)
      //시작 월부터 끝 월까지 테이블 세팅하기 
      for (let i = start; i < end + 1; i++) {
         var tr = $("<tr>");
         var dailyArr = [];
         cpuAverageArr = [];
         
         data.forEach((d) => {
            //해당 월에 해당하는 데이터 추출하여 arr에 담기, cnt는 총 누적 조회수, dailyArr는 일만 따로 추출 
            if (Number(d.monthly.substring(d.monthly.lastIndexOf("-") + 1, 7)) == i) { // montly에서 추출하여 00월 일때
               arr.push(d);
               
             cnt += d.cpuAverage;
             // console.log("cnt = "+cnt)
               dailyArr.push(d.daily);
             //  console.log(dailyArr)
            }                 //9월 dailyArr [10, 14, 16, 27 28]     10월 [01]
         })
      		// 월, 합계 표로붙여주기
      		
    
         if((cnt/dailyArr.length).toFixed(2) == "NaN"){
			 str += "<td style='width:68px'>"+i+"월<br>CPU</td><td style='width:68px'>" + 0 + "</td>";
	      }else{
         str += "<td style='width:68px'>"+i+"월<br>CPU</td><td style='width:68px'>" + (cnt/dailyArr.length).toFixed(2) + "</td>";
         }
         cnt = 0;
         arraycount = 0;
         //일의 최대값인 31일까지 값을 세팅, 해당 일에 조회수가 있으면 daily_count, 없으면 0으로 세팅
         //includes() 함수는 배열이 특정값을 포함하고 있는지의 여부를 확이한고 값이 있으면 true 없으면 false 즉 boolean 값으로 반환한다
         for (let j = 1; j < 32; j++) { 
            if (j < 10) result = dailyArr.includes("0" + j) ? arr[arraycount++].cpuAverage : 0;
            							                     //arraycount는 그냥 빈방만들어 사용한것. 초기화된 아무방이나(cnt) 사용해도  똑같다
              // dailyArr배열안에  예를들어 ("0" + j)뜻은 01 02 03...등)으로 되어있으면 그배열 번호에 맞는 daily_count값을 반환해줘
              //  
              // daily_count값이 없는경우 daily값도 없기때문..
           
            if (j >= 10) result = dailyArr.includes(j.toString()) ? arr[arraycount++].cpuAverage : 0;
            str += "<td style='width:53px'>" + result.toFixed(2) + "</td>"
         }
         
         tr.html(str) // <tr></tr>테그 내용을 str로 변경해준다 tr은 table row, 즉 한줄을 뜻한다
         
         //빈 배열에 세팅한 값을 담음
         strArr.push(tr);
         
         //세팅 작업 초기화
         str = "";
         cnt = 0;
         arr = [];
         arraycount = 0;
      }
      
       for (let i = start; i < end + 1; i++) {
         var tr = $("<tr>");
         var dailyArr = [];
         
         data.forEach((d) => {
            //해당 월에 해당하는 데이터 추출하여 arr에 담기, cnt는 총 누적 조회수, dailyArr는 일만 따로 추출 
            if (Number(d.monthly.substring(d.monthly.lastIndexOf("-") + 1, 7)) == i) { // montly에서 추출하여 00월 일때
               arr.push(d);
               
               cnt += d.memoryAverage;
              //console.log("cnt = "+cnt)
               dailyArr.push(d.daily);
               //console.log(dailyArr)
            }                 //9월 dailyArr [10, 14, 16, 27 28]     10월 [01]
         })
      		// 월, 합계 표로붙여주기
      		
    	 if((cnt/dailyArr.length).toFixed(2) == "NaN"){
			 str += "<td style='width:68px'>"+i+"월<br>Memory</td><td style='width:68px'>" + 0 + "</td>";
	     }else{
         str += "<td style='width:68px'>"+i+"월<br>Memory</td><td style='width:68px'>" + (cnt/dailyArr.length).toFixed(2) + "</td>";
         }
         cnt = 0;
         arraycount = 0;
         //일의 최대값인 31일까지 값을 세팅, 해당 일에 조회수가 있으면 daily_count, 없으면 0으로 세팅
         //includes() 함수는 배열이 특정값을 포함하고 있는지의 여부를 확이한고 값이 있으면 true 없으면 false 즉 boolean 값으로 반환한다
         for (let j = 1; j < 32; j++) { 
            if (j < 10) result = dailyArr.includes("0" + j) ? arr[arraycount++].memoryAverage : 0;
            							                     //arraycount는 그냥 빈방만들어 사용한것. 초기화된 아무방이나(cnt) 사용해도  똑같다
              // dailyArr배열안에  예를들어 ("0" + j)뜻은 01 02 03...등)으로 되어있으면 그배열 번호에 맞는 daily_count값을 반환해줘
              //  
              // daily_count값이 없는경우 daily값도 없기때문..
           
            if (j >= 10) result = dailyArr.includes(j.toString()) ? arr[arraycount++].memoryAverage : 0;
            str += "<td style='width:53px'>" + result.toFixed(2) + "</td>"
         }
         
         tr.html(str) // <tr></tr>테그 내용을 str로 변경해준다 tr은 table row, 즉 한줄을 뜻한다
         
         //빈 배열에 세팅한 값을 담음
         strArr.push(tr);
         
         //세팅 작업 초기화
         str = "";
         cnt = 0;
         arr = [];
         arraycount = 0;
      }
      
      
      for (let i = start; i < end + 1; i++) {
         var tr = $("<tr>");
         var dailyArr = [];
         
         data.forEach((d) => {
            //해당 월에 해당하는 데이터 추출하여 arr에 담기, cnt는 총 누적 조회수, dailyArr는 일만 따로 추출 
            if (Number(d.monthly.substring(d.monthly.lastIndexOf("-") + 1, 7)) == i) { //입력값과 db의 값(월)이 일치할때..
               arr.push(d);
               
               cnt += d.diskAverage;
              //console.log("cnt = "+cnt)
               dailyArr.push(d.daily);
               //console.log(dailyArr)
            }                 //9월 dailyArr [10, 14, 16, 27 28]     10월 [01]
         })
      		// 월, 합계 표로붙여주기
      		
    
     if((cnt/dailyArr.length).toFixed(2) == "NaN"){
			 str += "<td style='width:68px'>"+i+"월<br>Disk</td><td style='width:68px'>" + 0 + "</td>";
	     }else{
         str += "<td style='width:68px'>"+i+"월<br>Disk</td><td style='width:68px'>" + (cnt/dailyArr.length).toFixed(2) + "</td>";
         }
         cnt = 0;
         arraycount = 0;
         //일의 최대값인 31일까지 값을 세팅, 해당 일에 조회수가 있으면 daily_count, 없으면 0으로 세팅
         //includes() 함수는 배열이 특정값을 포함하고 있는지의 여부를 확이한고 값이 있으면 true 없으면 false 즉 boolean 값으로 반환한다
         for (let j = 1; j < 32; j++) { 
            if (j < 10) result = dailyArr.includes("0" + j) ? arr[arraycount++].diskAverage : 0;
            							                     //arraycount는 그냥 빈방만들어 사용한것. 초기화된 아무방이나(cnt) 사용해도  똑같다
              // dailyArr배열안에  예를들어 ("0" + j)뜻은 01 02 03...등)으로 되어있으면 그배열 번호에 맞는 daily_count값을 반환해줘
              //  
              // daily_count값이 없는경우 daily값도 없기때문..
           
            if (j >= 10) result = dailyArr.includes(j.toString()) ? arr[arraycount++].diskAverage : 0;
            str += "<td style='width:53px'>" + result.toFixed(2) + "</td>"
         }
         
         tr.html(str) // <tr></tr>테그 내용을 str로 변경해준다 tr은 table row, 즉 한줄을 뜻한다
         
         //빈 배열에 세팅한 값을 담음
         strArr.push(tr);
         
         //세팅 작업 초기화
         str = "";
         cnt = 0;
         arr = [];
         arraycount = 0;
      }
      
      
      
      
      
      
      
      
      
      
      
      //테이블에 삽입 ,지금은 테이블에 th만 담겨있어서 밑에 td 값들을 넣어주어 표를 완성한다
      table.append(strArr);
      $("#monthlyChart").css("display","block"); // 표밑에 월별 그래프
      $("#dailyChart").css("display","none"); // 표밑에 일별 그래프
      
      //테이블 내용의 차트 그리는 함수
      systemResuourceMonthlyDataTableDraw(data, start, end);
   }
         

   
   //SystemRecourceMontly chart (그래프 그리기)================================================================
   function systemResuourceMonthlyDataTableDraw(data, start, end) {
      //차트에 세팅 값을 담을 빈배열 세팅
      var xAxis = [];
      var yAxis = [];
      var yAxis2 = [];
      var yAxis3 = [];
      var arr = [];
      var arr2 = [];
      var arr3 = [];
      var result;
      var result2;
      var result3;
      var dataYArr = [];
      var dataYArr2 = [];
      var dataYArr3 = [];
      var count = 0;
      var count2 = 0;
      var count3 = 0;
      
      
      //년은 검색한 년으로 대체 (*년은 시작해를 넘기지 못하게 세팅하여 조회 년으로 대체 가능)
      var year = $(".beginMonth").val().substring(0, 4); // 시작값으로 선택한 년도
     
      for (let i = start; i < end + 1; i++) {

         var dailyArr = [];
         
        //입력한 날짜의 월과 불러온 db의 월이 같을경우 arr에는 object(월,일,일조회수)를 dailyArr에는 날짜를 담아준다
         data.forEach((db) => {
            //해당 월의 값이 data 월의 값과 같을 경우 찾아 빈배열에 담기(월별 구분)
            if (Number(db.monthly.substring(db.monthly.lastIndexOf("-") + 1, 7)) == i) {
						      // substring(5,7)      (db에서 가져온 montly에서 월 값)과 (입력한 월) 값 이 같다면 
               
               arr.push(db); //그 object를 담고
               dailyArr.push(db.daily); // dailyArr 배열함엔 그날짜(db.daily)를 담아준다 
             console.log( arr[0].memoryAverage)
            // console.log("dailyArr = " + dailyArr)
            }
         })
         
         //차트 1일~31일까지 값을 세팅하기 위한 작업
         //dailyArr에 담겨있는 날짜 대로 arr에서 일 조회수를 꺼내와서 dataYArr배열안에 담아준다
         for (let j = 1; j < 32; j++) {
            if (j < 10) { 
				//.includes 함수, 배열안에 ex) 01, 02, 03..등 지정한 그 문자열이 포함된경우 
				//삼항연산자를 사용하여 true일경우 object가 담긴 arr에서 일조회수를 꺼내온다
               result = dailyArr.includes("0" + j) ? arr[count++].cpuAverage : 0;
               result2 = dailyArr.includes("0" + j) ? arr[count2++].memoryAverage : 0;
               result3 = dailyArr.includes("0" + j) ? arr[count3++].diskAverage : 0;
            }
            if (j >= 10) {
               result = dailyArr.includes(j.toString()) ? arr[count++].cpuAverage : 0;
               result2 = dailyArr.includes(j.toString()) ? arr[count2++].memoryAverage : 0;
               result3 = dailyArr.includes(j.toString()) ? arr[count3++].diskAverage : 0;
            }
            dataYArr.push(result);
            dataYArr2.push(result2);
            dataYArr3.push(result3);
            
         }
         

         
         //y축 값 세팅 (세팅해두고 하이차트에서 끌어쓰는듯)
         yAxis.push({
            name: "CPU점유율("+ i + "월)",
            fillOpacity: 0.1, //투명도 0 - 1 
            data: dataYArr // 차트 1일~31일까지 값 
         },{
            name: "Memory점유율("+ i + "월)",
            fillOpacity: 0.1, //투명도 0 - 1 
            data: dataYArr2 // 차트 1일~31일까지 값 
         },{
            name: "Disk점유율("+ i + "월)",
            fillOpacity: 0.1, //투명도 0 - 1 
            data: dataYArr3 // 차트 1일~31일까지 값 
         })
         
         
       
     	 count = 0;
     	 count2 = 0;
     	 count3 = 0;
         arr = [];
         dataXArr = [];
         dataYArr = [];
         dataYArr2 = [];
         dataYArr3 = [];
      }
      
      //x축 값 세팅
      for (let i = 1; i < 32; i++) {
         xAxis.push(i + "일");
      }
     // console.log(xAxis)
     // console.log(yAxis)

      //차트 세팅(id를 monthlyChart로 부여한 곳에 차트가 그려짐)
      //statistics.jsp에 다른 라이브러리와 마찬가지로 CDN으로 외부에서 하이차트 스크립트를 불러온 상태이다 그래서 사용가능
      Highcharts.chart('monthlyChart', { //id값이 부여된 태그를 불러온다 CSS 선택자를 위해서 id 값을 입력하는 것과 같다.
         
         //chart 설정
         chart: {
            backgroundColor: '#22252b',
            width: 1780,
            height: 450,
         },
         //highchart 로고 등등 제거
         exporting: { //우측상단 목록아이콘
            enabled: false
         },
         //highchart 로고 등등 제거
         credits: { // 우측하단 로고
            enabled: false
         },
         //범례(지도나 도표의 내용을 알기 위해 본보기로 표시해 둔 기호나 부호의 설명) 설정 0이 중앙인듯
         legend: { 
			itemStyle:{
				color: "#eeeeee",
         	}
         },
         //마우스 오버시 나오는 이벤트 문구 설정
         tooltip: {         //series.name은 yAxis의 name
            headerFormat: '<b>{series.name} 통계</b><br>',
            pointFormat: year + '년 {series.name} {point.category}<br>{point.y}%'
         },            //point.categorys은 xAxis에 들어있는 값 : (i+"일")    // point.y은  yAxis data 값
         //표 제목 설정
         title: {
            text: '시스템 리소스 정보<br>월별 점유율 통계',
            style: {
               color: '#7b7c7d',
               fontSize: 20,
               fontWeight: 'bold'
            }
         },
         //x축 설정
         xAxis: {
            //시작 값
            startOntick: false,
            
            //끝 값
            endOntick: false,
            
            //x축 값
            categories: xAxis, // 월의 데이터값 (1~31일)
            
            
            //x축 보여주는 설정 
            labels: {
               style: {
                  color: '#eeeeee',
                  fontSize: '10px'
               },
               formatter: function() {
                  return this.value
                  
               }
            }
         },
         
         //y축 설정
         yAxis: {
            startOntick: false,
            endOntick: false,
            title: '',
            labels: {
               style: {
                  color: '#eeeeee'
               },
               format: '{value}%'
            
            },
         },
         //y축 값 세팅
         series: yAxis
      });
      
      
      
      
   }
















//signalStatusGetger 통계 데이터 가져오기 ajax ================================================================
   function signalStatusGatherMonthlyData(url,start, end) {


      $.ajax({
         url: url,
         async: true,
         cache: false,
         type: "post",
         dataType: "json",
         data: {
            start: start,
            end: end
         },
         success: function(result) {
            signalStatusGatherMonthlyDataTable(result)
         }, error: function(error) {
            console.log(error)
         }

      })
   }
   
   
   
   //signalStatusGetherMontly 통계 테이블 세팅(data는 조회 데이터) ================================================================
     function signalStatusGatherMonthlyDataTable(data) {

      //테이블
      table = $(".search-table");
      
      //테이블 초기화
      table.empty();
    
      //테이블 타이틀 세팅
      table.append($("<tr><th colspan='33' class='table-head'> 신호상태 정보<br> 월별 수집 통계</th></tr>"))
      
      //조회 일구간 세팅
      var td = $("<tr class='thead-tr'>"); // 빈방과 같은 개녕, <tr></tr> 과 같다
      var str = "<th>월/일</th><th>계</th>";
      for (let i = 1; i < 32; i++) {
         str += "<th>" + i + "일</th>";
      }
      td.html(str) // .html()는 이전내용을 지우고 새로운내용을 넣어준다
      table.append(td) // .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다.
      
      //시작 기간 값
      var beginVal = $(".beginMonth").val();
     // console.log("beginVal = "+beginVal)
      
      //끝 기간 값
      var endVal = $(".endMonth").val();
      str = "";
      var cnt = 0;	          //console.log("beginVal = "+beginVal) = 2 0 1 0 - 1 0   , console.log("start = "+ start) = 10
                                    //  substring index 위치          0 1 2 3 4 5 6 7
      
      //시작 기간에서 월만 추출              // (beginVal.lastIndexOf("-")는 substring의 한 값일뿐. 즉 susbstring(5,7)이랑 같다
      var start = Number(beginVal.substring((beginVal.indexOf("-") + 1), 7)) 
     // console.log("start = "+ start)      // indexof("-")는 -의 위치를 앞에서 부터 찾는것이고
     // console.log("end = "+ end)      // indexof("-")는 -의 위치를 앞에서 부터 찾는것이고
                                          //lastIndexof는 - 의 위치를 뒤에서 부터 찾아서 위치값을 반환한다. 
                                          // 찾고자하는 "-"값이 하나이기때문에 앞에서 찾건 뒤에서 찾건 여기서는 똑같이 4를 리턴한다.
    
     //끝 기간에서 월만 추출               
      var end = Number(endVal.substring(endVal.lastIndexOf("-") + 1, 7)); //Number()은 문자열을 숫자로 변환하는 함수입니다.
      var arr = [];
      var strArr = [];
      var result;
     // console.log("start = "+ start)
     // console.log("end = "+ end)
      //시작 월부터 끝 월까지 테이블 세팅하기 
      for (let i = start; i < end + 1; i++) {
         var tr = $("<tr>");
         var dailyArr = [];
         
         data.forEach((d) => {
            //해당 월에 해당하는 데이터 추출하여 arr에 담기, cnt는 총 누적 조회수, dailyArr는 일만 따로 추출 
            if (Number(d.monthly.substring(d.monthly.lastIndexOf("-") + 1, 7)) == i) { // montly에서 추출하여 00월 일때
               arr.push(d);
               
               cnt += d.daily_count;
              // console.log("cnt = "+cnt)
               dailyArr.push(d.daily);
            }                 //9월 dailyArr [10, 14, 16, 27 28]     10월 [01]
         })
      		// 월, 합계 표로붙여주기
         str += "<td style='width:68px'>" + i + "월</td><td style='width:68px'>" + cnt + "</td>";
         cnt = 0;
         arraycount = 0;
         //일의 최대값인 31일까지 값을 세팅, 해당 일에 조회수가 있으면 daily_count, 없으면 0으로 세팅
         //includes() 함수는 배열이 특정값을 포함하고 있는지의 여부를 확이한고 값이 있으면 true 없으면 false 즉 boolean 값으로 반환한다
         for (let j = 1; j < 32; j++) { 
            if (j < 10) result = dailyArr.includes("0" + j) ? arr[arraycount++].daily_count : 0;
            							                     //arraycount는 그냥 빈방만들어 사용한것. 초기화된 아무방이나(cnt) 사용해도  똑같다
              // dailyArr배열안에  예를들어 ("0" + j)뜻은 01 02 03...등)으로 되어있으면 그배열 번호에 맞는 daily_count값을 반환해줘
              //  
              // daily_count값이 없는경우 daily값도 없기때문..
           
            if (j >= 10) result = dailyArr.includes(j.toString()) ? arr[arraycount++].daily_count : 0;
            str += "<td style='width:53px'>" + result + "</td>"
         }
         
         tr.html(str) // <tr></tr>테그 내용을 str로 변경해준다 tr은 table row, 즉 한줄을 뜻한다
         
         //빈 배열에 세팅한 값을 담음
         strArr.push(tr);
         
         //세팅 작업 초기화
         str = "";
         cnt = 0;
         arr = [];
         arraycount = 0;
      }
      
      //테이블에 삽입 ,지금은 테이블에 th만 담겨있어서 밑에 td 값들을 넣어주어 표를 완성한다
      table.append(strArr);
      $("#monthlyChart").css("display","block"); // 표밑에 월별 그래프
      $("#dailyChart").css("display","none"); // 표밑에 일별 그래프
      
      //테이블 내용의 차트 그리는 함수
      signalStatusGatherMonthlyDataTableDraw(data, start, end);
   }
         

   
   //signalStatusGatherMontly chart (그래프 그리기)================================================================
   function signalStatusGatherMonthlyDataTableDraw(data, start, end) {
      
      //차트에 세팅 값을 담을 빈배열 세팅
      var xAxis = [];
      var yAxis = [];
      var arr = [];
      var result;
      var dataYArr = [];
      var cnt = 0;
      
      //년은 검색한 년으로 대체 (*년은 시작해를 넘기지 못하게 세팅하여 조회 년으로 대체 가능)
      var year = $(".beginMonth").val().substring(0, 4); // 시작값으로 선택한 년도
     
      for (let i = start; i < end + 1; i++) {

         var dailyArr = [];
         
        //입력한 날짜의 월과 불러온 db의 월이 같을경우 arr에는 object(월,일,일조회수)를 dailyArr에는 날짜를 담아준다
         data.forEach((db) => {
            //해당 월의 값이 data 월의 값과 같을 경우 찾아 빈배열에 담기(월별 구분)
            if (Number(db.monthly.substring(db.monthly.lastIndexOf("-") + 1, 7)) == i) {
						      // substring(5,7)      (db에서 가져온 montly에서 월 값)과 (입력한 월) 값 이 같다면 
               
               arr.push(db); //그 object를 담고
               dailyArr.push(db.daily); // dailyArr 배열함엔 그날짜(db.daily)를 담아준다 
             //console.log("arr = " + arr)
            // console.log("dailyArr = " + dailyArr)
            }
         })
         
         //차트 1일~31일까지 값을 세팅하기 위한 작업
         //dailyArr에 담겨있는 날짜 대로 arr에서 일 조회수를 꺼내와서 dataYArr배열안에 담아준다
         for (let j = 1; j < 32; j++) {
            if (j < 10) { 
				//.includes 함수, 배열안에 ex) 01, 02, 03..등 지정한 그 문자열이 포함된경우 
				//삼항연산자를 사용하여 true일경우 object가 담긴 arr에서 일조회수를 꺼내온다
               result = dailyArr.includes("0" + j) ? arr[cnt++].daily_count : 0;
            }
            if (j >= 10) {
               result = dailyArr.includes(j.toString()) ? arr[cnt++].daily_count : 0;
            }
            dataYArr.push(result);
         }
         
         
         //y축 값 세팅 (세팅해두고 하이차트에서 끌어쓰는듯)
         yAxis.push({
            name: i + "월",
            fillOpacity: 0.1, //투명도 0 - 1 
            data: dataYArr // 차트 1일~31일까지 값 (일조회수)
         })
       
     
         cnt = 0;
         arr = [];
         dataXArr = [];
         dataYArr = [];
      }
      
      //x축 값 세팅
      for (let i = 1; i < 32; i++) {
         xAxis.push(i + "일");
      }
     // console.log(xAxis)
     // console.log(yAxis)

      //차트 세팅(id를 monthlyChart로 부여한 곳에 차트가 그려짐)
      //statistics.jsp에 다른 라이브러리와 마찬가지로 CDN으로 외부에서 하이차트 스크립트를 불러온 상태이다 그래서 사용가능
      Highcharts.chart('monthlyChart', { //id값이 부여된 태그를 불러온다 CSS 선택자를 위해서 id 값을 입력하는 것과 같다.
         
         //chart 설정
         chart: {
            backgroundColor: '#22252b',
            width: 1780,
            height: 450,
         },
         //highchart 로고 등등 제거
         exporting: { //우측상단 목록아이콘
            enabled: false
         },
         //highchart 로고 등등 제거
         credits: { // 우측하단 로고
            enabled: false
         },
         //범례(지도나 도표의 내용을 알기 위해 본보기로 표시해 둔 기호나 부호의 설명) 설정 0이 중앙인듯
         legend: { 
		    itemStyle:{
				color: "#eeeeee",
         	}
         },
         //마우스 오버시 나오는 이벤트 문구 설정
         tooltip: {         //series.name은 yAxis의 name
            headerFormat: '<b>{series.name} 통계</b><br>',
            pointFormat: year + '년 {series.name} {point.category}<br>{point.y}건'
         },            //point.categorys은 xAxis에 들어있는 값 : (i+"일")    // point.y은  yAxis data 값
         //표 제목 설정
         title: {
            text: '신호상태 정보<br> 월별 수집 통계(조회수)',
            style: {
               color: '#7b7c7d',
               fontSize: 20,
               fontWeight: 'bold'
            }
         },
         //x축 설정
         xAxis: {
            //시작 값
            startOntick: false,
            
            //끝 값
            endOntick: false,
            
            //x축 값
            categories: xAxis, // 월의 데이터값 (1~31일)
            
            
            //x축 보여주는 설정 
            labels: {
               style: {
                  color: '#eeeeee',
                  fontSize: '10px'
               },
               formatter: function() {
                  return this.value
                  
               }
            }
         },
         
         //y축 설정
         yAxis: {
            startOntick: false,
            endOntick: false,
            title: '',
            labels: {
               style: {
                  color: '#eeeeee'
               },
               format: '{value}건'
            
            },
         },
         //y축 값 세팅
         series: yAxis
      });
   }
   
   
   
   
   
   
   
   
   
   
   //signalStatusSendMonthlyData 통계 데이터 가져오기 ajax ================================================================
   function signalStatusSendMonthlyData(url,start, end) {


      $.ajax({
         url: url,
         async: true,
         cache: false,
         type: "post",
         dataType: "json",
         data: {
            start: start,
            end: end
         },
         success: function(result) {
            signalStatusSendMonthlyDataTable(result)
         }, error: function(error) {
            console.log(error)
         }

      })
   }
   
   
   
   //signalStatusGetherMontly 통계 테이블 세팅(data는 조회 데이터) ================================================================
     function signalStatusSendMonthlyDataTable(data) {

      //테이블
      table = $(".search-table");
      
      //테이블 초기화
      table.empty();
    
      //테이블 타이틀 세팅
      table.append($("<tr><th colspan='33' class='table-head'> 신호상태 정보<br> 월별 발송 통계</th></tr>"))
      
      //조회 일구간 세팅
      var td = $("<tr class='thead-tr'>"); // 빈방과 같은 개녕, <tr></tr> 과 같다
      var str = "<th>월/일</th><th>계</th>";
      for (let i = 1; i < 32; i++) {
         str += "<th>" + i + "일</th>";
      }
      td.html(str) // .html()는 이전내용을 지우고 새로운내용을 넣어준다
      table.append(td) // .append()는 선택한 요소의 내용의 끝에 콘텐트를 추가합니다.
      
      //시작 기간 값
      var beginVal = $(".beginMonth").val();
     // console.log("beginVal = "+beginVal)
      
      //끝 기간 값
      var endVal = $(".endMonth").val();
      str = "";
      var cnt = 0;	          //console.log("beginVal = "+beginVal) = 2 0 1 0 - 1 0   , console.log("start = "+ start) = 10
                                    //  substring index 위치          0 1 2 3 4 5 6 7
      
      //시작 기간에서 월만 추출              // (beginVal.lastIndexOf("-")는 substring의 한 값일뿐. 즉 susbstring(5,7)이랑 같다
      var start = Number(beginVal.substring((beginVal.indexOf("-") + 1), 7)) 
     // console.log("start = "+ start)      // indexof("-")는 -의 위치를 앞에서 부터 찾는것이고
     // console.log("end = "+ end)      // indexof("-")는 -의 위치를 앞에서 부터 찾는것이고
                                          //lastIndexof는 - 의 위치를 뒤에서 부터 찾아서 위치값을 반환한다. 
                                          // 찾고자하는 "-"값이 하나이기때문에 앞에서 찾건 뒤에서 찾건 여기서는 똑같이 4를 리턴한다.
    
     //끝 기간에서 월만 추출               
      var end = Number(endVal.substring(endVal.lastIndexOf("-") + 1, 7)); //Number()은 문자열을 숫자로 변환하는 함수입니다.
      var arr = [];
      var strArr = [];
      var result;
     // console.log("start = "+ start)
     // console.log("end = "+ end)
      //시작 월부터 끝 월까지 테이블 세팅하기 
      for (let i = start; i < end + 1; i++) {
         var tr = $("<tr>");
         var dailyArr = [];
         
         data.forEach((d) => {
            //해당 월에 해당하는 데이터 추출하여 arr에 담기, cnt는 총 누적 조회수, dailyArr는 일만 따로 추출 
            if (Number(d.monthly.substring(d.monthly.lastIndexOf("-") + 1, 7)) == i) { // montly에서 추출하여 00월 일때
               arr.push(d);
               
               cnt += d.daily_count;
              // console.log("cnt = "+cnt)
               dailyArr.push(d.daily);
            }                 //9월 dailyArr [10, 14, 16, 27 28]     10월 [01]
         })
      		// 월, 합계 표로붙여주기
         str += "<td style='width:68px'>" + i + "월</td><td style='width:68px'>" + cnt + "</td>";
         cnt = 0;
         arraycount = 0;
         //일의 최대값인 31일까지 값을 세팅, 해당 일에 조회수가 있으면 daily_count, 없으면 0으로 세팅
         //includes() 함수는 배열이 특정값을 포함하고 있는지의 여부를 확이한고 값이 있으면 true 없으면 false 즉 boolean 값으로 반환한다
         for (let j = 1; j < 32; j++) { 
            if (j < 10) result = dailyArr.includes("0" + j) ? arr[arraycount++].daily_count : 0;
            							                     //arraycount는 그냥 빈방만들어 사용한것. 초기화된 아무방이나(cnt) 사용해도  똑같다
              // dailyArr배열안에  예를들어 ("0" + j)뜻은 01 02 03...등)으로 되어있으면 그배열 번호에 맞는 daily_count값을 반환해줘
              //  
              // daily_count값이 없는경우 daily값도 없기때문..
           
            if (j >= 10) result = dailyArr.includes(j.toString()) ? arr[arraycount++].daily_count : 0;
            str += "<td style='width:53px'>" + result + "</td>"
         }
         
         tr.html(str) // <tr></tr>테그 내용을 str로 변경해준다 tr은 table row, 즉 한줄을 뜻한다
         
         //빈 배열에 세팅한 값을 담음
         strArr.push(tr);
         
         //세팅 작업 초기화
         str = "";
         cnt = 0;
         arr = [];
         arraycount = 0;
      }
      
      //테이블에 삽입 ,지금은 테이블에 th만 담겨있어서 밑에 td 값들을 넣어주어 표를 완성한다
      table.append(strArr);
      $("#monthlyChart").css("display","block"); // 표밑에 월별 그래프
      $("#dailyChart").css("display","none"); // 표밑에 일별 그래프
      
      //테이블 내용의 차트 그리는 함수
      signalStatusSendMonthlyDataTableDraw(data, start, end);
   }
         

   
   //SystemRecourceGatherMontly chart (그래프 그리기)================================================================
   function signalStatusSendMonthlyDataTableDraw(data, start, end) {
      
      //차트에 세팅 값을 담을 빈배열 세팅
      var xAxis = [];
      var yAxis = [];
      var arr = [];
      var result;
      var dataYArr = [];
      var cnt = 0;
      
      //년은 검색한 년으로 대체 (*년은 시작해를 넘기지 못하게 세팅하여 조회 년으로 대체 가능)
      var year = $(".beginMonth").val().substring(0, 4); // 시작값으로 선택한 년도
     
      for (let i = start; i < end + 1; i++) {

         var dailyArr = [];
         
        //입력한 날짜의 월과 불러온 db의 월이 같을경우 arr에는 object(월,일,일조회수)를 dailyArr에는 날짜를 담아준다
         data.forEach((db) => {
            //해당 월의 값이 data 월의 값과 같을 경우 찾아 빈배열에 담기(월별 구분)
            if (Number(db.monthly.substring(db.monthly.lastIndexOf("-") + 1, 7)) == i) {
						      // substring(5,7)      (db에서 가져온 montly에서 월 값)과 (입력한 월) 값 이 같다면 
               
               arr.push(db); //그 object를 담고
               dailyArr.push(db.daily); // dailyArr 배열함엔 그날짜(db.daily)를 담아준다 
             //console.log("arr = " + arr)
            // console.log("dailyArr = " + dailyArr)
            }
         })
         
         //차트 1일~31일까지 값을 세팅하기 위한 작업
         //dailyArr에 담겨있는 날짜 대로 arr에서 일 조회수를 꺼내와서 dataYArr배열안에 담아준다
         for (let j = 1; j < 32; j++) {
            if (j < 10) { 
				//.includes 함수, 배열안에 ex) 01, 02, 03..등 지정한 그 문자열이 포함된경우 
				//삼항연산자를 사용하여 true일경우 object가 담긴 arr에서 일조회수를 꺼내온다
               result = dailyArr.includes("0" + j) ? arr[cnt++].daily_count : 0;
            }
            if (j >= 10) {
               result = dailyArr.includes(j.toString()) ? arr[cnt++].daily_count : 0;
            }
            dataYArr.push(result);
         }
         
         
         //y축 값 세팅 (세팅해두고 하이차트에서 끌어쓰는듯)
         yAxis.push({
            name: i + "월",
            fillOpacity: 0.1, //투명도 0 - 1 
            data: dataYArr // 차트 1일~31일까지 값 (일조회수)
         })
       
     
         cnt = 0;
         arr = [];
         dataXArr = [];
         dataYArr = [];
      }
      
      //x축 값 세팅
      for (let i = 1; i < 32; i++) {
         xAxis.push(i + "일");
      }
     // console.log(xAxis)
     // console.log(yAxis)

      //차트 세팅(id를 monthlyChart로 부여한 곳에 차트가 그려짐)
      //statistics.jsp에 다른 라이브러리와 마찬가지로 CDN으로 외부에서 하이차트 스크립트를 불러온 상태이다 그래서 사용가능
      Highcharts.chart('monthlyChart', { //id값이 부여된 태그를 불러온다 CSS 선택자를 위해서 id 값을 입력하는 것과 같다.
         
         //chart 설정
         chart: {
            backgroundColor: '#22252b',
            width: 1780,
            height: 450,
         },
         //highchart 로고 등등 제거
         exporting: { //우측상단 목록아이콘
            enabled: false
         },
         //highchart 로고 등등 제거
         credits: { // 우측하단 로고
            enabled: false
         },
         //범례(지도나 도표의 내용을 알기 위해 본보기로 표시해 둔 기호나 부호의 설명) 설정 0이 중앙인듯
         legend: { 
			itemStyle:{
				color: "#eeeeee",
         	}
         },
         //마우스 오버시 나오는 이벤트 문구 설정
         tooltip: {         //series.name은 yAxis의 name
            headerFormat: '<b>{series.name} 통계</b><br>',
            pointFormat: year + '년 {series.name} {point.category}<br>{point.y}건'
         },            //point.categorys은 xAxis에 들어있는 값 : (i+"일")    // point.y은  yAxis data 값
         //표 제목 설정
         title: {
            text: '신호상태 정보<br> 월별 발송 통계',
            style: {
               color: '#7b7c7d',
               fontSize: 20,
               fontWeight: 'bold'
            }
         },
         //x축 설정
         xAxis: {
            //시작 값
            startOntick: false,
            
            //끝 값
            endOntick: false,
            
            //x축 값
            categories: xAxis, // 월의 데이터값 (1~31일)
            
            
            //x축 보여주는 설정 
            labels: {
               style: {
                  color: '#eeeeee',
                  fontSize: '10px'
               },
               formatter: function() {
                  return this.value
                  
               }
            }
         },
         
         //y축 설정
         yAxis: {
            startOntick: false,
            endOntick: false,
            title: '',
            labels: {
               style: {
                  color: '#eeeeee'
               },
               format: '{value}건'
            
            },
         },
         //y축 값 세팅
         series: yAxis
      });
   }


})