filippodb
/
LocalCDN-Firefox-Chrome-Brave
mirror of https://codeberg.org/nobody/LocalCDN.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Updated statistics page (#74)

This commit is contained in:
nobody 2020-08-09 08:34:11 +02:00
parent 21bd3243c9
commit 987a206a15
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
3 changed files with 96 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
pages/statistics/statistics.css
View File

@ -4,15 +4,13 @@ body {
} }
table { table {
margin-left: auto;
margin-right: auto;
border-spacing: 0; border-spacing: 0;
padding-bottom: 30px; padding-top: 30px;
width: 100%;
} }
td:first-child { td:first-child {
text-align: left; text-align: left;
min-width: 300px;
} }
td { td {
@ -24,6 +22,43 @@ th:first-child {
text-align: left; text-align: left;
} }
#all-injections, #tbl-statistics-cdns, #tbl-statistics-frameworks { #statistics-overview, #tbl-statistics-cdns, #tbl-statistics-frameworks {
display: none; display: none;
} }
#statistics-overview {
text-align: left;
}
.container {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.overview {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.button {
-moz-user-select: none;
background-color: #f5f5f5;
border-radius: 2px;
border: 1px solid #b2b2b2;
color: #5f5f5f;
cursor: pointer;
float: right;
font-size: 12px;
outline: 0;
padding: 5px 22px;
text-decoration: none;
user-select: none;
text-align: center;
background: none;
}
.button:hover {
background-color: #e6e6e6;
}

72
pages/statistics/statistics.html
View File

@ -12,43 +12,41 @@
<script src="../../modules/internal/helpers.js"></script> <script src="../../modules/internal/helpers.js"></script>
<script src="../../core/constants.js"></script> <script src="../../core/constants.js"></script>
<script src="statistics.js"></script> <script src="statistics.js"></script>
<h1>Statistic</h1> <h1 data-i18n-content="headerStatistics">Statistics</h1>
<div id="btn-statistics" class="content"> <div class="container">
<button id="btn-day" type="button" data-option="day">1 Day</button> <div id="btn-statistics" class="content">
<button id="btn-week" type="button" data-option="week">1 Week</button> <select id="date-range" data-option="dateRange">
<button id="btn-month" type="button" data-option="month">1 Month</button> <option value="day" data-i18n-content="labelToday" selected="selected">Today</option>
<button id="btn-year" type="button" data-option="year">1 Year</button> <option value="week" data-i18n-content="labelPastWeek">Past week</option>
<button id="btn-delete" type="button" data-option="delete">Delete</button> <option value="month" data-i18n-content="labelPastMonth">Past month</option>
<p id="p-injections"><span id="spn-"></span><span></span></p> <option value="year" data-i18n-content="labelPastYear">Past year</option>
</div> </select>
<div id="tbl-statistics-overview" class="content"> <div id="btn-delete" class="button" value="delete" data-i18n-content="labelDelete">Delete</div>
<table aria-describedby="Overview of average and total injections and contacted CDNs"> </div>
<thead> <div id="statistics-overview" class="content">
<tr><th scope="col">Description</th><th scope="col">Quantity</th></tr> <div class="overview"><span data-i18n-content="labelAvg">Average (injections/day)</span><span id="avg-quantity" data-i18n-content="labelQuantityAvg">-</span></div>
</thead> <div class="overview"><span data-i18n-content="labelInjectedFrameworks">Injected frameworks</span><span id="quantity-injected-frameworks" data-i18n-content="labelQuantityInjectedFrameworks">-</span></div>
<tbody id="tbody-overview"> </div>
</tbody> <div id="tbl-statistics-cdns" class="content">
</table> <table aria-describedby="Detailed table of contacted CDNs">
</div> <thead>
<div id="tbl-statistics-cdns" class="content"> <tr><th scope="col">CDNs</th><th scope="col" data-i18n-content="labelQuantity">Quantity</th></tr>
<table aria-describedby="Detailed table of contacted CDNs"> </thead>
<thead> <tbody id="tbody-cdns">
<tr><th scope="col">CDN</th><th scope="col">Quantity</th></tr> <tr><td>-</td><td>-</td></tr>
</thead> </tbody>
<tbody id="tbody-cdns"> </table>
<tr><td>no data</td><td>-</td></tr> </div>
</tbody> <div id="tbl-statistics-frameworks" class="content">
</table> <table aria-describedby="Detailed table of injected frameworks">
</div> <thead>
<div id="tbl-statistics-frameworks" class="content"> <tr><th scope="col">Frameworks</th><th scope="col" data-i18n-content="labelQuantity">Quantity</th></tr>
<table aria-describedby="Detailed table of injected frameworks"> </thead>
<thead> <tbody id="tbody-frameworks">
<tr><th scope="col">Framework</th><th scope="col">Quantity</th></tr> <tr><td>-</td><td>-</td></tr>
</thead> </tbody>
<tbody id="tbody-frameworks"> </table>
<tr><td>no data</td><td>-</td></tr> </div>
</tbody>
</table>
</div> </div>
</body> </body>
</html> </html>

37
pages/statistics/statistics.js
View File

@ -23,6 +23,13 @@ var statistics = {};
* Private Methods * Private Methods
*/ */
statistics._onDocumentLoaded = function () { statistics._onDocumentLoaded = function () {
helpers.insertI18nContentIntoDocument(document);
helpers.insertI18nTitlesIntoDocument(document);
// Default view is 'today'
statistics._dateRange = [new Date().toISOString().slice(0, 10)];
document.getElementById('date-range').value = 'day';
statistics._registerListener(); statistics._registerListener();
statistics._getStatistics().then(statistics._renderContents); statistics._getStatistics().then(statistics._renderContents);
}; };
@ -38,7 +45,7 @@ statistics._renderContents = function () {
statistics._showData(true); statistics._showData(true);
statistics._clearTables(); statistics._clearTables();
statistics._generateTable(statistics._dataOverview, 'overview'); statistics._determineInjections();
statistics._generateTable(statistics._dataSortedCDNs, 'cdns'); statistics._generateTable(statistics._dataSortedCDNs, 'cdns');
statistics._generateTable(statistics._dataSortedFrameworks, 'frameworks'); statistics._generateTable(statistics._dataSortedFrameworks, 'frameworks');
}; };
@ -127,11 +134,10 @@ statistics._determineInjections = function () {
} }
}); });
avg = sum / days > 0 ? sum / days : 0; avg = sum / days > 0 ? sum / days : 0;
avg = Math.round((avg + Number.EPSILON) * 100) / 100;
// Preparation for generateTable() document.getElementById('avg-quantity').textContent = isNaN(avg) ? '-' : avg;
let avgInjections = ['Average (injections/days)', avg]; document.getElementById('quantity-injected-frameworks').textContent = isNaN(sum) ? '-' : sum;
let injectedFrameworks = ['Injected frameworks', sum];
statistics._dataOverview.push(avgInjections, injectedFrameworks);
}; };
statistics._getStatistics = function () { statistics._getStatistics = function () {
@ -172,12 +178,12 @@ statistics._displayNameOfFramework = function (str, type) {
return str; return str;
}; };
statistics._handlerButton = function ({ target }) { statistics._handlerDateRange = function ({ target }) {
let btnType = target.getAttribute('data-option'); let type = target.value;
if (btnType === 'day' || btnType === 'week' || btnType === 'month' || btnType === 'year') { if (type === 'day' || type === 'week' || type === 'month' || type === 'year') {
statistics._dateUnit = btnType; statistics._dateUnit = type;
statistics._getStatistics().then(statistics._setDateRange); statistics._getStatistics().then(statistics._setDateRange);
} else if (btnType === 'delete') { } else if (type === 'delete') {
statistics._deleteStatistic(); statistics._deleteStatistic();
statistics._showData(false); statistics._showData(false);
} }
@ -194,18 +200,17 @@ statistics._deleteStatistic = function () {
statistics._showData = function (type) { statistics._showData = function (type) {
let attr = type === true ? 'block' : 'none'; let attr = type === true ? 'block' : 'none';
document.getElementById('tbl-statistics-overview').style.display = attr; document.getElementById('statistics-overview').style.display = attr;
document.getElementById('tbl-statistics-cdns').style.display = attr; document.getElementById('tbl-statistics-cdns').style.display = attr;
document.getElementById('tbl-statistics-frameworks').style.display = attr; document.getElementById('tbl-statistics-frameworks').style.display = attr;
document.getElementById('btn-delete').disabled = !type; document.getElementById('btn-delete').disabled = !type;
}; };
statistics._registerListener = function () { statistics._registerListener = function () {
document.getElementById('btn-day').addEventListener('click', statistics._handlerButton); document.getElementById('date-range').addEventListener('change', statistics._handlerDateRange);
document.getElementById('btn-week').addEventListener('click', statistics._handlerButton); document.getElementById('btn-delete').addEventListener('click', function () {
document.getElementById('btn-month').addEventListener('click', statistics._handlerButton); statistics._handlerDateRange({ target: { value: 'delete' } });
document.getElementById('btn-year').addEventListener('click', statistics._handlerButton); });
document.getElementById('btn-delete').addEventListener('click', statistics._handlerButton);
}; };
/** /**