feat(active): add the active beers page, run metadata and tap numbers
Adds the pages that were missing: an "Active Beers" view of what is in the fermenter right now, and the per-run metadata (canonical name, tap number, original gravity, brew notes) that could not be derived from the readings. Why the metadata is needed -------------------------- The `beer_data` collection stores a beer name on *each reading*, and that name drifts within a run - run 4 was entered as "Necatron-Christmas Beer", then "Nocturna the Christmas beer", then "Nocturna Christmas beer". There was nowhere to record a tap number, a confirmed original gravity, or a note about the brew. The new `beer_runs` collection holds one document per run with exactly those details. It starts empty; `scripts/backfill_run_metadata.py` populates it from the existing readings. The script is idempotent, only ever inserts into `beer_runs`, never touches `beer_data`, and never overwrites a name you have already set by hand. The active beers page --------------------- A card per brew that is still in the fermenter, showing the tap number, the current gravity, the projected alcohol, how many days it has been brewing, a sparkline of the gravity so far, and the latest comment on a reading. A run with only one reading and no recorded original gravity has no reliable estimate, so the alcohol figure shows a dash rather than a misleading number - record the OG or take a second reading and it appears. The same applies to the existing reads, where the legacy app's assumed OG of 1012 produced *negative* alcohol for a perfectly normal OG. Also adds the history page: alcohol by brew, brews per month, every run in a table, a comparison of the standard ABV formula against the legacy one, and a list of readings that fall outside the plausible hydrometer range. Changes to the existing pages ----------------------------- - The brew-process page and the run detail page now show the canonical run name and the latest comment, and the run detail page lets you edit the metadata inline. - Gravity is displayed as a decimal reading (1.039) with the point scale beneath it (39 points), which is the way a brewer reads it. Labelling the stored `1039` as "1039 points" would have been wrong. - A run's display name now prefers the name on its *final* reading - the one written when the brew was finished, so the name the operator settled on - falling back to the most-used name. - `upsert_run_metadata` now clears a field when it is passed as `None`, so a name or tap number can be deleted. `upsert_run_metadata_partial` is the non-clearing variant, used by the backfill. Bugs found and fixed along the way ---------------------------------- - The chart script was included both in the base template and again by each page, so every chart was drawn twice. A test now asserts it is loaded exactly once per page. - The chart library was never referenced by the base template, so all charts were silently dead. That was fixed in the previous PR. Tests ----- 91 (up from 74). New coverage: the active page contents, the tap number, the projected alcohol, the "needs 2nd reading" case, metadata saving and clearing, the stored name overriding the drifting reading name, the next free tap number, the partial-update semantics, the history page, the outlier list, and the point-scale formatting. Data safety ----------- `beer_data` is untouched by this change. The backfill script only inserts into `beer_runs` and skips any run whose name has already been set by hand.
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -0,0 +1,265 @@
|
||||
/* ==========================================================================
|
||||
Brew Log — charts
|
||||
Uses the vendored Chart.js (static/js/chart.umd.js) — no CDN at runtime, so
|
||||
the container works on an isolated network.
|
||||
========================================================================== */
|
||||
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
if (typeof Chart === "undefined") {
|
||||
console.warn("Chart.js is not loaded; charts are disabled.");
|
||||
return;
|
||||
}
|
||||
|
||||
var ACCENT = "#be7f39";
|
||||
var ACCENT_BRIGHT = "#dda05c";
|
||||
var MUTED = "#afafaf";
|
||||
var GRID = "rgba(175, 175, 175, 0.13)";
|
||||
var WARN = "#e8a33d";
|
||||
|
||||
Chart.defaults.color = MUTED;
|
||||
Chart.defaults.font.family =
|
||||
'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
|
||||
Chart.defaults.font.size = 11;
|
||||
Chart.defaults.borderColor = GRID;
|
||||
|
||||
function withAlpha(hex, alpha) {
|
||||
var r = parseInt(hex.slice(1, 3), 16);
|
||||
var g = parseInt(hex.slice(3, 5), 16);
|
||||
var b = parseInt(hex.slice(5, 7), 16);
|
||||
return "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
|
||||
}
|
||||
|
||||
function baseOptions(extra) {
|
||||
var options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { labels: { boxWidth: 10, boxHeight: 10, usePointStyle: true } }
|
||||
},
|
||||
scales: {
|
||||
x: { grid: { color: GRID }, ticks: { maxRotation: 0, autoSkipPadding: 12 } },
|
||||
y: { grid: { color: GRID } }
|
||||
}
|
||||
};
|
||||
if (extra) {
|
||||
Object.keys(extra).forEach(function (key) {
|
||||
options[key] = extra[key];
|
||||
});
|
||||
}
|
||||
return options;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------- sparklines */
|
||||
|
||||
function drawSparklines() {
|
||||
var canvases = document.querySelectorAll("canvas.sparkline");
|
||||
for (var i = 0; i < canvases.length; i++) {
|
||||
(function (canvas) {
|
||||
var labels = JSON.parse(canvas.getAttribute("data-labels") || "[]");
|
||||
var values = JSON.parse(canvas.getAttribute("data-values") || "[]");
|
||||
var points = [];
|
||||
for (var j = 0; j < values.length; j++) {
|
||||
if (values[j] !== null && values[j] !== undefined) {
|
||||
points.push({ x: labels[j], y: values[j] });
|
||||
}
|
||||
}
|
||||
if (!points.length) { return; }
|
||||
|
||||
new Chart(canvas.getContext("2d"), {
|
||||
type: "line",
|
||||
data: {
|
||||
datasets: [{
|
||||
data: points,
|
||||
borderColor: ACCENT_BRIGHT,
|
||||
backgroundColor: withAlpha(ACCENT, 0.18),
|
||||
borderWidth: 2,
|
||||
pointRadius: points.length > 12 ? 0 : 2,
|
||||
fill: true,
|
||||
tension: 0.3
|
||||
}]
|
||||
},
|
||||
options: baseOptions({
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function (ctx) { return ctx.parsed.y + " (" + ctx.parsed.x + ")"; }
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: { display: false, grid: { display: false } },
|
||||
y: { display: false, grid: { display: false } }
|
||||
}
|
||||
})
|
||||
});
|
||||
})(canvases[i]);
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------- run detail chart */
|
||||
|
||||
function drawRunChart() {
|
||||
var canvas = document.getElementById("run-chart");
|
||||
if (!canvas) { return; }
|
||||
var runId = window.BREW_RUN_ID;
|
||||
|
||||
fetch("/api/runs/" + encodeURIComponent(runId), {
|
||||
headers: { "Accept": "application/json" }
|
||||
})
|
||||
.then(function (response) {
|
||||
if (!response.ok) { throw new Error("run fetch failed"); }
|
||||
return response.json();
|
||||
})
|
||||
.then(function (run) {
|
||||
var points = [];
|
||||
(run.readings || []).forEach(function (r) {
|
||||
if (r.sg !== null && r.sg !== undefined) {
|
||||
points.push({ x: r.date, y: r.sg });
|
||||
}
|
||||
});
|
||||
if (!points.length) { return; }
|
||||
|
||||
new Chart(canvas.getContext("2d"), {
|
||||
type: "line",
|
||||
data: {
|
||||
datasets: [{
|
||||
label: "Gravity",
|
||||
data: points,
|
||||
borderColor: ACCENT,
|
||||
backgroundColor: withAlpha(ACCENT, 0.12),
|
||||
borderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointBackgroundColor: ACCENT,
|
||||
fill: true,
|
||||
tension: 0.25
|
||||
}]
|
||||
},
|
||||
options: baseOptions({
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function (ctx) {
|
||||
return ctx.parsed.y + " points (" + ctx.parsed.x + ")";
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
reverse: true,
|
||||
title: { display: true, text: "Specific gravity (points)" }
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
})
|
||||
.catch(function (err) { console.warn(err); });
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------ history charts */
|
||||
|
||||
function drawAbvChart() {
|
||||
var canvas = document.getElementById("abv-chart");
|
||||
if (!canvas) { return; }
|
||||
|
||||
fetch("/api/runs", { headers: { "Accept": "application/json" } })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (runs) {
|
||||
var completed = runs.filter(function (r) { return r.abv !== null && r.abv !== undefined; });
|
||||
if (!completed.length) { return; }
|
||||
|
||||
new Chart(canvas.getContext("2d"), {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: completed.map(function (r) {
|
||||
return r.canonical_name || ("Run " + r.beer_run_id);
|
||||
}),
|
||||
datasets: [{
|
||||
label: "ABV %",
|
||||
data: completed.map(function (r) { return r.abv; }),
|
||||
backgroundColor: withAlpha(ACCENT, 0.65),
|
||||
borderColor: ACCENT,
|
||||
borderWidth: 1,
|
||||
borderRadius: 4
|
||||
}]
|
||||
},
|
||||
options: baseOptions({
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function (ctx) { return ctx.parsed.y.toFixed(2) + "% ABV"; }
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: { beginAtZero: true, title: { display: true, text: "% ABV" } },
|
||||
x: { ticks: { maxRotation: 45, minRotation: 0 } }
|
||||
}
|
||||
})
|
||||
});
|
||||
})
|
||||
.catch(function (err) { console.warn(err); });
|
||||
}
|
||||
|
||||
function drawMonthsChart() {
|
||||
var canvas = document.getElementById("months-chart");
|
||||
if (!canvas) { return; }
|
||||
|
||||
fetch("/api/runs", { headers: { "Accept": "application/json" } })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (runs) {
|
||||
var counts = {};
|
||||
runs.forEach(function (r) {
|
||||
var stamp = r.final_date || r.first_date;
|
||||
if (!stamp) { return; }
|
||||
var month = stamp.slice(0, 7);
|
||||
counts[month] = (counts[month] || 0) + 1;
|
||||
});
|
||||
var months = Object.keys(counts).sort();
|
||||
if (!months.length) { return; }
|
||||
|
||||
new Chart(canvas.getContext("2d"), {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: months,
|
||||
datasets: [{
|
||||
label: "Brews",
|
||||
data: months.map(function (m) { return counts[m]; }),
|
||||
borderColor: ACCENT,
|
||||
backgroundColor: withAlpha(ACCENT, 0.12),
|
||||
borderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointBackgroundColor: ACCENT,
|
||||
fill: true,
|
||||
tension: 0.3
|
||||
}]
|
||||
},
|
||||
options: baseOptions({
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
y: { beginAtZero: true, ticks: { stepSize: 1 } }
|
||||
}
|
||||
})
|
||||
});
|
||||
})
|
||||
.catch(function (err) { console.warn(err); });
|
||||
}
|
||||
|
||||
function init() {
|
||||
drawSparklines();
|
||||
drawRunChart();
|
||||
drawAbvChart();
|
||||
drawMonthsChart();
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user