feat(analytics): add dotAnalyticsCount pipe and bar chart accessibility#35744
feat(analytics): add dotAnalyticsCount pipe and bar chart accessibility#35744nicobytes wants to merge 9 commits into
Conversation
…ormatting This update introduces the `DotAnalyticsCountPipe`, which formats session counts in both compact and full notation. The pipe is integrated into the `dot-analytics-bar-engagement-chart` and `dot-analytics-stacked-bar` components, replacing the previous formatting methods. Additionally, unit tests for the new pipe and related utility functions have been added to ensure correct functionality. Changes include: - Replaced `formatSessionsCount` with `dotAnalyticsCount` pipe in relevant components. - Added tests for the `DotAnalyticsCountPipe` to validate formatting behavior. - Updated HTML templates to utilize the new pipe for session count display. This enhancement improves the clarity and consistency of session count representations across the analytics dashboard.
…cessibility improvements This update introduces tooltips for the bar chart rows in the DotAnalyticsBarChartComponent, providing users with additional context on view counts. The aria-labels for each row have also been improved for better accessibility. Changes include: - Added `viewsTooltip` method to format view counts for tooltips. - Implemented `rowAriaLabel` method to create accessible labels for each bar row. - Enhanced mouse enter/leave events to activate/deactivate tooltips on hover. - Updated HTML template to include aria-labels and tooltip attributes. - Expanded unit tests to cover new tooltip functionality and accessibility features. These enhancements improve user experience by providing clearer information and ensuring compliance with accessibility standards.
github-actions
Bot
added
the
Area : Frontend
|
Claude finished @nicobytes's task in 2m 26s —— View job Claude PR Review
The PR is clean — small, well-tested, mostly mechanical. The four removed i18n keys ( A few things worth a second look — none blocking: 1. Locale coupling in tests — 2. Soft negative assertions — a couple of tests only check what the output isn't: 3. Mixed locale + hardcoded English in tooltips — 4. Redundant rounding — 5. Nothing risky. LGTM. |
nicobytes
changed the title
…t formatting This update enhances the analytics components by integrating the `DotAnalyticsCountPipe` for formatting session and view counts across various components. The pipe replaces previous formatting methods, ensuring a unified display of counts in both compact and full notation. Changes include: - Updated `dot-analytics-bar-engagement-chart`, `dot-analytics-stacked-bar`, and detail table dialogs to utilize the new pipe for count formatting. - Removed redundant formatting methods from components and templates. - Enhanced unit tests for the `DotAnalyticsCountPipe` to validate formatting behavior, including edge cases for zero and negative values. These improvements streamline the presentation of analytics data, ensuring clarity and consistency throughout the dashboard.
… 34849-dashboard-details
…ar-engagement-chart for improved data handling and UI This update enhances the `DotAnalyticsBarChartComponent` and `DotAnalyticsBarEngagementChartComponent` by refactoring data handling and improving the user interface. Key changes include: - Renamed and restructured data handling methods to use `displayRows` for better clarity and consistency. - Introduced a new view model for bar chart rows, encapsulating properties like `viewsTooltip` and `ariaLabel`. - Updated HTML templates to reflect the new data structure and improve accessibility with better aria-labels. - Enhanced the engagement chart to include a subtitle for clarity and adjusted layout styles for better visual presentation. - Removed deprecated session labels from the language properties to streamline the codebase. These improvements aim to provide a more intuitive user experience and maintain consistency across analytics components.
…mproved accessibility and data handling This update refines the `DotAnalyticsBarEngagementChartComponent` by improving the accessibility of engagement rows through better aria-labels and tooltips. Key changes include: - Updated the HTML template to use precomputed aria-labels and session titles directly from the data model. - Refactored the component's TypeScript code to encapsulate aria-label and session title logic within the view model. - Added unit tests to validate the new aria-label and tooltip behaviors for engagement rows. These enhancements aim to provide a more accessible user experience and ensure accurate representation of session data in the analytics dashboard.
3 participants
This pull request introduces a reusable formatting utility and pipe for displaying analytics count values in both compact (e.g., 1.1K) and full (e.g., 1,128) formats across the analytics dashboard. It refactors existing components to use this new pipe, improving consistency and simplifying code. It also updates tests and adds new ones to ensure correct formatting. Additionally, there are minor UI adjustments to paginator controls in detail dialogs.
Analytics count formatting improvements:
formatAnalyticsCountutility andDotAnalyticsCountPipeto provide consistent compact and full formatting for analytics counts (sessions, views, tooltips), with comprehensive unit tests.dot-analytics-bar-engagement-chart,dot-analytics-stacked-bar, and detail-table dialogs to use the new pipe, removing redundant formatting methods.Bar chart accessibility:
UI/UX adjustments:
Paginator UX: Page report and jump-to-page controls are intentionally hidden in detail dialogs to reduce visual clutter. Row-per-page selector remains available.
Code cleanup:
This PR fixes: #34849