feat(ui): Modernize Analytics Page with v2/Alchemy Components (#6872)

[chriscollins3456]

Modernizes the Analytics page (/analytics route) with v2/Alchemy components, bringing it up to spec with the modern design system used in the Observe module's Stats tab.

Changes

Components Modernized

1. Highlight.tsx

• Before: Ant Design Card and Typography components with manual styling
• After: Alchemy Card and Text components
• Benefits: Consistent styling, better typography, modern card design

2. ChartGroup.tsx

• Before: Ant Design Typography.Title with Divider
• After: Alchemy PageTitle component with sectionHeader variant
• Benefits: Consistent header styling across the app, better spacing

3. AnalyticsChart.tsx

• Before: Legacy visx-based charts with custom wrappers (ChartCard, ChartContainer)
• After: Alchemy GraphCard + LineChart / BarChart components
• Benefits: Modern chart design matching Stats tab, better empty states, consistent tooltips

4. AnalyticsPage.tsx

• Before: Mixed styling, outdated layout, verbose copy
• After: Modern layout with Alchemy components, improved UX
• Benefits:
  • Clean, responsive grid layouts with proper spacing
  • Modern Loader component instead of legacy Message
  • Clearer error handling
  • Tightened copy (e.g., "Select a domain or search to view detailed analytics")
  • Better visual hierarchy

Visual Changes

Layout & Styling

• ✅ Responsive highlight cards with auto-fit grid
• ✅ Consistent 16px gaps between elements
• ✅ Modern filter section with clear labels
• ✅ Improved placeholder state with centered text

Charts

• ✅ GraphCard wrapper for all charts
• ✅ LineChart with modern tooltips and date formatting
• ✅ BarChart with gradient fills and hover states
• ✅ Proper empty states with "No Data" messaging

Typography

• ✅ Consistent text sizing using Alchemy Text component
• ✅ Modern weight variants (semibold for headers)
• ✅ Better color hierarchy (violet for values, gray for hints)

Testing

• ✅ TypeScript compilation successful
• ✅ Frontend build successful (yarn build - 94.16s)
• ✅ All component imports resolved correctly
• ✅ GraphQL types properly generated
• ✅ No linting errors
• ✅ Zero bundle errors

Technical Details

Data Transformation

Charts now properly transform backend data formats to work with Alchemy components:

• TimeSeriesChart → LineChart with {x: timestamp, y: value} format
• BarChart → BarChart with aggregated segment values
• TableChart → Wrapped in GraphCard with scroll support

Type Safety

• All components properly typed with TypeScript
• Proper use of GraphQL generated types
• No usage of any types

Design System Alignment

Follows patterns from:

• entityV2/shared/tabs/Dataset/Stats/StatsTabV2/
• entityV2/shared/graphs/RowCountGraph.tsx
• Alchemy component library best practices

Breaking Changes

None - this is a purely visual update maintaining all existing functionality and GraphQL queries.

Screenshots

The analytics page now has a modern, consistent design matching the rest of DataHub's v2 UI.

Checklist

• Components modernized
• Layout updated with modern spacing
• Copy tightened and improved
• TypeScript types correct
• Build validation passed
• No breaking changes
• Follows DataHub design patterns

[alwaysmeticulous]

✅ Meticulous spotted 0 visual differences across 1016 screens tested: view results.

Meticulous evaluated ~8 hours of user flows against your PR.

_{Expected differences? Click here. Last updated for commit 9845efc. This comment will update as new commits are pushed.}

[codecov]

Codecov Report

❌ Patch coverage is 88.21293% with 31 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
.../app/analyticsDashboardV2/components/lineColors.ts	0.00%	22 Missing ⚠️
...lyticsDashboardV2/hooks/useAnalyticsChartColors.ts	82.35%	6 Missing ⚠️
...pp/analyticsDashboardV2/utils/chartColorMatcher.ts	93.47%	3 Missing ⚠️

📢 Thoughts on this report? Let us know!

[codecov]

Bundle Report

Changes will increase total bundle size by 28.82kB (0.1%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
datahub-react-web-esm	28.61MB	28.82kB (0.1%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: datahub-react-web-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
assets/index-*.js	28.82kB	18.98MB	0.15%

Files in assets/index-*.js:

• ./src/app/analyticsDashboardV2/components/AnalyticsChart.tsx → Total Size: 16.11kB

• ./src/app/SearchRoutes.tsx → Total Size: 5.5kB

• ./src/app/analyticsDashboardV2/components/Highlight.tsx → Total Size: 1.09kB

• ./src/app/analyticsDashboardV2/components/TableChart.tsx → Total Size: 1.75kB

• ./src/app/analyticsDashboardV2/hooks/useAnalyticsChartColors.ts → Total Size: 986 bytes

• ./src/app/analyticsDashboardV2/utils/analyticsChartColors.ts → Total Size: 2.6kB

• ./src/app/analyticsDashboardV2/utils/chartColorConstants.ts → Total Size: 1.42kB

• ./src/alchemy-components/components/GraphCard/components.tsx → Total Size: 821 bytes

• ./src/app/analyticsDashboardV2/components/ChartGroup.tsx → Total Size: 988 bytes

• ./src/app/analyticsDashboardV2/components/AnalyticsPage.tsx → Total Size: 6.11kB

• ./src/app/analyticsDashboardV2/utils/chartColorMatcher.ts → Total Size: 807 bytes