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 1006 screens tested: view results.

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

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

[codecov]

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
599	1	598	6

View the top 1 failed test(s) by shortest run time

tests.analytics.test_analytics::test_weekly_active_users_chart

Stack Traces | 10.9s run time

auth_session = <tests.utils.TestSessionWrapper object at 0x7f928a43b990>
analytics_events_loaded = {'event_count': 0, 'event_types': {}}

    def test_weekly_active_users_chart(auth_session, analytics_events_loaded):
        """Test Weekly Active Users chart specifically."""
        json = {
            "query": """query getAnalyticsCharts {
                getAnalyticsCharts {
                    groupId
                    title
                    charts {
                        ... on TimeSeriesChart {
                            title
                            lines {
                                name
                                data {
                                    x
                                    y
                                }
                            }
                        }
                    }
                }
            }"""
        }
    
        response = auth_session.post(
            f"{auth_session.frontend_url()}.../api/v2/graphql", json=json
        )
        response.raise_for_status()
        res_data = response.json()
    
        # Flatten all charts from all groups
        chart_groups = res_data["data"]["getAnalyticsCharts"]
        charts = []
        for group in chart_groups:
            charts.extend(group["charts"])
        wau_chart = next((c for c in charts if c["title"] == "Weekly Active Users"), None)
    
        assert wau_chart is not None, "Weekly Active Users chart not found"
        assert "lines" in wau_chart
        assert len(wau_chart["lines"]) > 0
        assert len(wau_chart["lines"][0]["data"]) > 0, "WAU chart should have data points"
    
        # Check that we have reasonable values (> 0)
        data_points = wau_chart["lines"][0]["data"]
>       assert any(point["y"] > 0 for point in data_points), "WAU should have users"
E       AssertionError: WAU should have users
E       assert False
E        +  where False = any(<generator object test_weekly_active_users_chart.<locals>.<genexpr> at 0x7f9285144790>)

tests/analytics/test_analytics.py:169: AssertionError

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

[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/Highlight.tsx → Total Size: 1.09kB

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

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

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

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

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

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

• ./src/app/analyticsDashboardV2/components/ChartGroup.tsx → Total Size: 988 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