Conversation
Introduces a new component for displaying events data in a chart format on the main dashboard. This commit adds a basic chart implementation using dummy data. Real API integration will come in a later commit.
Improves the events dashboard by adding date range selection functionality to the chart. This allows users to select a specific time range on the chart to filter events, providing a more granular view of the data. Also, fixes an issue with persistent event queries invalidation and updates date formatting.
Adds `formatLocalDateTime` to format a date to ISO-like format in local time and `formatTimeRange` to format a date range using the new function. Updates date range filter to use local time formatting.
Updates various dependencies to their latest versions. This includes updates to: - Lucide Svelte - bits-ui - dompurify - pretty-ms - runed - shiki - tailwind-variants - eslint and related packages - svelte and sveltekit - swagger-typescript-api - typescript-eslint - vite These updates likely include bug fixes, performance improvements, and new features.
Replaces the previous select dropdown with a date range picker component for enhanced usability and flexibility. The new date range picker includes quick range selection and a custom range form using Elasticsearch date math syntax. This provides users with more control over the date ranges they select for filtering events. The date range parsing and formatting logic was updated.
Adds a linting tip to the frontend instructions and includes "datemath" in VS Code's cSpell dictionary. The linting tip encourages developers to run the format script first when encountering linting errors, potentially resolving them automatically. Adding "datemath" to the cSpell dictionary prevents it from being flagged as a misspelling.
Updates the date range selection to use a shared utility for formatting the time range string. Removes the custom date parsing logic from the events filter, and instead uses a shared utility for parsing date math ranges. This promotes code reuse and consistency across the application.
Moves TIME_UNIT_NAMES to datemath.ts for reuse and consistency. Updates the date range format to use DateMath format for the date filter, which improves readability and consistency throughout the application by using `toDateMathRange` instead of `formatDateRangeString`. Updates error message for empty date input in `parseDateMath`.
Moves the CustomDateRange model to a shared location to prevent circular dependencies and promote code reuse across different components. Removes the duplicate definition.
Updates various package dependencies in both the core project and the web client application. This includes updating Svelte, Typescript-eslint, vite and other related packages. Also adds Exceptionless.DateTimeExtensions to the core project.
Refactors the date math parsing logic to be more robust and accurate, aligning with the backend implementation. This includes better handling of time zones, rounding, and various date formats. Also provides more informative validation error messages and comprehensive unit tests. Removes the legacy date range parsing functions and simplifies the date/time examples in the CustomRangeForm.
Improves the user experience of the custom date range form by adding tooltips to the start and end date input fields. The tooltips provide helpful examples of valid date formats and relative time expressions, making it easier for users to specify their desired date ranges.
Updates the date math range formatting to use the local ISO string format to ensure consistent date representation across different timezones. This improves the accuracy and reliability of date-based calculations and comparisons.
Updates the default time range for issues and the main page to '[now-1w/w TO now-1w/w]' to ensure consistent weekly bucketing. Refactors the toLocalISOString function by moving it to the bottom of the file.
Bumps versions of various packages in the ClientApp, including @tanstack/svelte-query, bits-ui, layerchart, tw-animate-css, @playwright/test, @storybook/*, @sveltejs/kit, @sveltejs/vite-plugin-svelte, @testing-library/jest-dom, @types/node, cross-env, eslint-plugin-storybook, svelte, typescript, and typescript-eslint. This ensures the application uses the latest versions of these libraries, potentially including bug fixes, performance improvements, and new features.
Refactors the chart data generation to improve handling of empty data sets and date ranges. It ensures that the chart always displays a complete date series, even when no data is available for certain periods. The changes involve filling date series with zero values for missing data points. Also, simplifies date range handling by removing the "last X" patterns in `parseDateMathRange` and defaulting to a minimum date range for the organization, aligning with Elasticsearch date math expressions. This ensures consistency in date handling across the application.
Updates the Exceptionless.DateTimeExtensions package to the latest version. This ensures that the application benefits from the latest bug fixes and improvements related to date and time handling.
Ensures that previous settings refs are nullable to avoid potential issues when they are initially undefined.
Removes the unnecessary "close" button from the faceted filter actions component. The popover automatically closes when an action is taken, so the button is redundant.
Enhances the date range picker component by: - Adding keyboard support for applying and canceling custom date ranges, - Applying the custom range when the popover closes, - Ensuring the custom form is only submitted if valid, - Persisting the state of the date range picker when the popover is closed.
Ensures correct tab behavior and accessibility for shadcn-svelte trigger components. Updates documentation to provide usage guidelines and examples for the `child` snippet pattern in `Tooltip.Trigger`, `Popover.Trigger`, `DropdownMenu.Trigger`, and other trigger components. The pattern avoids double-tab issues and ensures proper props delegation, improving accessibility and maintainability. Updates components to use the recommended pattern.
Improves accessibility by adding screen reader descriptions to faceted filters and the custom date range form. This allows users to understand how to interact with these components using keyboard navigation.
Adds validation to ensure the end date in the custom date range picker is after the start date. This prevents users from selecting invalid date ranges where the end date precedes the start date. Also ensures the Apply button is disabled when the date range is invalid.
Ensures that the `buckets` array in aggregation results is always an empty array when there are no items, preventing potential errors when the client code attempts to iterate over it. Addresses a potential issue where a null or undefined `buckets` property could cause errors in components that expect an array.
Enhances the faceted filter components by: - Adding keyboard navigation within popovers for improved accessibility, specifically using the Escape key to cancel and close the filter. - Ensures focus is not trapped within the popover, allowing users to navigate outside it with the Tab key. - Updates help text to provide clearer instructions for keyboard interactions. - Renames `onClose` and `onCancel` methods for clarity.
https://github.com/github/awesome-copilot/blob/main/instructions/a11y.instructions.md Introduces a new file containing detailed instructions for accessibility. The instructions aim to guide code generation towards WCAG 2.2 Level AA compliance, promote inclusive language, and provide specific guidance for cognitive, keyboard, low vision, and screen reader accessibility. It covers specific patterns like forms, graphics, navigation, and tables. The goal is to improve the accessibility of generated code, though manual review and testing are still recommended.
Bumps the versions of several NuGet packages, including OpenTelemetry, Swashbuckle, and Microsoft.NET.Test.Sdk.
There was a problem hiding this comment.
Pull Request Overview
This commit introduces a new charting feature for the dashboard, replacing the existing date range dropdown with a comprehensive date-time selection system. The changes include a new dashboard chart component that displays events and stacks data with range selection capabilities, extensive date math utilities for Elasticsearch-compatible date expressions, and improved faceted filter components with better accessibility.
Key Changes
- Added dashboard chart component with data visualization and brush selection
- Implemented comprehensive date math utilities for parsing and validating Elasticsearch date expressions
- Enhanced faceted filter components with improved accessibility and user experience
Reviewed Changes
Copilot reviewed 56 out of 57 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Exceptionless.Web/ClientApp/src/lib/features/events/components/events-dashboard-chart.svelte | New chart component for visualizing events data with range selection |
| src/Exceptionless.Web/ClientApp/src/lib/features/shared/utils/datemath.ts | Comprehensive date math utilities for Elasticsearch date expressions |
| src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte | Updated main dashboard to include new chart component |
| src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/ | Multiple faceted filter components updated with proper trigger patterns |
| package.json | Updated dependencies and test configuration |
| it('should convert dates to range string', () => { | ||
| const start = new Date('2025-09-20T00:00:00Z'); | ||
| const end = new Date('2025-09-20T23:59:59Z'); | ||
| expect(toDateMathRange(start, end)).toBe('2025-09-20T00:00:00.000Z 2025-09-20T23:59:59.000Z'); |
There was a problem hiding this comment.
The test expects the wrong format. Based on the toDateMathRange implementation, it should return [start TO end] format with proper date strings, not space-separated values.
| expect(toDateMathRange(start, end)).toBe('2025-09-20T00:00:00.000Z 2025-09-20T23:59:59.000Z'); | |
| expect(toDateMathRange(start, end)).toBe('[2025-09-20T00:00:00.000Z TO 2025-09-20T23:59:59.000Z]'); |
| /^now\+$/.test(trimmed) || // "now+" without unit | ||
| /^\|\|/.test(trimmed) || // Starts with || (missing anchor) | ||
| /^\d{4}-\d{2}-\d{2}$/.test(trimmed) || // Date only without time or || | ||
| /^\d{4}\.\d{2}\.\d{2}/.test(trimmed) // Dotted format |
There was a problem hiding this comment.
[nitpick] These hardcoded regex patterns for invalid expressions should be extracted to named constants with descriptive comments to improve readability and maintainability.
…charts.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
NOTE: We are aware of a few issues with chart rendering and are working through them. We want to get this released to get additional feedback on the charting as we continue to iterate on it.
Introduces a new component for displaying events data in a chart format on the main dashboard.
This commit adds a basic chart implementation using dummy data. Real API integration will come in a later commit.