refactor(stats): reorder trends sections and move library summary to end

Move pattern graphs (day-of-week, hour) into the Activity section,
promote Library — Cumulative above Library — Summary, and place the
summary table last since it is data rather than a trend visualization.
This commit is contained in:
2026-04-10 02:02:45 -07:00
parent 7e355dbac6
commit 233591435d

View File

@@ -114,14 +114,7 @@ export function TrendsTab() {
if (error) return <div className="text-ctp-red p-4">Error: {error}</div>; if (error) return <div className="text-ctp-red p-4">Error: {error}</div>;
if (!data) return null; if (!data) return null;
const librarySummaryAsPoints = data.librarySummary.map((row) => ({
epochDay: 0,
animeTitle: row.title,
value: row.watchTimeMin,
}));
const animeTitles = buildAnimeVisibilityOptions([ const animeTitles = buildAnimeVisibilityOptions([
librarySummaryAsPoints,
data.animeCumulative.episodes, data.animeCumulative.episodes,
data.animeCumulative.cards, data.animeCumulative.cards,
data.animeCumulative.words, data.animeCumulative.words,
@@ -170,6 +163,18 @@ export function TrendsTab() {
/> />
<TrendChart title="Words Seen" data={data.activity.words} color="#8bd5ca" type="bar" /> <TrendChart title="Words Seen" data={data.activity.words} color="#8bd5ca" type="bar" />
<TrendChart title="Sessions" data={data.activity.sessions} color="#b7bdf8" type="bar" /> <TrendChart title="Sessions" data={data.activity.sessions} color="#b7bdf8" type="bar" />
<TrendChart
title="Watch Time by Day of Week (min)"
data={data.patterns.watchTimeByDayOfWeek}
color="#8aadf4"
type="bar"
/>
<TrendChart
title="Watch Time by Hour (min)"
data={data.patterns.watchTimeByHour}
color="#c6a0f6"
type="bar"
/>
<SectionHeader>Period Trends</SectionHeader> <SectionHeader>Period Trends</SectionHeader>
<TrendChart <TrendChart
@@ -206,7 +211,7 @@ export function TrendsTab() {
type="line" type="line"
/> />
<SectionHeader>Library Summary</SectionHeader> <SectionHeader>Library Cumulative</SectionHeader>
<AnimeVisibilityFilter <AnimeVisibilityFilter
animeTitles={animeTitles} animeTitles={animeTitles}
hiddenAnime={activeHiddenAnime} hiddenAnime={activeHiddenAnime}
@@ -224,9 +229,6 @@ export function TrendsTab() {
}) })
} }
/> />
<LibrarySummarySection rows={data.librarySummary} hiddenTitles={activeHiddenAnime} />
<SectionHeader>Library Cumulative</SectionHeader>
<StackedTrendChart title="Watch Time Progress (min)" data={filteredWatchTimeProgress} /> <StackedTrendChart title="Watch Time Progress (min)" data={filteredWatchTimeProgress} />
<StackedTrendChart title="Episodes Progress" data={filteredAnimeProgress} /> <StackedTrendChart title="Episodes Progress" data={filteredAnimeProgress} />
<StackedTrendChart <StackedTrendChart
@@ -236,19 +238,8 @@ export function TrendsTab() {
/> />
<StackedTrendChart title="Words Seen Progress" data={filteredWordsProgress} /> <StackedTrendChart title="Words Seen Progress" data={filteredWordsProgress} />
<SectionHeader>Patterns</SectionHeader> <SectionHeader>Library Summary</SectionHeader>
<TrendChart <LibrarySummarySection rows={data.librarySummary} hiddenTitles={activeHiddenAnime} />
title="Watch Time by Day of Week (min)"
data={data.patterns.watchTimeByDayOfWeek}
color="#8aadf4"
type="bar"
/>
<TrendChart
title="Watch Time by Hour (min)"
data={data.patterns.watchTimeByHour}
color="#c6a0f6"
type="bar"
/>
</div> </div>
</div> </div>
); );