<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<div class="wrapper-dashboard">
	<div id="card1" class="card dashboard-total">
	    <div class="card-body row">
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1" id="card1-1">
	            	<span class="skeleton">?/?</span>
	            </p>
	            <i class="svg-cctv-fixed w-px-30 d-block" title="고정형CCTV"></i>
	        </div>
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1" id="card1-2">
	            	<span class="skeleton">?/?</span>
	            </p>
	            <i class="svg-crackdown-road w-px-30 d-block" title="도보"></i>
	        </div>
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1" id="card1-3">
	            	<span class="skeleton">?/?</span>
	            </p>
	            <i class="svg-cctv-drive w-px-30 d-block" title="주행형CCTV"></i>
	        </div>
<%--
	        <div class="col px-4 d-flex flex-column align-items-center">
	            <p class="mb-1" id="card1-4">
	            	<span class="skeleton">?/?</span>
	            </p>
	            <i class="svg-crackdown-minwon w-px-30 d-block" title="민원"></i>
	        </div>
--%>
	    </div>
	    <div class="card-footer ms-auto">
	        <a href="#" id="btnGoToCrdn">단속관리 바로가기 ></a>
	    </div>
	</div>

	<div id="card2" class="card dashboard-total">
	    <div class="card-body row">
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1" id="card2-1">
	            	<span class="skeleton">?/?</span>
	            </p>
	            <i class="svg-target-lvy w-px-30 d-block" title="등록대상"></i>
	        </div>
	        <div class="col px-4 d-flex flex-column align-items-center">
	            <p class="mb-1" id="card2-2">
	            	<span class="skeleton">?/?</span>
	            </p>
	            <i class="svg-target-transfer w-px-30 d-block" title="이첩대상"></i>
	        </div>
	    </div>
	    <div class="card-footer ms-auto">

	    </div>
	</div>

	<div id="card3" class="card dashboard-total">
	    <div class="card-body row">
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1" id="card3-1">
	            	<span class="skeleton">?/?</span>
	            </p>
	            <i class="svg-sendstat-guide w-px-30 d-block" title="계도장 발송현황"></i>
	        </div>
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1" id="card3-2">
	            	<span class="skeleton">?/?</span>
	            </p>
	            <i class="svg-sendstat-before w-px-30 d-block" title="사전통보 발송현황"></i>
	        </div>
	        <div class="col px-4 d-flex flex-column align-items-center">
	            <p class="mb-1" id="card3-3">
	            	<span class="skeleton">?/?</span>
	            </p>
	            <i class="svg-sendstat-nop w-px-30 d-block" title="고지서 발송현황"></i>
	        </div>
	    </div>
	    <div class="card-footer ms-auto">

	    </div>
	</div>

	<div id="card4" class="card dashboard-total">
	    <div class="card-body row">
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1" id="card4-1">
	            	<span class="skeleton">?/?</span>
	            </p>
	            <i class="svg-opn-rcp w-px-30 d-block" title="접수"></i>
	        </div>
	        <div class="col px-4 card-separator d-flex flex-column align-items-center">
	            <p class="mb-1" id="card4-2">
	            	<span class="skeleton">?/?</span>
	            </p>
	            <i class="svg-opn-decision w-px-30 d-block" title="수용/미수용"></i>
	        </div>
	        <div class="col px-4 d-flex flex-column align-items-center">
	            <p class="mb-1" id="card4-3">
	            	<span class="skeleton">?/?</span>
	            </p>
	            <i class="svg-opn-selfdrop w-px-30 d-block" title="자진취하"></i>
	        </div>
	    </div>
	    <div class="card-footer ms-auto">
	        <a href="#" id="btnGoToOpnn">의견진술관리 바로가기 ></a>
	    </div>
	</div>
