Label the plays-per-day bars with their weekday

Fourteen bars and fourteen counts don't say which day is which, so the shape of a week - quiet Tuesday, busy weekend - isn't readable without hovering each column for its title. The abbreviation is invariant rather than the request's culture: the rest of the page is English, and a per-visitor abbreviation would change how wide the column has to be. It clips rather than wraps, since three letters over two lines would push the bars up and misalign every column; at 375px the column is 22px and "Wed" needs exactly that, so there is nothing to clip yet. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

author
Marijn Besseling <njirambem@gmail.com> · 2026-09-07 15:44 UTC
commit
49a27c0aeb09b65b6252d881865dde3d52e5fc9a
parent
ea0421a981
tree
browse at this commit

3 files changed +20 -1

Blog/Components/Pages/Rvrb.razor +1 -0
Blog/Components/Pages/Rvrb.razor.cs +8 -0
Blog/wwwroot/app.css +11 -1

Blog/Components/Pages/Rvrb.razor +1 -0

@@ -143,6 +143,7 @@
143 143 <li title="@BarTitle(day)">
144 144 <span class="bar" style="block-size: @(BarHeight(day.Plays))%"></span>
145 145 <span class="bar-label">@day.Plays</span>
146 + <span class="bar-day">@DayLabel(day)</span>
146 147 </li>
147 148 }
148 149 </ol>

Blog/Components/Pages/Rvrb.razor.cs +8 -0

@@ -1,3 +1,4 @@
1 +using System.Globalization;
1 2 using Blog.Models;
2 3 using Blog.Services;
3 4 using Microsoft.AspNetCore.Components;
@@ -50,6 +51,13 @@ public partial class Rvrb : ComponentBase
50 51 private static string BarTitle(RvrbDay day) => $"{day.Date:yyyy-MM-dd}: {day.Plays} plays";
51 52
52 53 /// <summary>
54 + /// The weekday under a bar, so a fortnight of counts reads as weeks rather than as a row of
55 + /// numbers. Invariant rather than the request's culture: the rest of the page is in English,
56 + /// and a per-visitor abbreviation would change how wide the column has to be.
57 + /// </summary>
58 + private static string DayLabel(RvrbDay day) => day.Date.ToString("ddd", CultureInfo.InvariantCulture);
59 +
60 + /// <summary>
53 61 /// A day's bar height as a percentage of the busiest day in the window, floored at something
54 62 /// visible so a day with one play doesn't render as nothing at all.
55 63 /// </summary>

Blog/wwwroot/app.css +11 -1

@@ -640,11 +640,21 @@ progress {
640 640 background-color: var(--color);
641 641 }
642 642
643 -.bars .bar-label {
643 +.bars :is(.bar-label, .bar-day) {
644 644 font-size: 0.7em;
645 645 opacity: 60%;
646 646 }
647 647
648 +/* Two weeks of columns in one text column: the day has to give way before the
649 + count does, since the count is the number and the day is the axis. */
650 +.bars .bar-day {
651 + overflow: hidden;
652 + max-inline-size: 100%;
653 + /* Clipped rather than wrapped: three letters over two lines would push the
654 + bars up and misalign every column. */
655 + white-space: nowrap;
656 +}
657 +
648 658
649 659 /* -- Storage ------------------------------------------------------------- */
650 660