Skip to content

feat: add interactive cwe vulnerability donut chart with custom UI#42

Merged
ionfwsrijan merged 1 commit into
ionfwsrijan:mainfrom
lakshay122007:feat/add-cwe-donut-chart
Jun 6, 2026
Merged

feat: add interactive cwe vulnerability donut chart with custom UI#42
ionfwsrijan merged 1 commit into
ionfwsrijan:mainfrom
lakshay122007:feat/add-cwe-donut-chart

Conversation

@lakshay122007
Copy link
Copy Markdown
Contributor

Before opening: make sure there is an issue tracking this work, and link it below. PRs without a linked issue may be closed without review.

Linked issue

Closes #32

What this PR does

Adds a highly interactive, premium Donut Chart to the dashboard to visualize the distribution of Common Weakness Enumeration (CWE) categories. The backend has been updated to query and group real finding data by category. The frontend features a custom Recharts implementation with dynamic center-labeling, hover-state dimming, and a custom legend utilizing horizontal percentage bars for maximum data readability.

Type of change

  • Bug fix
  • New feature
  • ML model / training pipeline
  • Refactor (no behaviour change)
  • Documentation
  • Tests only

ML tier (if applicable)

  • Tier 1 — Triage
  • Tier 2 — Predictive
  • Tier 3 — Autonomous
  • Not ML-related

Changes

Backend

  • Added get_cwe_distribution query in db.py to aggregate findings by category for the latest scan job.
  • Exposed the GET /cwe-distribution API endpoint in main.py.

Frontend

  • Built CweChart component (cwe-chart.tsx) using recharts and Tailwind CSS.
  • Implemented custom state management (activeIndex) to handle synchronized hover states between the pie slices and the custom legend.
  • Created a dynamic center label that displays total findings by default and specific category data on hover.
  • Replaced the default legend with custom HTML/CSS progress bars.
  • Integrated getCweDistribution client fetch logic in api.ts.
  • Added the chart to dashboard.tsx in a responsive grid alongside the Trend Chart.

Testing

How did you test this?
Tested locally end-to-end. Verified that the backend correctly aggregates findings by category from the SQLite database. Confirmed the frontend successfully fetches the data, handles loading/error/empty states gracefully, and renders the dynamic hover states and custom legend without performance lag.

Screenshot 2026-06-06 at 11 10 57 AM Screenshot 2026-06-06 at 11 11 08 AM

Checklist

  • Tested locally end-to-end (upload ZIP or GitHub URL → scan → findings returned correctly)
  • New ML model falls back gracefully when model file is absent
  • No new console.error or unhandled Python exceptions introduced
  • Added or updated tests where applicable
  • requirements.txt / package.json updated if new dependencies added
  • New model files (.pkl, .pt, etc.) are gitignored, not committed

@lakshay122007
Copy link
Copy Markdown
Contributor Author

hi @ionfwsrijan Could you review it and let me know if any changes Required. Thanks!

@ionfwsrijan ionfwsrijan added enhancement New feature or request backend Backend issues frontend Frontend issues hard Hard difficulty SSoC26 labels Jun 6, 2026
@ionfwsrijan ionfwsrijan merged commit faa6154 into ionfwsrijan:main Jun 6, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backend Backend issues enhancement New feature or request frontend Frontend issues hard Hard difficulty SSoC26

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Add interactive donut chart to visualize vulnerability distribution by CWE category

2 participants