Statistics.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. <template>
  2. <div class="container">
  3. <div class="columns">
  4. <div
  5. class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
  6. >
  7. <header class="card-header">
  8. <p class="card-header-title">
  9. Average Logs
  10. </p>
  11. </header>
  12. <div class="card-content">
  13. <div class="content">
  14. <table class="table">
  15. <thead>
  16. <tr>
  17. <th />
  18. <th>Success</th>
  19. <th>Error</th>
  20. <th>Info</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr>
  25. <th><strong>Average per second</strong></th>
  26. <th :title="logs.second.success">
  27. {{ round(logs.second.success) }}
  28. </th>
  29. <th :title="logs.second.error">
  30. {{ round(logs.second.error) }}
  31. </th>
  32. <th :title="logs.second.info">
  33. {{ round(logs.second.info) }}
  34. </th>
  35. </tr>
  36. <tr>
  37. <th><strong>Average per minute</strong></th>
  38. <th :title="logs.minute.success">
  39. {{ round(logs.minute.success) }}
  40. </th>
  41. <th :title="logs.minute.error">
  42. {{ round(logs.minute.error) }}
  43. </th>
  44. <th :title="logs.minute.info">
  45. {{ round(logs.minute.info) }}
  46. </th>
  47. </tr>
  48. <tr>
  49. <th><strong>Average per hour</strong></th>
  50. <th :title="logs.hour.success">
  51. {{ round(logs.hour.success) }}
  52. </th>
  53. <th :title="logs.hour.error">
  54. {{ round(logs.hour.error) }}
  55. </th>
  56. <th :title="logs.hour.info">
  57. {{ round(logs.hour.info) }}
  58. </th>
  59. </tr>
  60. <tr>
  61. <th><strong>Average per day</strong></th>
  62. <th :title="logs.day.success">
  63. {{ round(logs.day.success) }}
  64. </th>
  65. <th :title="logs.day.error">
  66. {{ round(logs.day.error) }}
  67. </th>
  68. <th :title="logs.day.info">
  69. {{ round(logs.day.info) }}
  70. </th>
  71. </tr>
  72. </tbody>
  73. </table>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. <br />
  79. <div class="columns">
  80. <div
  81. class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
  82. >
  83. <div class="card-content">
  84. <div class="content">
  85. <canvas id="minuteChart" height="400" />
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. <br />
  91. <div class="columns">
  92. <div
  93. class="card column is-10-desktop is-offset-1-desktop is-12-mobile"
  94. >
  95. <div class="card-content">
  96. <div class="content">
  97. <canvas id="hourChart" height="400" />
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. </template>
  104. <script>
  105. import Chart from "chart.js";
  106. import io from "../../io";
  107. export default {
  108. components: {},
  109. data() {
  110. return {
  111. successUnitsPerMinute: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  112. errorUnitsPerMinute: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  113. infoUnitsPerMinute: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  114. successUnitsPerHour: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  115. errorUnitsPerHour: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  116. infoUnitsPerHour: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  117. minuteChart: null,
  118. hourChart: null,
  119. logs: {
  120. second: {
  121. success: 0,
  122. error: 0,
  123. info: 0
  124. },
  125. minute: {
  126. success: 0,
  127. error: 0,
  128. info: 0
  129. },
  130. hour: {
  131. success: 0,
  132. error: 0,
  133. info: 0
  134. },
  135. day: {
  136. success: 0,
  137. error: 0,
  138. info: 0
  139. }
  140. }
  141. };
  142. },
  143. mounted() {
  144. const _this = this;
  145. const minuteCtx = document.getElementById("minuteChart");
  146. const hourCtx = document.getElementById("hourChart");
  147. _this.minuteChart = new Chart(minuteCtx, {
  148. type: "line",
  149. data: {
  150. labels: [
  151. "-10",
  152. "-9",
  153. "-8",
  154. "-7",
  155. "-6",
  156. "-5",
  157. "-4",
  158. "-3",
  159. "-2",
  160. "-1"
  161. ],
  162. datasets: [
  163. {
  164. label: "Success",
  165. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  166. backgroundColor: ["rgba(75, 192, 192, 0.2)"],
  167. borderColor: ["rgba(75, 192, 192, 1)"],
  168. borderWidth: 1
  169. },
  170. {
  171. label: "Error",
  172. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  173. backgroundColor: ["rgba(255, 99, 132, 0.2)"],
  174. borderColor: ["rgba(255,99,132,1)"],
  175. borderWidth: 1
  176. },
  177. {
  178. label: "Info",
  179. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  180. backgroundColor: ["rgba(54, 162, 235, 0.2)"],
  181. borderColor: ["rgba(54, 162, 235, 1)"],
  182. borderWidth: 1
  183. }
  184. ]
  185. },
  186. options: {
  187. title: {
  188. display: true,
  189. text: "Logs per minute"
  190. },
  191. scales: {
  192. yAxes: [
  193. {
  194. ticks: {
  195. beginAtZero: true,
  196. stepSize: 1
  197. }
  198. }
  199. ]
  200. },
  201. responsive: true,
  202. maintainAspectRatio: false
  203. }
  204. });
  205. _this.hourChart = new Chart(hourCtx, {
  206. type: "line",
  207. data: {
  208. labels: [
  209. "-10",
  210. "-9",
  211. "-8",
  212. "-7",
  213. "-6",
  214. "-5",
  215. "-4",
  216. "-3",
  217. "-2",
  218. "-1"
  219. ],
  220. datasets: [
  221. {
  222. label: "Success",
  223. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  224. backgroundColor: ["rgba(75, 192, 192, 0.2)"],
  225. borderColor: ["rgba(75, 192, 192, 1)"],
  226. borderWidth: 1
  227. },
  228. {
  229. label: "Error",
  230. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  231. backgroundColor: ["rgba(255, 99, 132, 0.2)"],
  232. borderColor: ["rgba(255,99,132,1)"],
  233. borderWidth: 1
  234. },
  235. {
  236. label: "Info",
  237. data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  238. backgroundColor: ["rgba(54, 162, 235, 0.2)"],
  239. borderColor: ["rgba(54, 162, 235, 1)"],
  240. borderWidth: 1
  241. }
  242. ]
  243. },
  244. options: {
  245. title: {
  246. display: true,
  247. text: "Logs per hour"
  248. },
  249. scales: {
  250. yAxes: [
  251. {
  252. ticks: {
  253. beginAtZero: true,
  254. stepSize: 1
  255. }
  256. }
  257. ]
  258. },
  259. responsive: true,
  260. maintainAspectRatio: false
  261. }
  262. });
  263. io.getSocket(socket => {
  264. _this.socket = socket;
  265. if (_this.socket.connected) _this.init();
  266. io.onConnect(() => _this.init());
  267. });
  268. },
  269. methods: {
  270. init() {
  271. this.socket.emit("apis.joinAdminRoom", "statistics", () => {});
  272. this.socket.on(
  273. "event:admin.statistics.success.units.minute",
  274. units => {
  275. this.successUnitsPerMinute = units;
  276. this.minuteChart.data.datasets[0].data = units;
  277. this.minuteChart.update();
  278. }
  279. );
  280. this.socket.on(
  281. "event:admin.statistics.error.units.minute",
  282. units => {
  283. this.errorUnitsPerMinute = units;
  284. this.minuteChart.data.datasets[1].data = units;
  285. this.minuteChart.update();
  286. }
  287. );
  288. this.socket.on(
  289. "event:admin.statistics.info.units.minute",
  290. units => {
  291. this.infoUnitsPerMinute = units;
  292. this.minuteChart.data.datasets[2].data = units;
  293. this.minuteChart.update();
  294. }
  295. );
  296. this.socket.on(
  297. "event:admin.statistics.success.units.hour",
  298. units => {
  299. this.successUnitsPerHour = units;
  300. this.hourChart.data.datasets[0].data = units;
  301. this.hourChart.update();
  302. }
  303. );
  304. this.socket.on("event:admin.statistics.error.units.hour", units => {
  305. this.errorUnitsPerHour = units;
  306. this.hourChart.data.datasets[1].data = units;
  307. this.hourChart.update();
  308. });
  309. this.socket.on("event:admin.statistics.info.units.hour", units => {
  310. this.infoUnitsPerHour = units;
  311. this.hourChart.data.datasets[2].data = units;
  312. this.hourChart.update();
  313. });
  314. this.socket.on("event:admin.statistics.logs", logs => {
  315. this.logs = logs;
  316. });
  317. },
  318. round(number) {
  319. return Math.round(number);
  320. }
  321. }
  322. };
  323. </script>
  324. <style lang="scss" scoped>
  325. body {
  326. font-family: "Roboto", sans-serif;
  327. }
  328. .user-avatar {
  329. display: block;
  330. max-width: 50px;
  331. margin: 0 auto;
  332. }
  333. td {
  334. vertical-align: middle;
  335. }
  336. .is-primary:focus {
  337. background-color: #029ce3 !important;
  338. }
  339. </style>