Index: arms/html/fullDataSheet/content-container.html
===================================================================
diff -u -r5de8485c9050ad813b15d9c6d62c3f635f1f3102 -rd8931e4514866dce35209fc86e9b6be8434252ff
--- arms/html/fullDataSheet/content-container.html	(.../content-container.html)	(revision 5de8485c9050ad813b15d9c6d62c3f635f1f3102)
+++ arms/html/fullDataSheet/content-container.html	(.../content-container.html)	(revision d8931e4514866dce35209fc86e9b6be8434252ff)
@@ -1,4 +1,5 @@
-<div class="col-lg-12 col-layer">
+<div class="col-lg-12">
+<!-- 범주	-->
 	<section class="widget">
 		<header>
 			<h4>
@@ -8,6 +9,202 @@
 					<i
 						class="fa fa-edit"
 						style="vertical-align: middle; font-size: 14px"></i>
+					Point Of View
+				</span>
+			</h4>
+			<div class="widget-controls">
+				<a
+					data-widgster="toleft"
+					title="change width to left"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-left"></i>
+				</a>
+				<a
+					data-widgster="expand"
+					title="Expand"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-up"></i>
+				</a>
+				<a
+					data-widgster="collapse"
+					title="Collapse"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-down"></i>
+				</a>
+				<a
+					data-widgster="toright"
+					title="change width to right"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-right"></i>
+				</a>
+				<a
+					data-widgster="restore"
+					title="Restore"
+					href="#">
+					<span class="glyphicon glyphicon-repeat"></span>
+				</a>
+				<a
+					data-widgster="fullscreen"
+					title="Fullscreen"
+					href="#">
+					<i
+						class="glyphicon glyphicon-fullscreen"
+						style="font-size: 11px"></i>
+				</a>
+			</div>
+		</header>
+		<div class="body">
+			<div
+				class="gradient_middle_border"
+				style="width: 100%; height: 2px"></div>
+			<blockquote
+				class="font13"
+				style="margin-top: 5px">
+				데이터의 관점 선택
+				<div style="float: right">
+					<button
+						class="btn btn-transparent btn-xs"
+						style="margin-top: -3px; color: #acacac; background: rgba(51, 51, 51, 0.2); padding: 1px 9px"
+						onclick="#">
+						Help
+						<i
+							class="fa fa-question"
+							style="font-size: 14px; vertical-align: middle; color: #acacac"></i>
+					</button>
+				</div>
+			</blockquote>
+			<div class="clearfix widget-content">
+				<div style="display: flex">
+					<button
+						class="btn btn-warning btn-sm"
+						style="margin: 0 3px;"
+						type="button">
+						프로젝트
+					</button>
+					<button
+						class="btn btn-warning btn-sm"
+						style="margin: 0 3px;"
+						type="button">
+						멤버
+					</button>
+				</div>
+			</div>
+			<!-- 여기에 각 카드 덱  -->
+			<div class="row card-wrapper">
+				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
+					<section class="widget" style="border-radius: 1rem">
+						<header>
+							<h4>
+								<span
+									class="font14"
+									style="font-weight: bold">
+									<i class="fa fa-folder-o text-danger"
+										 style="vertical-align: middle; font-size: 14px"></i>
+									&nbsp;
+									<span class="day-day text-danger">D - 6</span>
+									&nbsp;
+									<span>YHS-1</span>
+								</span>
+							</h4>
+							<div class="widget-controls">
+								<a
+									data-widgster="expand"
+									title="Expand"
+									href="#">
+									<i class="glyphicon glyphicon-chevron-up"></i>
+								</a>
+								<a
+									data-widgster="collapse"
+									title="Collapse"
+									href="#">
+									<i class="glyphicon glyphicon-chevron-down"></i>
+								</a>
+								<a
+									data-widgster="restore"
+									title="Restore"
+									href="#">
+									<span class="glyphicon glyphicon-repeat"></span>
+								</a>
+								<a
+									data-widgster="fullscreen"
+									title="Fullscreen"
+									href="#">
+									<i
+										class="glyphicon glyphicon-fullscreen"
+										style="font-size: 11px"></i>
+								</a>
+							</div>
+						</header>
+						<div class="body">
+							<div>
+								<div id="donut0" class="chart-area" style="min-height: 300px; text-align: center;">차트</div>
+								<div class="chart-description" style="text-align: center;">
+									<div>차트 관련 정보(버전 등)</div>
+									<div style="color: #FFFFFFB3">24.08.01 ~ 24.08.31</div>
+								</div>
+							</div>
+							<div class="stat">
+								<div class="info" style="margin-bottom: 5px">총 이슈 개수 <span class="total-issue">5</span></div>
+								<div class="progress progress-small" style="margin-bottom: 10px; opacity: 0.7;">
+									<div class="progress-bar progress-bar-danger issue-open" style="width: 40%;"></div>
+									<div class="progress-bar progress-bar-warning issue-in-progress" style="width: 20%;"></div>
+									<div class="progress-bar progress-bar-primary issue-resolved" style="width: 20%;"></div>
+									<div class="progress-bar progress-bar-success issue-closed" style="width: 20%;"></div>
+								</div>
+							</div>
+							<ul>
+								<li style="margin: 3px 0"><i class="fa fa-circle" style="vertical-align: middle; font-size: 13px; color: rgba(219,42,52,0.7);"></i>&nbsp; YHS-2</li>
+								<li style="margin: 3px 0"><i class="fa fa-circle" style="vertical-align: middle; font-size: 13px; color: rgba(219,42,52,0.7);"></i>&nbsp; YHS-3</li>
+								<li style="margin: 3px 0"><i class="fa fa-circle" style="vertical-align: middle; font-size: 13px; color: rgba(228,148,0,0.7);"></i>&nbsp; YHS-4</li>
+								<li style="margin: 3px 0"><i class="fa fa-circle" style="vertical-align: middle; font-size: 13px; color: rgba(36,119,255,0.7);"></i>&nbsp; YHS-5</li>
+								<li style="margin: 3px 0"><i class="fa fa-circle" style="vertical-align: middle; font-size: 13px; color: rgba(45,133,21,0.7);"></i>&nbsp; YHS-6</li>
+							</ul>
+						</div>
+					</section>
+				</div>
+				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+					<!-- 범주	-->
+					<section class="widget">
+					</section>
+				</div>
+				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+					<!-- 범주	-->
+					<section class="widget">
+					</section>
+				</div>
+				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+					<!-- 범주	-->
+					<section class="widget">
+					</section>
+				</div>
+				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+					<!-- 범주	-->
+					<section class="widget">
+					</section>
+				</div>
+				<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+					<!-- 범주	-->
+					<section class="widget">
+					</section>
+				</div>
+			</div>
+		</div>
+	</section>
+</div>
+
+
+
+
+<div class="col-lg-12 col-layer hidden">
+	<section class="widget">
+		<header>
+			<h4>
+				<span
+					class="font13"
+					style="font-weight: bold">
+					<i
+						class="fa fa-edit"
+						style="vertical-align: middle; font-size: 14px"></i>
 					Feed
 				</span>
 				<span class="label label-success">412</span>
