From 22c80fd7af43cd8c2e94a9cffd1efcab15363296 Mon Sep 17 00:00:00 2001
From: rob thijssen <grenade@rob.tn>
Date: Mon, 11 May 2026 16:02:30 +0300
Subject: [PATCH] feat(ui): transpose weekday averages to vertical bar chart

Show days on the X axis and volume on the Y axis, replacing the
horizontal bar layout with vertical bars for a more natural
time-series reading direction.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/components/ContributionStats.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/ContributionStats.tsx b/ui/src/components/ContributionStats.tsx
index 897a595..6b910e2 100644
--- a/ui/src/components/ContributionStats.tsx
+++ b/ui/src/components/ContributionStats.tsx
@@ -120,22 +120,21 @@ export function ContributionStats() {
         </div>
         <div className="mt-1">
           <span style={{ opacity: 0.7, fontSize: '0.75rem' }}>avg by weekday</span>
-          <div className="d-flex flex-column gap-1 mt-1">
+          <div className="d-flex align-items-end gap-1 mt-1" style={{ height: 64 }}>
             {stats.dayAvgs.map(({ name, avg }) => (
-              <div key={name} className="d-flex align-items-center gap-2" style={{ fontSize: '0.75rem' }}>
-                <span style={{ width: 24, textAlign: 'right', opacity: 0.7 }}>{name}</span>
-                <div style={{ flex: 1, height: 8, borderRadius: 3, background: 'rgba(255,255,255,0.05)' }}>
+              <div key={name} className="d-flex flex-column align-items-center" style={{ flex: 1, height: '100%', justifyContent: 'flex-end' }}>
+                <span style={{ fontSize: '0.65rem', opacity: 0.6, marginBottom: 2 }}>{avg.toFixed(1)}</span>
+                <div style={{ width: '100%', maxWidth: 20, borderRadius: 3, background: 'rgba(255,255,255,0.05)', flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
                   <div
                     style={{
-                      width: stats.maxAvg > 0 ? `${(avg / stats.maxAvg) * 100}%` : '0%',
-                      height: '100%',
+                      height: stats.maxAvg > 0 ? `${(avg / stats.maxAvg) * 100}%` : '0%',
                       borderRadius: 3,
                       backgroundColor: '#39d353',
                       opacity: 0.7,
                     }}
                   />
                 </div>
-                <span style={{ width: 28, textAlign: 'right', opacity: 0.6 }}>{avg.toFixed(1)}</span>
+                <span style={{ fontSize: '0.65rem', opacity: 0.7, marginTop: 2 }}>{name}</span>
               </div>
             ))}
           </div>