Jacob Overgaard ce98184178 Log Viewer: Enhances the donut chart to be responsive, link to log search, and show numbers directly (#20928)
* Log Viewer: Refactor log types chart to use Lit repeat directive

- 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>

* Donut Chart: Add inline numbers and fix tooltip positioning

- 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>

* Donut Chart: Add clickable slices and visible description

- 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>

* fix: uses whole link

* Log Viewer: Fix log types chart layout for larger screens

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>

* chore: improves mock function

* chore: formatting

* fix: ensures the donut chart works responsively

* feat: adds support for SVGAElement in the router

* adds key for description

* chore: adds test data

* feat: displays numbers in the legend instead of the chart

* chore: restores functionality with lower-cased keys

* fix: adds translation to 'log messages'

* chore: removes unused method

* feat: ensures that the log levels follow the generated LogLevelModel enum from the server, which requires to map the keys as JSON camelCase's the keys

* fix: uses correct property

* fix: reverts back to the original behavior to calculate a relative URL (rather than the automatic .toString() that gets a qualified URL)

* Apply suggestions from code review

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

* fix: uses fullUrl for router

* fix: properly translates new aria-label

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2025-11-26 09:28:44 +00:00
2024-12-10 10:25:50 +01:00
2022-09-27 14:22:34 +02:00
2024-11-11 13:02:33 +01:00
2025-04-01 11:52:32 +02:00
2025-09-24 23:31:14 +02:00

Umbraco CMS

GitHub license NuGet Version Build status PRs Welcome Forum Chat about Umbraco on Discord Mastodon Follow

Umbraco is a free and open source .NET content management system. Our mission is to help you deliver delightful digital experiences by making Umbraco friendly, simpler and social.

Learn more at umbraco.com

Umbraco Logo

Looking to install Umbraco?

You can get started using the following commands on Windows, Linux and MacOS (after installing the .NET Runtime and SDK):

dotnet new install Umbraco.Templates
dotnet new umbraco --name MyProject
cd MyProject
dotnet run

Documentation

Our comprehensive documentation takes you from the fundamentals on how to start with Umbraco to deploying it to production.

Some important documentation links to get you started:

Backoffice Preview

Want to see the latest backoffice UI in action? Check out our live preview:

backofficepreview.umbraco.com

This preview is automatically deployed from the main branch and showcases the latest backoffice features and improvements. It runs from mock data and persistent edits are not supported.

Get help

If you need a bit of feedback while building your Umbraco projects, we are chatty on Discord. Our Discord server serves as a social space for all Umbracians. If you have any questions or need some help with a problem, head over to our dedicated forum where the Umbraco Community will be happy to help.

Looking to contribute back to Umbraco?

You came to the right place! Our GitHub repository is available for all kinds of contributions:

Umbraco is contribution-focused and community-driven. If you want to contribute back to the Umbraco source code, please check out our guide to contributing.

Tip: You should not run Umbraco from source code found here. Umbraco is extremely extensible and can do whatever you need. Instead, install Umbraco as noted above and then extend it any way you want to.

Description
Umbraco is a free and open source .NET content management system helping you deliver delightful digital experiences.
Readme 448 MiB
Languages
C# 59.5%
TypeScript 39.9%
JavaScript 0.3%
HTML 0.2%