</div>
<div class="wrapper-dashboard">
	<div class="card dashboard-chart">
	    <div class="card-header d-flex align-items-center justify-content-between">
	        <h5 class="card-title m-0 me-2">단속 자료 통계(유형별)</h5>
	        <div>건수(최근 15일)</div>
	    </div>
	    <div class="card-body d-flex justify-content-center" id="lineChartCardBody">
	        <canvas id="lineChart" class="chartjs mh-px-300" data-height="500"></canvas>
	    </div>
	    <div class="card-footer ms-auto">
	        통계현황 바로가기 >
	    </div>
	</div>

	<div class="card dashboard-chart">
	    <div class="card-header d-flex align-items-center justify-content-between">
	        <h5 class="card-title m-0 me-2">단속통계</h5>
	        <div>처리유형별(일별)</div>
	    </div>
	    <div class="card-body d-flex justify-content-center" id="doughnutChart1CardBody">
	        <canvas id="doughnutChart1" class="chartjs mh-px-300" data-height="350"></canvas>
	    </div>
	    <div class="card-footer ms-auto">
	        통계현황 바로가기 >
	    </div>
	</div>

	<div class="card dashboard-chart">
	    <div class="card-header d-flex align-items-center justify-content-between">
	        <h5 class="card-title m-0 me-2">발송통계</h5>
	        <div>발송유형별(일별)</div>
	    </div>
	    <div class="card-body d-flex justify-content-center" id="doughnutChart2CardBody">
	        <canvas id="doughnutChart2" class="chartjs mh-px-300" data-height="350"></canvas>
	    </div>
	    <div class="card-footer ms-auto">
	        통계현황 바로가기 >
	    </div>
	</div>

	<div class="card dashboard-chart">
	    <div class="card-header d-flex align-items-center justify-content-between">
	        <h5 class="card-title m-0 me-2">의견진술통계</h5>
	        <div>처리유형별(일별)</div>
	    </div>
	    <div class="card-body d-flex justify-content-center" id="doughnutChart3CardBody">
	        <canvas id="doughnutChart3" class="chartjs mh-px-300" data-height="350"></canvas>
	    </div>
	    <div class="card-footer ms-auto">
	        통계현황 바로가기 >
	    </div>
	</div>
</div>

<c:set var="dashboardScript" scope="request">

LoadScript("chartScript",wctx.url("/webjars/3rd-party/sneat/libs/chartjs/chartjs.js"));


var falseLineChart = `<svg xmlns="http://www.w3.org/2000/svg"  class="skeleton"
height="250" viewBox="0 0 24 24">
<path class="skeleton" d="M3 3v17a1 1 0 0 0 1 1h17v-2H5V3H3z"></path>
<path class="skeleton" d="M15.293 14.707a.999.999 0 0 0 1.414 0l5-5-1.414-1.414L16 12.586l-2.293-2.293a.999.999 0 0 0-1.414 0l-5 5 1.414 1.414L13 12.414l2.293 2.293z"></path>
</svg>`;

var falseDoughnutChart = `<svg xmlns="http://www.w3.org/2000/svg" class="skeleton"
height="250" viewBox="0 0 24 24">
<path class="skeleton" d="M13 6c2.507.423 4.577 2.493 5 5h4c-.471-4.717-4.283-8.529-9-9v4z"></path>
<path class="skeleton" d="M18 13c-.478 2.833-2.982 4.949-5.949 4.949-3.309 0-6-2.691-6-6C6.051 8.982 8.167 6.478 11 6V2c-5.046.504-8.949 4.773-8.949 9.949 0 5.514 4.486 10 10 10 5.176 0 9.445-3.903 9.949-8.949h-4z"></path>
</svg>`;

var statReqArr = [];

fnMakeSkeleton();


//데이터 로딩 전 이미지 표시
function fnMakeSkeleton(){

	$("#lineChart").hide();
	$("#doughnutChart1").hide();
	$("#doughnutChart2").hide();
	$("#doughnutChart3").hide();

	$("#lineChartCardBody").append(falseLineChart);
	$("#doughnutChart1CardBody").append(falseDoughnutChart);
	$("#doughnutChart2CardBody").append(falseDoughnutChart);
	$("#doughnutChart3CardBody").append(falseDoughnutChart);
}


