|
|
@@ -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>
|
huiwon.seo