대시보드 지역별 현장수집 데이터 현황 지표 추가.

src/main/java/com/mca/cmmn/web/AdminController.java

@@ -102,12 +102,17 @@ public class AdminController {
       searchVO.setSearchStartDate(searchStartDate.minusMonths(1).format(DateTimeFormatter.ofPattern("yyyy-MM-dd")));
       model.addAttribute("monthLoginCount", logService.selectLoginCnt(searchVO));
 
-      //일별 지도사용 추이 데이터
+      //일별 지도사용 수
       UseHistorySearchVO useHistorySearchVO = new UseHistorySearchVO();
       useHistorySearchVO.setSearchEndDate(searchVO.getSearchEndDate());
       useHistorySearchVO.setSearchStartDate(searchStartDate.minusDays(14).format(DateTimeFormatter.ofPattern("yyyy-MM-dd")));
-      List<UseHistoryChartVO> dataList = useHistoryService.selectDayMapUseData(useHistorySearchVO);
+      List<ChartVO> dayMapUseDataList = useHistoryService.selectDayMapUseData(useHistorySearchVO);
-      model.addAttribute("dayMapUseDataList", dataList);
+      model.addAttribute("dayMapUseDataList", dayMapUseDataList);
+
+      // 지역별 현장수집 데이터 수
+      List<ChartVO> areaDataList = fieldDataService.selectAreaDataList();
+      model.addAttribute("areaDataList", areaDataList);
+
       return "admin/dashBoard";
 
     } catch (Exception e) {
@@ -128,18 +133,14 @@ public class AdminController {
   @ResponseBody
   public JSONArray dayMapUseData(@ModelAttribute("UseRequestSearchVO") UseHistorySearchVO useHistorySearchVO, Model model) throws Exception {
     try {
-      List<UseHistoryChartVO> dataList = useHistoryService.selectDayMapUseData(useHistorySearchVO);
+      List<ChartVO> dataList = useHistoryService.selectDayMapUseData(useHistorySearchVO);
 
       JSONArray returnAry = new JSONArray();
-      for(UseHistoryChartVO chartVO: dataList){
+      for(ChartVO chartVO: dataList){
         JSONArray temp = new JSONArray();
-        temp.put(chartVO.getDateStr());
+        temp.put(chartVO.getParam01());
-        temp.put(chartVO.getUseCnt());
+        temp.put(chartVO.getValue01());
         returnAry.put(temp);
-//        JSONObject temp = new JSONObject();
-//        temp.put("date", chartVO.getDateStr());
-//        temp.put("useCnt", chartVO.getUseCnt());
-//        returnAry.put(temp);
       }
       System.out.println("결과 배열 수 : "+returnAry.length());
       return returnAry;

src/main/java/com/mca/map/mapper/FieldDataMapper.java

@@ -2,6 +2,7 @@ package com.mca.map.mapper;
 
 import java.util.List;
 
+import com.mca.map.vo.ChartVO;
 import com.mca.map.vo.FieldDataSearchVO;
 import com.mca.map.vo.FieldDataVO;
 
@@ -15,4 +16,6 @@ public interface FieldDataMapper {
 	int selectFieldDataCnt(FieldDataSearchVO fieldDataSearchVO);
 
 	FieldDataVO selectFieldData(String id);
+
+  List<ChartVO> selectAreaDataList();
 }

src/main/java/com/mca/map/mapper/UseHistoryMapper.java

@@ -2,7 +2,7 @@ package com.mca.map.mapper;
 
 import java.util.List;
 
-import com.mca.map.vo.UseHistoryChartVO;
+import com.mca.map.vo.ChartVO;
 import com.mca.map.vo.UseHistorySearchVO;
 
 import egovframework.rte.psl.dataaccess.mapper.Mapper;
@@ -14,5 +14,5 @@ public interface UseHistoryMapper {
 	
 	int selectUseHistoryCnt(UseHistorySearchVO useHistorySearchVO);
 
-  List<UseHistoryChartVO> selectDayMapUseData(UseHistorySearchVO useHistorySearchVO);
+  List<ChartVO> selectDayMapUseData(UseHistorySearchVO useHistorySearchVO);
 }

src/main/java/com/mca/map/service/FieldDataService.java

@@ -5,6 +5,7 @@ import java.util.List;
 
 import javax.annotation.Resource;
 
+import com.mca.map.vo.ChartVO;
 import org.springframework.stereotype.Service;
 
 import com.mca.map.mapper.FieldDataMapper;
@@ -31,4 +32,8 @@ public class FieldDataService {
 		// TODO Auto-generated method stub
 		return fieldDataMapper.selectFieldData(id);
 	}
+
+  public List<ChartVO> selectAreaDataList() {
+    return fieldDataMapper.selectAreaDataList();
+  }
 }

src/main/java/com/mca/map/service/UseHistoryService.java

@@ -4,7 +4,7 @@ import java.util.List;
 
 import javax.annotation.Resource;
 
-import com.mca.map.vo.UseHistoryChartVO;
+import com.mca.map.vo.ChartVO;
 import org.springframework.stereotype.Service;
 import com.mca.map.mapper.UseHistoryMapper;
 import com.mca.map.vo.UseHistorySearchVO;
@@ -26,7 +26,7 @@ public class UseHistoryService {
 		return useHistoryMapper.selectUseHistoryList(useHistorySearchVO);
 	}
 
-  public List<UseHistoryChartVO> selectDayMapUseData(UseHistorySearchVO useHistorySearchVO) {
+  public List<ChartVO> selectDayMapUseData(UseHistorySearchVO useHistorySearchVO) {
     return useHistoryMapper.selectDayMapUseData(useHistorySearchVO);
   }
 }

src/main/java/com/mca/map/vo/ChartVO.java

@@ -0,0 +1,41 @@
+package com.mca.map.vo;
+
+public class ChartVO {
+	private String param01;
+  private String param02;
+	private Integer value01;
+  private Integer value02;
+
+
+  public String getParam01() {
+    return param01;
+  }
+
+  public void setParam01(String param01) {
+    this.param01 = param01;
+  }
+
+  public String getParam02() {
+    return param02;
+  }
+
+  public void setParam02(String param02) {
+    this.param02 = param02;
+  }
+
+  public Integer getValue01() {
+    return value01;
+  }
+
+  public void setValue01(Integer value01) {
+    this.value01 = value01;
+  }
+
+  public Integer getValue02() {
+    return value02;
+  }
+
+  public void setValue02(Integer value02) {
+    this.value02 = value02;
+  }
+}

src/main/java/com/mca/map/vo/UseHistoryChartVO.java

@@ -1,22 +0,0 @@
-package com.mca.map.vo;
-
-public class UseHistoryChartVO {
-	private String dateStr;
-	private Integer useCnt;
-
-  public String getDateStr() {
-    return dateStr;
-  }
-
-  public void setDateStr(String dateStr) {
-    this.dateStr = dateStr;
-  }
-
-  public Integer getUseCnt() {
-    return useCnt;
-  }
-
-  public void setUseCnt(Integer useCnt) {
-    this.useCnt = useCnt;
-  }
-}

src/main/resources/egovframework/sqlmap/mappers/map/fieldData.xml

@@ -96,18 +96,25 @@
 	
 	<select id="selectFieldData" parameterType="String" resultType="fieldDataVO">
 		SELECT
-		id,
+      id,
-		userid,
+      userid,
-		save_date,
+      save_date,
-		data_path,
+      data_path,
-		layer_id,
+      layer_id,
-		field_data,
+      field_data,
-		region,
+      region,
-		description,
+      description,
-		status,
+      status,
-		err_note
+      err_note
 		FROM
 			map_field_data
 		WHERE id = #{id}
 	</select>
+
+  <select id="selectAreaDataList" resultType="ChartVO">
+    select substring_index(region, ' ', 1) as param01,
+           count(*) as value01
+    from map_field_data
+    group by param01
+  </select>
 </mapper>

src/main/resources/egovframework/sqlmap/mappers/map/useHistory.xml

@@ -50,12 +50,12 @@
 		</if>
 	</select>
 
-  <select id="selectDayMapUseData" parameterType="useHistorySearchVO" resultType="UseHistoryChartVO" >
+  <select id="selectDayMapUseData" parameterType="useHistorySearchVO" resultType="ChartVO" >
-    select DATE_FORMAT(log_date ,'%m-%d') as dateStr,
+    select DATE_FORMAT(log_date ,'%m-%d') as param01,
-      count(*) as useCnt
+      count(*) as value01
     from map_use_history
     where log_date >= CONCAT(#{searchStartDate}, ' 00:00:00')
       and log_date &lt;= CONCAT(#{searchEndDate}, ' 23:59:59')
-    group by dateStr
+    group by param01
   </select>
 </mapper>

src/main/resources/egovframework/sqlmap/sql-mapper-config.xml

@@ -14,7 +14,7 @@
     <typeAlias alias="useRequestSearchVO" type="com.mca.map.vo.UseRequestSearchVO" />
     <typeAlias alias="useHistoryVO" type="com.mca.map.vo.UseHistoryVO"/>
     <typeAlias alias="useHistorySearchVO" type="com.mca.map.vo.UseHistorySearchVO" />
-    <typeAlias alias="useHistoryChartVO" type="com.mca.map.vo.UseHistoryChartVO" />
+    <typeAlias alias="ChartVO" type="com.mca.map.vo.ChartVO" />
     <typeAlias alias="fieldDataVO" type="com.mca.map.vo.FieldDataVO"/>
     <typeAlias alias="fieldDataSearchVO" type="com.mca.map.vo.FieldDataSearchVO" />
 

src/main/webapp/WEB-INF/jsp/admin/dashBoard.jsp

@@ -8,10 +8,16 @@
 <script type="text/javascript" src="<c:out value="/js/admin/dashBoard.js"/>"></script>
 <script type="text/javascript">
   const dayMapUseDataList = [];
+  const areaDataList = [];
 </script>
 <c:forEach var="data" items="${dayMapUseDataList}">
   <script type="text/javascript">
-    dayMapUseDataList.push(['${data.dateStr}',${data.useCnt}])
+    dayMapUseDataList.push(['${data.param01}',${data.value01}])
+  </script>
+</c:forEach>
+<c:forEach var="data" items="${areaDataList}">
+  <script type="text/javascript">
+    areaDataList.push(['${data.param01}',${data.value01}])
   </script>
 </c:forEach>
 <div class="container">
@@ -52,28 +58,6 @@
           </div>
         </div>
       </div>
-      <%--<div class="card my-2">
-        <div class="card-body row">
-          <div class="col-auto">
-            <img src="/images/icon/icon_002.png" width="60" height="60" alt="">
-          </div>
-          <div class="col-auto">
-            <p class="mb-0 text-black-50">-</p>
-            <h3>0</h3>
-          </div>
-        </div>
-      </div>
-      <div class="card my-2">
-        <div class="card-body row">
-          <div class="col-auto">
-            <img src="/images/icon/icon_002.png" width="60" height="60" alt="">
-          </div>
-          <div class="col-auto">
-            <p class="mb-0 text-black-50">-</p>
-            <h3>0</h3>
-          </div>
-        </div>
-      </div>--%>
       <div class="card my-2">
         <div class="card-body row">
           <div class="col-auto">
@@ -98,28 +82,36 @@
       </div>
     </div>
     <div class="col-lg-9">
-      <div class="card my-2">
+      <div class="row">
-        <div class="card-body">
+        <div class="col-12">
-          <p class="mb-0 text-black-50">지도사용 이력 추이</p>
+          <div class="card my-2">
-          <div id="mapUseFromDayChart"></div>
+            <div class="card-body">
+              <p class="mb-0 text-black-50">지도사용 이력 추이</p>
+              <div id="mapUseFromDayChart"></div>
+            </div>
+          </div>
         </div>
-      </div>
+        <div class="col-5">
-      <%--<div class="card my-2">
+          <div class="card my-2">
-        <div class="card-body">
+            <div class="card-body">
-          <div class="col-auto">
+              <div class="col-auto">
-            <p class="mb-0 text-black-50">-</p>
+                <p class="mb-0 text-black-50">지역별 현장수집 데이터 현황</p>
-            그래프
+                <div id="areaDonutChart"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-7">
+          <div class="card my-2">
+            <div class="card-body">
+              <div class="col-auto">
+                <p class="mb-0 text-black-50">-</p>
+                그래프
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <div class="card my-2">
-        <div class="card-body">
-          <div class="col-auto">
-            <p class="mb-0 text-black-50">-</p>
-            그래프
-          </div>
-        </div>
-      </div>--%>
     </div>
   </div>
 </div>

src/main/webapp/js/admin/dashBoard.js

@@ -1,16 +1,29 @@
 $(function (){
   google.charts.load('current', {packages: ['corechart', 'line']});
   google.charts.setOnLoadCallback(drawMapUseFromDayChart);
+
+  google.charts.load("current", {packages:["corechart"]});
+  google.charts.setOnLoadCallback(drawAreaDonutChart);
 })
 
 function drawMapUseFromDayChart() {
   var dataHeader = [['날짜', '사용량']];
   var chartData = google.visualization.arrayToDataTable(dataHeader.concat(dayMapUseDataList));
+
+  var view = new google.visualization.DataView(chartData);
+  view.setColumns([0, 1,
+    { calc: "stringify",
+      sourceColumn: 1,
+      type: "string",
+      role: "annotation" }]);
+
   var options = {
-    legend: { position: 'bottom' }
+    bar: {groupWidth: "95%"},
+    legend: { position: "bottom" },
   };
-  var chart = new google.visualization.LineChart(document.getElementById('mapUseFromDayChart'));
+  var chart = new google.visualization.ColumnChart(document.getElementById("mapUseFromDayChart"));
-  chart.draw(chartData, options);
+  chart.draw(view, options);
+
   /*$.ajax({
     url: "/admin/dayMapUseData",
     type: "GET",
@@ -34,4 +47,16 @@ function drawMapUseFromDayChart() {
 
     }
   });*/
+}
+
+function drawAreaDonutChart() {
+  var dataHeader = [['지역', '수집 건 수']];
+  var data = google.visualization.arrayToDataTable(dataHeader.concat(areaDataList));
+
+  var options = {
+    pieHole: 0.4,
+  };
+
+  var chart = new google.visualization.PieChart(document.getElementById('areaDonutChart'));
+  chart.draw(data, options);
 }