feat(analytics): #34353 wire engagement dashboard to real API and fix visual issues

[oidacra]

Summary

Enhance the analytics engagement dashboard with dual-period sparkline comparison, improved chart interactions, and UI refinements across engagement and pageview reports.

CleanShot.2026-02-25.at.16.50.41.mp4

Changes Made

Frontend - Engagement Sparkline (Current vs Previous Period)

• Refactored DotAnalyticsSparklineComponent to accept an array of SparklineDataset objects instead of a single data series, enabling multi-line sparkline comparison
• Added SparklineDataset interface with label, data, color, dashed, borderWidth, and fillOpacity properties for per-dataset customization
• Updated with-engagement.feature.ts store to fetch both current and previous period data using forkJoin and getPreviousPeriod(), mapping results to EngagementSparklineData
• Added EngagementSparklineData interface to engagement.types.ts to hold current and previous sparkline data

Frontend - Chart Interactions & Plugins

• Created sparkline-crosshair.plugin.ts - a Chart.js plugin that draws a vertical crosshair line and custom hover points at the active index, bypassing Chart.js internal clipping at chart edges
• Implemented custom floating tooltip positioned to the left/right of the hovered point (avoids obstructing chart data), with date and multi-dataset value display
• Updated gradient-fill.plugin.ts to apply gradient fills to ALL filled datasets (not just the first), using each dataset's borderColor and optional _fillOpacity multiplier

Frontend - Engagement Platforms Table

• Removed language tab/data from the platforms table component (PlatformsData, template, store query, utils, specs) - only Device and Browser remain
• Cleaned up toEngagementPlatforms() and getEmptyEngagementPlatforms() utilities

Frontend - Top Performing Pages Table

• Replaced virtual scroll with PrimeNG native pagination ([paginator]="true", 10 rows per page, no rows-per-page selector)
• Removed p-card wrapper - table renders directly for a cleaner layout
• Changed Pageviews column alignment from center to right
• Removed p-datatable-sm class for better row height
• Centered pie chart vertically when table is taller (justify-center on flex container)

Backend - ClickHouse Schema

• Updated ClickHouse materialized view refresh intervals to 30 seconds for local development (was 15 minutes)
• Added DEPENDS ON clauses between downstream MVs and session_facts_rmv for correct refresh ordering
• Switched utc_time from DateTime to DateTime64(3,'UTC') for millisecond precision
• Fixed timezone handling: toDate(session_start) -> toDate(session_start, 'UTC')
• Renamed contextSiteId dimension to siteId across all Cube.js schemas for consistency
• Added sparkline documentation to EngagementDaily.js Cube schema explaining why conversionRate should be used instead of engagementRate for day-level trends

i18n

• Added analytics.engagement.sparkline.period-current and analytics.engagement.sparkline.period-previous translation keys to Language.properties

Event Generator

• Fixed session-mixing bug: events are now sent per-session with their own context (was buffering across sessions, inflating engagement rates to 100%)
• Added User-Agent HTTP header passthrough so device profiles (Desktop/Mobile/Tablet) are correctly classified by the backend UA parser

Technical Details

The sparkline now shows two lines: current period (blue, 2px, gradient fill) and previous period (gray, 1px, subtle gradient with fillOpacity: 0.35). The gradient fill plugin was generalized to iterate all datasets with fill: true, reading each dataset's borderColor for the gradient color and an optional _fillOpacity custom property as an opacity multiplier.

Native Chart.js hover points are disabled (hoverRadius: 0) because they get clipped at chart edges. Instead, the crosshair plugin draws custom hover circles using ctx.arc() in the afterDraw hook, which renders outside the chart area clipping boundary.

Breaking Changes

• PlatformsData interface no longer includes language property
• SparklineDataset[] input replaces the previous single-series data input on DotAnalyticsSparklineComponent
• TABLE_CONFIG no longer includes VIRTUAL_SCROLL_ITEM_SIZE or SCROLL_HEIGHT

Testing

• Unit tests updated for sparkline component (multi-dataset, crosshair plugin, tooltip)
• Unit tests updated for platforms table (2 tabs instead of 3)
• Unit tests updated for top pages table (pagination, no CardModule)
• Unit tests updated for engagement report component (new sparkline data structure)

Related Issues

Closes #34353

This PR fixes: #34353

[semgrep-code-dotcms-test]

Legal Risk

The following dependencies were released under a license that
has been flagged by your organization for consideration.

Recommendation

While merging is not directly blocked, it's best to pause and consider what it means to use this license before continuing. If you are unsure, reach out to your security team or Semgrep admin to address this issue.

MPL-2.0

• axe-core 4.11.1
• lightningcss-android-arm64 1.30.2
• lightningcss-darwin-arm64 1.30.2
• lightningcss-darwin-x64 1.30.2
• lightningcss-freebsd-x64 1.30.2
• lightningcss-linux-arm-gnueabihf 1.30.2
• lightningcss-linux-arm64-gnu 1.30.2
• lightningcss-linux-arm64-musl 1.30.2
• lightningcss-linux-x64-gnu 1.30.2
• lightningcss-linux-x64-musl 1.30.2
• lightningcss-win32-arm64-msvc 1.30.2
• lightningcss-win32-x64-msvc 1.30.2
• lightningcss 1.30.2