Log Viewer: Enhances the donut chart to be responsive, link to log search, and show numbers directly #20928

iOvergaard · 2025-11-21T17:40:54Z

Summary

Enhances the donut chart on the Log Viewer. Chart slices are clickable and navigate to filtered search results. The router now supports SVGAElements as well.

Changes

Enhanced Components

Donut Chart Component (umb-donut-chart):
- Added support for clickable slices via href property
- Slices now wrap in SVG <a> tags when href is provided
- Fixed tooltip positioning to appear near the cursor
- Made container responsive with percentage-based width
Donut Slice Component (umb-donut-slice):
- Added href property to make slices clickable
Log Viewer Overview (log-viewer-log-types-chart.element.ts):
- Added clickable slices that navigate to the search view with appropriate filters
- Implemented responsive layout using CSS Grid with container queries
- Legend displays on the right on desktop (≥312px), centered below the chart on mobile
- Added date range observer to pass current dates to search URLs

Core Router Enhancement

SVG Anchor Support (anchor.ts):
- Router now intercepts clicks on SVG <a> elements (previously only HTML anchors)
- Handles SVGAnimatedString type for SVG href and target properties
- Resolves relative URLs correctly using document.location.origin as base
- Validates origin to distinguish internal vs external links
- Enables SPA navigation for SVG-based interactive charts throughout the application

Visual Changes

Desktop Layout (container ≥ 312px):

Before:

After:

Mobile Layout (container < 312px):

Before:

After:

Technical Details

URL Structure

Clicking a slice navigates to:
section/settings/workspace/logviewer/view/search/?loglevels=Information&startDate=2025-11-19&endDate=2025-11-21

Router Changes

The router's ensureAnchorHistory() function now handles both HTMLAnchorElement and SVGAElement:

Extracts href using .baseVal for SVG (handles SVGAnimatedString)
Uses URL constructor with document.location.origin for consistent URL resolution
Compares fullUrl.origin !== location.origin to distinguish internal/external links

Responsive Breakpoint

Container query at 312px switches between mobile/desktop layouts
Chart maintains square aspect ratio with aspect-ratio: 1
Max width of 200px prevents oversized charts

Test Steps

1. Basic Functionality

Navigate to Settings → Log Viewer → Overview
Verify donut chart displays with colored slices for each log level
Verify description text appears above the chart
Hover over slices and verify the tooltip appears near the cursor, showing the level name and count

2. Chart Interactions

Click on a donut slice (e.g., "Information")
Verify navigation to Search view without page reload (SPA navigation)
Verify URL contains correct log level filter: ?loglevels=Information
Verify URL contains current date range: &startDate=...&endDate=...
Verify search results show only logs matching the clicked level

3. Responsive Layout

Desktop (Log types container ≥312px width):

Resize browser to > 1800px width
Verify chart appears on the left, legend on the right
Verify legend items are left-aligned

Mobile (Log types container <312px width):

Resize browser to < 1800px width
Verify chart appears above legend
Verify both chart and legend are centered
Verify layout remains readable and functional

4. Date Range Changes

Change the date range picker on overview page
Verify donut chart updates to reflect new log counts
Click a slice and verify the new date range is included in the URL

5. External Link Test (Router regression)

Open browser dev tools → Console
Add a test external link: Create a simple HTML anchor to https://google.com
Click the external link
Verify it opens in same/new tab (based on target attribute) without SPA router interception
Verify no JavaScript errors in console

Notes

The donut chart component is generic and can be reused elsewhere in the backoffice
SVG anchor support in the router is a general improvement that benefits the entire application
URL resolution uses document.location.origin to match existing Umbraco root-relative URL patterns

- Import and use repeat directive for better performance - Add _logLevelKeys state property to track log level keys - Update setLogLevelCount() to populate _logLevelKeys - Replace .map() with repeat() in render method for legend and donut slices - Update willUpdate to observe both filter and response changes - Resolves TODO comment about using repeat directive 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

- Add showInlineNumbers property to optionally display numbers inside slices - Implement #getTextPosition() method to calculate text position at slice center - Render SVG text elements when showInlineNumbers is enabled - Fix tooltip positioning to appear near cursor (changed from x-10, y-70 to x+10, y+10) - Recalculate container bounds on each mouse move to handle window resize - Add pointer-events: none to tooltip to prevent mouse interference - Add CSS styling for slice numbers (user-select: none) - Enable inline numbers by default in log viewer log types chart 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

- Add href property to donut-slice element for clickable slices - Wrap SVG paths in <a> tags when href is provided - Update Circle interface to include href property - Add showDescription property to optionally display description text - Render description as visible text below the chart - Add CSS styling for description text - Update log-types-chart to build search URLs with log level and date range - Observe dateRange from context to build accurate search URLs - Enable clickable slices and visible description in log-types-chart Now clicking on a donut slice navigates to the search view filtered by that log level and the current date range. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

