From 3f31e33d12298d00ad38a03d88828b6f0b454d05 Mon Sep 17 00:00:00 2001
From: Deeman <hendriknote@gmail.com>
Date: Sat, 21 Feb 2026 22:53:34 +0100
Subject: [PATCH] countries: show metric label on chart Y-axis and table value
 column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Chart Y-axis title: "production  (1k 60-kg bags)" via Chart.js title
- Rankings table: column header row with "Country" / "production (1k bags)"
- Table section header changes to "Latest snapshot · <metric>"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../dashboard/templates/countries.html        | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/src/beanflows/dashboard/templates/countries.html b/web/src/beanflows/dashboard/templates/countries.html
index d946780..37cddb0 100644
--- a/web/src/beanflows/dashboard/templates/countries.html
+++ b/web/src/beanflows/dashboard/templates/countries.html
@@ -346,6 +346,9 @@
 .cc-t-bar-wrap { height: 4px; background: var(--color-parchment); border-radius: 2px; overflow: hidden; }
 .cc-t-bar { height: 100%; border-radius: 2px; transition: width 0.5s ease; }
 .cc-t-value { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--color-espresso); text-align: right; }
+.cc-trow-head { padding-top: 0.375rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--color-parchment); }
+.cc-trow-head:hover { background: none; }
+.cc-t-head { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-stone); font-weight: 600; }
 
 /* Empty state */
 .cc-empty {
@@ -622,10 +625,18 @@ function buildRankings(data, metric, orderedCodes) {
       + '</div>';
   }).join('');
 
+  var metricLabel = metric.replace(/_/g, ' ');
+  var colHead = '<div class="cc-trow cc-trow-head">'
+    + '<span></span>'
+    + '<span class="cc-t-head">Country</span>'
+    + '<span></span>'
+    + '<span class="cc-t-head" style="text-align:right">' + metricLabel + ' (1k bags)</span>'
+    + '</div>';
+
   rankEl.innerHTML = '<div class="cc-table-top">'
-    + '<span class="cc-table-label">Latest Ranking · ' + metric.replace(/_/g, ' ') + '</span>'
+    + '<span class="cc-table-label">Latest snapshot · ' + metricLabel + '</span>'
     + '<span class="cc-table-year">' + maxYear + '</span>'
-    + '</div>' + rows;
+    + '</div>' + colHead + rows;
 }
 
 // ── Chart.js (called from page load + partial script) ───────────────────
@@ -707,6 +718,12 @@ function initChart(data, metric, orderedCodes) {
           border: { display: false },
         },
         y: {
+          title: {
+            display: true,
+            text:    metric.replace(/_/g, ' ') + '  (1k 60-kg bags)',
+            font:    { family: "'DM Sans', sans-serif", size: 10 },
+            color:   '#78716C',
+          },
           grid:   { color: 'rgba(232,223,213,0.45)', drawTicks: false },
           ticks: {
             font:     { family: "ui-monospace, 'Cascadia Code', monospace", size: 11 },