[UI/UX Design] Make the Analytics charts responsive and theme-aware via design tokens

[1nonlypiece]

[UI/UX Design] Make the Analytics charts responsive and theme-aware via design tokens

Description

src/pages/Analytics.tsx (the largest page at ~46KB) renders Recharts visualizations. This issue audits the page so chart colors derive from design-system/tokens/colors.json, charts use ResponsiveContainer, and they respond to the data-theme switch rather than hardcoded palette values.

Requirements and context

• Must be secure, tested, and documented
• Should be efficient and easy to review
• Drive series colors from semantic tokens, recomputed on theme change
• Wrap charts in Recharts ResponsiveContainer for fluid resizing
• Lazy-load the Analytics route to reduce initial bundle weight
• Provide accessible text alternatives/summary for each chart

Suggested execution

• Fork the repo and create a branch
• git checkout -b feature/analytics-responsive-theme
• Implement changes
  • Refactor src/pages/Analytics.tsx and lazy-import in src/App.tsx
  • Write src/pages/__tests__/Analytics.test.tsx for theme/series mapping
  • Document chart token usage in design-system/documentation
  • Verify resize behavior and reduced-motion for animated series
• Test and commit
  • Run tests, cover edge cases
  • Include test output and notes

Example commit message

feat: responsive theme-aware Analytics charts

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours