Illustrate monthly reports and add viewing pattern breakdowns

2026-09-13 22:21:02 +12:00
parent e232335ca9
commit c194db167a
8 changed files with 133 additions and 18 deletions
@@ -151,8 +151,19 @@ export default function MonthlyReportsPage() {
          <div className="stats-highlight"><span className="stats-highlight-number">{data.daily?.length ? number(summary.minutes / data.daily.length) : 0}<small> min</small></span><div><strong>Daily average</strong><p>Across the calendar days in this report.</p></div></div>
        </section>
      </div>
+      {data.patterns && <>
+        <section className="report-pattern-summary" aria-label="Viewing insights">
+          <article><span>Average play</span><strong>{decimal(data.patterns.average_play_minutes)} <small>min</small></strong><p>Time per recorded playback session.</p></article>
+          <article><span>Longest play</span><strong>{decimal(data.patterns.longest_play_minutes)} <small>min</small></strong><p>Your longest recorded session this month.</p></article>
+          <article><span>Weekend viewing</span><strong>{decimal(data.patterns.weekend_percent)}<small>%</small></strong><p>Share of viewing on Saturday and Sunday (UTC).</p></article>
+        </section>
+        <div className="stats-main-grid">
+          <BreakdownCard title="Your week in viewing (UTC)" rows={data.patterns.weekdays} />
+          <BreakdownCard title="Movies, TV and more" rows={data.patterns.media} />
+        </div>
+      </>}
      <div className="stats-three-grid">
-        <section className="stats-panel"><div className="stats-panel-heading"><h2>Most watched</h2><span className="stats-unit">By minutes</span></div>{data.top_titles?.length ? <ol className="stats-top-titles report-top-titles">{data.top_titles.map((title, index) => <li key={`${title.title}-${index}`}><div><strong>{title.title}</strong><small>{title.type === 'series' ? 'TV series' : title.type === 'movie' ? 'Movie' : 'Other media'} · {title.plays} plays</small></div><span>{number(title.minutes)}<small>min</small></span></li>)}</ol> : <p className="stats-muted">Your most watched titles will appear here.</p>}</section>
+        <section className="stats-panel"><div className="stats-panel-heading"><h2>Most watched</h2><span className="stats-unit">By minutes</span></div>{data.top_titles?.length ? <ol className="stats-top-titles report-top-titles">{data.top_titles.map((title, index) => <li key={`${title.title}-${index}`}><RecentArtwork url={title.artwork_url} type={title.type} /><div><strong>{title.title}</strong><small>{title.type === 'series' ? 'TV series' : title.type === 'movie' ? 'Movie' : 'Other media'} · {title.plays} plays</small></div><span>{number(title.minutes)}<small>min</small></span></li>)}</ol> : <p className="stats-muted">Your most watched titles will appear here.</p>}</section>
        <BreakdownCard title="Your players" rows={data.clients ?? []} />
        <StreamingCard rows={data.methods ?? []} transcoding={data.transcoding} />
      </div>