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) { + ''; }).join(''); + var metricLabel = metric.replace(/_/g, ' '); + var colHead = '
' + + '' + + 'Country' + + '' + + '' + metricLabel + ' (1k bags)' + + '
'; + rankEl.innerHTML = '
' - + 'Latest Ranking · ' + metric.replace(/_/g, ' ') + '' + + 'Latest snapshot · ' + metricLabel + '' + '' + maxYear + '' - + '
' + rows; + + '' + 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 },