Dominic Gundel
4ddffbbeb1
Jetzt/Topbar und Material-Routing, Pause bei Filament-Ende, Druckbericht mit Stromanteilen, Design- und Kamera-Stream-Polish; Bedarf-Alert-Spam und Platte-belegt-Bugs behoben.
285 lines
11 KiB
HTML
285 lines
11 KiB
HTML
{% extends "layout.html" %}
|
|
{% block body %}
|
|
<div class="page-head">
|
|
<div>
|
|
<h1>Statistik</h1>
|
|
<p class="tiny">Auslastung, Verbrauch und Erfolgsquote aus dem Protokoll.</p>
|
|
</div>
|
|
<div class="page-head-side">
|
|
<a class="ghost" id="csv-link" href="/api/v1/statistik.csv">CSV</a>
|
|
</div>
|
|
</div>
|
|
<div class="toolbar page-tools">
|
|
<div class="segmented period-presets fchips" id="period" role="group" aria-label="Zeitraum">
|
|
<button type="button" data-period="all" class="fchip on">Alles</button>
|
|
<button type="button" data-period="day" class="fchip">Tag</button>
|
|
<button type="button" data-period="week" class="fchip">Woche</button>
|
|
<button type="button" data-period="month" class="fchip">Monat</button>
|
|
<button type="button" data-period="yesterday" class="fchip">Gestern</button>
|
|
<button type="button" data-period="last_week" class="fchip">Letzte Woche</button>
|
|
<button type="button" data-period="last_month" class="fchip">Letzter Monat</button>
|
|
</div>
|
|
<input type="date" id="since" title="Von" class="date-field">
|
|
<input type="date" id="until" title="Bis" class="date-field">
|
|
<select id="host"><option value="">Alle Drucker</option></select>
|
|
<input type="text" id="material" placeholder="Sorte" size="10">
|
|
<input type="text" id="brand" placeholder="Marke" size="10">
|
|
<div class="tools-end"><button type="button" id="reload" class="ghost"><svg class="ico"><use href="#i-refresh"/></svg>Aktualisieren</button></div>
|
|
</div>
|
|
<p id="stat-note"></p>
|
|
<div id="stat" class="statistik"></div>
|
|
{% endblock %}
|
|
{% block script %}
|
|
<script>
|
|
function kpi(label, value, hint, ico) {
|
|
return `<div class="kpi"><div class="kpi-label">${ico ? icon(ico) : ""}${escapeHtml(label)}</div><div class="kpi-value">${value}</div>${hint ? '<div class="kpi-sub">' + escapeHtml(hint) + "</div>" : ""}</div>`;
|
|
}
|
|
|
|
function isoDate(date) {
|
|
const y = date.getFullYear();
|
|
const m = String(date.getMonth() + 1).padStart(2, "0");
|
|
const d = String(date.getDate()).padStart(2, "0");
|
|
return y + "-" + m + "-" + d;
|
|
}
|
|
|
|
function startOfWeek(date) {
|
|
const day = date.getDay();
|
|
const mondayOffset = day === 0 ? -6 : 1 - day;
|
|
const start = new Date(date.getFullYear(), date.getMonth(), date.getDate() + mondayOffset);
|
|
return start;
|
|
}
|
|
|
|
function periodRange(key) {
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
if (key === "all") return { since: "", until: "" };
|
|
if (key === "day") return { since: isoDate(today), until: isoDate(today) };
|
|
if (key === "yesterday") {
|
|
const day = new Date(today);
|
|
day.setDate(day.getDate() - 1);
|
|
return { since: isoDate(day), until: isoDate(day) };
|
|
}
|
|
if (key === "week") {
|
|
const start = startOfWeek(today);
|
|
const end = new Date(start);
|
|
end.setDate(end.getDate() + 6);
|
|
return { since: isoDate(start), until: isoDate(end) };
|
|
}
|
|
if (key === "last_week") {
|
|
const start = startOfWeek(today);
|
|
start.setDate(start.getDate() - 7);
|
|
const end = new Date(start);
|
|
end.setDate(end.getDate() + 6);
|
|
return { since: isoDate(start), until: isoDate(end) };
|
|
}
|
|
if (key === "month") {
|
|
const start = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
|
|
return { since: isoDate(start), until: isoDate(end) };
|
|
}
|
|
if (key === "last_month") {
|
|
const start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
|
|
const end = new Date(today.getFullYear(), today.getMonth(), 0);
|
|
return { since: isoDate(start), until: isoDate(end) };
|
|
}
|
|
return { since: "", until: "" };
|
|
}
|
|
|
|
function setPeriodActive(key) {
|
|
document.querySelectorAll("#period [data-period]").forEach((btn) => {
|
|
btn.classList.toggle("on", btn.dataset.period === key);
|
|
});
|
|
}
|
|
|
|
function clearPeriodActive() {
|
|
document.querySelectorAll("#period [data-period]").forEach((btn) => btn.classList.remove("on"));
|
|
}
|
|
|
|
function fillPrinters(rows) {
|
|
const select = document.getElementById("host");
|
|
const current = select.value;
|
|
const known = new Set([...select.options].map((o) => o.value));
|
|
(rows || []).forEach((row) => {
|
|
if (!row.printer_host || known.has(row.printer_host)) return;
|
|
const opt = document.createElement("option");
|
|
opt.value = row.printer_host;
|
|
opt.textContent = row.printer_name || row.printer_host;
|
|
select.appendChild(opt);
|
|
known.add(row.printer_host);
|
|
});
|
|
if ([...select.options].some((o) => o.value === current)) select.value = current;
|
|
}
|
|
|
|
function barChart(items, valueKey, labelFn) {
|
|
const rows = (items || []).filter((item) => Number(item[valueKey]) > 0);
|
|
if (!rows.length) return '<p class="empty">Keine Werte fürs Diagramm.</p>';
|
|
const max = Math.max(...rows.map((item) => Number(item[valueKey]) || 0)) || 1;
|
|
return `<div class="bar-chart" role="img">${rows.map((item) => {
|
|
const value = Number(item[valueKey]) || 0;
|
|
const pct = Math.max(4, Math.round(100 * value / max));
|
|
return `<div class="bar-row">
|
|
<span class="bar-label">${escapeHtml(labelFn(item))}</span>
|
|
<span class="bar-track"><span class="bar-fill" style="width:${pct}%"></span></span>
|
|
<span class="bar-val">${escapeHtml(String(item._barLabel || value))}</span>
|
|
</div>`;
|
|
}).join("")}</div>`;
|
|
}
|
|
|
|
function render(data) {
|
|
fillPrinters(data.by_printer);
|
|
const o = data.overview || {};
|
|
const jobs = o.jobs || 0;
|
|
const success = jobs ? Math.round(100 * (o.completed || 0) / jobs) : 0;
|
|
const scrap = jobs ? Math.round(100 * (o.scrap || 0) / jobs) : 0;
|
|
const ratio = data.estimate_ratio != null
|
|
? (data.estimate_ratio * 100).toFixed(0) + " %"
|
|
: "—";
|
|
|
|
if (!jobs) {
|
|
document.getElementById("stat").innerHTML = `
|
|
<div class="empty-state">
|
|
<svg class="ico"><use href="#i-grid"/></svg>
|
|
<p>Keine Läufe im gewählten Zeitraum.</p>
|
|
<a class="ghost" href="/protokoll">Protokoll →</a>
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
const printers = (data.by_printer || []).map((p) => `
|
|
<tr>
|
|
<td>${escapeHtml(p.printer_name || p.printer_host)}</td>
|
|
<td class="num">${p.jobs}</td>
|
|
<td class="num">${hours(p.duration_s)}</td>
|
|
<td class="num">${grams(p.weight_g)}</td>
|
|
<td class="num">${euro(p.cost)}</td>
|
|
<td class="num">${p.completed}</td>
|
|
</tr>`).join("") || '<tr><td class="empty" colspan="6">Keine Daten.</td></tr>';
|
|
|
|
const reasons = (data.scrap_reasons || []).map((r) => `
|
|
<tr>
|
|
<td>${escapeHtml(r.reason || "—")}</td>
|
|
<td class="num">${r.count}</td>
|
|
</tr>`).join("") || '<tr><td class="empty" colspan="2">Kein Ausschuss im Zeitraum.</td></tr>';
|
|
|
|
const materials = (data.by_material || []).map((m) => `
|
|
<tr>
|
|
<td>${escapeHtml(m.material_type || "—")}</td>
|
|
<td>${escapeHtml(m.brand || "")}</td>
|
|
<td class="num">${grams(m.weight_g)}</td>
|
|
<td class="num">${euro(m.cost)}</td>
|
|
<td class="num">${m.jobs}</td>
|
|
</tr>`).join("") || '<tr><td class="empty" colspan="5">Kein Spulenabzug im Zeitraum.</td></tr>';
|
|
|
|
const chartPrinters = (data.by_printer || []).map((p) => ({
|
|
...p,
|
|
_barLabel: hours(p.duration_s),
|
|
}));
|
|
const chartMaterials = (data.by_material || []).map((m) => ({
|
|
...m,
|
|
_barLabel: grams(m.weight_g),
|
|
}));
|
|
|
|
document.getElementById("stat").innerHTML = `
|
|
<div class="kpi-row">
|
|
${kpi("Läufe", String(jobs), "", "layers")}
|
|
${kpi("Druckzeit", hours(o.duration_s), "", "clock")}
|
|
${kpi("Verbrauch", grams(o.weight_g), "", "weight")}
|
|
${kpi("Kosten", euro(o.cost), "", "euro")}
|
|
${kpi("Erfolg", success + " %", (o.completed || 0) + " fertig · " + (o.failed || 0) + " abgebrochen", "circle-check")}
|
|
${kpi("Ausschuss", scrap + " %", (o.scrap || 0) + " mit Urteil Ausschuss", "ban")}
|
|
${kpi("Stück-Yield", o.yield_percent != null ? Math.round(o.yield_percent) + " %" : "—", (o.pieces_ok || 0) + " gut · " + (o.pieces_bad || 0) + " schlecht", "percent")}
|
|
${kpi("€ / Teil", o.cost_per_part != null ? euro(o.cost_per_part) : "—", "Material + Strom ÷ gut", "tag")}
|
|
${kpi("Schätztreue", ratio, data.estimate_count ? data.estimate_count + " Läufe mit Soll-Zeit" : "keine Soll-Zeit", "gauge")}
|
|
</div>
|
|
<div class="split">
|
|
<div class="card">
|
|
<h2>Druckzeit je Drucker</h2>
|
|
${barChart(chartPrinters, "duration_s", (p) => p.printer_name || p.printer_host || "—")}
|
|
</div>
|
|
<div class="card">
|
|
<h2>Verbrauch je Material</h2>
|
|
${barChart(chartMaterials, "weight_g", (m) => [m.material_type, m.brand].filter(Boolean).join(" · ") || "—")}
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>Nach Drucker</h2>
|
|
<div class="table-wrap"><table>
|
|
<thead><tr><th>Drucker</th><th>Läufe</th><th>Zeit</th><th>Gramm</th><th>Kosten</th><th>Fertig</th></tr></thead>
|
|
<tbody>${printers}</tbody>
|
|
</table></div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>Ausschuss-Gründe</h2>
|
|
<div class="table-wrap"><table>
|
|
<thead><tr><th>Grund</th><th>Anzahl</th></tr></thead>
|
|
<tbody>${reasons}</tbody>
|
|
</table></div>
|
|
</div>
|
|
<div class="card">
|
|
<h2>Nach Material</h2>
|
|
<div class="table-wrap"><table>
|
|
<thead><tr><th>Sorte</th><th>Marke</th><th>Gramm</th><th>Kosten</th><th>Läufe</th></tr></thead>
|
|
<tbody>${materials}</tbody>
|
|
</table></div>
|
|
</div>`;
|
|
}
|
|
|
|
async function load() {
|
|
const params = new URLSearchParams();
|
|
const since = document.getElementById("since").value;
|
|
const until = document.getElementById("until").value;
|
|
const host = document.getElementById("host").value;
|
|
const material = document.getElementById("material").value.trim();
|
|
const brand = document.getElementById("brand").value.trim();
|
|
if (since) params.set("since", since);
|
|
if (until) params.set("until", until);
|
|
if (host) params.set("host", host);
|
|
if (material) params.set("material", material);
|
|
if (brand) params.set("brand", brand);
|
|
const q = params.toString();
|
|
document.getElementById("csv-link").href = "/api/v1/statistik.csv" + (q ? "?" + q : "");
|
|
const data = await api("/statistik" + (q ? "?" + q : ""));
|
|
render(data);
|
|
}
|
|
|
|
function applyPeriod(key) {
|
|
const range = periodRange(key);
|
|
document.getElementById("since").value = range.since;
|
|
document.getElementById("until").value = range.until;
|
|
setPeriodActive(key);
|
|
load().catch((error) => showNote("stat-note", error));
|
|
}
|
|
|
|
document.getElementById("period").addEventListener("click", (event) => {
|
|
const button = event.target.closest("[data-period]");
|
|
if (!button) return;
|
|
applyPeriod(button.dataset.period);
|
|
});
|
|
|
|
document.getElementById("reload").addEventListener("click", () => {
|
|
load().catch((error) => showNote("stat-note", error));
|
|
});
|
|
["since", "until"].forEach((id) => {
|
|
document.getElementById(id).addEventListener("change", () => {
|
|
clearPeriodActive();
|
|
load().catch((error) => showNote("stat-note", error));
|
|
});
|
|
});
|
|
document.getElementById("host").addEventListener("change", () => {
|
|
load().catch((error) => showNote("stat-note", error));
|
|
});
|
|
["material", "brand"].forEach((id) => {
|
|
const node = document.getElementById(id);
|
|
if (!node) return;
|
|
node.addEventListener("change", () => load().catch((error) => showNote("stat-note", error)));
|
|
node.addEventListener("keydown", (event) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
load().catch((error) => showNote("stat-note", error));
|
|
}
|
|
});
|
|
});
|
|
load().catch((error) => showNote("stat-note", error));
|
|
</script>
|
|
{% endblock %}
|