Add media query to switch from column to row layout on screens wider than 768px. This ensures the legend and donut chart are displayed side by side on desktop resolutions instead of stacked vertically. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2025-11-21T17:43:21Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-ground-017b08103-20928.westeurope.6.azurestaticapps.net

Copilot

Pull request overview

This PR enhances the Log Viewer's donut chart component to be more interactive and responsive. It adds clickable slices that navigate to filtered search results, displays counts inline within slices, and implements responsive layouts for different screen sizes. The router was also enhanced to support SVG anchor elements for SPA navigation.

Key Changes:

Added clickable slices to the donut chart that link to filtered log search views with appropriate date ranges
Implemented responsive layout using CSS Grid with container queries (312px breakpoint)
Extended the core router to handle SVG <a> elements for SPA navigation

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/src/packages/core/router/router-slot/util/anchor.ts	Added support for SVG anchor elements in the router's click handler, extracting href from SVGAnimatedString and handling URL resolution
src/Umbraco.Web.UI.Client/src/packages/log-viewer/components/donut-chart/donut-chart.element.ts	Added `showInlineNumbers` and `showDescription` properties, implemented text positioning for inline numbers, wrapped slices in SVG anchors when href is provided, made container responsive
src/Umbraco.Web.UI.Client/src/packages/log-viewer/components/donut-chart/donut-slice.element.ts	Added `href` property to enable clickable slices
src/Umbraco.Web.UI.Client/src/packages/log-viewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts	Added date range observer, implemented `#buildSearchUrl()` method, refactored template to use Lit's `repeat` directive, implemented responsive CSS Grid layout
src/Umbraco.Web.UI.Client/src/mocks/data/log-viewer.data.ts	Refactored `getLevelCount()` to use cleaner `reduce` pattern with proper TypeScript typing

...ackages/log-viewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts

src/Umbraco.Web.UI.Client/src/packages/log-viewer/components/donut-chart/donut-chart.element.ts

src/Umbraco.Web.UI.Client/src/packages/core/router/router-slot/util/anchor.ts

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

...ackages/log-viewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts

github-actions · 2025-11-24T10:03:11Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-ground-017b08103-20928.westeurope.6.azurestaticapps.net

github-actions · 2025-11-24T10:07:13Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-ground-017b08103-20928.westeurope.6.azurestaticapps.net

…-donut-chart

iOvergaard · 2025-11-25T14:28:40Z

Thanks, @AndyButland. The problem seems to be that the log levels (from the /log-level endpoint) are returned as keys, and because of our JSON camelCase filter, they end up being lowercased. Perhaps we'd need a new endpoint with a different format, for instance, Array<{ key: string, count: number }> would do it.

I think we can fix it in the frontend temporarily, though.

AndyButland · 2025-11-25T14:44:02Z

OK. We could override that, with e.g.

    [JsonPropertyName("Information")]
    public int Information { get; set; }

Which produces e.g.:

{"Information":616,"Debug":3136,"Warning":215,"Error":5,"Fatal":0}

But you can just also de-camel case it in the front-end I would imagine, given they are all single words.

iOvergaard · 2025-11-25T14:46:03Z

@AndyButland Interesting! That would be a breaking change, though, wouldn't it? We'd ideally like a different model if we had the chance to fix it, I imagine.

AndyButland · 2025-11-25T14:51:07Z

It would be a breaking change in the API response yes, and would also change typed clients. That's why I feel it may be better just to fix it on the client, so you display and link using pascal cased names. But a V2 endpoint could be make to do this if it was considered important.

…enum from the server, which requires to map the keys as JSON camelCase's the keys

github-actions · 2025-11-25T14:56:10Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-ground-017b08103-20928.westeurope.6.azurestaticapps.net

iOvergaard · 2025-11-25T14:56:12Z

@AndyButland It hasn't been an issue until now where we started sending those keys back to the server! I guess it is very much NOT important. We have handled it in the client so any extensions that happen to ask for these keys now gets them the same way as they are typed in the LogLevelModel enum generated by the openapi schema. It is slightly breaking, but actually fixes a downstream issue where the server does not recognize its own keys! ;-)

…-donut-chart

github-actions · 2025-11-25T15:01:14Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-ground-017b08103-20928.westeurope.6.azurestaticapps.net

…L (rather than the automatic .toString() that gets a qualified URL)

github-actions · 2025-11-25T15:25:12Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-ground-017b08103-20928.westeurope.6.azurestaticapps.net

Copilot

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 5 comments.

src/Umbraco.Web.UI.Client/src/packages/core/router/router-slot/util/anchor.ts

...ackages/log-viewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts

src/Umbraco.Web.UI.Client/src/packages/log-viewer/components/donut-chart/donut-chart.element.ts

src/Umbraco.Web.UI.Client/src/packages/log-viewer/repository/sources/log-viewer.server.data.ts

...ackages/log-viewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

github-actions · 2025-11-26T07:40:56Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-ground-017b08103-20928.westeurope.6.azurestaticapps.net

github-actions · 2025-11-26T07:45:39Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-ground-017b08103-20928.westeurope.6.azurestaticapps.net

