GKaszewski/movies-diary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use pixel bar heights and show avg rating values in trends chart

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-05-04 21:22:47 +02:00
parent 317898d51b
commit cf74b06b4a
3 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
crates/adapters/template-askama/src/lib.rs
View File

@@ -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();

3
crates/adapters/template-askama/templates/profile.html
View File

@@ -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 %}

6
static/style.css
View File

@@ -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; }