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

Move protocols to bottom of the stats page

This commit is contained in:
MICHAEL JACKSON 2017-08-22 10:14:21 -07:00
parent c1c2d1445f
commit 0137a9df92
1 changed files with 31 additions and 30 deletions
client
Stats.js

61
client/Stats.js
View File

@ -39,20 +39,6 @@ class Stats extends React.Component {
const since = parseDate(totals.since)
const until = parseDate(totals.until)
// Protocols
const protocolRows = Object.keys(totals.requests.protocol).sort((a, b) => {
return totals.requests.protocol[b] - totals.requests.protocol[a]
}).map(protocol => {
const requests = totals.requests.protocol[protocol]
return (
<tr key={protocol}>
<td>{protocol}</td>
<td>{formatNumber(requests)} ({formatPercent(requests / sumValues(totals.requests.protocol))}%)</td>
</tr>
)
})
// Packages
const packageRows = []
@ -129,26 +115,24 @@ class Stats extends React.Component {
}
})
// Protocols
const protocolRows = Object.keys(totals.requests.protocol).sort((a, b) => {
return totals.requests.protocol[b] - totals.requests.protocol[a]
}).map(protocol => {
const requests = totals.requests.protocol[protocol]
return (
<tr key={protocol}>
<td>{protocol}</td>
<td>{formatNumber(requests)} ({formatPercent(requests / sumValues(totals.requests.protocol))}%)</td>
</tr>
)
})
return (
<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>
@ -207,6 +191,23 @@ class Stats extends React.Component {
{regionRows}
</tbody>
</table>
<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>
</div>
)
}