leekelleher

Re-tested and all works as described! 🚀

iOvergaard and others added 9 commits November 21, 2025 12:17

fix: uses whole link

a2eec64

chore: improves mock function

f6c66ec

chore: formatting

5b46335

fix: ensures the donut chart works responsively

52d36ca

feat: adds support for SVGAElement in the router

72d7715

Copilot AI review requested due to automatic review settings November 21, 2025 17:40

iOvergaard added the preview/backoffice Pull requests that can be previewed in a static version of the Backoffice label Nov 21, 2025

Copilot started reviewing on behalf of iOvergaard November 21, 2025 17:41 View session

iOvergaard requested a review from leekelleher November 21, 2025 17:42

iOvergaard added type/feature area/frontend release/17.1.0 labels Nov 21, 2025

Copilot finished reviewing on behalf of iOvergaard November 21, 2025 17:43

Copilot AI reviewed Nov 21, 2025

View reviewed changes

leekelleher requested a review from Copilot November 24, 2025 09:52

Copilot started reviewing on behalf of leekelleher November 24, 2025 09:53 View session

Copilot finished reviewing on behalf of leekelleher November 24, 2025 09:55

Copilot AI reviewed Nov 24, 2025

View reviewed changes

...ackages/log-viewer/workspace/views/overview/components/log-viewer-log-types-chart.element.ts Outdated Show resolved Hide resolved

Merge branch 'main' into v17/feature/logviewer-donut-chart

3526bf1

adds key for description

fb4e8e4

iOvergaard added 2 commits November 25, 2025 11:31

Merge remote-tracking branch 'origin/main' into v17/feature/logviewer…

7cabeee

…-donut-chart

chore: adds test data

3bd3042

iOvergaard added 3 commits November 25, 2025 15:15

chore: restores functionality with lower-cased keys

39b9faf

fix: adds translation to 'log messages'

bb01c67

chore: removes unused method

252f16f

feat: ensures that the log levels follow the generated LogLevelModel …

80f10b3

…enum from the server, which requires to map the keys as JSON camelCase's the keys

iOvergaard added 2 commits November 25, 2025 15:57

Merge remote-tracking branch 'origin/main' into v17/feature/logviewer…

e9ac69d

…-donut-chart

fix: uses correct property

7bc9b9a

fix: reverts back to the original behavior to calculate a relative UR…

a505041

…L (rather than the automatic .toString() that gets a qualified URL)

iOvergaard requested a review from Copilot November 25, 2025 15:25

Copilot started reviewing on behalf of iOvergaard November 25, 2025 15:25 View session

Copilot finished reviewing on behalf of iOvergaard November 25, 2025 15:31

Copilot AI reviewed Nov 25, 2025

View reviewed changes

iOvergaard and others added 2 commits November 26, 2025 08:38

Apply suggestions from code review

9dff41e

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

fix: uses fullUrl for router

6e514df

iOvergaard added 2 commits November 26, 2025 08:42

fix: properly translates new aria-label

1505466

Merge branch 'main' into v17/feature/logviewer-donut-chart

f3081e8

leekelleher self-requested a review November 26, 2025 09:26

leekelleher approved these changes Nov 26, 2025

View reviewed changes

leekelleher merged commit ce98184 into main Nov 26, 2025
27 of 28 checks passed

leekelleher deleted the v17/feature/logviewer-donut-chart branch November 26, 2025 09:28

iOvergaard mentioned this pull request Nov 28, 2025

History: Take URL objects into consideration when storing Backoffice history #20986

Merged

Log Viewer: Enhances the donut chart to be responsive, link to log search, and show numbers directly #20928

Log Viewer: Enhances the donut chart to be responsive, link to log search, and show numbers directly #20928

Uh oh!

Conversation

iOvergaard commented Nov 21, 2025 • edited by leekelleher Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Enhanced Components

Core Router Enhancement

Visual Changes

Technical Details

URL Structure

Router Changes

Responsive Breakpoint

Test Steps

1. Basic Functionality

2. Chart Interactions

3. Responsive Layout

4. Date Range Changes

5. External Link Test (Router regression)

Notes

Uh oh!

github-actions bot commented Nov 21, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

github-actions bot commented Nov 24, 2025

Uh oh!

github-actions bot commented Nov 24, 2025

Uh oh!

iOvergaard commented Nov 25, 2025

Uh oh!

AndyButland commented Nov 25, 2025

Uh oh!

iOvergaard commented Nov 25, 2025

Uh oh!

AndyButland commented Nov 25, 2025

Uh oh!

github-actions bot commented Nov 25, 2025

Uh oh!

iOvergaard commented Nov 25, 2025

Uh oh!

github-actions bot commented Nov 25, 2025

Uh oh!

github-actions bot commented Nov 25, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Nov 26, 2025

Uh oh!

github-actions bot commented Nov 26, 2025

Uh oh!

leekelleher left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

iOvergaard commented Nov 21, 2025 •

edited by leekelleher

Loading