Browse Source

차트 화면 퍼블

huiwon.seo 4 years ago
parent
commit
99fd1ed66e
1 changed files with 85 additions and 65 deletions
  1. 85 65
      src/main/webapp/WEB-INF/jsp/api/monitor/chart.jsp

+ 85 - 65
src/main/webapp/WEB-INF/jsp/api/monitor/chart.jsp

@@ -4,6 +4,8 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
 <jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
 <script>
 var startDate = "<c:out value='${startDate}'/>";
 var endDate   = "<c:out value='${endDate}'/>";
@@ -32,6 +34,71 @@ var endDate   = "<c:out value='${endDate}'/>";
         
         $("input[name=\"startDate\"]").val( startDate );
         $("input[name=\"endDate\"]").val( endDate );
+        
+        var options = {
+            type: 'bar',
+            data: {
+                labels: [], //X축 제목
+                datasets: [
+                    {                            // 1번째 선그래프의 값
+                        label: 'Api Request Total',
+                        backgroundColor: "#fcc100",
+                        data: [],
+                              borderWidth: 1
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    xAxes: [{
+                        barPercentage: 0.4
+                    }]
+                },
+                showDatapoints: true
+            }
+        };
+        
+        
+        $( "#chart-data li" ).each( function(){
+            var $this  = $( this );
+            var inDate = $this.find( "span.chart-date" ).text();
+            var total  = $this.find( "span.chart-total" ).text();
+            
+            options.data.labels.push( inDate );
+            options.data.datasets[0].data.push( total );
+        });
+        
+        
+        Chart.plugins.register({
+            afterDraw: function(chartInstance) {
+                if (chartInstance.config.options.showDatapoints) {
+                var helpers = Chart.helpers;
+                var ctx = chartInstance.chart.ctx;
+                var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);
+                
+                // render the value of the chart above the bar
+                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'bottom';
+                ctx.fillStyle = fontColor;
+                
+                chartInstance.data.datasets.forEach( function (dataset) {
+                        for (var i = 0; i < dataset.data.length; i++) {
+                           var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
+                           var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
+                           var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
+                           ctx.fillText(dataset.data[i], model.x, yPos);
+                        }
+                    });
+                }
+            }
+        });
+        
+        
+        var ctx = document.getElementById('myChart').getContext('2d');
+        new Chart(ctx, options);
     });
 
 function getExcel(){
@@ -55,6 +122,10 @@ function getExcel(){
     $( "#excelForm" ).remove();
     
 }
+
+
+
+
 </script>
 </head>
 <body>
@@ -176,7 +247,7 @@ function getExcel(){
                                 <div class="card-body">
                                     <div class="row mb-3">
                                         <div class="col-6">
-                                            전체 :
+<!--                                             전체 : -->
                                             <fmt:formatNumber value="${total}" pattern="#,###" />
                                         </div>
                                         <div class="col-6 text-right">
@@ -186,71 +257,20 @@ function getExcel(){
                                             </c:if>
                                         </div>
                                     </div>
-                                    <div class="table-responsive">
-                                        <table class="table table-striped text-center">
-                                            <colgroup>
-                                                <col style=" width: 5%; ">
-                                                <col style=" width: 14%; ">
-                                                <col style=" width: 6%; ">
-                                                <col style=" width: 12%; ">
-                                                <col style=" width: 8%; ">
-                                                <col style=" width: 8%; ">
-                                            </colgroup>
-                                            <thead>
-                                                <tr>
-                                                    <th rowspan="2">번호</th>
-                                                    <th rowspan="2">생활치료센터</th>
-                                                    <th rowspan="2">지역</th>
-                                                    <th rowspan="2">협력병원</th>
-                                                    <th rowspan="2">API 호출 횟수</th>
-                                                    <th rowspan="2">API 호출 건수</th>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                <c:choose>
-                                                    <c:when test="${total > 0}">
-                                                        <c:forEach var="l" items="${item}" varStatus="lStatus">
-                                                            <c:set var="viewLink" value="./info?centerCode=${l.centerCode}" />
-                                                            <c:set var="pageNum" value="${ ( total - lStatus.index ) - ( (page - 1) * pageSize ) }" />
-                                                            
-                                                            <tr>
-                                                                <td><fmt:formatNumber value="${pageNum}" pattern="#,###" /></td>
-                                                                <td>
-                                                                    <c:out value="${l.centerName}" />
-                                                                </td>
-                                                                <td><c:out value="${l.locationName}" /></td>
-                                                                <td><c:out value="${l.cooperativeName}" /></td>
-                                                                <td><c:out value="${l.apiCount}"/></td>
-                                                                <td><c:out value="${l.numberOfCase}"/></td>
-                                                            </tr>
-                                                        </c:forEach>
-                                                    </c:when>
-                                                    <c:otherwise>
-                                                        <tr>
-                                                            <td colspan="13">오픈API 통계 정보가 없습니다.</td>
-                                                        </tr>
-                                                    </c:otherwise>
-                                                </c:choose>
-                                            </tbody>
-                                        </table>
+                                    
+                                    <div id="chart-data" style="display:none;">
+                                        <ul>
+                                            <c:forEach var="c" items="${chart}">
+                                                <li>
+                                                    <span class="chart-date">${c.inDate}</span>
+                                                    <span class="chart-total">${c.total}</span>
+                                                </li>
+                                            </c:forEach>
+                                        </ul>
                                     </div>
-                                    <div class="row mt-5">
-                                        <div class="col-12 col-lg-6 mb-2">
-                                        </div>
-                                        <div class="col-12 col-lg-6 mb-2">
-                                            <jsp:include page="${data._INCLUDE}/paging.jsp" flush="true">
-                                                <jsp:param name="firstPageNo" value="${paging.firstPageNo}" />
-                                                <jsp:param name="prevPageNo"  value="${paging.prevPageNo}" />
-                                                <jsp:param name="startPageNo" value="${paging.startPageNo}" />
-                                                <jsp:param name="pageNo"      value="${paging.pageNo}" />
-                                                <jsp:param name="endPageNo"   value="${paging.endPageNo}" />
-                                                <jsp:param name="nextPageNo"  value="${paging.nextPageNo}" />
-                                                <jsp:param name="finalPageNo" value="${paging.finalPageNo}" />
-                                                <jsp:param name="preFix"      value="${paging.preFix}" />
-                                                <jsp:param name="url"         value="${paging.url}" />
-                                                <jsp:param name="total"       value="${paging.totalCount}" />
-                                            </jsp:include>
-                                        </div>
+                                    
+                                    <div style="height:400px;">
+                                        <canvas id="myChart"></canvas>
                                     </div>
                                 </div>
                             </div>