Add bounty pool chart to watchlist#1169
Conversation
There was a problem hiding this comment.
Pull request overview
Adds feature parity to Watchlist → Bounties by introducing a chart visibility toggle and rendering a “Bounty Pool by Repository” bar chart based on the currently filtered watched bounties, with accompanying aggregation utilities and tests.
Changes:
- Added
buildBountyPoolByRepositoryRowsutility to aggregate/sort/limit bounty totals by repository. - Added Vitest coverage for aggregation behavior (totals, sorting, limiting, invalid amounts).
- Updated
WatchlistPagebounties tab to include a Chart toggle and ECharts bar chart rendering.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/utils/bountyPoolByRepository.ts |
New utility to compute bounty-pool totals grouped by repository for charting. |
src/tests/bountyPoolByRepository.test.ts |
New unit tests covering repository aggregation, sorting, limiting, and invalid inputs. |
src/pages/WatchlistPage.tsx |
Adds chart toggle + chart rendering to Watchlist → Bounties using the new aggregation utility. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Box | ||
| sx={{ | ||
| p: 2, | ||
| borderBottom: '1px solid', | ||
| borderColor: 'border.light', | ||
| height: '500px', | ||
| backgroundColor: 'surface.subtle', | ||
| }} | ||
| > | ||
| {showChart && filtered.length > 0 ? ( | ||
| <ReactECharts | ||
| option={chartOption} | ||
| style={{ height: '100%', width: '100%' }} | ||
| notMerge | ||
| /> | ||
| ) : ( | ||
| <Box | ||
| sx={{ | ||
| height: '100%', | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }} | ||
| > | ||
| <Typography sx={{ color: 'text.secondary', fontSize: '0.85rem' }}> | ||
| No watched bounties found. | ||
| </Typography> | ||
| </Box> | ||
| )} | ||
| </Box> |
| const parseBountyAmount = (value: string | null | undefined): number => { | ||
| const parsed = Number.parseFloat(value ?? '0'); | ||
| return Number.isFinite(parsed) ? parsed : 0; | ||
| }; |
|
Updated to address the automated review feedback. Bounty amount parsing is now shared through src/utils/bountyAmount.ts, and the collapsed chart area no longer renders the empty state while hidden.\n\nRe-verified after this update:\n- npm test -- --run src/tests/bountyPoolByRepository.test.ts\n- npm run lint\n- npm run format:check\n- npm run build |
Summary
Related Issues
Fixes #1018
Type of Change
Screenshots
Before screenshots are in #1018. After verification was completed in the in-app browser with real test API data: added 3 bounties to Watchlist > Bounties, opened Options > Chart, observed the toggle switch to Hide Chart, and confirmed a visible ECharts canvas was mounted. The local browser screenshot command timed out during capture, so I am leaving the verification details here rather than attaching a stale/generated image.
Verification
npm test -- --run src/tests/bountyPoolByRepository.test.tsnpm run lintnpm run format:checknpm run buildhttps://test-api.gittensor.ioChecklist
npm run formatandnpm run lint:fixhave been run where applicable by the commit hook;npm run format:checkandnpm run lintpassnpm run buildpasses