Asus router GUI fixer-upper

fixes several annoyances in AsusWRT UI

  1. // ==UserScript==
  2. // @name Asus router GUI fixer-upper
  3. // @namespace V@no
  4. // @author V@no
  5. // @description fixes several annoyances in AsusWRT UI
  6. // @include http://router.asus.com/*
  7. // @include https://router.asus.com:8443/*
  8. // @include http://192.168.1.1/*
  9. // @include https://192.168.1.1/*
  10. // @license MIT
  11. // @version 1.1
  12. // @run-at document-start
  13. // @grant none
  14. // ==/UserScript==
  15.  
  16.  
  17. function $$(id)
  18. {
  19. return document.getElementById(id);
  20. }
  21.  
  22. var log = console.log;
  23.  
  24. function multiline(func, ws)
  25. {
  26. func = func.toString();
  27. func = func.slice(func.indexOf("/*") + 2, func.lastIndexOf("*/")).split("*//*").join("*/");
  28. return ws ? func : func.replace(/[\n\t]*/g, "");
  29. }
  30. var css = document.createElement("style")
  31. css.innerHTML = multiline(function(){/*
  32. .monitor_qos_bg
  33. {
  34. height: unset !important;
  35. }
  36. .table1px td > div:first-child
  37. {
  38. height: unset !important;
  39. }
  40. .NM_radius_bottom_container
  41. {
  42. height: 100% !important;
  43. }
  44. #statusframe
  45. {
  46. height: 860px !important;
  47. }
  48. */});
  49.  
  50. wait(function()
  51. {
  52. if (typeof(validator) == "undefined")
  53. return;
  54.  
  55. for(let i in _validator)
  56. {
  57. window.validator[i] = _validator[i];
  58. }
  59. return true;
  60. }, 10000);
  61.  
  62. wait(function()
  63. {
  64. if (typeof(showDropdownClientList) == "undefined")
  65. return;
  66.  
  67. let _showDropdownClientList = showDropdownClientList,
  68. _removeClient = removeClient;
  69.  
  70. window.showDropdownClientList = function showDropdownClientList (_callBackFun, _callBackFunParam, _interfaceMode, _containerID, _pullArrowID, _clientState)
  71. {
  72. _showDropdownClientList.apply(null, arguments);
  73. let s = $$(_containerID).querySelectorAll("strong[onclick]");
  74. for(let i = 0; i < s.length; i++)
  75. {
  76. s[i].setAttribute("onclick", s[i].getAttribute("onclick").replace(/_clientlist_offline\'\)/, "_clientlist_offline\',event)"));
  77. }
  78. function fixTitle(id)
  79. {
  80. let a = $$(id);
  81. if (!a)
  82. return;
  83.  
  84. a = a.getElementsByTagName("a");
  85.  
  86. for (let i = 0; i < a.length; i++)
  87. {
  88. let ip = clientList[a[i].id].ip;
  89. if (ip == "offline")
  90. continue;
  91.  
  92. a[i].title = ip + "\n" + a[i].title;
  93. }
  94. }
  95. fixTitle(_containerID + "_clientlist_online");
  96. fixTitle(_containerID + "_clientlist_offline");
  97. }
  98.  
  99. window.removeClient = function removeClient(_mac, _controlObj, _controlPanel, e)
  100. {
  101. if (!window.event)
  102. window.event = e;
  103.  
  104. if (window.event)
  105. {
  106. window.event.stopPropagation();
  107. window.event.preventDefault();
  108. window.event.stopImmediatePropagation();
  109. }
  110. return _removeClient.apply(null, arguments);
  111. }
  112. return true;
  113. }, 10000);
  114.  
  115. wait(function()
  116. {
  117. if (typeof(generateDetailTable) == "undefined")
  118. return;
  119.  
  120. let _generateDetailTable = generateDetailTable;
  121. window.generateDetailTable = function generateDetailTable (data)
  122. {
  123. _generateDetailTable.apply(null, arguments);
  124.  
  125. log(clientList);
  126. if ($$("detail_info_table"))
  127. {
  128. let list = $$("detail_info_table").children;
  129. for(let i = 1; i < list.length; i++)
  130. {
  131. let div = list[i].getElementsByTagName("div")[2],
  132. c = clientList[div.innerHTML];
  133. if (!c)
  134. continue;
  135.  
  136. div.innerHTML = c.name;
  137. div.title = c.ip + "\n" + c.mac;
  138. }
  139. }
  140. function fixDiv(id)
  141. {
  142. let a = $$(id);
  143. if (!a)
  144. return;
  145.  
  146. a = a.getElementsByTagName("a");
  147.  
  148. for (let i = 0; i < a.length; i++)
  149. {
  150. let ip = clientList[a[i].id].ip;
  151. if (ip == "offline")
  152. continue;
  153.  
  154. a[i].title = ip + "\n" + a[i].title;
  155. }
  156. }
  157. }
  158. return true;
  159. }, 10000);
  160.  
  161.  
  162. wait(function()
  163. {
  164. let div = $$("clientlist_viewlist_content");
  165. if (!div)
  166. return;
  167.  
  168. div.removeAttribute("onselectstart");
  169. return true;
  170. }, 10000);
  171.  
  172. function func()
  173. {
  174. let ad = $$("p180-root");
  175. if (ad)
  176. ad.parentNode.removeChild(ad);
  177.  
  178. document.getElementsByTagName("head")[0].appendChild(css);
  179. document.body.onselectstart = null;
  180. }
  181.  
  182. if (document.readyState != "loading")
  183. func();
  184. else
  185. document.addEventListener("DOMContentLoaded", func ,true);
  186.  
  187. function collectInfo(data){
  188. for(i=0;i<data.length;i++){
  189. var mac = data[i][0];
  190. var ip = ""
  191. var hit = data[i][1];
  192. var name = "";
  193. if(clientList[mac]){
  194. name = (clientList[mac].nickName == "") ? clientList[mac].name : clientList[mac].nickName;
  195. ip = clientList[mac].ip;
  196. }
  197. else{
  198. name = mac;
  199. }
  200. hit_count_all += parseInt(hit);
  201. info_bar.push(mac);
  202. info_bar[mac] = new targetObject(ip, name, hit, mac);
  203. }
  204. generateBarTable();
  205. }
  206.  
  207. var _validator = {
  208. checkKey: function(e)
  209. {
  210. //for Mac + Safari, let 'Command + A'(C, V, X) can work
  211. return (e.metaKey || e.ctrlKey) && [65, 67, 86, 88, 97, 99, 118, 120, 122].indexOf(e.keyCode ? e.keyCode : e.which) != -1;
  212. },
  213. isHWAddr: function(o, event)
  214. {
  215. var keyPressed = event.keyCode ? event.keyCode : event.which;
  216. var i, j;
  217. if (this.isFunctionButton(event))
  218. {
  219. return true;
  220. }
  221.  
  222. if ((keyPressed > 47 && keyPressed < 58) || (keyPressed > 64 && keyPressed < 71) || (keyPressed > 96 && keyPressed < 103))
  223. { //Hex
  224. j = 0;
  225. for (i = 0; i < o.value.length; i++)
  226. {
  227. if (o.value.charAt(i) == ':')
  228. {
  229. j++;
  230. }
  231. }
  232. if (j < 5 && i >= 2)
  233. {
  234. if (o.value.charAt(i - 2) != ':' && o.value.charAt(i - 1) != ':')
  235. {
  236. o.value = o.value + ':';
  237. }
  238. }
  239. return true;
  240. }
  241. else if (keyPressed == 58 || keyPressed == 13)
  242. { //symbol ':' & 'ENTER'
  243. return true;
  244. }
  245. else if (this.checkKey(event))
  246. { //for Mac + Safari, let 'Command + A'(C, V, X) can work
  247. return true
  248. }
  249. else
  250. {
  251. return false;
  252. }
  253. },
  254. isNumberFloat: function(o, event)
  255. {
  256. var keyPressed = event.keyCode ? event.keyCode : event.which;
  257. if (this.isFunctionButton(event))
  258. {
  259. return true;
  260. }
  261. if ((keyPressed == 46) || (keyPressed > 47 && keyPressed < 58))
  262. return true;
  263. else if (this.checkKey(event))
  264. { //for Mac + Safari, let 'Command + A'(C, V, X) can work
  265. return true
  266. }
  267. else
  268. return false;
  269. },
  270. isNegativeNumber: function(o, event)
  271. {
  272. var keyPressed = event.keyCode ? event.keyCode : event.which;
  273. if (this.isFunctionButton(event))
  274. {
  275. return true;
  276. }
  277. if ((keyPressed == 45) || (keyPressed > 47 && keyPressed < 58))
  278. return true;
  279. else if (this.checkKey(event))
  280. { //for Mac + Safari, let 'Command + A'(C, V, X) can work
  281. return true
  282. }
  283. else
  284. return false;
  285. },
  286. isNumber: function(o, event)
  287. {
  288. var keyPressed = event.keyCode ? event.keyCode : event.which;
  289. if (this.isFunctionButton(event))
  290. {
  291. return true;
  292. }
  293. if (keyPressed > 47 && keyPressed < 58)
  294. {
  295. /*if (keyPressed==48 && o.value.length==0){ //single 0
  296. return false;
  297. }*/
  298. return true;
  299. }
  300. else if (this.checkKey(event))
  301. { //for Mac + Safari, let 'Command + A'(C, V, X) can work
  302. return true
  303. }
  304. else
  305. {
  306. return false;
  307. }
  308. },
  309. isIPAddr: function(o, event)
  310. {
  311. var keyPressed = event.keyCode ? event.keyCode : event.which;
  312. var i, j;
  313. if (this.isFunctionButton(event))
  314. {
  315. return true;
  316. }
  317. if ((keyPressed > 47 && keyPressed < 58))
  318. {
  319. j = 0;
  320. for (i = 0; i < o.value.length; i++)
  321. {
  322. if (o.value.charAt(i) == '.')
  323. {
  324. j++;
  325. }
  326. }
  327. if (j < 3 && i >= 3)
  328. {
  329. if (o.value.charAt(i - 3) != '.' && o.value.charAt(i - 2) != '.' && o.value.charAt(i - 1) != '.')
  330. {
  331. o.value = o.value + '.';
  332. }
  333. }
  334. return true;
  335. }
  336. else if (keyPressed == 46)
  337. {
  338. j = 0;
  339. for (i = 0; i < o.value.length; i++)
  340. {
  341. if (o.value.charAt(i) == '.')
  342. {
  343. j++;
  344. }
  345. }
  346. if (o.value.charAt(i - 1) == '.' || j == 3)
  347. {
  348. return false;
  349. }
  350. return true;
  351. }
  352. else if (keyPressed == 13)
  353. { // 'ENTER'
  354. return true;
  355. }
  356. else if (this.checkKey(event))
  357. { //for Mac + Safari, let 'Command + A'(C, V, X) can work
  358. return true
  359. }
  360. return false;
  361. },
  362. isIPAddrPlusNetmask: function(o, event)
  363. {
  364. var keyPressed = event.keyCode ? event.keyCode : event.which;
  365. var i, j;
  366. if (this.isFunctionButton(event))
  367. {
  368. return true;
  369. }
  370. if ((keyPressed > 47 && keyPressed < 58))
  371. {
  372. j = 0;
  373. for (i = 0; i < o.value.length; i++)
  374. {
  375. if (o.value.charAt(i) == '.')
  376. {
  377. j++;
  378. }
  379. }
  380. if (j < 3 && i >= 3)
  381. {
  382. if (o.value.charAt(i - 3) != '.' && o.value.charAt(i - 2) != '.' && o.value.charAt(i - 1) != '.')
  383. {
  384. o.value = o.value + '.';
  385. }
  386. }
  387. return true;
  388. }
  389. else if (keyPressed == 46)
  390. {
  391. j = 0;
  392. for (i = 0; i < o.value.length; i++)
  393. {
  394. if (o.value.charAt(i) == '.')
  395. {
  396. j++;
  397. }
  398. }
  399. if (o.value.charAt(i - 1) == '.' || j == 3)
  400. {
  401. return false;
  402. }
  403. return true;
  404. }
  405. else if (keyPressed == 47)
  406. {
  407. j = 0;
  408. for (i = 0; i < o.value.length; i++)
  409. {
  410. if (o.value.charAt(i) == '.')
  411. {
  412. j++;
  413. }
  414. }
  415. if (j < 3)
  416. {
  417. return false;
  418. }
  419. return true;
  420. }
  421. else if (this.checkKey(event))
  422. { //for Mac + Safari, let 'Command + A'(C, V, X) can work
  423. return true
  424. }
  425. return false;
  426. },
  427. isIPRange: function(o, event)
  428. {
  429. var keyPressed = event.keyCode ? event.keyCode : event.which;
  430. var i, j;
  431. if (this.isFunctionButton(event))
  432. {
  433. return true;
  434. }
  435. if ((keyPressed > 47 && keyPressed < 58))
  436. { // 0~9
  437. j = 0;
  438. for (i = 0; i < o.value.length; i++)
  439. {
  440. if (o.value.charAt(i) == '.')
  441. {
  442. j++;
  443. }
  444. }
  445. if (j < 3 && i >= 3)
  446. {
  447. if (o.value.charAt(i - 3) != '.' && o.value.charAt(i - 2) != '.' && o.value.charAt(i - 1) != '.')
  448. o.value = o.value + '.';
  449. }
  450. return true;
  451. }
  452. else if (keyPressed == 46)
  453. { // .
  454. j = 0;
  455. for (i = 0; i < o.value.length; i++)
  456. {
  457. if (o.value.charAt(i) == '.')
  458. {
  459. j++;
  460. }
  461. }
  462. if (o.value.charAt(i - 1) == '.' || j == 3)
  463. {
  464. return false;
  465. }
  466. return true;
  467. }
  468. else if (keyPressed == 42)
  469. { // *
  470. return true;
  471. }
  472. else if (this.checkKey(event))
  473. { //for Mac + Safari, let 'Command + A'(C, V, X) can work
  474. return true
  475. }
  476. return false;
  477. },
  478. isPortRange: function(o, event)
  479. {
  480. var keyPressed = event.keyCode ? event.keyCode : event.which;
  481. if (this.isFunctionButton(event))
  482. {
  483. return true;
  484. }
  485. if ((keyPressed > 47 && keyPressed < 58))
  486. { //0~9
  487. return true;
  488. }
  489. else if (keyPressed == 58 && o.value.length > 0)
  490. {
  491. for (var i = 0; i < o.value.length; i++)
  492. {
  493. var c = o.value.charAt(i);
  494. if (c == ':' || c == '>' || c == '<' || c == '=')
  495. return false;
  496. }
  497. return true;
  498. }
  499. else if (keyPressed == 44)
  500. { //"�? can be type in first charAt ::: 0220 Lock add"
  501. if (o.value.length == 0)
  502. return false;
  503. else
  504. return true;
  505. }
  506. else if (keyPressed == 60 || keyPressed == 62)
  507. { //">" and "<" only can be type in first charAt ::: 0220 Lock add
  508. if (o.value.length == 0)
  509. return true;
  510. else
  511. return false;
  512. }
  513. else if (this.checkKey(event))
  514. { //for Mac + Safari, let 'Command + A'(C, V, X) can work
  515. return true
  516. }
  517. return false;
  518. },
  519. isPortlist: function(o, event)
  520. {
  521. var keyPressed = event.keyCode ? event.keyCode : event.which;
  522. if (this.isFunctionButton(event))
  523. {
  524. return true;
  525. }
  526. if ((keyPressed > 47 && keyPressed < 58) || keyPressed == 32)
  527. {
  528. return true;
  529. }
  530. else if (this.checkKey(event))
  531. { //for Mac + Safari, let 'Command + A'(C, V, X) can work
  532. return true
  533. }
  534. else
  535. {
  536. return false;
  537. }
  538. },
  539. };
  540.  
  541. function wait(cond, i)
  542. {
  543. if (!wait._map)
  544. wait._map = new Map();
  545.  
  546. if (wait._map.has(cond))
  547. i = wait._map.get(cond) - 1
  548.  
  549. wait._map.set(cond, i);
  550.  
  551. if (!i)
  552. return false;
  553.  
  554. if (cond())
  555. {
  556. wait._map.delete(cond);
  557. return false;
  558. }
  559.  
  560. return setTimeout(function()
  561. {
  562. return wait(cond);
  563. }, 0)
  564. }
  565.  
  566. //TrafficAnalyzer_Statistic.asp
  567. wait(function()
  568. {
  569. if (!("draw_pie_chart" in window))
  570. return;
  571.  
  572. __get_client_info = window.get_client_info;
  573. __draw_pie_chart = window.draw_pie_chart;
  574. __get_client_used_apps_info = window.get_client_used_apps_info;
  575. eval(get_client_used_apps_info.toString().replace("parseInt((app_traffic/total_traffic)*100);", "(app_traffic/total_traffic)*100;"));
  576. window.get_client_info = function()
  577. {
  578. return _get_client_info.apply(__get_client_info, arguments);
  579. }
  580. window.get_client_used_apps_info = function()
  581. {
  582. return get_client_used_apps_info.apply(__get_client_used_apps_info, arguments);
  583. }
  584. window.draw_pie_chart = function()
  585. {
  586. return _draw_pie_chart.apply(__draw_pie_chart, arguments);
  587. }
  588. return true;
  589.  
  590. function _get_client_info(list_info, type)
  591. {
  592. var code = "";
  593. var match_flag = 0;
  594. var temp_array = new Array();
  595. if (type == "router")
  596. code = "<option value='all' selected>All Clients</option>";
  597. else
  598. code = "<option value='all' selected>All apps</option>";
  599. top5_client_array = [];
  600. top5_app_array = [];
  601. for (i = 0; i < list_info.length; i++)
  602. {
  603. if (type == "router")
  604. {
  605. for (j = 0; j < clientList.length; j++)
  606. {
  607. if (all_client_traffic[i][0] == clientList[j])
  608. {
  609. match_flag = 1;
  610. clientList[clientList[j]].totalTx = all_client_traffic[i][1];
  611. clientList[clientList[j]].totalRx = all_client_traffic[i][2];
  612. break;
  613. }
  614. }
  615. if (match_flag == 1)
  616. {
  617. var clientName = getClientCurrentName(all_client_traffic[i][0]);
  618. code += "<option value=" + all_client_traffic[i][0] + ">" + clientName + "</option>";
  619. if (i < 6)
  620. {
  621. top5_client_array[i] = all_client_traffic[i][0];
  622. top5_client_array[all_client_traffic[i][0]] = {
  623. "mac": all_client_traffic[i][0],
  624. "name": clientName,
  625. "tx": all_client_traffic[i][1],
  626. "rx": all_client_traffic[i][2]
  627. };
  628. }
  629. else
  630. {
  631. top5_client_array[top5_client_array[5]].tx += all_client_traffic[i][1]
  632. top5_client_array[top5_client_array[5]].rx += all_client_traffic[i][2]
  633. }
  634. }
  635. else
  636. {
  637. code += "<option value=" + all_client_traffic[i][0] + ">" + all_client_traffic[i][0] + "</option>";
  638. if (i < 6)
  639. {
  640. top5_client_array[i] = all_client_traffic[i][0];
  641. top5_client_array[all_client_traffic[i][0]] = {
  642. "mac": all_client_traffic[i][0],
  643. "name": all_client_traffic[i][0],
  644. "tx": all_client_traffic[i][1],
  645. "rx": all_client_traffic[i][2]
  646. };
  647. }
  648. else
  649. {
  650. top5_client_array[top5_client_array[5]].tx += all_client_traffic[i][1]
  651. top5_client_array[top5_client_array[5]].rx += all_client_traffic[i][2]
  652. }
  653. }
  654. match_flag = 0;
  655. total_clients_array[i] = all_client_traffic[i][0];
  656. total_clients_array[all_client_traffic[i][0]] = {
  657. "mac": all_client_traffic[i][0],
  658. "name": all_client_traffic[i][0],
  659. "tx": all_client_traffic[i][1],
  660. "rx": all_client_traffic[i][2]
  661. };
  662. }
  663. else
  664. {
  665. code += "<option value=" + all_app_traffic[i][0].replace(/\s/g, '_') + ">" + all_app_traffic[i][0] + "</option>";
  666. if (i < 6)
  667. {
  668. top5_app_array[i] = all_app_traffic[i][0];
  669. top5_app_array[all_app_traffic[i][0]] = {
  670. "name": all_app_traffic[i][0],
  671. "tx": all_app_traffic[i][1],
  672. "rx": all_app_traffic[i][2]
  673. };
  674. }
  675. else
  676. {
  677. top5_app_array[top5_app_array[5]].tx += all_app_traffic[i][1]
  678. top5_app_array[top5_app_array[5]].rx += all_app_traffic[i][2]
  679. }
  680. total_apps_array[i] = all_app_traffic[i][0];
  681. total_apps_array[all_app_traffic[i][0]] = {
  682. "mac": all_app_traffic[i][0],
  683. "name": all_app_traffic[i][0],
  684. "tx": all_app_traffic[i][1],
  685. "rx": all_app_traffic[i][2]
  686. };
  687. }
  688. if (i == 5)
  689. {
  690. if (top5_client_array[top5_client_array[5]])
  691. {
  692. top5_client_array["others"] = top5_client_array[top5_client_array[5]]
  693. top5_client_array["others"].mac = "others"
  694. top5_client_array["others"].name = "others"
  695. delete top5_client_array[top5_client_array[5]];
  696. top5_client_array[5] = "others";
  697. }
  698. if (top5_app_array[top5_app_array[5]])
  699. {
  700. top5_app_array["others"] = top5_app_array[top5_app_array[5]]
  701. top5_app_array["others"].mac = "others"
  702. top5_app_array["others"].name = "others"
  703. delete top5_app_array[top5_app_array[5]];
  704. top5_app_array[5] = "others";
  705. }
  706. }
  707. }
  708. if (total_apps_array.length)
  709. total_apps_array.others = top5_app_array.others;
  710. if (total_clients_array.length)
  711. total_clients_array.others = top5_client_array.others
  712.  
  713. window.total_clients_array = total_clients_array;
  714. window.top5_client_array = top5_client_array;
  715. window.top5_app_array = top5_app_array;
  716. window.total_apps_array = total_apps_array;
  717. if (type == "router")
  718. draw_pie_chart(list_info, top5_client_array, type); //list_info : all_client_traffic
  719. else
  720. draw_pie_chart(list_info, top5_app_array, type); //list_info : all_app_traffic
  721. document.getElementById('client_option').innerHTML = code;
  722. }
  723.  
  724.  
  725. function _draw_pie_chart(list_info, top5_info, type)
  726. {
  727. var percent = 0;
  728. var percent_others = 100;
  729. var client_traffic = 0;
  730. var client_traffic_others = 0;
  731. var total_client_traffic = 0;
  732. var client_traffic_display = new Array();
  733. var pieData = [];
  734. var code = "";
  735. for (i = 0; i < list_info.length; i++)
  736. {
  737. if (document.getElementById('traffic_option').value == "both")
  738. {
  739. total_client_traffic += list_info[i][1] + list_info[i][2];
  740. if (i > 4)
  741. client_traffic_others += list_info[i][1] + list_info[i][2]
  742. }
  743. else if (document.getElementById('traffic_option').value == "down")
  744. {
  745. total_client_traffic += list_info[i][2];
  746. if (i > 4)
  747. client_traffic_others += list_info[i][2]
  748. }
  749. else
  750. {
  751. total_client_traffic += list_info[i][1];
  752. if (i > 4)
  753. client_traffic_others += list_info[i][1]
  754. }
  755. }
  756. if (top5_info == "")
  757. {
  758. pieData = [
  759. {
  760. unit: "",
  761. label: "No Data",
  762. value: 0,
  763. color: "#B3645B",
  764. percent: 100,
  765. id: "0"
  766. }];
  767. code = '<div style="width:110px;word-wrap:break-word;padding-left:5px;background-color:#B3645B;margin-right:-10px;border-top-left-radius:10px;border-bottom-left-radius:10px;">No Client</div>';
  768. }
  769. else
  770. {
  771. for (i = 0; i < top5_info.length && i < 6; i++)
  772. {
  773. if (document.getElementById('traffic_option').value == "both")
  774. {
  775. if (i < 5)
  776. {
  777. client_traffic = list_info[i][1] + list_info[i][2];
  778. }
  779. /*
  780. else
  781. {
  782. client_traffic_others += list_info[i][1] + list_info[i][2];
  783. }
  784. */
  785. }
  786. else if (document.getElementById('traffic_option').value == "down")
  787. {
  788. if (i < 5)
  789. {
  790. client_traffic = list_info[i][2];
  791. }
  792. /*
  793. else
  794. {
  795. client_traffic_others += list_info[i][2];
  796. }
  797. */
  798. }
  799. else
  800. {
  801. if (i < 5)
  802. {
  803. client_traffic = list_info[i][1];
  804. }
  805. /*
  806. else
  807. {
  808. client_traffic_others += list_info[i][1];
  809. }
  810. */
  811. }
  812. if (i < 5)
  813. {
  814. percent = (client_traffic / total_client_traffic) * 100;
  815. percent_others -= percent;
  816. }
  817. else
  818. {
  819. percent = percent_others;
  820. }
  821. if (percent < 1)
  822. percent = 1;
  823. client_traffic_display = translate_traffic(client_traffic);
  824. if (i == 5)
  825. {
  826. client_traffic_display = translate_traffic(client_traffic_others);
  827. var temp = {
  828. label: "Others",
  829. percent: percent,
  830. value: client_traffic_display[0],
  831. unit: client_traffic_display[1],
  832. color: color[i],
  833. id: top5_info[i]
  834. };
  835. }
  836. else
  837. {
  838. var temp = {
  839. label: top5_info[top5_info[i]].name,
  840. percent: percent,
  841. value: client_traffic_display[0],
  842. unit: client_traffic_display[1],
  843. color: color[i],
  844. id: top5_info[i]
  845. };
  846. }
  847. pieData.push(temp);
  848. if (i == 0)
  849. code += '<div onclick=\'change_top5_clients(\"' + i + '\",\"' + type + '\");\' style="width:110px;word-wrap:break-word;padding-left:5px;background-color:' + color[i] + ';margin-right:-10px;border-top-left-radius:10px;line-height:30px;cursor:pointer">' + top5_info[top5_info[i]].name + '</div>';
  850. else if (i == 5)
  851. code += '<div onclick=\'change_top5_clients(\"' + i + '\",\"' + type + '\");\' style="width:110px;word-wrap:break-word;padding-left:5px;background-color:' + color[i] + ';margin-right:-10px;border-bottom-left-radius:10px;line-height:30px;cursor:pointer">Others</div>';
  852. else if (i != 6)
  853. code += '<div onclick=\'change_top5_clients(\"' + i + '\",\"' + type + '\");\' style="width:110px;word-wrap:break-word;padding-left:5px;background-color:' + color[i] + ';margin-right:-10px;line-height:30px;cursor:pointer">' + top5_info[top5_info[i]].name + '</div>';
  854. }
  855. }
  856. document.getElementById('top5_client_banner').innerHTML = code;
  857. if (pie_flag != undefined)
  858. pie_flag.destroy();
  859. pie_obj.Pie(pieData, pieOptions);
  860. }
  861.  
  862.  
  863. }, 10000)