feat: shadcn piechart and group as "Others"

[adityathebe]

Summary by CodeRabbit

• Improvements
  • Pie chart legends now display more compactly when handling large datasets, aggregating additional items into an "others" category
  • Enhanced data parsing with improved handling of missing or invalid values

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
aws-preview	Ready	Preview	Dec 24, 2025 1:25pm
flanksource-ui	Ready	Preview	Dec 24, 2025 1:25pm

[coderabbitai]

Walkthrough

PieChartPanel component refactored to introduce memoized data processing, enhanced color resolution logic, and bucketing of excess slices into an "others" category. The chart rendering migrated from ResponsiveContainer to ChartContainer with updated tooltip and legend components. Function signature of generatePieChartData extended with maxSlices parameter.

Changes

Cohort / File(s)

Summary

Pie Chart Panel Refactoring src/pages/audit-report/components/View/panels/PieChartPanel.tsx

Refactored data processing with memoization; updated generatePieChartData signature to accept maxSlices (default 6) and implement legend bucketing for excess entries. Enhanced color resolution via customColors, semantic coloring, and COLOR_PALETTE fallback. Migrated from ResponsiveContainer to ChartContainer and replaced Tooltip/Legend with chart component-based equivalents (ChartTooltip/ChartLegend).

Possibly related PRs

• fix/improve heuristics coloring #2716: Directly modifies PieChartPanel's pie-chart data and color logic, introducing COLOR_PALETTE and severity-based color resolution used in the refactored generatePieChartData function.
• fix: piechart colors #2725: Expands severity categories and color palettes (including "unknown" color support), complementing the enhanced color handling logic in PieChartPanel's refactored color resolution.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main changes: introducing shadcn pie chart and implementing 'Others' grouping for items exceeding maxSlices.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/shadcn-piechart

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[netlify]

❌ Deploy Preview for flanksource-demo-stable failed. Why did it fail? →

Name	Link
🔨 Latest commit	2c0445a
🔍 Latest deploy log	https://app.netlify.com/projects/flanksource-demo-stable/deploys/694be911b355d50008876a18

[netlify]

❌ Deploy Preview for clerk-saas-ui failed. Why did it fail? →

Name	Link
🔨 Latest commit	2c0445a
🔍 Latest deploy log	https://app.netlify.com/projects/clerk-saas-ui/deploys/694be911e373a50007bb24ff

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

src/pages/audit-report/components/View/panels/PieChartPanel.tsx (2)

54-73: Edge case: maxSlices = 1 produces 2 slices.

When maxSlices is 1, the logic keeps 1 slice and adds "others", resulting in 2 total slices. If maxSlices is intended to be the exact maximum count including "others", consider adjusting:

-  const keep = sorted.slice(0, Math.max(maxSlices - 1, 1));
+  const keep = sorted.slice(0, maxSlices - 1);

However, if the intent is "at least 1 real slice + others", the current behavior is fine. Worth clarifying the expected behavior for edge cases.

---

89-91: Consider passing maxSlices as a configurable prop.

The maxSlices parameter defaults to 6 in generatePieChartData, but it's not exposed as a prop on PieChartPanel. If this should be configurable per chart instance (e.g., via summary.piechart?.maxSlices), consider wiring it through.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c1ad8eb and 2c0445a.

📒 Files selected for processing (1)

• src/pages/audit-report/components/View/panels/PieChartPanel.tsx

🔇 Additional comments (3)

src/pages/audit-report/components/View/panels/PieChartPanel.tsx (3)

1-12: LGTM!

The imports are well-organized and align with the refactored component's use of shadcn chart components.

---

26-52: LGTM!

The data transformation logic is solid:

• Safe numeric parsing with Number.isFinite check
• Fallback to "Unknown" for missing labels
• Well-structured color priority: custom → semantic → palette

---

107-130: LGTM!

Good migration to ChartContainer with proper tooltip and legend integration. The conditional stroke removal for single-slice pies is a nice UX touch.