데이터 KPI구현

/*
	##### 수정로그 #####
	2021.12.24 김현중 신규
*/

$(() => { 
//**************************************** GLOBAL ********************************************//
	// widget
	var layout;
	var item_combo;
	var m_cal;
	var record_grid;
	var record_graph;

	// data
	var total_data;
	var combo_data;
	var selected_data;

	var st_date;
	var end_date;

	var st_real;
	var end_real;

	var weekdays;

	// SELECTOR
	var m_input = document.getElementById("m_cal");

	// SET
	var init_selected = [1,2,3,4,5,6]; // initiating selcected datas

//*************************************** CONFIG & LOGIC ******************************************//
	//LAYOUT [Main]
	function create_layout(){
		return new dhx.Layout("layout", { //LAYOUT
			cols: [
				{
					width: "100%",
					rows: [
						{
							header: '평균 생산량 (1H)',
							id: 'hour_graph',
							height:"70%",
							width:"100%",
						},
						{
							header: '총 생산량 (월)',
							id: 'month_grid',
							height:"30%",
							width:"100%",
						},
					]
				}	
			]
		});
	}

	//GRAPH [x-bar]
	function create_graph(_max, _min, _fill){
		return new dhx.Chart("", {
			type: "xbar",
			barWidth:15,
			scales: {
				bottom: {
					maxTicks: 10,
					max: _max,
					min: _min,
				},
				left: {
					text: "value",
					size: 130
				}
			},
			series: [
				{
					value: "h_sum",
					color: "none",
					size: 35,
					fill: _fill,
					showTextTemplate: (sum) => sum,
				}
			]
		});
	}

	//GRID [work]
	function create_grid(){
		return new dhx.Grid("", {
			columns: [
				{ id: "value", header: [{ text: "품목명"}]},
				{ id: "stit_cd", header: [{ text: "품목코드"}]},
				{ id: "stitcl_nm", header: [{ text: "품목코드"}]},
				{ id: "stitun_nm", header: [{ text: "단위"}]},
				{ id: "sum", header: [{ text: "생산량"}]},
			],
			rowHeight: 20,
			headerRowHeight: 25,
			editable: false,
			autoWidth: true, 
		});
	}

//*************************************** FUNCTION [QUERY] ******************************************//
	//ITEM [select]
	function select_monthly_item(st, end, init_selected){
		new Promise((resolve, reject) =>{
			call_ajax('select_monthly_item',{'data' : {'st':st, 'end':end}},function(json){
				if(json.result == 'success'){
					resolve(json.data);
				}
			}, true);
		})
		.then((result) => {
			total_data = result;
			//combo
			item_combo.data.parse(total_data);
			combo_data = init_selected; 
			for(var i=0; i < combo_data.length; i++){
				item_combo.setValue(item_combo.data.getId(combo_data[i]));
			}
		});
	}

//*************************************** FUNCTION [ETC] ******************************************//
	//calendar default set
	function cal_change(date){
		var yyyy = date.getFullYear();
		var raw_mm = date.getMonth() + 1;
		var mm = raw_mm > 9 ? raw_mm : '0'+ raw_mm;

		m_input.value = raw_mm;
		st_date = String(yyyy) + String(mm) + '0100000000';
		end_date = String(yyyy) + String(mm) + '3199999999';
		st_real = new Date(yyyy, mm-1, 1);
		end_real = new Date(yyyy, mm, 0);

		var real_enddate = end_real.getDate();
		var real_endday = end_real.getDay();
		var raw_cnt = 8;

		for (var i=0; i < real_enddate-28; i++){
			var nowday = Number(real_endday - i);
			raw_cnt = (nowday == 6 || nowday == 7 || nowday == 0 || nowday == -1) ? raw_cnt+1 : raw_cnt;
		}
		weekdays = real_enddate - raw_cnt; //weekdays in whole dates of the month

		//weekdays until today from end date of this month
		var t_now = new Date();
		var t_now_mm = t_now.getMonth()+1;
		var t_now_dd = t_now.getDate();
		var t_now_day = t_now.getDay();
		if (t_now_mm == raw_mm){
			for (var j = t_now_dd+1; j<=real_enddate; j++){
				t_now_day++;
				weekdays = t_now_day%7 != 0 && (t_now_day+1)%7 != 0 ? (weekdays - 1) : weekdays; 
			}
		}
	}

//*************************************** EXECUTION ******************************************//

	//<<<<<<<<<<<< CREATE WIDGET >>>>>>>>>>>>>>
	//layout
	layout = create_layout();

	//combo
	item_combo = new dhx.Combobox("item_combo", {multiselection: true, selectAllButton: true, placeholder: "원하시는 품목을 선택 해 주세요."});

	//calendar
	m_cal = new dhx.Calendar("m_calendar", {css: "dhx_widget--bordered", mode: 'month', dateFormat:"%Y-%m"});

	//grid
	record_grid = create_grid();
	layout.getCell('month_grid').attach(record_grid);

	//graph
	record_graph = create_graph(20, 0, '#FF3333');
	layout.getCell('hour_graph').attach(record_graph);

	//<<<<<<<<<<<<<<<< SET DATA >>>>>>>>>>>>>>>>
	//calendar 
	cal_change(new Date());

	//data select 
	select_monthly_item(st_date, end_date, init_selected);

	//<<<<<<<<<<<<<<<<< EVENT >>>>>>>>>>>>>>>>>>
	//combo
	item_combo.events.on('change',(c_data) => {
		item_combo._state.value = '';
		item_combo._filter();

		selected_data = total_data.filter(g => c_data.includes(g.id));
		var total_sum = 0;
		for (var i=0; i<selected_data.length; i++){
			selected_data[i].h_sum = (Number(selected_data[i].sum)/Number(weekdays*8)).toFixed(2);
			total_sum += Number(selected_data[i].h_sum);
		}
		selected_data.unshift({'value':'합계','h_sum':total_sum.toFixed(2)});
		record_graph.data.parse(selected_data);
		selected_data.shift();
		record_grid.data.parse(selected_data.reverse());
	});

	//calendars 
	m_input.addEventListener("click", function(){
		$('#m_calendar').show();
	}, false);

	$('.admin_content').click(function(e){
		if($(e.target).parents('#poriod_indexing_box').length < 1){
			$('#m_calendar').hide();
		}
	});	

	m_cal.events.on("change", function (data){ 
		cal_change(data);
		$('#m_calendar').hide();
		select_monthly_item(st_date, end_date, init_selected);
	});
});