Index: arms/js/common/chart/d3/donutChart.js
===================================================================
diff -u -r073579fd548d6af80626439ce3204814a00f27b6 -rd8931e4514866dce35209fc86e9b6be8434252ff
--- arms/js/common/chart/d3/donutChart.js	(.../donutChart.js)	(revision 073579fd548d6af80626439ce3204814a00f27b6)
+++ arms/js/common/chart/d3/donutChart.js	(.../donutChart.js)	(revision d8931e4514866dce35209fc86e9b6be8434252ff)
@@ -105,4 +105,99 @@
 			}
 		}
 	});
+}
+
+/*
+* fullDataSheet - 사용. 페이지를 위한 별도 API 분리 가능성 검토.
+*/
+function drawDonutChart_report(targetElement, data, cardWidth) {
+	let $targetElementId =  "#" + targetElement;
+
+	let stateData = data;
+	let stateKey = ["open", "in-progress", "resolved", "closed"];
+
+	function donutChartNoData() {
+		c3.generate({
+			bindto: $targetElementId, // targetElement
+			data: {
+				columns: [],
+				type: 'donut',
+			},
+			donut: {
+				title: "Total : 0"
+			},
+		});
+	}
+
+	if(stateData === undefined || stateData === null || Object.keys(stateData).length === 0) {
+		donutChartNoData();
+		return false;
+	}
+
+	let totalDocCount = stateData.total; // data.전체합계;
+	const columnsData = [];
+	// data.검색결과['group_by_status.status_name.keyword'];
+
+	stateKey.forEach( key => {
+		if(stateData.hasOwnProperty(key)) {
+			columnsData.push([key,stateData[key]]);
+		}
+	});
+
+	let size = {
+		width: cardWidth * 0.7,   // 가로 크기
+		height: cardWidth * 0.7   // 세로 크기
+	}
+	console.log(size);
+	const chart = c3.generate({
+		bindto: $targetElementId,
+		data: {
+			columns: columnsData,
+			type: 'donut'
+		},
+		donut: {
+			title: "Total : " + totalDocCount,
+			width: cardWidth * 0.06
+		},
+		size: size,
+		color: {
+			pattern: ColorPalette.common.reqStateColor
+		},
+		tooltip: {
+			format: {
+				value: function (value, ratio, id, index) {
+					return value;
+				}
+			},
+		},
+	});
+
+	$(document).on('click', $targetElementId + ' .c3-legend-item', function () {
+		const id = $(this).text();
+		let isHidden = false;
+
+		if($(this).hasClass('c3-legend-item-hidden')) {
+			isHidden = false;
+			$(this).removeClass('c3-legend-item-hidden');
+		} else {
+			isHidden = true;
+			$(this).addClass('c3-legend-item-hidden');
+		}
+		let docCount = 0;
+
+		for (const key of stateKey) {
+			if (key === id) {
+				docCount = stateData[key];
+				break;
+			}
+		}
+		if (docCount) {
+			if (isHidden) {
+				totalDocCount -= docCount;
+			} else {
+				totalDocCount += docCount;
+			}
+		}
+		$($targetElementId+' .c3-chart-arcs-title').text("Total : " + totalDocCount);
+	});
 }
