[loggi-d7a] Improve stats grid layout & reduce default-visible charts #112

New issue

Closed

opened 2026-02-21 17:59:07 +01:00 by matthias · 0 comments

matthias commented

2026-02-21 17:59:07 +01:00

Owner

Bead ID: loggi-d7a
Type: task
Priority: P2
Status: closed
Close reason: Implemented responsive 2-column grid layout (sm:grid-cols-2) with full-width (sm:col-span-2) for summary/heatmap/trend charts and half-width for hourly/weekday. Reduced default-visible charts: Daily Activity, Time of Day, Day of Week now hidden by default. Added size property to PLOT_REGISTRY for card sizing. Fixed Dockerfile to include JS files in Tailwind content scan.

Why

The stats grid is single-column (grid-cols-1), wasting space on tablet/desktop. All 9 charts default to visible, which overwhelms users on first visit.

What

Layout changes

Change #statsGrid from grid-cols-1 to responsive: grid grid-cols-1 sm:grid-cols-2 gap-4
Summary card and heatmap card should span full width (sm:col-span-2) since they need the horizontal space
Smaller charts (hourly, weekday, future histograms) pair up naturally at 2-per-row
Ensure chart containers resize correctly — Chart.js maintainAspectRatio: false + responsive: true already set

Default visibility changes

Update PLOT_REGISTRY in stats.js:

defaultVisible: true — Summary, Calendar Heatmap, Duration (timerange), Session Trend (timerange), Frequency Trend (timepoint), Writing Activity (diary)
defaultVisible: false — Daily Activity, Time of Day, Day of Week

Card sizing

Add data-plot-size attribute or a size map so renderStatsGrid() can assign sm:col-span-2 to full-width cards
Full-width: summary, heatmap, daily, duration, sessions, frequency, writing
Half-width: hourly, weekday (and future distribution charts)

Where

app/templates/entry.html — grid classes on #statsGrid
app/static/js/stats.js — PLOT_REGISTRY defaults, renderStatsGrid() card sizing logic

Acceptance criteria

Grid shows 2 columns on sm:+ screens
Summary and heatmap always span full width
Hourly + weekday sit side-by-side when both visible
Only 3–4 charts visible by default per entry type
Existing localStorage prefs still respected (only new users get new defaults)
No layout breakage on mobile (still single column)

**Bead ID:** `loggi-d7a` **Type:** task **Priority:** P2 **Status:** closed **Close reason:** Implemented responsive 2-column grid layout (sm:grid-cols-2) with full-width (sm:col-span-2) for summary/heatmap/trend charts and half-width for hourly/weekday. Reduced default-visible charts: Daily Activity, Time of Day, Day of Week now hidden by default. Added size property to PLOT_REGISTRY for card sizing. Fixed Dockerfile to include JS files in Tailwind content scan. --- ## Why The stats grid is single-column (`grid-cols-1`), wasting space on tablet/desktop. All 9 charts default to visible, which overwhelms users on first visit. ## What ### Layout changes - Change `#statsGrid` from `grid-cols-1` to responsive: `grid grid-cols-1 sm:grid-cols-2 gap-4` - Summary card and heatmap card should span full width (`sm:col-span-2`) since they need the horizontal space - Smaller charts (hourly, weekday, future histograms) pair up naturally at 2-per-row - Ensure chart containers resize correctly — Chart.js `maintainAspectRatio: false` + `responsive: true` already set ### Default visibility changes Update `PLOT_REGISTRY` in `stats.js`: - `defaultVisible: true` — Summary, Calendar Heatmap, Duration (timerange), Session Trend (timerange), Frequency Trend (timepoint), Writing Activity (diary) - `defaultVisible: false` — Daily Activity, Time of Day, Day of Week ### Card sizing - Add `data-plot-size` attribute or a size map so `renderStatsGrid()` can assign `sm:col-span-2` to full-width cards - Full-width: summary, heatmap, daily, duration, sessions, frequency, writing - Half-width: hourly, weekday (and future distribution charts) ## Where - `app/templates/entry.html` — grid classes on `#statsGrid` - `app/static/js/stats.js` — `PLOT_REGISTRY` defaults, `renderStatsGrid()` card sizing logic ## Acceptance criteria - Grid shows 2 columns on `sm:`+ screens - Summary and heatmap always span full width - Hourly + weekday sit side-by-side when both visible - Only 3–4 charts visible by default per entry type - Existing `localStorage` prefs still respected (only new users get new defaults) - No layout breakage on mobile (still single column)

matthias closed this issue

2026-02-21 18:25:30 +01:00

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

matthias/loggi#112

No description provided.

Rows
Columns