//통계 요청 데이터 생성(여러 건)
function fnMakeStatReq(taskSeCd){
	var lastDay = TODAY().replaceAll("-","");
	var firstDay = DateSupport.getAddDay(-14).replaceAll("-","");

	var defaultQuery = {};


	//단속구분별 전체/완료 건수
	defaultQuery = {
		structureType 				: "dummy",
		statDomain 					: "crdn",
		groupInfoList : [
			{
				refCol 			: "CRDN_SE_CD",
				ctgrType 		: "code",
				dtlCtgr 		: "FIM002"
			}
		],
		codeSubsetInfoList : [
<%--
			{
				sourceGroup : "FIM002",
				sourceCodes : ["08","09","10","11"],
				targetCode : "minwon",
				targetCodeVal : "민원"
			},
--%>
			{
				sourceGroup : "FIM002",
				sourceCodes : ["06","13"],
				targetCode : "dobo",
				targetCodeVal : "도보"
			}
		],
		fixedItemId 				: ["01","02","dobo"],
<%--		fixedItemId 				: ["01","02","minwon","dobo"], --%>
		namedNumberValueSeperator 	: "completeAndTotal",
		globalAggregate 			: "count",
		taskSeCd 					: taskSeCd,
		dayColumn					: "REG_DT",
		firstDay					: firstDay,
		lastDay						: lastDay
	};

	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "groupInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "numberValueInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "codeSubsetInfoList");

	statReqArr.push({
		query : defaultQuery,
		cursor : "card1",
		statType : "progressAndTotal"
	});

	//초기자료처리별 전체/완료건수
	defaultQuery = {
		structureType 				: "dummy",
		statDomain 					: "crdn",
		groupInfoList : [
			{
				refCol 			: "등록대상이첩대상구분",
				ctgrType 		: "code",
				dtlCtgr 		: "FIM999"
			}
		],
		fixedItemId 				: ["등록대상","이첩대상"],
		namedNumberValueSeperator 	: "completeAndTotal",
		globalAggregate 			: "count",
		taskSeCd 					: taskSeCd,
		dayColumn					: "REG_DT",
		firstDay					: firstDay,
		lastDay						: lastDay
	};

	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "groupInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "numberValueInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "codeSubsetInfoList");

	statReqArr.push({
		query : defaultQuery,
		cursor : "card2",
		statType : "progressAndTotal"
	});

	//발송문서별 전체/완료 건수
	defaultQuery = {
		structureType 				: "dummy",
		statDomain 					: "sndb",
		groupInfoList : [
			{
				refCol 			: "SNDNG_SE_CD",
				ctgrType 		: "code",
				dtlCtgr 		: "FIM047"
			}
		],
		codeSubsetInfoList : [
			{
				sourceGroup : "FIM047",
				sourceCodes : ["01","02"],
				targetCode : "satong",
				targetCodeVal : "사전통지서"
			}
		],
		fixedItemId 				: ["satong", "03", "11"],
		namedNumberValueSeperator 	: "completeAndTotal",
		globalAggregate 			: "count",
		taskSeCd 					: taskSeCd,
		dayColumn					: "REG_DT",
		firstDay					: firstDay,
		lastDay						: lastDay
	};

	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "groupInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "numberValueInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "codeSubsetInfoList");

	statReqArr.push({
		query : defaultQuery,
		cursor : "card3",
		statType : "progressAndTotal"
	});

	//의견진술자료상태
	defaultQuery = {
		structureType 				: "dummy",
		statDomain 					: "excl",
		groupInfoList : [
			{
				refCol 			: "OPNN_SBMSN_STTS_CD",
				ctgrType 		: "code",
				dtlCtgr 		: "FIM031"
			}
		],
		codeSubsetInfoList : [
			{
				sourceGroup : "FIM031",
				sourceCodes : ["01","02"],
				targetCode : "acceptOrNonAccept",
				targetCodeVal : "수용/미수용"
			}
		],
		fixedItemId 				: ["00", "acceptOrNonAccept", "03"],
		namedNumberValueSeperator 	: "completeAndTotal",
		globalAggregate 			: "count",
		taskSeCd 					: taskSeCd,
		dayColumn					: "REG_DT",
		firstDay					: firstDay,
		lastDay						: lastDay
	};

	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "groupInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "numberValueInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "codeSubsetInfoList");

	statReqArr.push({
		query : defaultQuery,
		cursor : "card4",
		statType : "progressAndTotal"
	});

	//단속구분별 최근n일 건수
	defaultQuery = {
		structureType 				: "aggregate",
		statDomain 					: "crdn",
		groupInfoList 				: [
			{
				refCol 			: "CRDN_SE_CD",
				ctgrType 		: "code",
				dtlCtgr 		: "FIM002"
			}
		],
		codeSubsetInfoList : [
<%--
			{
				sourceGroup : "FIM002",
				sourceCodes : ["08","09","10","11"],
				targetCode : "minwon",
				targetCodeVal : "민원"
			},
--%>
			{
				sourceGroup : "FIM002",
				sourceCodes : ["06","13"],
				targetCode : "dobo",
				targetCodeVal : "도보"
			}
		],
		fixedItemId 				: ["01","02","dobo"],
<%--		fixedItemId 				: ["01","02","dobo","minwon"], --%>
		namedNumberValueSeperator 	: "lastFewDays",
		globalAggregate 			: "count",
		taskSeCd 					: taskSeCd,
		dayColumn 					: "CRDN_YMD",
		dayRange 					: 15
	};

	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "groupInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "numberValueInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "codeSubsetInfoList");

	statReqArr.push({
		query : defaultQuery,
		cursor : "lineChart",
		statType : "line"
	});

	//초기자료처리별 건수 차트
	defaultQuery = {
		structureType 	: "aggregate",
		statDomain 		: "crdnSttsHstry",
		groupInfoList : [
			{
				refCol 			: "CRDN_STTS_CD",
				ctgrType 		: "code",
				dtlCtgr 		: "FIM010"
			}
		],
		numberValueInfoList : [
			{
				aggregateType : "count"
			}
		],
		codeSubsetInfoList : [
			{
				sourceGroup : "FIM010",
				sourceCodes : ["21"],
				targetCode : "dansokProcess",
				targetCodeVal : "단속"
			}
		],
		fixedItemId 	: ["dansokProcess","81","83"],
		taskSeCd 		: taskSeCd,
		dayColumn		: "REG_DT",
		firstDay		: firstDay,
		lastDay			: firstDay
	};

	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "groupInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "numberValueInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "codeSubsetInfoList");

	statReqArr.push({
		query : defaultQuery,
		cursor : "doughnutChart1",
		statType : "doughnut"
	});

	//발송문서종류별 건수 차트
	defaultQuery = {
		structureType 	: "aggregate",
		statDomain 		: "sndb",
		groupInfoList : [
			{
				refCol 			: "SNDNG_SE_CD",
				ctgrType 		: "code",
				dtlCtgr 		: "FIM047"
			}
		],
		numberValueInfoList : [
			{
				aggregateType : "count"
			}
		],
		codeSubsetInfoList : [
			{
				sourceGroup : "FIM047",
				sourceCodes : ["01","02"],
				targetCode : "satong",
				targetCodeVal : "사전통지서"
			}
		],
		fixedItemId 	: ["satong", "03", "11"],
		taskSeCd 		: taskSeCd,
		dayColumn		: "SNDNG_YMD",
		firstDay		: firstDay,
		lastDay			: firstDay
	};

	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "groupInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "numberValueInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "codeSubsetInfoList");

	statReqArr.push({
		query : defaultQuery,
		cursor : "doughnutChart2",
		statType : "doughnut"
	});

	//의견진술결과별 건수 차트
	defaultQuery = {
		structureType 	: "aggregate",
		statDomain 		: "excl",
		groupInfoList : [
			{
				refCol 			: "OPNN_SBMSN_STTS_CD",
				ctgrType 		: "code",
				dtlCtgr 		: "FIM031"
			}
		],
		numberValueInfoList : [
			{
				aggregateType : "count"
			}
		],
		fixedItemId 	: ["01", "02", "03"],
		taskSeCd 		: taskSeCd,
		dayColumn		: "REG_DT",
		firstDay		: firstDay,
		lastDay			: firstDay
	};

	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "groupInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "numberValueInfoList");
	defaultQuery = FimsSupport.fnJsonToFormData(defaultQuery, "codeSubsetInfoList");

	statReqArr.push({
		query : defaultQuery,
		cursor : "doughnutChart3",
		statType : "doughnut"
	});

	fnLoadStatisticsData();
}

