From daf8fbe47185b970513c9d1fd042794337de72ec Mon Sep 17 00:00:00 2001
From: Inferencebot <bot@inference.coop>
Date: Wed, 28 Oct 2026 04:36:42 +0000
Subject: [PATCH] charts: add Energy and Carbon (co-op/support#26)

Two more metrics on the same chart, from the portal's new energy_wh and co2e_g
daily columns.

- Energy in watt-hours, carbon in grams CO2e, both for the day shown.
- Continuous metrics use the 1/2/5 axis rule (not the integer rule reserved for
  counts), so energy ticks read 500 Wh rather than being rounded to whole
  people-style numbers.
- Labels carry units, so a reader never has to guess what the axis measures.
- Same measured-vs-estimated provenance as the data layer: GreenPT models use
  facts fitted from their own impact API, everyone else a labelled proxy. The
  docs page on estimation is still to be written; the factor table and its
  sources are in metrics_snapshot.py.

Harness extended: one bar per measured day for each, no NaN in markup, and axis
labels matching ^[\d,]+(\.\d+)? (Wh|g)$ so a unit prefix or a forced integer
axis fails the build.
---
 app/main.py | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/main.py b/app/main.py
index 0535b3c..2fecda7 100644
--- a/app/main.py
+++ b/app/main.py
@@ -568,6 +568,8 @@ PAGE_HTML = """<!DOCTYPE html>
             <button class="mode-btn active" id="tm-members" onclick="setTrendMetric('members')">Members</button>
             <button class="mode-btn" id="tm-requests" onclick="setTrendMetric('requests')">Requests</button>
             <button class="mode-btn" id="tm-spend" onclick="setTrendMetric('spend')">Spend</button>
+            <button class="mode-btn" id="tm-energy" onclick="setTrendMetric('energy')">Energy</button>
+            <button class="mode-btn" id="tm-co2e" onclick="setTrendMetric('co2e')">Carbon</button>
           </span>
           <span class="trend-group">
             <span class="board-note" style="margin:0;">Period</span>
@@ -807,7 +809,9 @@ let trendDays = 90;            // 0 = all time
 const TREND_CONF = {
   members:  { kind: "line", title: "The co-op over time" },
   requests: { kind: "bar",  title: "Requests the co-op served" },
-  spend:    { kind: "bar",  title: "What the co-op spent" }
+  spend:    { kind: "bar",  title: "What the co-op spent" },
+  energy:   { kind: "bar",  title: "Energy the co-op used" },
+  co2e:     { kind: "bar",  title: "Carbon the co-op emitted" }
 };
 
 async function loadMetrics() {
@@ -830,6 +834,8 @@ function setTrendMetric(m) {
   $("tm-members").className = "mode-btn" + (m === "members" ? " active" : "");
   $("tm-requests").className = "mode-btn" + (m === "requests" ? " active" : "");
   $("tm-spend").className = "mode-btn" + (m === "spend" ? " active" : "");
+  $("tm-energy").className = "mode-btn" + (m === "energy" ? " active" : "");
+  $("tm-co2e").className = "mode-btn" + (m === "co2e" ? " active" : "");
   renderTrends();
 }
 
@@ -844,13 +850,15 @@ function setTrendDays(d) {
 function trendVal(row) {
   if (trendMetric === "members") return row.members_total;
   if (trendMetric === "spend") return row.spend_usd;
+  if (trendMetric === "energy") return row.energy_wh;
+  if (trendMetric === "co2e") return row.co2e_g;
   return row.requests;
 }
 
 // Y-axis step: counts are people and things, so ticks stay whole numbers;
 // money uses the 1/2/5 x 10^k rule so ticks read $10.00, not $4.92.
 function niceStep(raw) {
-  if (trendMetric === "spend") {
+  if (trendMetric === "spend" || trendMetric === "energy" || trendMetric === "co2e") {
     const mag = Math.pow(10, Math.floor(Math.log10(Math.max(raw, 1e-9))));
     const norm = raw / mag;
     const nice = norm <= 1 ? 1 : (norm <= 2 ? 2 : (norm <= 5 ? 5 : 10));
@@ -863,6 +871,8 @@ function niceStep(raw) {
 function trendLabel(v) {
   if (v === null || v === undefined) return "not measured";
   if (trendMetric === "spend") return fmtMoney(v);
+  if (trendMetric === "energy") return Number(v).toLocaleString() + " Wh";
+  if (trendMetric === "co2e") return Number(v).toLocaleString() + " g";
   return Number(v).toLocaleString();
 }