From cf74b06b4a336bdeb84d9f9362597d45cce60968 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Mon, 4 May 2026 21:22:47 +0200
Subject: [PATCH] fix: use pixel bar heights and show avg rating values in
 trends chart

---
 crates/adapters/template-askama/src/lib.rs             | 8 ++++----
 crates/adapters/template-askama/templates/profile.html | 3 ++-
 static/style.css                                       | 6 +++---
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/crates/adapters/template-askama/src/lib.rs b/crates/adapters/template-askama/src/lib.rs
index 1718ca0..9c1b36c 100644
--- a/crates/adapters/template-askama/src/lib.rs
+++ b/crates/adapters/template-askama/src/lib.rs
@@ -59,7 +59,7 @@ struct UsersTemplate<'a> {
 
 struct MonthlyRatingRow<'a> {
     rating: &'a MonthlyRating,
-    bar_height_pct: i64,
+    bar_height_px: i64,
 }
 
 #[derive(Template)]
@@ -125,8 +125,8 @@ fn build_heatmap(history: &[MonthActivity]) -> Vec<HeatmapCell> {
     }).collect()
 }
 
-fn bar_height_pct(avg_rating: f64) -> i64 {
-    (avg_rating / 5.0 * 100.0) as i64
+fn bar_height_px(avg_rating: f64) -> i64 {
+    (avg_rating / 5.0 * 60.0) as i64
 }
 
 pub struct AskamaHtmlRenderer;
@@ -207,7 +207,7 @@ impl HtmlRenderer for AskamaHtmlRenderer {
             .split('@').next().unwrap_or(&data.profile_user_email).to_string();
         let monthly_rating_rows: Vec<MonthlyRatingRow<'_>> = data.trends.as_ref()
             .map(|t| t.monthly_ratings.iter().map(|r| MonthlyRatingRow {
-                bar_height_pct: bar_height_pct(r.avg_rating),
+                bar_height_px: bar_height_px(r.avg_rating),
                 rating: r,
             }).collect())
             .unwrap_or_default();
diff --git a/crates/adapters/template-askama/templates/profile.html b/crates/adapters/template-askama/templates/profile.html
index 9a942b2..c7a5aab 100644
--- a/crates/adapters/template-askama/templates/profile.html
+++ b/crates/adapters/template-askama/templates/profile.html
@@ -81,7 +81,8 @@
       <div class="bar-chart">
         {% for row in monthly_rating_rows %}
         <div class="bar-col">
-          <div class="bar-fill" style="height: {{ row.bar_height_pct }}%"></div>
+          <div class="bar-value">{{ "{:.1}"|format(row.rating.avg_rating) }}</div>
+          <div class="bar-fill" style="height: {{ row.bar_height_px }}px"></div>
           <div class="bar-month">{{ row.rating.month_label }}</div>
         </div>
         {% endfor %}
diff --git a/static/style.css b/static/style.css
index 17d635e..c3f5dbb 100644
--- a/static/style.css
+++ b/static/style.css
@@ -490,10 +490,10 @@ form button[type="submit"]:hover {
   display: flex;
   align-items: flex-end;
   gap: 4px;
-  height: 80px;
 }
-.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
-.bar-fill { width: 100%; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 4px; opacity: 0.8; }
+.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
+.bar-value { font-size: 0.6rem; color: var(--primary); opacity: 0.9; line-height: 1; }
+.bar-fill { width: 100%; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 3px; opacity: 0.8; }
 .bar-month { font-size: 0.65rem; opacity: 0.5; }
 
 .director-chart { display: flex; flex-direction: column; gap: 6px; }