feat(analytics): Add conversions dashboard with tabbed reporting interface

[oidacra]

Summary

This PR implements a comprehensive Conversions Dashboard for analytics (#33846), introducing a tabbed dashboard interface with pageview and conversions reporting capabilities, while significantly refactoring the analytics state management architecture to use composable NgRx signal store features for improved modularity and maintainability.

Changes Made

Architecture Refactoring

• Modular State Management: Refactored monolithic store into composable signal store features

  • with-filters.feature.ts: Shared filter state (timeRange, currentTab) with URL sync
  • with-pageview.feature.ts: Pageview-specific state and data loading logic
  • with-conversions.feature.ts: Conversions-specific state and data loading logic
  • Main store at dot-analytics-dashboard.store.ts:1-165 now composes these features with coordinated effects

• Service Layer Simplification: Transformed DotAnalyticsService from endpoint-specific methods to generic CubeJS query executor

  • Reduced from 172 lines with 6 specific methods to 48 lines with single cubeQuery<T>() method
  • Query construction now handled by store using CubeQueryBuilder utility
  • dot-analytics.service.ts:28-44

Backend

• Enhanced CubeJS Query Builder (cube-query-builder.util.ts)

  • Added conversion event filtering support
  • New methods: conversions(), contentUrl(), hostName(), queryString()
  • Improved filter handling with dedicated event type methods
  • 125+ new test cases for query builder validation

• Analytics Data Utilities (analytics-data.utils.ts)

  • New entity types: ConversionTrendEntity, TrafficVsConversionsEntity
  • Enhanced formatting utilities for metrics display
  • Date filling and granularity determination for time-series data
  • Helper function toTimeRangeCubeJS() for time range conversion

Frontend

Dashboard Components

• Tabbed Dashboard Interface (dot-analytics-dashboard.component.ts:22-94)

  • Two tabs: Pageview and Conversions
  • URL-based tab state management with query params
  • Lazy loading: conversions data only loads when tab is activated
  • Coordinated refresh for all active tab data

• Conversions Report Component (new)

  • dot-analytics-dashboard-conversions-report.component.ts: Main container with 4 metrics cards
  • Displays: Total Conversions, Converting Visitors, Site Conversion Rate, Content Conversion Rate
  • Two specialized table components for detailed data

• Pageview Report Component (new)

  • dot-analytics-dashboard-pageview-report.component.ts: Extracted from main component
  • Contains existing pageview metrics, charts, and tables
  • Maintains original functionality with new component structure

Table Components

• Conversions Overview Table (dot-analytics-conversions-overview-table.component.ts)

  • Displays conversion events with URL, timestamp, visitor ID, and content details
  • Sortable columns with PrimeNG Table
  • Formatted timestamps and clickable URLs
  • 138 lines HTML template with comprehensive column definitions

• Content Conversions Table (dot-analytics-content-conversions-table.component.ts)

  • Shows content attribution data: URL, title, pageviews, and conversion rate
  • Sortable by all columns
  • Percentage formatting for conversion rates
  • 132 lines HTML template

Enhanced Metrics Component

• Dashboard Metrics Refactoring (dot-analytics-dashboard-metrics.component.ts:20-88)
  • Now accepts generic RequestState<T> for any metric type
  • Improved loading/error state handling
  • Support for both number and object metrics
  • Enhanced number formatting with formatNumber() utility

Configuration

• Dashboard Constants (dot-analytics.constants.ts)

  • New constants: DASHBOARD_TABS, DASHBOARD_TAB_LIST
  • TypeScript types: DashboardTab, DashboardTabConfig
  • Centralized tab configuration for consistency

• Type Definitions (entities.types.ts, common.types.ts, cubequery.types.ts)

  • 7 new conversion entity types: TotalConversionsEntity, ConvertingVisitorsEntity, etc.
  • Enhanced CubeJSQuery interface with all CubeJS options
  • New RequestState<T> utility type with helper function createInitialRequestState()

Tests

• Service Tests: Refactored dot-analytics.service.spec.ts from endpoint-specific to generic query testing
• Query Builder Tests: 125+ new test cases in cube-query-builder.util.spec.ts
• Component Tests: New test suites for both table components with comprehensive Spectator tests

Internationalization

• Language Properties (Language.properties)
  • 41 new translation keys for conversions dashboard
  • Tab labels, metric titles, table headers, and error messages
  • Keys: analytics.dashboard.tabs.*, analytics.dashboard.conversions.*

URL State Synchronization

The dashboard maintains state in URL query params (?tab=conversions&timeRange=last7days), enabling:

• Direct linking to specific tabs
• Browser back/forward navigation
• State persistence across page refreshes

Breaking Changes

None - this is a new feature addition with backward-compatible refactoring of internal implementation.

Testing

• Unit tests added/updated (service, store features, query builder, data utils)
• Component tests added (table components with Spectator)
• Manual testing performed (tab switching, data loading, filtering)
• Integration tests added/updated (future work for E2E flows)
• E2E tests added/updated (future work for full user workflows)

Related Issues

Closes #33846

This PR fixes: #33846

[Copilot]

Pull request overview

This PR introduces a comprehensive conversions dashboard for analytics with a tabbed interface and significant architectural improvements. The implementation adds conversion tracking capabilities alongside existing pageview analytics while refactoring the state management to use composable NgRx signal store features for better modularity.

Key Changes:

• Tabbed dashboard interface with URL-based state management (pageview/conversions tabs)
• Modular NgRx signal store architecture using composable features (withFilters, withPageview, withConversions)
• Generic CubeJS query service replacing endpoint-specific methods
• New conversions components including metrics cards, charts, and data tables

Reviewed changes

Copilot reviewed 46 out of 46 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
Language.properties	Adds 41 new translation keys for conversions dashboard UI elements
dot-analytics-dashboard.component.ts	Refactored to tabbed interface with simplified event handling
dot-analytics-dashboard.component.spec.ts	Test suite completely removed - critical coverage gap
dot-analytics-dashboard-pageview-report	New component extracting pageview metrics and charts
dot-analytics-dashboard-conversions-report	New component for conversions metrics, charts, and tables
dot-analytics-dashboard-metrics.component	Enhanced to support fraction display formats
dot-analytics-dashboard-chart.component	Refactored to support combo charts with dual Y-axes
dot-analytics-content-conversions-table	New table component for content attribution data
dot-analytics-conversions-overview-table	New table component for conversions summary
dot-analytics-dashboard.store.ts	Refactored to compose features with coordinated data loading
with-filters.feature.ts	New shared filter state feature
with-pageview.feature.ts	New pageview-specific state and data loading
with-conversions.feature.ts	New conversions-specific state and data loading
dot-analytics.service.ts	Simplified to single generic cubeQuery method
cube-query-builder.util.ts	Enhanced with multi-cube support and conversion filtering
analytics-data.utils.ts	Added conversion data transformers and utilities
filters.utils.ts	New utilities for tab/timeRange validation and conversion