Ranking
This commit is contained in:
@@ -31,11 +31,14 @@ function lookup_domain_js(fname_a, fname_b, id1, id2, id3) {
|
||||
let bid = apps[i][0];
|
||||
let item = template.cloneNode(true);
|
||||
item.href = '/app/'+bid+'/';
|
||||
item.querySelector('img').src = '/app/'+bid+'/icon.png';
|
||||
let img = item.querySelector('img');
|
||||
img.classList = 'lozad';
|
||||
img.setAttribute('data-src', '/app/'+bid+'/icon.png');
|
||||
item.querySelector('.name').innerHTML = apps[i][1];
|
||||
item.querySelector('.detail').innerHTML = bid;
|
||||
dom_app_list.appendChild(item);
|
||||
}
|
||||
const observer = lozad(); observer.observe();
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -20,16 +20,6 @@ function lookup_rank_js(bundle_id) {
|
||||
meta[1].innerHTML = fmt(best[i]);
|
||||
meta[2].innerHTML = fmt(worst[i]);
|
||||
}
|
||||
// formatting
|
||||
function dot1(x) { return Math.round(x * 10) / 10; }
|
||||
function as_percent(x) { return dot1(x * 100) + '%'; }
|
||||
function as_pm(x) { return dot1(x) + '/min'; }
|
||||
function HHmmss(seconds) {
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = Math.round(seconds % 60);
|
||||
return (h<10?'0'+h:h)+':'+(m<10?'0'+m:m)+':'+(s<10?'0'+s:s);
|
||||
}
|
||||
// order is important!
|
||||
update(0, 'sum_rec');
|
||||
update(1, 'avg_time', HHmmss);
|
||||
|
||||
9
out/static/lozad.js
Normal file
9
out/static/lozad.js
Normal file
@@ -0,0 +1,9 @@
|
||||
/*! lozad.js - v1.9.0 - 2019-02-09
|
||||
* https://github.com/ApoorvSaxena/lozad.js
|
||||
* Copyright (c) 2019 Apoorv Saxena; Licensed MIT */
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.lozad=e()}(this,function(){"use strict";var g=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},n="undefined"!=typeof document&&document.documentMode,l={rootMargin:"0px",threshold:0,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=document.createElement("img");n&&t.getAttribute("data-iesrc")&&(e.src=t.getAttribute("data-iesrc")),t.getAttribute("data-alt")&&(e.alt=t.getAttribute("data-alt")),t.appendChild(e)}if("video"===t.nodeName.toLowerCase()&&!t.getAttribute("data-src")&&t.children){for(var r=t.children,o=void 0,a=0;a<=r.length-1;a++)(o=r[a].getAttribute("data-src"))&&(r[a].src=o);t.load()}t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&t.setAttribute("srcset",t.getAttribute("data-srcset")),t.getAttribute("data-background-image")&&(t.style.backgroundImage="url('"+t.getAttribute("data-background-image")+"')"),t.getAttribute("data-toggle-class")&&t.classList.toggle(t.getAttribute("data-toggle-class"))},loaded:function(){}};
|
||||
/**
|
||||
* Detect IE browser
|
||||
* @const {boolean}
|
||||
* @private
|
||||
*/function f(t){t.setAttribute("data-loaded",!0)}var b=function(t){return"true"===t.getAttribute("data-loaded")};return function(){var r,o,a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".lozad",t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},e=g({},l,t),n=e.root,i=e.rootMargin,d=e.threshold,c=e.load,u=e.loaded,s=void 0;return window.IntersectionObserver&&(s=new IntersectionObserver((r=c,o=u,function(t,e){t.forEach(function(t){(0<t.intersectionRatio||t.isIntersecting)&&(e.unobserve(t.target),b(t.target)||(r(t.target),f(t.target),o(t.target)))})}),{root:n,rootMargin:i,threshold:d})),{observe:function(){for(var t=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:document;return t instanceof Element?[t]:t instanceof NodeList?t:e.querySelectorAll(t)}(a,n),e=0;e<t.length;e++)b(t[e])||(s?s.observe(t[e]):(c(t[e]),f(t[e]),u(t[e])))},triggerLoad:function(t){b(t)||(c(t),f(t),u(t))},observer:s}}});
|
||||
59
out/static/ranking.js
Normal file
59
out/static/ranking.js
Normal file
@@ -0,0 +1,59 @@
|
||||
function th(cur_col, cur_asc, names) {
|
||||
var txt = '<tr>';
|
||||
for (var i = 0; i < names.length; i++) {
|
||||
var v = names[i];
|
||||
txt += '\n<th>' + v;
|
||||
if (v) {
|
||||
let cls = (i == cur_col) ? ' class="active"' : '';
|
||||
txt += ' <span><a' + (cur_asc == -1 ? cls : '') + ' onClick="sort_by('+i+', -1)">';
|
||||
txt += '<svg viewBox="0 0 16 14" width="12"><g><polygon points="8,14 0,0 16,0"/></g></svg>';
|
||||
txt += '</a><a' + (cur_asc == 1 ? cls : '') + ' onClick="sort_by('+i+', 1)">';
|
||||
txt += '<svg viewBox="0 0 16 14" width="12"><g><polygon points="8,0 0,14 16,14"/></g></svg>';
|
||||
txt += '</a></span>';
|
||||
}
|
||||
txt += '</th>';
|
||||
}
|
||||
return txt + '</tr>';
|
||||
}
|
||||
function td(cols, id) {
|
||||
var txt = '\n<tr id="' + id + '">';
|
||||
for (var i = 0; i < cols.length; i++) {
|
||||
txt += '<td>' + cols[i] + '</td>';
|
||||
}
|
||||
return txt + '</tr>';
|
||||
}
|
||||
function prep(x, i) {
|
||||
return [
|
||||
i+1 + '. <img class="lozad" data-src="/app/'+x[0]+'/icon.png"/>', '<a href="/app/'+x[0]+'/">' + x[1] + '</a>',
|
||||
x[2], HHmmss(x[3]), HHmmss(x[4]), as_pm(x[5]), as_pm(x[6]), x[7], x[8],
|
||||
as_percent(x[9]), x[10], dot1(x[11]), new Date(x[12] * 1000).toISOString().slice(0, 16).replace('T',' ')
|
||||
];
|
||||
}
|
||||
function update(col, asc) {
|
||||
let table = document.getElementById('rank-list');
|
||||
let len = _data.length;
|
||||
let txt = '';
|
||||
for (var i = 0; i < len; i++) {
|
||||
txt += td(prep(_data[i], i), _data[i][0])
|
||||
}
|
||||
table.innerHTML = th(col, asc, [
|
||||
'', 'Application', 'Number of recordings', 'Average recording time',
|
||||
'Cumulative recording time', 'Average requests per minute',
|
||||
'Total requests per minute', 'Number of domains', 'Number of subdomains',
|
||||
'Tracker percentage', 'Total number of requests', 'Average number of requests',
|
||||
'Last Update'
|
||||
]) + txt;
|
||||
const observer = lozad(); observer.observe();
|
||||
}
|
||||
function sort_by(col, asc) {
|
||||
let i = col;
|
||||
let o = asc;
|
||||
_data.sort(function(a, b){ return a[i] < b[i] ? -o : a[i] > b[i] ? o : 0; });
|
||||
update(col, asc);
|
||||
}
|
||||
function rank_js(fname) {
|
||||
loadJSON(fname, function(response) {
|
||||
_data = JSON.parse(response);
|
||||
update(12,-1);
|
||||
});
|
||||
}
|
||||
@@ -1,25 +1,35 @@
|
||||
(function(){// main entry
|
||||
updateViewport();
|
||||
addEventListener('touchstart', function() {}); // :hover
|
||||
updateViewport();
|
||||
addEventListener('touchstart', function() {}); // :hover
|
||||
})();
|
||||
function updateViewport() {// show at least 2 columns on mobile devices
|
||||
var viewport = document.head.querySelector("meta[name=viewport]");
|
||||
if (viewport && screen.width < 372) {
|
||||
document.head.removeChild(viewport);
|
||||
var x = document.createElement("meta");
|
||||
x.setAttribute("name", "viewport");
|
||||
x.setAttribute("content", "width=372");
|
||||
document.head.appendChild(x);
|
||||
}
|
||||
var viewport = document.head.querySelector('meta[name=viewport]');
|
||||
if (viewport && screen.width < 372) {
|
||||
document.head.removeChild(viewport);
|
||||
var x = document.createElement('meta');
|
||||
x.setAttribute('name', 'viewport');
|
||||
x.setAttribute('content', 'width=372');
|
||||
document.head.appendChild(x);
|
||||
}
|
||||
}
|
||||
function loadJSON(url, callback, async=true) {
|
||||
var xobj = new XMLHttpRequest();
|
||||
xobj.overrideMimeType("application/json");
|
||||
xobj.open('GET', url, async);
|
||||
xobj.onreadystatechange = function () {
|
||||
if (xobj.readyState == 4 && xobj.status == "200") {
|
||||
callback(xobj.responseText);
|
||||
}
|
||||
};
|
||||
xobj.send(null);
|
||||
var xobj = new XMLHttpRequest();
|
||||
xobj.overrideMimeType('application/json');
|
||||
xobj.open('GET', url, async);
|
||||
xobj.onreadystatechange = function () {
|
||||
if (xobj.readyState == 4 && xobj.status == '200') {
|
||||
callback(xobj.responseText);
|
||||
}
|
||||
};
|
||||
xobj.send(null);
|
||||
}
|
||||
// formatting
|
||||
function dot1(x) { return Math.round(x * 10) / 10; }
|
||||
function as_percent(x) { return dot1(x * 100) + '%'; }
|
||||
function as_pm(x) { return dot1(x) + '/min'; }
|
||||
function HHmmss(seconds) {
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = Math.round(seconds % 60);
|
||||
return (h<10?'0'+h:h)+':'+(m<10?'0'+m:m)+':'+(s<10?'0'+s:s);
|
||||
}
|
||||
@@ -100,7 +100,7 @@ footer .links {
|
||||
margin: .5em auto 1em;
|
||||
display: block;
|
||||
}
|
||||
#app-toc img, img.app-icon {
|
||||
#app-toc img, #rank-list img, img.app-icon {
|
||||
border-radius: 21.5%;
|
||||
border: .7px solid #ccc;
|
||||
}
|
||||
@@ -150,6 +150,11 @@ p.subtitle { margin-top: .2em; }
|
||||
.border { border: 1pt solid #CCC; }
|
||||
.large { font-size: 1.2em; }
|
||||
.stick-top { top: 0; position: sticky; padding: .8em 0 .5em; background: #FFF; }
|
||||
.xscroll { overflow-x: scroll; max-width: 100%; }
|
||||
.yscroll { overflow-y: scroll; max-height: 80vh; }
|
||||
table.alternate td, table.alternate th { padding: .5em; }
|
||||
table.alternate tr:nth-child(even) { background: #DDD; }
|
||||
table.alternate tr:nth-child(odd) { background: #F9F9F9; }
|
||||
|
||||
/*#meta { margin-bottom: 2em; }*/
|
||||
#meta .icons { margin-bottom: 2em; }
|
||||
@@ -243,13 +248,27 @@ p.trckr { font-size: .9em; margin-left: .5em; }
|
||||
.cs1{stroke:#CA0D3A}
|
||||
|
||||
/* Help needed */
|
||||
#help-links td { padding: .5em; }
|
||||
#help-links tr:nth-child(even) { background: #DDD; }
|
||||
#help-links tr:nth-child(odd) { background: #F9F9F9; }
|
||||
#help-links span.snd { display: table; }
|
||||
#help-links .notyet { color: #D11; }
|
||||
#help-links .done { color: #52C840; }
|
||||
|
||||
/* rank-list */
|
||||
#rank-list th span { display: block; margin-top: 4px; }
|
||||
#rank-list th { vertical-align: bottom; }
|
||||
#rank-list th a { cursor:pointer; border: unset; padding: 0 5px; margin: 0 2px; }
|
||||
#rank-list th a:hover { fill: #F00; }
|
||||
#rank-list th a.active { fill: #CA0D3A; }
|
||||
#rank-list th:not(:first-child) { min-width: 12ex; }
|
||||
|
||||
#rank-list img { width: 25px; height: 25px; vertical-align: bottom; }
|
||||
#rank-list td { text-align: center; min-width: max-content; }
|
||||
#rank-list td:nth-child(1) {
|
||||
position: sticky; left: 0;
|
||||
background: inherit;
|
||||
text-align: right;
|
||||
}
|
||||
#rank-list td:nth-child(2) { text-align: left; }
|
||||
|
||||
/* responsive */
|
||||
@media(max-width: 900px) {
|
||||
#stats { grid-template-columns: repeat(2, max-content); }
|
||||
|
||||
Reference in New Issue
Block a user