//통계 데이터 조회
function fnLoadStatisticsData(){
	var statArr = statReqArr.pop();

	ajax.get({
		url : wctx.url("/stat/stat01/010/info.do"),
		data : statArr.query,
		success : (resp) => {
			var statData = resp.stat;

			if(statData != null && statData.statItems != null){
				fnRenderDashboardContents(statData, statArr.cursor , statArr.statType);
			}

			if(statReqArr.length != 0){
				fnLoadStatisticsData();
			}
		}
	});

}

//대시보드 콘텐츠 표시
function fnRenderDashboardContents(returnData, cursor, statType){

		if(statType == "progressAndTotal"){
			fnRenderProgressAndTotal(returnData, cursor);
			return;
		}

		if(statType == "line"){
			fnRenderLine(returnData, cursor);
			return;
		}

		if(statType == "doughnut"){
			fnRenderDoughnut(returnData, cursor);
			return;
		}

}

//진행건수,전체건수 표시
function fnRenderProgressAndTotal(returnData, cursor){

	for(var i=0; i < returnData.statItems.length; i++){
		var icon = $("#"+cursor).find("i[title='" + returnData.statItems[i].itemName[0] + "']");
		var p = icon.prev("p");
		p.html(returnData.statItems[i].numberValue[0] + "/" + returnData.statItems[i].numberValue[1]);
	}

	if(cursor == "card1"){
		FimsSupport.mappingButtonAndMenu("btnGoToCrdn","단속 관리");
		return;
	}

	if(cursor == "card2"){
		FimsSupport.mappingButtonAndMenu("btnGoToOpnn","의견제출 관리");
		return;
	}
}

