feat: add pie charts for Content Agent usage#25
feat: add pie charts for Content Agent usage#25recoup-coding-agent wants to merge 2 commits intomainfrom
Conversation
Add reusable AdminPieChart component using Recharts PieChart with donut style. Add two pie charts to the Content Agent page showing who triggered the content agent most and which templates are used most. Co-Authored-By: Paperclip <noreply@paperclip.ing> Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (2)
📝 WalkthroughWalkthroughA new pie chart visualization feature is introduced to display tag distributions by user in the Content Slack page. This includes a reusable Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~35 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
lib/contentSlack/getTagsByUser.ts (1)
8-19: Consider extracting shared aggregation logic.This function and
getTagsByTemplateshare identical aggregation mechanics—only the key extraction differs. You could DRY this up with a generic helper:function aggregateBy<T>( items: T[], keyFn: (item: T) => string, ): PieChartSlice[] { const counts = new Map<string, number>(); for (const item of items) { const key = keyFn(item); counts.set(key, (counts.get(key) ?? 0) + 1); } return Array.from(counts.entries()) .map(([name, value]) => ({ name, value })) .sort((a, b) => b.value - a.value); }Then both helpers become one-liners. This is optional—the current duplication is minimal and both functions are clear.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@lib/contentSlack/getTagsByUser.ts` around lines 8 - 19, Extract the shared aggregation logic used in getTagsByUser and getTagsByTemplate into a generic helper (e.g., aggregateBy) that accepts items and a keyFn to produce PieChartSlice[]; replace the loop/counting/sorting in getTagsByUser and getTagsByTemplate by calling aggregateBy(tags, t => t.user_name ?? "Unknown") and aggregateBy(tags, t => t.template_name ?? "Unknown") respectively so both become one-line wrappers around the new aggregateBy function which returns the sorted {name, value} slices.components/Admin/AdminPieChart.tsx (1)
62-67: Key relies onslice.nameuniqueness.Using
slice.nameas the React key assumes all slice names are unique. This holds for the current callers (getTagsByUser/getTagsByTemplate) since they aggregate viaMap, but the component API doesn't enforce this. If a future caller passes duplicate names, React will warn and rendering may be incorrect.Consider adding an index fallback or documenting the uniqueness requirement:
♻️ Optional: safer key
{data.map((slice, i) => ( <Cell - key={slice.name} + key={`${slice.name}-${i}`} fill={COLORS[i % COLORS.length]} /> ))}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/Admin/AdminPieChart.tsx` around lines 62 - 67, The React key for each Cell in AdminPieChart currently uses slice.name which assumes uniqueness; update the key generation in the data.map callback used to render <Cell> (in AdminPieChart) to include an index fallback (e.g., combine slice.name with the loop index or use index when name is falsy) so keys are stable and unique even if callers supply duplicate or missing names, and optionally add a short prop comment in AdminPieChart’s API noting that slice.name should be unique when possible.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@components/Admin/AdminPieChart.tsx`:
- Around line 62-67: The React key for each Cell in AdminPieChart currently uses
slice.name which assumes uniqueness; update the key generation in the data.map
callback used to render <Cell> (in AdminPieChart) to include an index fallback
(e.g., combine slice.name with the loop index or use index when name is falsy)
so keys are stable and unique even if callers supply duplicate or missing names,
and optionally add a short prop comment in AdminPieChart’s API noting that
slice.name should be unique when possible.
In `@lib/contentSlack/getTagsByUser.ts`:
- Around line 8-19: Extract the shared aggregation logic used in getTagsByUser
and getTagsByTemplate into a generic helper (e.g., aggregateBy) that accepts
items and a keyFn to produce PieChartSlice[]; replace the loop/counting/sorting
in getTagsByUser and getTagsByTemplate by calling aggregateBy(tags, t =>
t.user_name ?? "Unknown") and aggregateBy(tags, t => t.template_name ??
"Unknown") respectively so both become one-line wrappers around the new
aggregateBy function which returns the sorted {name, value} slices.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 7a6b116e-7b9e-4ee8-8c15-17f535c2a7f5
📒 Files selected for processing (4)
components/Admin/AdminPieChart.tsxcomponents/ContentSlack/ContentSlackPage.tsxlib/contentSlack/getTagsByTemplate.tslib/contentSlack/getTagsByUser.ts
- Remove Tags by Template pie chart and getTagsByTemplate util - Add PieChartSkeleton with circular placeholder for loading state - Single pie chart no longer needs 2-column grid Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2 participants
Summary
AdminPieChartcomponent (components/Admin/AdminPieChart.tsx) using Recharts PieChart with donut style, legend, and tooltipsgetTagsByUserandgetTagsByTemplateto aggregate content slack tags for pie chart displayPieChart,Pie, andCellcomponentsTest plan
/contentpage when tags data is availableCloses REC-44
🤖 Generated with Claude Code
Summary by CodeRabbit