showlog.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608
  1. function getData(filename){
  2. $.get("../../tmp/log/"+filename,
  3. function(data,status){
  4. //生成数据数组
  5. let rowData= data.split('\n');
  6. let arrData = new Array();
  7. for (const iterator of rowData) {
  8. arrData.push(iterator.split(","));
  9. }
  10. console.log(arrData);
  11. let api = new Object;
  12. let delayInMinute
  13. //遍历所有数据
  14. for (const iterator of arrData) {
  15. let delay = parseInt(iterator[2]);
  16. if (api.hasOwnProperty.call(api, iterator[0])) {
  17. let element = api[iterator[0]];
  18. element.times++;
  19. element.delay += delay;
  20. try{
  21. let hour = parseInt(iterator[1].split(':')[0]);
  22. element.delayHour[hour] += delay;
  23. if(delay>api[iterator[0]].delayMaxHour[hour]){
  24. api[iterator[0]].delayMaxHour[hour] = delay;
  25. }
  26. if(delay < api[iterator[0]].delayMinHour[hour]){
  27. api[iterator[0]].delayMinHour[hour] = delay;
  28. }
  29. element.timesHour[hour] ++;
  30. }catch(e){
  31. }
  32. }else{
  33. api[iterator[0]] = {
  34. times:1,
  35. timesHour:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  36. delay:delay,
  37. //一小时总执行时间
  38. delayHour:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  39. //一小时最高执行时间
  40. delayMaxHour:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  41. //一小时最低执行时间
  42. delayMinHour:[30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000,30000],
  43. //一小时平均执行时间
  44. delayAverageHour:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  45. };
  46. try{
  47. let hour = parseInt(iterator[1].split(':')[0]);
  48. api[iterator[0]].delayHour[hour] = parseInt(iterator[2]);
  49. api[iterator[0]].delayMaxHour[hour] = parseInt(iterator[2]);
  50. api[iterator[0]].delayMinHour[hour] = parseInt(iterator[2]);
  51. api[iterator[0]].timesHour[hour] = 1;
  52. }catch(e){
  53. }
  54. }
  55. }
  56. let api_timms = new Array();
  57. let api_delay = new Array();
  58. let ApiDelayInHour = new Array();
  59. let ApiTimesInHour = new Array();
  60. let ApiAverageInHour = new Array();
  61. let ohlc = new Array();
  62. let volume = new Array();
  63. for (const key in api) {
  64. if (api.hasOwnProperty.call(api, key)) {
  65. //计算每个小时的平均执行时间
  66. for (let index = 0; index < api[key].delayAverageHour.length; index++) {
  67. api[key].delayAverageHour[index] = api[key].delayHour[index]/api[key].timesHour[index];
  68. }
  69. const element = api[key];
  70. api_timms.push({
  71. name:key,
  72. y:element.times
  73. });
  74. api_delay.push({
  75. name:key,
  76. y:element.delay
  77. });
  78. ApiDelayInHour.push({
  79. name:key,
  80. data:element.delayHour
  81. });
  82. ApiTimesInHour.push({
  83. name:key,
  84. data:element.timesHour
  85. });
  86. ApiAverageInHour.push({
  87. name:key,
  88. data:element.delayAverageHour
  89. });
  90. for (let index = 1; index < api[key].delayAverageHour.length; index++) {
  91. api[key].delayAverageHour[index] = api[key].delayHour[index]/api[key].timesHour[index];
  92. if(key=="/app/uwbw/update.php"){
  93. ohlc.push([
  94. Date.UTC(2022,1,1,index,0,0,0), // the date
  95. api[key].delayAverageHour[index-1], // open
  96. api[key].delayMaxHour[index], // high
  97. api[key].delayMinHour[index], // low
  98. api[key].delayAverageHour[index] // close
  99. ]);
  100. volume.push([
  101. Date.UTC(2022,1,1,index,0,0,0), // the date
  102. element.timesHour[index] // the volume
  103. ]);
  104. }
  105. }
  106. }
  107. }
  108. chart_1(api_timms);
  109. chart_2(api_delay);
  110. chart_3(ApiDelayInHour);
  111. chart_3a(ApiAverageInHour);
  112. chart_4(ApiTimesInHour);
  113. chart_5(ohlc,volume);
  114. chart_6(ohlc,volume);
  115. });
  116. }
  117. function chart_1(data){
  118. // Make monochrome colors
  119. var pieColors = (function () {
  120. var colors = [],
  121. base = Highcharts.getOptions().colors[0],
  122. i;
  123. for (i = 0; i < 10; i += 1) {
  124. // Start out with a darkened base color (negative brighten), and end
  125. // up with a much brighter color
  126. colors.push(Highcharts.color(base).brighten((i - 3) / 7).get());
  127. }
  128. return colors;
  129. }());
  130. // Build the chart
  131. Highcharts.chart('chart-1', {
  132. chart: {
  133. plotBackgroundColor: null,
  134. plotBorderWidth: null,
  135. plotShadow: false,
  136. type: 'pie'
  137. },
  138. title: {
  139. text: 'API 执行次数'
  140. },
  141. tooltip: {
  142. pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  143. },
  144. accessibility: {
  145. point: {
  146. valueSuffix: '%'
  147. }
  148. },
  149. plotOptions: {
  150. pie: {
  151. allowPointSelect: true,
  152. cursor: 'pointer',
  153. colors: pieColors,
  154. dataLabels: {
  155. enabled: true,
  156. format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
  157. distance: -50,
  158. filter: {
  159. property: 'percentage',
  160. operator: '>',
  161. value: 4
  162. }
  163. }
  164. }
  165. },
  166. series: [{
  167. name: 'Share',
  168. data: data
  169. }]
  170. });
  171. }
  172. function chart_2(data){
  173. // Make monochrome colors
  174. var pieColors = (function () {
  175. var colors = [],
  176. base = Highcharts.getOptions().colors[0],
  177. i;
  178. for (i = 0; i < 10; i += 1) {
  179. // Start out with a darkened base color (negative brighten), and end
  180. // up with a much brighter color
  181. colors.push(Highcharts.color(base).brighten((i - 3) / 7).get());
  182. }
  183. return colors;
  184. }());
  185. // Build the chart
  186. Highcharts.chart('chart-2', {
  187. chart: {
  188. plotBackgroundColor: null,
  189. plotBorderWidth: null,
  190. plotShadow: false,
  191. type: 'pie'
  192. },
  193. title: {
  194. text: 'API 累积执行时间'
  195. },
  196. tooltip: {
  197. pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  198. },
  199. accessibility: {
  200. point: {
  201. valueSuffix: '%'
  202. }
  203. },
  204. plotOptions: {
  205. pie: {
  206. allowPointSelect: true,
  207. cursor: 'pointer',
  208. colors: pieColors,
  209. dataLabels: {
  210. enabled: true,
  211. format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
  212. distance: -50,
  213. filter: {
  214. property: 'percentage',
  215. operator: '>',
  216. value: 4
  217. }
  218. }
  219. }
  220. },
  221. series: [{
  222. name: 'Share',
  223. data: data
  224. }]
  225. });
  226. }
  227. //按照小时计算的api 执行时间
  228. function chart_3(data){
  229. Highcharts.chart('chart-3', {
  230. title: {
  231. text: '按照小时计算的 API 执行时间'
  232. },
  233. subtitle: {
  234. text: 'Source: thesolarfoundation.com'
  235. },
  236. yAxis: {
  237. title: {
  238. text: '执行时间'
  239. }
  240. },
  241. xAxis: {
  242. categories: [
  243. '8',
  244. '9',
  245. '10',
  246. '11',
  247. '12',
  248. '13',
  249. '14',
  250. '15',
  251. '16',
  252. '17',
  253. '18',
  254. '19',
  255. '20',
  256. '21',
  257. '22',
  258. '23',
  259. '0',
  260. '1',
  261. '2',
  262. '3',
  263. '4',
  264. '5',
  265. '6',
  266. '7'
  267. ],
  268. accessibility: {
  269. rangeDescription: 'Range: 0 to 23'
  270. }
  271. },
  272. legend: {
  273. layout: 'vertical',
  274. align: 'right',
  275. verticalAlign: 'middle'
  276. },
  277. plotOptions: {
  278. series: {
  279. label: {
  280. connectorAllowed: false
  281. },
  282. pointStart: 0
  283. }
  284. },
  285. series: data,
  286. responsive: {
  287. rules: [{
  288. condition: {
  289. maxWidth: 500
  290. },
  291. chartOptions: {
  292. legend: {
  293. layout: 'horizontal',
  294. align: 'center',
  295. verticalAlign: 'bottom'
  296. }
  297. }
  298. }]
  299. }
  300. });
  301. }
  302. function chart_3a(data){
  303. Highcharts.chart('chart-3a', {
  304. title: {
  305. text: '按照小时计算的 API 平均执行时间'
  306. },
  307. subtitle: {
  308. text: '总执行时间/次数'
  309. },
  310. yAxis: {
  311. title: {
  312. text: '执行时间'
  313. }
  314. },
  315. xAxis: {
  316. categories: [
  317. '8',
  318. '9',
  319. '10',
  320. '11',
  321. '12',
  322. '13',
  323. '14',
  324. '15',
  325. '16',
  326. '17',
  327. '18',
  328. '19',
  329. '20',
  330. '21',
  331. '22',
  332. '23',
  333. '0',
  334. '1',
  335. '2',
  336. '3',
  337. '4',
  338. '5',
  339. '6',
  340. '7'
  341. ],
  342. accessibility: {
  343. rangeDescription: 'Range: 0 to 23'
  344. }
  345. },
  346. legend: {
  347. layout: 'vertical',
  348. align: 'right',
  349. verticalAlign: 'middle'
  350. },
  351. plotOptions: {
  352. series: {
  353. label: {
  354. connectorAllowed: false
  355. },
  356. pointStart: 0
  357. }
  358. },
  359. series: data,
  360. responsive: {
  361. rules: [{
  362. condition: {
  363. maxWidth: 500
  364. },
  365. chartOptions: {
  366. legend: {
  367. layout: 'horizontal',
  368. align: 'center',
  369. verticalAlign: 'bottom'
  370. }
  371. }
  372. }]
  373. }
  374. });
  375. }
  376. function chart_4(data){
  377. Highcharts.chart('chart-4', {
  378. chart: {
  379. type: 'column'
  380. },
  381. title: {
  382. text: 'API 执行次数'
  383. },
  384. subtitle: {
  385. text: 'Source: WorldClimate.com'
  386. },
  387. xAxis: {
  388. categories: [
  389. '8',
  390. '9',
  391. '10',
  392. '11',
  393. '12',
  394. '13',
  395. '14',
  396. '15',
  397. '16',
  398. '17',
  399. '18',
  400. '19',
  401. '20',
  402. '21',
  403. '22',
  404. '23',
  405. '0',
  406. '1',
  407. '2',
  408. '3',
  409. '4',
  410. '5',
  411. '6',
  412. '7'
  413. ],
  414. crosshair: true
  415. },
  416. yAxis: {
  417. min: 0,
  418. title: {
  419. text: '执行次数'
  420. }
  421. },
  422. legend: {
  423. layout: 'vertical',
  424. align: 'right',
  425. verticalAlign: 'middle'
  426. },
  427. tooltip: {
  428. headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  429. pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  430. '<td style="padding:0"><b>{point.y} 次</b></td></tr>',
  431. footerFormat: '</table>',
  432. shared: true,
  433. useHTML: true
  434. },
  435. plotOptions: {
  436. column: {
  437. pointPadding: 0.2,
  438. borderWidth: 0
  439. }
  440. },
  441. series: data
  442. });
  443. }
  444. function chart_6(ohlc,volume){
  445. {
  446. // create the chart
  447. Highcharts.stockChart('chart-6', {
  448. title: {
  449. text: 'AAPL stock price by minute'
  450. },
  451. rangeSelector: {
  452. buttons: [{
  453. type: 'hour',
  454. count: 1,
  455. text: '1h'
  456. }, {
  457. type: 'day',
  458. count: 1,
  459. text: '1D'
  460. }, {
  461. type: 'all',
  462. count: 1,
  463. text: 'All'
  464. }],
  465. selected: 1,
  466. inputEnabled: false
  467. },
  468. series: [{
  469. name: 'AAPL',
  470. type: 'candlestick',
  471. data: ohlc,
  472. tooltip: {
  473. valueDecimals: 2
  474. }
  475. }]
  476. });
  477. }
  478. }
  479. function chart_5(ohlc,volume){
  480. // create the chart
  481. groupingUnits = [[
  482. 'week', // unit name
  483. [1] // allowed multiples
  484. ], [
  485. 'month',
  486. [1, 2, 3, 4, 6]
  487. ]];
  488. Highcharts.stockChart('chart-5', {
  489. rangeSelector: {
  490. selected: 2
  491. },
  492. title: {
  493. text: 'progress_curve'
  494. },
  495. yAxis: [{
  496. labels: {
  497. align: 'right',
  498. x: -3
  499. },
  500. title: {
  501. text: 'EXP'
  502. },
  503. height: '60%',
  504. lineWidth: 2,
  505. resize: {
  506. enabled: true
  507. }
  508. }, {
  509. labels: {
  510. align: 'right',
  511. x: -3
  512. },
  513. title: {
  514. text: 'action'
  515. },
  516. top: '65%',
  517. height: '35%',
  518. offset: 0,
  519. lineWidth: 2
  520. }],
  521. tooltip: {
  522. shared: false,
  523. useHTML: true,
  524. pointFormatter: function() {
  525. if(this.high){
  526. return '<b><a href="../">'+this.series.name + ' : ' + this.high + '&nbsp;' +'gLocal.gui.h'+ '</a><br><a href="../">' +'gLocal.gui.day_EXP' + ' : ' + Math.round((this.high - this.low)*100)/100 + '&nbsp;' +'gLocal.gui.h'+'</a></b><br/>';
  527. }
  528. else{
  529. return '<b><a href="../">'+this.series.name + ' : ' + this.y + '&nbsp;' +'gLocal.gui.times'+'</a><span style="display:none;">'+this.x+'</span></b>';
  530. }
  531. },
  532. valueDecimals: 2,//保留两位小數
  533. split: true
  534. },
  535. series: [{
  536. type: 'ohlc',
  537. name: 'gLocal.gui.EXP_in_total',
  538. data: ohlc,
  539. dataGrouping: {
  540. units: [[
  541. 'week', // unit name
  542. [1] // allowed multiples
  543. ], [
  544. 'month',
  545. [1, 2, 3, 4, 6]
  546. ]]
  547. }
  548. }, {
  549. type: 'column',
  550. name: 'gLocal.gui.day_action',
  551. data: volume,
  552. yAxis: 1,
  553. dataGrouping: {
  554. units: groupingUnits
  555. }
  556. }]
  557. });
  558. }