186526
/
unpkg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Filter blacklisted packages from stats 

Also added better descriptions to stats page.
This commit is contained in:
MICHAEL JACKSON 2017-08-22 09:12:57 -07:00
parent 2a0d32f214
commit 47d42addd2
2 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
client/Stats.js
View File

@ -23,7 +23,7 @@ class Stats extends React.Component {
}
state = {
minPackageRequests: 100000,
minPackageRequests: 1000000,
minCountryRequests: 1000000
}
@ -133,8 +133,26 @@ class Stats extends React.Component {
<div className="wrapper">
<p>From <strong>{formatDate(since, 'MMM D')}</strong> to <strong>{formatDate(until, 'MMM D')}</strong> unpkg served <strong>{formatNumber(totals.requests.all)}</strong> requests and a total of <strong>{formatBytes(totals.bandwidth.all)}</strong> of data to <strong>{formatNumber(totals.uniques.all)}</strong> unique visitors, <strong>{formatPercent(totals.requests.cached / totals.requests.all, 0)}%</strong> of which were served from the cache.</p>
<h3>Protocols</h3>
<p>The table below breaks down requests to unpkg from <strong>{formatDate(since, 'MMM D')}</strong> to <strong>{formatDate(until, 'MMM D')}</strong> by HTTP protocol.</p>
<table cellSpacing="0" cellPadding="0" style={{ width: '100%' }}>
<thead>
<tr>
<th>Protocol</th>
<th>Requests (% of total)</th>
</tr>
</thead>
<tbody>
{protocolRows}
</tbody>
</table>
<h3>Packages</h3>
<p>The table below shows the most popular packages served by unpkg from <strong>{formatDate(since, 'MMM D')}</strong> to <strong>{formatDate(until, 'MMM D')}</strong>. Only the top {Object.keys(totals.requests.package).length} packages are shown.</p>
<p className="table-filter">Include only packages that received at least <select
value={this.state.minPackageRequests}
onChange={event => this.setState({ minPackageRequests: parseInt(event.target.value, 10) })}
@ -144,6 +162,7 @@ class Stats extends React.Component {
<option value="10000">10,000</option>
<option value="100000">100,000</option>
<option value="1000000">1,000,000</option>
<option value="1000000">10,000,000</option>
</select> requests.
</p>
@ -160,22 +179,10 @@ class Stats extends React.Component {
</tbody>
</table>
<h3>Protocols</h3>
<table cellSpacing="0" cellPadding="0" style={{ width: '100%' }}>
<thead>
<tr>
<th>Protocol</th>
<th>Requests (% of total)</th>
</tr>
</thead>
<tbody>
{protocolRows}
</tbody>
</table>
<h3>Regions</h3>
<p>The table below breaks down requests to unpkg from <strong>{formatDate(since, 'MMM D')}</strong> to <strong>{formatDate(until, 'MMM D')}</strong> by geographic region.</p>
<p className="table-filter">Include only countries that made at least <select
value={this.state.minCountryRequests}
onChange={event => this.setState({ minCountryRequests: parseInt(event.target.value, 10) })}

14
server/StatsServer.js
View File

@ -1,6 +1,16 @@
const cf = require('./CloudflareAPI')
const db = require('./RedisClient')
const PackageBlacklist = require('./PackageBlacklist').blacklist
function prunePackages(packagesMap) {
PackageBlacklist.forEach(function (packageName) {
delete packagesMap[packageName]
})
return packagesMap
}
function createDayKey(date) {
return `${date.getUTCFullYear()}-${date.getUTCMonth()}-${date.getUTCDate()}`
}
@ -35,11 +45,11 @@ function getScoresMap(key, n = 100) {
}
function getPackageRequests(date, n = 100) {
return getScoresMap(`stats-packageRequests-${createDayKey(date)}`, n)
return getScoresMap(`stats-packageRequests-${createDayKey(date)}`, n).then(prunePackages)
}
function getPackageBandwidth(date, n = 100) {
return getScoresMap(`stats-packageBytes-${createDayKey(date)}`, n)
return getScoresMap(`stats-packageBytes-${createDayKey(date)}`, n).then(prunePackages)
}
function getProtocolRequests(date) {