Skip to content

Xp history chart sparkline on agent detail page using 7 day xp snapshots #424

Open
clintjeff2 wants to merge 2 commits into
Bitcoindefi:mainfrom
clintjeff2:XP-history-chart-sparkline-on-agent-detail-page-using-7-day-XP-snapshots-#194
Open

Xp history chart sparkline on agent detail page using 7 day xp snapshots #424
clintjeff2 wants to merge 2 commits into
Bitcoindefi:mainfrom
clintjeff2:XP-history-chart-sparkline-on-agent-detail-page-using-7-day-XP-snapshots-#194

Conversation

@clintjeff2

Copy link
Copy Markdown
Contributor

Motivation

  • Provide a compact visual of recent XP growth on the agent detail page using the persisted XP history endpoint.
  • Show daily earned XP over the last 7 days (pad with zeros when history is shorter), current level, total XP, and progress to the next level.
  • Use a lightweight approach (small helper + SVG sparkline) to avoid pulling a new chart dependency and to prevent layout shift by reserving fixed height.

Description

  • Add lib/agents/xp-history-chart.ts with buildSevenDayXpSnapshots(events, now) to aggregate earned XP into seven UTC daily snapshots and getLevelProgress(totalXp, level) to compute bounded progress percentages.
  • Update app/agents/[id]/page.tsx to fetch GET /api/agents/[id]/xp/history, derive totalXp, level, xpToNext, compute snapshots and progress, and render an XP Growth card with a level Badge, total XP, XP-to-next display, a progress bar, and a fixed-height SVG XpSparkline.
  • Implement the sparkline as an inline SVG that renders seven labeled points, an area fill, and tooltips, ignoring decay events when aggregating "earned" XP.
  • Add unit tests lib/agents/xp-history-chart.test.ts covering padding for <7 days, exactly 7-day aggregation, decay-event exclusion, and bounded progress calculation.

Testing

  • Ran ESLint on the changed files with npx eslint 'app/agents/[id]/page.tsx' lib/agents/xp-history-chart.ts lib/agents/xp-history-chart.test.ts and addressed a single unused-import warning.
  • Ran unit tests with npm test -- --run lib/agents/xp-history-chart.test.ts and all tests passed (3 tests).
  • Attempted production build with npm run build which failed in this environment because Next failed to fetch Google Fonts from fonts.googleapis.com.
  • Ran type check npx tsc --noEmit which failed in this environment due to existing missing type dependencies (lru-cache, @wagmi/connectors).

Closes #194

@sonarqubecloud

Copy link
Copy Markdown

@clintjeff2

Copy link
Copy Markdown
Contributor Author

@leocagli, review and merge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

XP history chart: sparkline on agent detail page using 7-day XP snapshots

1 participant