Skip to content

Next: Dashboard charts#1967

Merged
niemyjski merged 33 commits intomainfrom
feature/dashboard-charts
Oct 3, 2025
Merged

Next: Dashboard charts#1967
niemyjski merged 33 commits intomainfrom
feature/dashboard-charts

Conversation

@niemyjski
Copy link
Copy Markdown
Member

@niemyjski niemyjski commented Sep 8, 2025

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.

image

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.

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.
@niemyjski niemyjski self-assigned this Sep 8, 2025
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.
@niemyjski niemyjski requested review from Copilot and ejsmith and removed request for Copilot October 3, 2025 01:48
@niemyjski niemyjski marked this pull request as ready for review October 3, 2025 01:50
Copy link
Copy Markdown
Member Author

@niemyjski niemyjski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Self reveiwed

@niemyjski niemyjski requested a review from Copilot October 3, 2025 02:06
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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');
Copy link

Copilot AI Oct 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
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]');

Copilot uses AI. Check for mistakes.
Comment on lines +174 to +177
/^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
Copy link

Copilot AI Oct 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] These hardcoded regex patterns for invalid expressions should be extracted to named constants with descriptive comments to improve readability and maintainability.

Copilot uses AI. Check for mistakes.
…charts.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
@niemyjski niemyjski merged commit f1bf095 into main Oct 3, 2025
4 checks passed
@niemyjski niemyjski deleted the feature/dashboard-charts branch October 3, 2025 02:09
@github-actions
Copy link
Copy Markdown

github-actions bot commented Oct 3, 2025

Code Coverage

Package Line Rate Branch Rate Complexity Health
Exceptionless.Core 66% 44% 8566
Exceptionless.AppHost 19% 7% 89
Exceptionless.Web 44% 32% 2938
Exceptionless.Insulation 27% 24% 231
Summary 57% (9915 / 17251) 40% (3911 / 9692) 11824

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

2 participants