Stats: Improve summaries when range is selected

Fixes #446

app/public/static/package_charts.js

@@ -1,3 +1,6 @@
+// @author rubenwardy
+// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+
 "use strict";
 
 
@@ -58,9 +61,45 @@ const chartColorsBg = chartColors.map(color => `rgba(${hexToRgb(color.slice(1))}
 
 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() {
 	const root = document.getElementById("stats-root");
 	const source = root.getAttribute("data-source");
+	const is_range = root.getAttribute("data-is-range") == "true";
 	const response = await fetch(source);
 	const json = await response.json();
 
@@ -79,16 +118,22 @@ async function load_data() {
 		return date.toISOString().split("T")[0];
 	});
 
-	const total7 = sum(json.platform_minetest.slice(-7)) + sum(json.platform_other.slice(-7));
-	document.getElementById("downloads_total7d").textContent = total7;
-	document.getElementById("downloads_avg7d").textContent = (total7 / 7).toFixed(0);
-
+	if (!is_range) {
 		if (json.platform_minetest.length >= 30) {
 			const total30 = sum(json.platform_minetest.slice(-30)) + sum(json.platform_other.slice(-30));
-		document.getElementById("downloads_total30d").textContent = total30;
-		document.getElementById("downloads_avg30d").textContent = (total30 / 30).toFixed(0);
+			add_summary_card(format_message("downloads-30days", []), "download", total30,
+					format_message("downloads-per-day", [ (total30 / 30).toFixed(0) ]));
+		}
+
+		const total7 = sum(json.platform_minetest.slice(-7)) + sum(json.platform_other.slice(-7));
+		add_summary_card(format_message("downloads-7days", []), "download", total7,
+				format_message("downloads-per-day", [ (total7 / 7).toFixed(0) ]));
 	} 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) =>

app/templates/macros/stats.html

@@ -2,7 +2,7 @@
 	<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-plugin-annotation.min.js"></script>
-	<script src="/static/package_charts.js?v=10"></script>
+	<script src="/static/package_charts.js?v=11"></script>
 {% endmacro %}
 
 
@@ -44,14 +44,28 @@
 {% 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>
 		<p class="alert alert-danger">
 			{{ _("JavaScript is required to display charts and statistics") }}
 		</p>
 	</noscript>
-	<div class="row mb-5">
-		<div class="col-md-4">
+	<div class="row mb-5" id="stats-summaries">
+		<div class="col-md-4" id="lifetime-downloads">
 			<div class="card h-100">
 				<div class="card-body align-items-center text-center">
 					<div class="mt-0 mb-3">
@@ -64,40 +78,6 @@
 				</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 id="loading">{{ _("Loading...") }}</div>
@@ -106,7 +86,7 @@
 		{{ _("No data") }}
 	</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">
 			<h3>{{ _("Downloads by Package") }}</h3>
 			<p class="text-muted">

app/templates/packages/stats.html

@@ -21,5 +21,5 @@
 		{{ render_package_selector(package.author, package=package) }}
 	</div>
 	<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 %}

app/templates/users/stats.html

@@ -17,5 +17,5 @@
 		{{ render_package_selector(user, package=None) }}
 	</div>
 	<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 %}

app/utils/flask.py

@@ -38,13 +38,16 @@ def abs_url_for(endpoint: str, **kwargs):
 	scheme = "https" if app.config["BASE_URL"][:5] == "https" else "http"
 	return url_for(endpoint, _external=True, _scheme=scheme, **kwargs)
 
+
 def abs_url(path):
 	return urljoin(app.config["BASE_URL"], path)
 
+
 def abs_url_samesite(path):
 	base = urlparse(app.config["BASE_URL"])
 	return urlunparse(base._replace(path=path))
 
+
 def url_current(abs=False):
 	if request.args is None or request.view_args is None:
 		return None
@@ -57,12 +60,25 @@ def url_current(abs=False):
 	else:
 		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):
 	args = MultiDict(request.args)
 	dargs = dict(args.lists())
 	dargs.update(request.view_args)
 	return url_for(request.endpoint, **dargs) + "#" + anchor
 
+
 def url_set_query(**kwargs):
 	if request.endpoint is 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)
 
 	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 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())),