그래프 추가

src/main/webapp/WEB-INF/views/statistics/DailyOrderForm.html

@@ -106,6 +106,10 @@
 		</div>
 		<!-- 검색조건 영역 -->
 		
+		<div class="panelStyle">
+			<div id="chart" class="chartUnit"></div>
+		</div>
+		
 		<!-- 리스트 영역 -->
 		<div class="panelStyle">
 			<!-- 버튼 배치 영역 -->
@@ -321,6 +325,9 @@
 	
 	// 합계 생성
 	let fnCreateTotal = function() {
+		// Draw chart
+		fnDrawChart(gagaAgGrid.getAllRowData(gridOptions));
+		
 		let totOrdAmt = 0;
 		let yoyTotOrdAmt = 0;
 		let selfAmt = 0;
@@ -388,6 +395,87 @@
 		$('#btnSearch').trigger('click');
 	}
 	
+	// 그래프 그리기
+	var chart1;
+	var fnDrawChart = function(data) {
+		let dayList = [];
+		let totOrdAmtList = [];
+		let ordCntList = [];
+		
+		$(data).each(function(idx, item) {
+			if ($('#dayGbD').hasClass('active')) {
+				dayList.push(item.day.toDate('YYYY-MM-DD').format('MM-DD'));
+			} else {
+				dayList.push(item.day);
+			}
+			totOrdAmtList.push((item.totOrdAmt / 1000).toFixed(0));
+			ordCntList.push(item.ordCnt);
+		});
+		
+		chart1 = c3.generate({
+			bindto: "#chart",
+			padding: {
+				bottom: 20 //adjust chart padding bottom
+			},
+			data: {
+				x: 'x',
+				json: {
+					x: dayList,
+					매출액: totOrdAmtList,
+					주문건수: ordCntList
+				},
+				types: {
+					매출액: 'bar',
+					주문건수: 'line'
+				}/* ,
+				regions: {
+					'data1': [
+						{
+							'start': 1,
+							'end': 2,
+							'style': 'dashed'
+						}, {
+							'start': 3
+						}
+					]
+				} */
+			},
+			color: {
+				pattern: ['#48C9B0', '#FF7043', '#FF7043']
+			},
+			legend: { padding: 15 }, //범례 item 우측 간격
+			axis: {
+				x: {
+					type: 'category',
+					padding: { left: 0.5, right: 0.5 }
+				}/* ,
+				y: {
+					tick: {
+						format: function(d) { return Number(d).addComma() + 'K'; }
+					}
+				} */
+			},
+			tooltip: {
+				format: {
+					title: function (d) {
+						return '주문 통계 Chart';
+					}
+				}
+			}/* ,
+			bar: {
+				width: { ratio: 0.2 } // 막대 폭 20%로 조절
+			} */
+		});
+	}
+	
+	// LNB 또는 GNB 클릭시 차트 넓이 변경
+	var chartResize = function() {
+		setTimeout(function () {
+			// 모든 차트 ID객체에 적용
+			chart1.resize();
+		}, 300);
+	}
+	
 	$(document).ready(function() {
 		cfnCreateCalendar('#terms', 'startDt', 'endDt', true, '주문');
 		$('.btnRecentWeek').trigger('click');