+
-// Color Variables
+
+var falseLineChart = ``;
+
+var falseDoughnutChart = ``;
+
+fnMakeSkeleton();
+sleep(3000).then(() => fnLoadStatisticsData());
+
+
+//지연
+function sleep(ms) {
+ return new Promise((r) => setTimeout(r, ms));
+}
+
+//데이터 로딩 전 이미지 표시
+function fnMakeSkeleton(){
+
+ $("#lineChart").hide();
+ $("#doughnutChart1").hide();
+ $("#doughnutChart2").hide();
+ $("#doughnutChart3").hide();
+
+ $("#lineChartCardBody").append(falseLineChart);
+ $("#doughnutChart1CardBody").append(falseDoughnutChart);
+ $("#doughnutChart2CardBody").append(falseDoughnutChart);
+ $("#doughnutChart3CardBody").append(falseDoughnutChart);
+}
+
+//통계 데이터 조회
+function fnLoadStatisticsData(){
+
+ //TODO : ajax
+
+ var data = {};
+ fnRenderDashboardContents(data);
+}
+
+//콘텐츠(차트) 표시
+function fnRenderDashboardContents(data){
+ $("#lineChartCardBody svg").remove();
+ $("#doughnutChart1CardBody svg").remove();
+ $("#doughnutChart2CardBody svg").remove();
+ $("#doughnutChart3CardBody svg").remove();
+
+ $("#lineChart").show();
+ $("#doughnutChart1").show();
+ $("#doughnutChart2").show();
+ $("#doughnutChart3").show();
+
+ // Color Variables
const yellowColor = '#ffe800';
let borderColor, gridColor, tickColor;
@@ -409,4 +466,7 @@
}
});
}
+}
+
+
\ No newline at end of file
diff --git a/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css b/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css
index bd884abc..c3b9c834 100644
--- a/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css
+++ b/src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css
@@ -101,6 +101,18 @@
grid-row: span 3;
}
+@keyframes skeleton-loading {
+ 0% { fill: #f2f2f2; }
+ 25% { fill: #c1c1c1; }
+ 50% { fill: #a1a1a1; }
+ 75% { fill: #c1c1c1; }
+ 100% { fill : #f2f2f2; }
+}
+
+.skeleton {
+ animation: skeleton-loading 1s infinite;
+}
+
.wrapper-list {
height: 790px;
overflow-y:scroll;