Next: Dashboard charts (#1967)

* WIP: Adds events dashboard chart component

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.

* WIP - Enhances events dashboard with date range selection

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 local date formatting functions

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 dependencies

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 date range dropdown with picker

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.

* Updates frontend instructions and VS Code settings

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.

* Refactors date range handling for event filters

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.

* Refactors date math component and utils

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 CustomDateRange model to shared location

Moves the CustomDateRange model to a shared location to prevent circular dependencies and promote code reuse across different components.
Removes the duplicate definition.

* Updates dependencies

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.

* Improves date math parsing and validation

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.

* Adds tooltips to custom range form

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.

* Formats date math range using local ISO string.

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 default time range for issues

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.

* Updates dependencies in ClientApp

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.

* Improves chart date series generation

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 Exceptionless.DateTimeExtensions

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.

* Defines nullable type for previous state refs

Ensures that previous settings refs are nullable to avoid potential issues when they are initially undefined.

* Removes close button from faceted filter actions

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.

* Improves date range picker usability

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.

* Applies shadcn-svelte trigger snippet pattern

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.

* Adds accessibility descriptions to filters

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.

* Validates end date is after start date

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.

* Fixed tag filters Guarantees empty buckets array for aggregations

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.

* Improves faceted filter accessibility and usability

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.

* Adds accessibility instructions for code generation

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.

* Updates package versions

Bumps the versions of several NuGet packages, including OpenTelemetry, Swashbuckle, and Microsoft.NET.Test.Sdk.

* npm install

* Updated packages

* rebuilt package lock

* Update src/Exceptionless.Web/ClientApp/src/lib/features/shared/utils/charts.ts

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Author: niemyjski

.github/instructions/a11y.instructions.md

@@ -160,6 +160,88 @@ if (JSON.stringify(settings) !== JSON.stringify(previousSettings)) {
 - Use the Composite Component Pattern
 - Organize components within vertical slices aligned with API controllers
 
+## shadcn-svelte Trigger Components
+
+When using shadcn-svelte trigger components (Tooltip.Trigger, Popover.Trigger, DropdownMenu.Trigger, etc.) with custom components like Button, **always use the `child` snippet pattern** to avoid double-tab issues and ensure proper accessibility.
+
+### Correct Pattern
+
+```svelte
+<Tooltip.Root>
+    <Tooltip.Trigger>
+        {#snippet child({ props })}
+            <Button {...props} variant="ghost" size="icon">
+                <Icon />
+            </Button>
+        {/snippet}
+    </Tooltip.Trigger>
+    <Tooltip.Content>Tooltip text</Tooltip.Content>
+</Tooltip.Root>
+```
+
+### Why This Pattern?
+
+- **Single Tab Stop**: Creates only one focusable element in the tab order
+- **Proper Props Delegation**: The `props` from the trigger are properly spread to the Button
+- **Accessibility**: Maintains ARIA attributes and keyboard navigation
+- **Official Pattern**: This is the documented shadcn-svelte/bits-ui pattern
+
+### Wrong Patterns
+
+```svelte
+<!-- ❌ Wrong: Creates two focusable elements (double-tab issue) -->
+<Tooltip.Trigger>
+    <Button>Content</Button>
+</Tooltip.Trigger>
+
+<!-- ❌ Wrong: Manual styling replicates button styles (maintenance burden) -->
+<Tooltip.Trigger class="hover:bg-accent inline-flex...">
+    <Icon />
+</Tooltip.Trigger>
+```
+
+### When to Use
+
+Apply this pattern for **all trigger components** when wrapping custom interactive elements:
+- `Tooltip.Trigger`
+- `Popover.Trigger`
+- `DropdownMenu.Trigger`
+- `Dialog.Trigger`
+- Any other component with a `.Trigger` that wraps interactive elements
+
+### When NOT to Use
+
+You don't need the `child` snippet when:
+- Trigger content is simple text or non-interactive elements
+- The trigger itself has no nested focusable elements
+- You're using the trigger's native button functionality directly
+
+### Additional Examples
+
+**DropdownMenu with Button:**
+```svelte
+<DropdownMenu.Trigger>
+    {#snippet child({ props })}
+        <Button {...props} variant="outline">
+            Open Menu
+            <ChevronDown />
+        </Button>
+    {/snippet}
+</DropdownMenu.Trigger>
+```
+
+**Popover with Button:**
+```svelte
+<Popover.Trigger>
+    {#snippet child({ props })}
+        <Button {...props} variant="outline" class="w-[280px]">
+            Select Date
+            <CalendarIcon />
+        </Button>
+    {/snippet}
+</Popover.Trigger>
+```
+
 ## Dialog Component Patterns
 
 ### Naming Conventions

.github/instructions/frontend-svelte.instructions.md

@@ -11,6 +11,7 @@ Located in the `src/Exceptionless.Web/ClientApp` directory.
 
 - Use Svelte 5 in SPA mode with TypeScript and Tailwind CSS.
 - Code can be formatted and linted with `npm run format` and checked for errors with `npm run check` tasks.
+- When there is a linting error, always try to run `npm run format` first.
 - Limit use of $effect as there is usually a better way to solve the problem like using $derived.
 - **Do NOT** use any server-side Svelte features.
 

.github/instructions/frontend.instructions.md

@@ -18,6 +18,7 @@
         "cmdk",
         "colour",
         "Contoso",
+        "datemath",
         "dockerignore",
         "editorconfig",
         "elasticsearch",

.vscode/settings.json

@@ -21,6 +21,7 @@
   </ItemGroup>
   <ItemGroup>
     <PackageReference Include="AutoMapper" Version="14.0.0" />
+    <PackageReference Include="Exceptionless.DateTimeExtensions" Version="4.0.1" />
     <PackageReference Include="FluentValidation" Version="12.0.0" />
     <PackageReference Include="Foundatio.Extensions.Hosting" Version="12.0.0" />
     <PackageReference Include="Foundatio.JsonNet" Version="12.0.0" />

src/Exceptionless.Core/Exceptionless.Core.csproj

@@ -11,10 +11,10 @@
     <PackageReference Include="Serilog.Enrichers.Span" Version="3.1.0" />
     <PackageReference Include="Serilog.Enrichers.Environment" Version="3.0.1" />
 
-    <PackageReference Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" Version="1.12.0" />
-    <PackageReference Include="OpenTelemetry.Exporter.Console" Version="1.12.0" />
-    <PackageReference Include="OpenTelemetry.Exporter.Prometheus.AspNetCore" Version="1.12.0-beta.1" />
-    <PackageReference Include="OpenTelemetry.Extensions.Hosting" Version="1.12.0" />
+    <PackageReference Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" Version="1.13.0" />
+    <PackageReference Include="OpenTelemetry.Exporter.Console" Version="1.13.0" />
+    <PackageReference Include="OpenTelemetry.Exporter.Prometheus.AspNetCore" Version="1.13.0-beta.1" />
+    <PackageReference Include="OpenTelemetry.Extensions.Hosting" Version="1.13.0" />
     <PackageReference Include="OpenTelemetry.Instrumentation.AspNetCore" Version="1.12.0" />
     <PackageReference Include="OpenTelemetry.Instrumentation.Http" Version="1.12.0" />
     <PackageReference Include="OpenTelemetry.Instrumentation.StackExchangeRedis" Version="1.12.0-beta.2" />