Stats: Improve summaries when range is selected

Fixes #446
This commit is contained in:
rubenwardy 2023-06-15 08:45:28 +01:00
parent 81651aee97
commit 2596253535
5 changed files with 91 additions and 50 deletions

@ -1,3 +1,6 @@
// @author rubenwardy
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
"use strict"; "use strict";
@ -58,9 +61,45 @@ const chartColorsBg = chartColors.map(color => `rgba(${hexToRgb(color.slice(1))}
const SECONDS_IN_A_DAY = 1000 * 3600 * 24; const SECONDS_IN_A_DAY = 1000 * 3600 * 24;
function format_message(id, values) {
let format = document.getElementById(id).textContent;
values.forEach((value, i) => {
format = format.replace("$" + (i + 1), value);
})
return format;
}
function add_summary_card(title, icon, value, extra) {
const ele = document.createElement("div");
ele.innerHTML = `
<div class="col-md-4">
<div class="card h-100">
<div class="card-body align-items-center text-center">
<div class="mt-0 mb-3">
<i class="fas fa-${icon} mr-1"></i>
<span class="summary-title"></span>
</div>
<div class="my-0 h4">
<span class="summary-value"></span>
<small class="text-muted ml-2 summary-extra"></small>
</div>
</div>
</div>
</div>`;
ele.querySelector(".summary-title").textContent = title;
ele.querySelector(".summary-value").textContent = value;
ele.querySelector(".summary-extra").textContent = extra;
document.getElementById("stats-summaries").appendChild(ele.children[0]);
}
async function load_data() { async function load_data() {
const root = document.getElementById("stats-root"); const root = document.getElementById("stats-root");
const source = root.getAttribute("data-source"); const source = root.getAttribute("data-source");
const is_range = root.getAttribute("data-is-range") == "true";
const response = await fetch(source); const response = await fetch(source);
const json = await response.json(); const json = await response.json();
@ -79,16 +118,22 @@ async function load_data() {
return date.toISOString().split("T")[0]; return date.toISOString().split("T")[0];
}); });
const total7 = sum(json.platform_minetest.slice(-7)) + sum(json.platform_other.slice(-7)); if (!is_range) {
document.getElementById("downloads_total7d").textContent = total7; if (json.platform_minetest.length >= 30) {
document.getElementById("downloads_avg7d").textContent = (total7 / 7).toFixed(0); const total30 = sum(json.platform_minetest.slice(-30)) + sum(json.platform_other.slice(-30));
add_summary_card(format_message("downloads-30days", []), "download", total30,
format_message("downloads-per-day", [ (total30 / 30).toFixed(0) ]));
}
if (json.platform_minetest.length >= 30) { const total7 = sum(json.platform_minetest.slice(-7)) + sum(json.platform_other.slice(-7));
const total30 = sum(json.platform_minetest.slice(-30)) + sum(json.platform_other.slice(-30)); add_summary_card(format_message("downloads-7days", []), "download", total7,
document.getElementById("downloads_total30d").textContent = total30; format_message("downloads-per-day", [ (total7 / 7).toFixed(0) ]));
document.getElementById("downloads_avg30d").textContent = (total30 / 30).toFixed(0);
} else { } else {
document.getElementById("downloads30").style.display = "none"; const total = sum(json.platform_minetest) + sum(json.platform_other);
const days = Math.max(json.platform_minetest.length, json.platform_other.length);
const title = format_message("downloads-range", [ json.start, json.end ]);
add_summary_card(title, "download", total,
format_message("downloads-per-day", [ (total / days).toFixed(0) ]));
} }
const jsonOther = json.platform_minetest.map((value, i) => const jsonOther = json.platform_minetest.map((value, i) =>

@ -2,7 +2,7 @@
<script src="/static/libs/chart.min.js"></script> <script src="/static/libs/chart.min.js"></script>
<script src="/static/libs/chartjs-adapter-date-fns.bundle.min.js"></script> <script src="/static/libs/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="/static/libs/chartjs-plugin-annotation.min.js"></script> <script src="/static/libs/chartjs-plugin-annotation.min.js"></script>
<script src="/static/package_charts.js?v=10"></script> <script src="/static/package_charts.js?v=11"></script>
{% endmacro %} {% endmacro %}
@ -44,14 +44,28 @@
{% endmacro %} {% endmacro %}
{% macro render_package_stats(source, downloads) %} {% macro render_package_stats(source, downloads, is_range) %}
<div class="d-none">
<span id="downloads-7days">
{{ _("Downloads, past 7 days") }}
</span>
<span id="downloads-30days">
{{ _("Downloads, past 30 days") }}
</span>
<span id="downloads-range">
{{ _("Downloads from $1 to $2") }}
</span>
<span id="downloads-per-day">
{{ _("$1 per day") }}
</span>
</div>
<noscript> <noscript>
<p class="alert alert-danger"> <p class="alert alert-danger">
{{ _("JavaScript is required to display charts and statistics") }} {{ _("JavaScript is required to display charts and statistics") }}
</p> </p>
</noscript> </noscript>
<div class="row mb-5"> <div class="row mb-5" id="stats-summaries">
<div class="col-md-4"> <div class="col-md-4" id="lifetime-downloads">
<div class="card h-100"> <div class="card h-100">
<div class="card-body align-items-center text-center"> <div class="card-body align-items-center text-center">
<div class="mt-0 mb-3"> <div class="mt-0 mb-3">
@ -64,40 +78,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body align-items-center text-center">
<div class="mt-0 mb-3">
<i class="fas fa-download mr-1"></i>
{{ _("Downloads, past 7 days") }}
</div>
<div class="my-0 h4">
<span id='downloads_total7d'></span>
<small class="text-muted ml-2">
({{ _("%(downloads)s per day", downloads=("<span id='downloads_avg7d'></span>" | safe)) }})
</small>
</div>
</div>
</div>
</div>
<div class="col-md-4" id="downloads30">
<div class="card h-100">
<div class="card-body align-items-center text-center">
<div class="mt-0 mb-3">
<i class="fas fa-download mr-1"></i>
{{ _("Downloads, past 30 days") }}
</div>
<div class="my-0 h4">
<span id='downloads_total30d'></span>
<small class="text-muted ml-2">
({{ _("%(downloads)s per day", downloads=("<span id='downloads_avg30d'></span>" | safe)) }})
</small>
</div>
</div>
</div>
</div>
</div> </div>
<div id="loading">{{ _("Loading...") }}</div> <div id="loading">{{ _("Loading...") }}</div>
@ -106,7 +86,7 @@
{{ _("No data") }} {{ _("No data") }}
</div> </div>
<div id="stats-root" data-source="{{ source }}" style="display: none;"> <div id="stats-root" data-source="{{ source }}" data-is-range="{{ is_range and 'true' or 'false' }}" style="display: none;">
<section id="downloads-by-package" class="d-none"> <section id="downloads-by-package" class="d-none">
<h3>{{ _("Downloads by Package") }}</h3> <h3>{{ _("Downloads by Package") }}</h3>
<p class="text-muted"> <p class="text-muted">

@ -21,5 +21,5 @@
{{ render_package_selector(package.author, package=package) }} {{ render_package_selector(package.author, package=package) }}
</div> </div>
<h2 class="mt-0">{{ _("Statistics") }}</h2> <h2 class="mt-0">{{ _("Statistics") }}</h2>
{{ render_package_stats(package.getURL('api.package_stats', start=start, end=end), package.downloads) }} {{ render_package_stats(package.getURL('api.package_stats', start=start, end=end), package.downloads, start or end) }}
{% endblock %} {% endblock %}

@ -17,5 +17,5 @@
{{ render_package_selector(user, package=None) }} {{ render_package_selector(user, package=None) }}
</div> </div>
<h2 class="mt-0">{{ self.title() }}</h2> <h2 class="mt-0">{{ self.title() }}</h2>
{{ render_package_stats(url_for("api.user_stats", username=user.username, start=start, end=end), downloads) }} {{ render_package_stats(url_for("api.user_stats", username=user.username, start=start, end=end), downloads, start or end) }}
{% endblock %} {% endblock %}

@ -38,13 +38,16 @@ def abs_url_for(endpoint: str, **kwargs):
scheme = "https" if app.config["BASE_URL"][:5] == "https" else "http" scheme = "https" if app.config["BASE_URL"][:5] == "https" else "http"
return url_for(endpoint, _external=True, _scheme=scheme, **kwargs) return url_for(endpoint, _external=True, _scheme=scheme, **kwargs)
def abs_url(path): def abs_url(path):
return urljoin(app.config["BASE_URL"], path) return urljoin(app.config["BASE_URL"], path)
def abs_url_samesite(path): def abs_url_samesite(path):
base = urlparse(app.config["BASE_URL"]) base = urlparse(app.config["BASE_URL"])
return urlunparse(base._replace(path=path)) return urlunparse(base._replace(path=path))
def url_current(abs=False): def url_current(abs=False):
if request.args is None or request.view_args is None: if request.args is None or request.view_args is None:
return None return None
@ -57,12 +60,25 @@ def url_current(abs=False):
else: else:
return url_for(request.endpoint, **dargs) return url_for(request.endpoint, **dargs)
def url_clear_query():
if request.endpoint is None:
return None
dargs = dict()
if request.view_args:
dargs.update(request.view_args)
return url_for(request.endpoint, **dargs)
def url_set_anchor(anchor): def url_set_anchor(anchor):
args = MultiDict(request.args) args = MultiDict(request.args)
dargs = dict(args.lists()) dargs = dict(args.lists())
dargs.update(request.view_args) dargs.update(request.view_args)
return url_for(request.endpoint, **dargs) + "#" + anchor return url_for(request.endpoint, **dargs) + "#" + anchor
def url_set_query(**kwargs): def url_set_query(**kwargs):
if request.endpoint is None: if request.endpoint is None:
return None return None
@ -130,7 +146,7 @@ def get_daterange_options() -> List[Tuple[LazyString, str]]:
last_year_end = datetime.date(now.year - 1, 12, 31) last_year_end = datetime.date(now.year - 1, 12, 31)
return [ return [
(lazy_gettext("All time"), url_set_query(start="2022-10-23", end=now.isoformat())), (lazy_gettext("All time"), url_clear_query()),
(lazy_gettext("Last 7 days"), url_set_query(start=days7.isoformat(), end=now.isoformat())), (lazy_gettext("Last 7 days"), url_set_query(start=days7.isoformat(), end=now.isoformat())),
(lazy_gettext("Last 30 days"), url_set_query(start=days30.isoformat(), end=now.isoformat())), (lazy_gettext("Last 30 days"), url_set_query(start=days30.isoformat(), end=now.isoformat())),
(lazy_gettext("Last 90 days"), url_set_query(start=days90.isoformat(), end=now.isoformat())), (lazy_gettext("Last 90 days"), url_set_query(start=days90.isoformat(), end=now.isoformat())),