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 {
margin-left: auto;
margin-right: auto;
border-spacing: 0;
padding-bottom: 30px;
padding-top: 30px;
width: 100%;
}
td:first-child {
text-align: left;
min-width: 300px;
}
td {
@ -24,6 +22,43 @@ th:first-child {
text-align: left;
}
#all-injections, #tbl-statistics-cdns, #tbl-statistics-frameworks {
#statistics-overview, #tbl-statistics-cdns, #tbl-statistics-frameworks {
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;
}

36
pages/statistics/statistics.html
View File

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

37
pages/statistics/statistics.js
View File

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