\ No newline at end of file
Index: arms/js/fullDataSheet.js
===================================================================
diff -u -r5de8485c9050ad813b15d9c6d62c3f635f1f3102 -rd8931e4514866dce35209fc86e9b6be8434252ff
--- arms/js/fullDataSheet.js	(.../fullDataSheet.js)	(revision 5de8485c9050ad813b15d9c6d62c3f635f1f3102)
+++ arms/js/fullDataSheet.js	(.../fullDataSheet.js)	(revision d8931e4514866dce35209fc86e9b6be8434252ff)
@@ -34,6 +34,16 @@
 			"../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/buttons.html5.js",
 			"../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/buttons.print.js",
 			"../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/jszip.min.js"
+		],
+
+		[
+			//chart Colors
+			"./js/common/colorPalette.js",
+			// c3 차트(도넛)
+			"../reference/jquery-plugins/d3-5.16.0/d3.min.js",
+			"../reference/jquery-plugins/c3-0.7.20/c3.min.css",
+			"../reference/jquery-plugins/c3-0.7.20/c3.js",
+			"./js/common/chart/d3/donutChart.js"
 		]
 		// 추가적인 플러그인 그룹들을 이곳에 추가하면 됩니다.
 	];
@@ -47,9 +57,26 @@
 			$('.widget').widgster();
 			setSideMenu("sidebar_menu_report", "sidebar_menu_full_data_sheet");
 
+
+			let mock = {
+				"total": 5,
+				"folder": 4,
+				"in-progress": 1,
+				"open": 2,
+				"resolved" : 1,
+				"closed": 1
+			};
+
 			// 스크립트 실행 로직을 이곳에 추가합니다.
+			for (let i = 0; i<1; i++) {
+				let targetId = "donut" + i;
+				console.log($(".card").width());
+				let cardWidth = $(".card").width();
+				drawDonutChart_report(targetId, mock, cardWidth);
+			}
 
 
+
 		})
 		.catch(function(e) {
 			console.error('플러그인 로드 중 오류 발생');