Skip to content

Feat/analytics pie chart#118

Merged
Gyanthakur merged 2 commits into
Gyanthakur:mainfrom
Shanidhya01:feat/analytics-pie-chart
Oct 12, 2025
Merged

Feat/analytics pie chart#118
Gyanthakur merged 2 commits into
Gyanthakur:mainfrom
Shanidhya01:feat/analytics-pie-chart

Conversation

@Shanidhya01

Copy link
Copy Markdown
Contributor

📝 Description

This update replaces the static “Most Popular Components” list in the Analytics page with a fully interactive pie chart visualization, improving data clarity and user experience.

Fixes #112


🔍 Type of Change

Please delete options that are not relevant.

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • [✅ ] 🚀 New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • [✅ ] 🧹 Code cleanup or refactor
  • 🧾 Documentation update
  • 🧪 Test addition or update
  • 🧠 Other (please describe):

✅ Checklist

  • [✅ ] My code follows the project’s coding style and guidelines.
  • [✅ ] I have performed a self-review of my code.
  • [✅ ] I have commented my code where necessary.
  • [ ✅] I have added tests that prove my fix is effective or that my feature works.
  • [✅ ] New and existing tests pass locally with my changes.
  • [ ✅] I have updated the documentation if required.

📸 Screenshots (if applicable)

Before
image

After
image


- Create reusable ConfirmationModal component with accessibility features
- Add smooth fade-in/out animations and backdrop blur
- Support multiple variants (warning, danger, info)
- Replace window.confirm() in Analytics page with custom modal
- Add proper state management and user feedback
- Include comprehensive documentation

Features:
- Keyboard navigation (ESC to close)
- Click outside to dismiss
- ARIA labels and screen reader support
- Responsive design with Tailwind CSS
- Customizable title, message, and button text

Fixes the outdated browser alert UX issue in Analytics page.
- Create PopularityChart component using Chart.js and react-chartjs-2
- Replace static component list with responsive pie chart visualization
- Add dark theme support with automatic color adaptation
- Implement interactive tooltips showing views, percentages, and copy rates
- Add 10 vibrant color palette with transparency effects
- Include smooth animations and hover effects
- Support responsive design for all screen sizes
- Add empty state with pie chart icon when no data available
- Update Analytics page with dark theme detection
- Maintain accessibility with proper color contrast

The pie chart provides better visual representation of component popularity distribution compared to the previous static list format.
@vercel

vercel Bot commented Oct 12, 2025

Copy link
Copy Markdown

@Shanidhya01 is attempting to deploy a commit to the gyanthakur's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job, @Shanidhya01! Thanks for creating the pull request.
Soon the maintainers/owner will review it and provide you with feedback/suggestions.
Make sure to star this awesome repository and follow the account!

@vercel

vercel Bot commented Oct 12, 2025

Copy link
Copy Markdown

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

Project Deployment Preview Comments Updated (UTC)
component-library Ready Ready Preview Comment Oct 12, 2025 5:23pm

@Gyanthakur Gyanthakur merged commit 0d629a2 into Gyanthakur:main Oct 12, 2025
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature Request: Add Graph for Most Popular Components in Analytics Section

2 participants