통계화면 수정 중

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

@@ -16,23 +16,150 @@
  -->
 	<div id="main">
 		<!-- 메인타이틀 영역 -->
-		<div class="main-title">
-		</div>
+		<div class="main-title"></div>
 		<!-- //메인타이틀 영역 -->
 
 		<!-- 메뉴 설명 -->
-		<div class="infoBox menu-desc">
-		</div>
+		<div class="infoBox menu-desc"></div>
 		<!-- //메뉴 설명 -->
 
 		<!-- 검색조건 영역 -->
 		<div class="panelStyle">
+			* 2020년 12월 25일 02:00 기준 / 휴면 회원 제외
+			<!-- 리스트 영역 -->
+			<div class="panelStyle">
+				<ul class="panelBar">
+					<li class="left" style="width: 50%;">
+						<div id="chart1" class="chartUnit c3" style="max-height: 300px; position: relative;">
+						</div>
+						<button type="button" class="btn btn-default btn-lg" onclick="fnExcelDownLoad();">엑셀다운로드</button>
+					</li>
+					<li class="right"  style="width: 50%;">
+						<div id="chart2" class="chartUnit c3" style="max-height: 300px; position: relative;"></div>
+					</li>
+				</ul>
+				<ul>
+					<li class="left"  style="width: 50%;">
+						<div id="chart3" class="chartUnit c3" style="max-height: 300px; position: relative;"></div>
+						<button type="button" class="btn btn-default btn-lg" onclick="fnExcelDownLoad();">엑셀다운로드</button>
+					</li>
+				</ul>
+			</div>
 		</div>
 		<!-- 검색조건 영역 -->
 
+<script th:inline="javascript">
+/*<![CDATA[*/
 
-	</div>
+	// var unloginList = [[${unloginList}}]];		// 미로그인 회원 현황
+	// var marketingList = [[${marketingList}}]];	// 마케팅 수신동의 현황
+	// var dormRemainList = [[${dormRemainList}}]];// 휴면전환 잔여일별 회원현황
+
+
+	//chart1 미로그인 회원 현황
+	var chart1  =   c3.generate({
+		bindto: "#chart1",
+		data: {
+			columns: [
+				['3개월 이내', 76],
+				['~6개월', 21],
+				['~9개월', 0],
+				['~12개월', 0],
+				['1년~', 3],
+			],
+			type : 'pie',
+		},
+		title: {
+			text: '미로그인 회원 현황'
+		},
+		color : {pattern : ['#FF7043', '#48C9B0', '#FFD54F', '', '']},
+		legend: {
+			padding: 15, //범례 item 우측 간격
+		},
+		axis: {
+			x: {
+				type: 'category',
+				padding: {left:0, right: 0.7}, //x축 data 좌우 여백
+
+			},
+		},
+		padding: {bottom: 40},
+		size: {
+			height: 300
+		},
+
+	});
+
+	//chart2 마케팅 수신동의 현황
+	var chart2  =   c3.generate({
+		bindto: "#chart2",
+		data: {
+			columns: [
+				['SMS/LMS', 444,202],
+				['이메일', 455,900],
+				['푸시', 289,900],
+				['미동의', 80,900],
+			],
+			type : 'pie',
+		},
+		title: {
+			text: '마케팅 수신동의 현황'
+		},
+		color : {pattern : ['#FF7043', '#48C9B0', '#FFD54F', '', '']},
+		legend: {
+			padding: 15, //범례 item 우측 간격
+		},
+		axis: {
+			x: {
+				type: 'category',
+				padding: {left:0, right: 0.7}, //x축 data 좌우 여백
 
+			},
+		},
+		padding: {bottom: 40},
+		size: {
+			height: 300
+		},
 
+	})
 
+	//chart3 휴면전환 잔여일별 회원현황
+	var chart3  =   c3.generate({
+		bindto: "#chart3",
+		data: {
+			columns: [
+				['SMS/LMS', 444,202],
+				['이메일', 455,900],
+				['푸시', 289,900],
+				['미동의', 80,900],
+			],
+			type : 'bar',
+		},
+		title: {
+			text: '휴면전환 잔여일별 회원현황'
+		},
+		color : {pattern : ['#FF7043', '#48C9B0', '#FFD54F', '', '']},
+		legend: {
+			padding: 15, //범례 item 우측 간격
+		},
+		axis: {
+			x: {
+				type: 'category',
+				padding: {left:0, right: 0.7}, //x축 data 좌우 여백
+
+			},
+		},
+		padding: {bottom: 40},
+		size: {
+			height: 300
+		},
+
+	});
+
+
+
+/*]]>*/
+</script>
+
+	</div>
 </html>