platform.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. /**
  2. * admin/platform
  3. */
  4. var mcare_admin_platform = function(){
  5. //상속
  6. mcare_admin.call(this);
  7. var self = this;
  8. //변수
  9. var $search = $("#search"),
  10. $endDate = $("#endDate"),
  11. $strDate = $("#strDate"),
  12. $selectOption = $("#select-option"),
  13. $chart = $("#chart"),
  14. $legend = $("#chart_legend"),
  15. $grid = $("#grid"),
  16. $crudServiceBaseUrl = contextPath + "/admin/stats";
  17. /**
  18. * 초기화
  19. */
  20. this.init = function(){
  21. initDatePicker();
  22. initDropDownList();
  23. initGrid();
  24. //initChart();
  25. addEvent();
  26. };
  27. /**
  28. * 이벤트 등록
  29. */
  30. var addEvent = function(){
  31. // 검색 이벤트
  32. $search.on( "click",function(e){
  33. //mcare_admin
  34. self.search( dataSource, false );
  35. });
  36. };
  37. /**
  38. * datapicker 초기화
  39. */
  40. var initDatePicker = function(){
  41. //mcare_admin
  42. self.datePicker( $endDate, $strDate, $selectOption );
  43. };
  44. /**
  45. * 검색조건 dropdown 초기화
  46. */
  47. var initDropDownList = function(){
  48. // mcare_admin
  49. self.dropDownList( $selectOption );
  50. };
  51. // 데이타소스
  52. var pieData = {};
  53. /**
  54. * 데이터소스 설정
  55. */
  56. var setDataSource = function(){
  57. var dataSource = new kendo.data.DataSource({
  58. transport: {
  59. read: {
  60. url: $crudServiceBaseUrl + "/getPlatformList.json",
  61. method: "post",
  62. dataType: "json",
  63. contentType: "application/json"
  64. },
  65. parameterMap: getParameterMap
  66. },
  67. schema: {
  68. data : getSchemaData
  69. }
  70. });
  71. /**
  72. * 데이터소스 파라미터맵
  73. * @private
  74. */
  75. function getParameterMap( options, operation ){
  76. var param = $.extend(true, {}, options, {
  77. strDate : new Date( self.getStartDatePickerValue() ).setHours(0, 0, 0, 0),
  78. endDate : new Date( +self.getEndDatePickerValue() ).setHours(0, 0, 0, 0),
  79. }, null);
  80. return self.util.stringifyJson( param );
  81. };
  82. /**
  83. * 데이터소스 스키마설정
  84. * @private
  85. */
  86. function getSchemaData(e){
  87. if( e.msg !== undefined ){
  88. alert(e.msg);
  89. return [];
  90. }
  91. var aggPlatformList = e.aggPlatformList;
  92. var userOrdArr = new Array(),
  93. userCntArr = new Array(),
  94. platformArr = new Array(),
  95. totalCount = 0;
  96. //내려온 데이터 순서대로
  97. for( var n = 0 ; n < aggPlatformList.length ; n ++ ) {
  98. //순위 배열
  99. userOrdArr.push( n+1 );
  100. //플랫폼 타입 배열
  101. platformArr.push( aggPlatformList[n].platformType );
  102. //방문횟수 배열
  103. userCntArr.push( aggPlatformList[n].hitCnt );
  104. //비율을 위한 전체 횟수
  105. totalCount += aggPlatformList[n].hitCnt;
  106. }
  107. var percentage = new Array();
  108. for( var n = 0 ; n < userCntArr.length ; n ++ ) {
  109. var cnt = userCntArr[n]/totalCount*100,
  110. str_per = ( Math.round(cnt*100) ) / 100;
  111. //비율 계산해서 비율 배열에 넣기
  112. percentage.push( str_per );
  113. //플랫폼 타입을 key로 비율값 value - 차트를 위해서
  114. pieData[ platformArr[n] ] = str_per;
  115. }
  116. var param = [];
  117. for( var n = 0, size = platformArr.length ; n < size ; n ++ ) {
  118. param.push({
  119. "userOrdArr" : userOrdArr[n],
  120. "platformType" : platformArr[n],
  121. "hitCnt" : userCntArr[n],
  122. "percentage" : percentage[n],
  123. });
  124. }
  125. return param;
  126. };
  127. return dataSource;
  128. };
  129. var dataSource = setDataSource();
  130. /**
  131. * 그리드 초기화
  132. */
  133. var initGrid = function(){
  134. // 그리드 옵션
  135. var option = {
  136. dataSource: dataSource,
  137. //그리드 데이터 받아온 뒤 차트 초기화
  138. dataBound: initChart,
  139. pageable: false,
  140. selectable: true,
  141. height : 215,
  142. columns : [
  143. {
  144. field : "userOrdArr",
  145. title : "No.",
  146. width: 80,
  147. template: "#:data.userOrdArr#",
  148. attributes: {
  149. "class": "table-cell",
  150. style: "text-align: center;"
  151. }
  152. },
  153. {
  154. field : "platformType",
  155. title : "플랫폼 타입",
  156. width: 320,
  157. attributes: {
  158. "class": "table-cell",
  159. style: "text-align: center;"
  160. }
  161. },
  162. {
  163. field : "hitCnt",
  164. title : "방문횟수",
  165. width: 320,
  166. template: "#= kendo.toString(data.hitCnt,'n0')# 건",
  167. attributes: {
  168. "class": "table-cell",
  169. style: "text-align: center;"
  170. }
  171. },
  172. {
  173. field : "percentage",
  174. title : "비율",
  175. width: 320,
  176. template: "#:data.percentage# %",
  177. attributes: {
  178. "class": "table-cell",
  179. style: "text-align: center;"
  180. }
  181. }
  182. ]
  183. };
  184. //그리드 초기화 mcare_admin
  185. self.grid( $grid, option );
  186. };
  187. /**
  188. * 차트 초기화
  189. */
  190. var initChart = function(){
  191. var data = setChartData( pieData );
  192. //데이터 없으면 차트 표시하지 않기
  193. if( data.length === 0 ){
  194. var cl = setColor();
  195. data.push({
  196. value : 0,
  197. label : "데이터없음",
  198. color : cl,
  199. highlight : cl
  200. });
  201. }
  202. var option = {
  203. tooltipTemplate: "<%= value %>%"
  204. };
  205. //차트 초기화 mcare_admin
  206. self.chart( $chart, "pie", option, data, $legend );
  207. function setChartData( data ){
  208. var restore = [];
  209. for( var key in data ) {
  210. var cl = setColor();
  211. var item = {
  212. value : data[key],
  213. label : key,
  214. color : cl,
  215. highlight : cl
  216. };
  217. restore.push( item );
  218. }
  219. return restore;
  220. }
  221. function setColor( ){
  222. var colorArr = [
  223. "#F7464A","#46BFBD","#FDB45C" ,"#FFC870",
  224. "#008000","#3f0080","#800040","#007f80","#7f8000",
  225. "#804000","#003f80","#800000","#801900","#ff007f",
  226. "#4c8000","#00804c","#001980","#ff0000","#00ff66","#00ff7f",
  227. "#7f00ff","#feff00","#003fff","#00ffef","#7fffd4",
  228. "#4b0082","#087830","#3200ff","#7fff00","#0000ff"
  229. ];
  230. var random = Math.floor( Math.random() * ( (colorArr.length-1) + 1 ) );
  231. return colorArr[random];
  232. }
  233. };
  234. };