//라인차트 표시
function fnRenderLine(returnData, cursor){
	var yellowColor = '#ffe800';
    var cyanColor = '#28dac6';
	var orangeLightColor = '#FDAC34';
	var redColor = '#FF3E1D';
	var indigoColor = '#696CFF';

	var ctgrColorSet = [yellowColor,cyanColor,orangeLightColor,redColor,indigoColor];

    var borderColor = '#f0f0f0';
    var gridColor = '#f0f0f0';
    var tickColor = 'rgba(0, 0, 0, 0.75)'; // x & y axis tick color

	$("#"+cursor).siblings("svg").remove();

	$("#"+cursor).show();

	var maxOfStat = 0;
	var minOfStat = 0;

	var datasets = [];
	for(var i=0; i < returnData.statItems.length; i++){
		var defaultObject = {
            tension: 0.5,
            pointStyle: 'circle',
            fill: false,
            pointRadius: 1,
            pointHoverRadius: 5,
            pointHoverBorderWidth: 5,
            pointBorderColor: 'transparent',
            pointHoverBorderColor: config.colors.cardColor
		};

		defaultObject.label = returnData.statItems[i].itemName[0];

		defaultObject.data = returnData.statItems[i].numberValue;

		var maxOfStatItem = Math.max(defaultObject.data);
		var minOfStatItem = Math.min(defaultObject.data);

		if(maxOfStatItem > maxOfStat){
			maxOfStat = maxOfStatItem;
		}
		if(minOfStatItem < minOfStat){
			minOfStat = minOfStatItem;
		}

		defaultObject.backgroundColor = ctgrColorSet[i % ctgrColorSet.length];
		defaultObject.pointHoverBackgroundColor = ctgrColorSet[i % ctgrColorSet.length];
		defaultObject.borderColor = ctgrColorSet[i % ctgrColorSet.length];

		datasets.push(defaultObject);
	}

	var xAxisLabels = returnData.numberValueLabel;

	var yAxisConf = initYAxis(maxOfStat, minOfStat);

    var lineChart = document.getElementById(cursor);
    if (lineChart) {
        var lineChartVar = new Chart(lineChart, {
            type: 'line',
            data: {
                labels: xAxisLabels,
                datasets: datasets
            },
            options: {
            	lineTension : 0,
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        grid: {
                            color: borderColor,
                            drawBorder: false,
                            borderColor: borderColor
                        },
                        ticks: {
                            color: "black"
                        }
                    },
                    y: {
                        scaleLabel: {
                            display: true
                        },
                        min: yAxisConf.yAxisMin,
                        max: yAxisConf.yAxisMax,
                        ticks: {
                            color: "black",
                            stepSize: yAxisConf.yAxisStep
                        },
                        grid: {
                            color: borderColor,
                            drawBorder: false,
                            borderColor: borderColor
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        rtl: true,
                        backgroundColor: config.colors.cardColor,
                        titleColor: config.colors.headingColor,
                        bodyColor: config.colors.bodyColor,
                        borderWidth: 1,
                        borderColor: borderColor
                    },
                    legend: {
                        position: 'left',
                        align: 'stretch',
                        rtl: true,
                        labels: {
                            usePointStyle: true,
                            padding: 6,
                            boxWidth: 12,
                            boxHeight: 30,
                            color: "black"
                        }
                    }
                }
            }
        });
    }
	return;

}

