From 91a9fb83be4a8d2d35ce825403cd546951f0d8cc Mon Sep 17 00:00:00 2001 From: Deeman Date: Sat, 21 Feb 2026 22:30:37 +0100 Subject: [PATCH] redesign Countries page: commodity intelligence terminal aesthetic Replace generic multi-select + plain card with a two-panel layout: - Dark espresso selector panel (sticky, searchable, click-to-toggle) with country rows showing rank, name, production figure, checkbox - Right canvas: metric segment tabs, selected-country chips (colored), Chart.js line chart with dark espresso tooltip, and a JS-built rankings table with proportional colored bars (latest year) - Smooth fade-in animations, monospaced figures, copper accent palette Co-Authored-By: Claude Sonnet 4.6 --- .../dashboard/templates/countries.html | 904 ++++++++++++++++-- 1 file changed, 824 insertions(+), 80 deletions(-) diff --git a/web/src/beanflows/dashboard/templates/countries.html b/web/src/beanflows/dashboard/templates/countries.html index 97dc023..379da27 100644 --- a/web/src/beanflows/dashboard/templates/countries.html +++ b/web/src/beanflows/dashboard/templates/countries.html @@ -4,116 +4,860 @@ {% block head %} + {% endblock %} {% block content %} - -
-

Country Comparison

-

Compare coffee metrics across producing and consuming countries.

-
- -
-
-
-
- - -
-
- - + + + +
+ + + +
+
+

Origin Intelligence

+

Compare coffee metrics across {{ all_countries|length }} producing & consuming nations

+
+
+
{{ all_countries|length }}
+
Countries tracked
+
+
+ + +
+
+ {% for m in ["production", "exports", "imports", "ending_stocks"] %} + + {% endfor %} +
+ + {% if selected_codes %} + Showing {{ selected_codes|length }} {{ "country" if selected_codes|length == 1 else "countries" }} + {% else %} + Select countries to compare + {% endif %} + +
+ + +
+ + +
+
+ Origins + {{ selected_codes|length }}/10 +
+
+ +
+
+ {% for c in all_countries %} +
+ {{ loop.index }} + {{ c.country_name }} + {{ "{:,.0f}".format(c.production) if c.production else "" }} +
+ + +
- + {% endfor %} +
+
+ + +
- - {% if comparison_data %} -
- + +
+ + +
+ {% if selected_codes %} + {% for code in selected_codes %} + {% set country = all_countries | selectattr("country_code", "equalto", code) | first %} + {% if country %} + + {{ country.country_name }} + × + + {% endif %} + {% endfor %} + {% else %} + No countries selected + {% endif %} +
+ + + {% if comparison_data %} + +
+
+
+
{{ metric.replace("_"," ").title() }} Over Time
+
USDA WASDE · 1000 60-kg bags · click legend to toggle
+
+ 1k bags +
+
+ +
+
+ +
+ + {% else %} + +
+
+ + + + + + +
+
Select Origins to Compare
+

Choose up to 10 coffee-producing countries from the panel on the left to visualize production, trade flows, and inventory trends.

+
+ + {% endif %}
- {% else %} -
- Select countries above to see the comparison chart. -
- {% endif %} +
{% endblock %} {% block scripts %}