Prettify everything
This commit is contained in:
MICHAEL JACKSON
131
client/Stats.js
131
client/Stats.js
@ -1,51 +1,55 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import formatBytes from "pretty-bytes"
|
||||
import formatDate from "date-fns/format"
|
||||
import parseDate from "date-fns/parse"
|
||||
import formatNumber from "./utils/formatNumber"
|
||||
import formatPercent from "./utils/formatPercent"
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import formatBytes from "pretty-bytes";
|
||||
import formatDate from "date-fns/format";
|
||||
import parseDate from "date-fns/parse";
|
||||
import formatNumber from "./utils/formatNumber";
|
||||
import formatPercent from "./utils/formatPercent";
|
||||
|
||||
import { continents, countries } from "countries-list"
|
||||
import { continents, countries } from "countries-list";
|
||||
|
||||
const getCountriesByContinent = continent =>
|
||||
Object.keys(countries).filter(country => countries[country].continent === continent)
|
||||
Object.keys(countries).filter(
|
||||
country => countries[country].continent === continent
|
||||
);
|
||||
|
||||
const sumKeyValues = (hash, keys) => keys.reduce((n, key) => n + (hash[key] || 0), 0)
|
||||
const sumKeyValues = (hash, keys) =>
|
||||
keys.reduce((n, key) => n + (hash[key] || 0), 0);
|
||||
|
||||
const sumValues = hash => Object.keys(hash).reduce((memo, key) => memo + hash[key], 0)
|
||||
const sumValues = hash =>
|
||||
Object.keys(hash).reduce((memo, key) => memo + hash[key], 0);
|
||||
|
||||
class Stats extends React.Component {
|
||||
static propTypes = {
|
||||
data: PropTypes.object
|
||||
}
|
||||
};
|
||||
|
||||
state = {
|
||||
minPackageRequests: 1000000,
|
||||
minCountryRequests: 1000000
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { data } = this.props
|
||||
const { data } = this.props;
|
||||
|
||||
if (data == null) return null
|
||||
if (data == null) return null;
|
||||
|
||||
const totals = data.totals
|
||||
const totals = data.totals;
|
||||
|
||||
// Summary data
|
||||
const since = parseDate(totals.since)
|
||||
const until = parseDate(totals.until)
|
||||
const since = parseDate(totals.since);
|
||||
const until = parseDate(totals.until);
|
||||
|
||||
// Packages
|
||||
const packageRows = []
|
||||
const packageRows = [];
|
||||
|
||||
Object.keys(totals.requests.package)
|
||||
.sort((a, b) => {
|
||||
return totals.requests.package[b] - totals.requests.package[a]
|
||||
return totals.requests.package[b] - totals.requests.package[a];
|
||||
})
|
||||
.forEach(packageName => {
|
||||
const requests = totals.requests.package[packageName]
|
||||
const bandwidth = totals.bandwidth.package[packageName]
|
||||
const requests = totals.requests.package[packageName];
|
||||
const bandwidth = totals.bandwidth.package[packageName];
|
||||
|
||||
if (requests >= this.state.minPackageRequests) {
|
||||
packageRows.push(
|
||||
@ -59,44 +63,51 @@ class Stats extends React.Component {
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
{formatNumber(requests)} ({formatPercent(requests / totals.requests.all)}%)
|
||||
{formatNumber(requests)} ({formatPercent(
|
||||
requests / totals.requests.all
|
||||
)}%)
|
||||
</td>
|
||||
{bandwidth ? (
|
||||
<td>
|
||||
{formatBytes(bandwidth)} ({formatPercent(bandwidth / totals.bandwidth.all)}%)
|
||||
{formatBytes(bandwidth)} ({formatPercent(
|
||||
bandwidth / totals.bandwidth.all
|
||||
)}%)
|
||||
</td>
|
||||
) : (
|
||||
<td>-</td>
|
||||
)}
|
||||
</tr>
|
||||
)
|
||||
);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// Regions
|
||||
const regionRows = []
|
||||
const regionRows = [];
|
||||
|
||||
const continentsData = Object.keys(continents).reduce((memo, continent) => {
|
||||
const localCountries = getCountriesByContinent(continent)
|
||||
const localCountries = getCountriesByContinent(continent);
|
||||
|
||||
memo[continent] = {
|
||||
countries: localCountries,
|
||||
requests: sumKeyValues(totals.requests.country, localCountries),
|
||||
bandwidth: sumKeyValues(totals.bandwidth.country, localCountries)
|
||||
}
|
||||
};
|
||||
|
||||
return memo
|
||||
}, {})
|
||||
return memo;
|
||||
}, {});
|
||||
|
||||
const topContinents = Object.keys(continentsData).sort((a, b) => {
|
||||
return continentsData[b].requests - continentsData[a].requests
|
||||
})
|
||||
return continentsData[b].requests - continentsData[a].requests;
|
||||
});
|
||||
|
||||
topContinents.forEach(continent => {
|
||||
const continentName = continents[continent]
|
||||
const continentData = continentsData[continent]
|
||||
const continentName = continents[continent];
|
||||
const continentData = continentsData[continent];
|
||||
|
||||
if (continentData.requests > this.state.minCountryRequests && continentData.bandwidth !== 0) {
|
||||
if (
|
||||
continentData.requests > this.state.minCountryRequests &&
|
||||
continentData.bandwidth !== 0
|
||||
) {
|
||||
regionRows.push(
|
||||
<tr key={continent} className="continent-row">
|
||||
<td>{continentName}</td>
|
||||
@ -111,15 +122,15 @@ class Stats extends React.Component {
|
||||
)}%)
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
);
|
||||
|
||||
const topCountries = continentData.countries.sort((a, b) => {
|
||||
return totals.requests.country[b] - totals.requests.country[a]
|
||||
})
|
||||
return totals.requests.country[b] - totals.requests.country[a];
|
||||
});
|
||||
|
||||
topCountries.forEach(country => {
|
||||
const countryRequests = totals.requests.country[country]
|
||||
const countryBandwidth = totals.bandwidth.country[country]
|
||||
const countryRequests = totals.requests.country[country];
|
||||
const countryBandwidth = totals.bandwidth.country[country];
|
||||
|
||||
if (countryRequests > this.state.minCountryRequests) {
|
||||
regionRows.push(
|
||||
@ -136,19 +147,19 @@ class Stats extends React.Component {
|
||||
)}%)
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// Protocols
|
||||
const protocolRows = Object.keys(totals.requests.protocol)
|
||||
.sort((a, b) => {
|
||||
return totals.requests.protocol[b] - totals.requests.protocol[a]
|
||||
return totals.requests.protocol[b] - totals.requests.protocol[a];
|
||||
})
|
||||
.map(protocol => {
|
||||
const requests = totals.requests.protocol[protocol]
|
||||
const requests = totals.requests.protocol[protocol];
|
||||
|
||||
return (
|
||||
<tr key={protocol}>
|
||||
@ -159,19 +170,22 @@ class Stats extends React.Component {
|
||||
)}%)
|
||||
</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.
|
||||
<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>Packages</h3>
|
||||
@ -241,7 +255,12 @@ class Stats extends React.Component {
|
||||
requests.
|
||||
</p>
|
||||
|
||||
<table cellSpacing="0" cellPadding="0" style={{ width: "100%" }} className="regions-table">
|
||||
<table
|
||||
cellSpacing="0"
|
||||
cellPadding="0"
|
||||
style={{ width: "100%" }}
|
||||
className="regions-table"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Region</th>
|
||||
@ -270,8 +289,8 @@ class Stats extends React.Component {
|
||||
<tbody>{protocolRows}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Stats
|
||||
export default Stats;
|
||||
|
||||
Reference in New Issue
Block a user