//도넛차트 표시
function fnRenderDoughnut(returnData, cursor){
	var yellowColor = '#ffe800';
	var cyanColor = '#28dac6';
	var orangeLightColor = '#FDAC34';
	var redColor = '#FF3E1D';
	var indigoColor = '#696CFF';

	var ctgrColorSet = [yellowColor,cyanColor,orangeLightColor,redColor,indigoColor];

	var borderColor = '#f0f0f0';
	var gridColor = '#f0f0f0';
	var tickColor = 'rgba(0, 0, 0, 0.75)'; // x & y axis tick color

	var cardColor = config.colors.cardColor;
	var headingColor = config.colors.headingColor;
	var labelColor = config.colors.textMuted;
	var legendColor = config.colors.bodyColor;

	$("#"+cursor).siblings("svg").remove();
	$("#"+cursor).show();


	var lebels = [];
	var datas = [];
	var colors = [];
	for(var i=0; i < returnData.statItems.length; i++){
		lebels.push(returnData.statItems[i].itemName[0]);
		datas.push(returnData.statItems[i].numberValue[0]);

		colors.push(ctgrColorSet[i % ctgrColorSet.length]);
	}


	var doughnutChart = document.getElementById(cursor);
    if (doughnutChart) {
        var doughnutChartVar = new Chart(doughnutChart, {
            type: 'doughnut',
            data: {
                labels: lebels,
                datasets: [
                    {
                        data: datas,
                        backgroundColor: colors,
                        borderWidth: 1,
                        pointStyle: 'rectRounded'
                    }
                ]
            },
            options: {
                responsive: true,
                animation: {
                    duration: 500
                },
                cutout: '68%',
                plugins: {
                    legend: {
                        display: true,
                        position : 'left'
                    },
                    tooltip: {
                        callbacks: {
                            label: function (context) {
                                const label = context.label || '';
                                const value = context.parsed;
                                const output = ' ' + label + ' : ' + value + ' 건';
                                return output;
                            }
                        },
                        // Updated default tooltip UI
                        rtl: true,
                        backgroundColor: cardColor,
                        titleColor: headingColor,
                        bodyColor: legendColor,
                        borderWidth: 1,
                        borderColor: borderColor
                    }
                }
            }
        });
    }
	return;


}

//차트y축 표시최대값,표시최소값,간격 설정
function initYAxis(max, min){

	if(max <= 10){
		var yAxisConf = {
			yAxisMax : 10,
			yAxisMin : 0,
			yAxisStep : 2
		};

		return yAxisConf;
	}

	if(max <= 100){
		var yAxisConf = {
			yAxisMax : 100,
			yAxisMin : 0,
			yAxisStep : 20
		};

		return yAxisConf;
	}

	var yAxisMax = Math.ceil(max / 100) * 100
	var yAxisMin = Math.floor(min / 100) * 100;

	if(yAxisMax - yAxisMin <= 100){
		yAxisMin = yAxisMax - 100;
	}

	var yAxisStep = (yAxisMax - yAxisMin)/5;

	var yAxisConf = {
		yAxisMax : yAxisMax,
		yAxisMin : yAxisMin,
		yAxisStep : yAxisStep
	};
	return yAxisConf;

}

</c:set>
<c:set var="dashboardLoadScript" scope="request"><%-- 통계 불러오기 --%>
AppSupport.sleep(3000).then(() => fnMakeStatReq($("#layout-navbar input[name='taskSeCd']:checked").val()));
</c:set>