Split activity-charts.tsx into per-chart component files - #913
Merged
Conversation
activity-charts.tsx was a 493-line compound-component file holding four independent exports plus shared helpers and chart config. Split it: - activity-chart-utils.ts (79) — formatBucketLabel, msToMinutes, shortModelName, fillGaps join the existing formatDate - activity-status-chart.tsx (120) — DailyStackedBarChart + status config - activity-token-chart.tsx (180) — DailyTokenChart + token config - activity-breakdowns.tsx (140) — HorizontalBar, ModelBreakdown, ProjectBreakdown Pure structural move; activity-pane.tsx is the sole consumer and its import block is updated in place. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
apps/web/src/components/app/activity-charts.tsxwas a 493-line compound-component file: four independently-exported components, two chart config objects, and five module-level helpers all in one place. This splits it along its natural seams.New structure
activity-chart-utils.tsformatDate(already there) +formatBucketLabel,msToMinutes,shortModelName,fillGapsactivity-status-chart.tsxDailyStackedBarChart,STATUS_ORDER,chartConfigactivity-token-chart.tsxDailyTokenChart,TOKEN_ORDER,tokenChartConfig,EMPTY_TOKEN_ENTRYactivity-breakdowns.tsxHorizontalBar(private),ModelBreakdown,ProjectBreakdownactivity-charts.tsxis deleted rather than kept as a barrel —activity-pane.tsxis the sole consumer, so its import block is updated in place. Naming follows the existingactivity-heatmaps.tsx/activity-chart-utils.tssiblings.Why it was a candidate
Queued as
next_focusby the previous componentizer run (#883). It matched the long-standing "chart code inlined" pattern in the Brain: recharts config, data transformation, and formatting helpers kept alongside the components. All four exports were already stateless and independent, so this was a low-risk compound-component split.Behavior
Purely structural — every moved function and JSX block is byte-identical apart from
exportkeywords and import paths. No component boundaries were introduced inside the render trees, so no new state lifetimes or effect-ordering changes (the two hazards recorded in the Brain patterns list from PRs #803 and #870).Validation
pnpm run finalize:web— tsc + production build greenpnpm run test:e2e— 178 passed/activity/metricsrenders the token chart, both breakdowns, and the status breakdown identically; hover-tooltips verified on both charts (status tooltip showsformatDurationvalues, token tooltip shows per-series counts + Total row)Next run
brains-pane.tsx(482 lines, six components in one file) is queued asnext_focus.🤖 Generated with Claude Code