> For the complete documentation index, see [llms.txt](https://docs.harmony.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.harmony.io/dashboard-and-analytics/working-with-dashboard-widgets.md).

# Working with Dashboard Widgets

{% hint style="info" %}
**Path:** `/dashboard`
{% endhint %}

### Understanding Widget Types

Dashboard widgets fall into two categories: **number widgets** and **chart widgets**.

#### Number Widgets

Number widgets display a single metric, such as:

* Average Response Time
* Average Resolution Time
* SLA Compliance
* Total Tickets

They use a fixed height and can span 3-12 columns wide. Spacing around number widgets has been improved for a cleaner layout.

Number widgets are interactive - clicking a single number widget (e.g. total ticket count) navigates to the corresponding page with the widget's filters automatically applied. For number-group widgets (e.g. tickets broken down by status), click any individual entry to navigate to that page filtered by that specific value. Clickable widgets display a subtle highlight on hover so it is clear they are interactive.

#### Chart Widgets

Chart widgets visualize data as line charts, bar charts, or donut charts. Examples include:

* Ticket breakdown, software breakdown, asset breakdown
* Tickets resolved by employee, tickets solved by AI
* SLA compliance, response vs resolution, ticket priority
* Agent metrics

Each chart widget is predefined to support one or more chart types (line, bar, donut). When multiple types are available, you can switch between them using the chart-type toggle in the widget header.

You can also click directly on chart elements - such as bar chart segments, donut chart slices, and bar-gauge visualizations - to navigate to a filtered view of the underlying data. Relevant filters (including team and desk) are automatically applied so the resulting view matches exactly what the widget was showing.

#### Widget Descriptions and Tooltips

All default dashboard widgets include a plain-language description of what they measure. An info tooltip icon appears on each widget - hover over it to read the explanation without leaving your dashboard. This helps your team interpret data at a glance without needing additional context.

### Available Widgets

The widget library spans several data source categories. Below is an overview of what is available.

#### Tickets

Ticket widgets cover the full range of support metrics, including:

* Priority breakdown, unassigned ticket count, average satisfaction score
* Top service catalog items, top categories, top symptoms
* SLA metrics and resolution trends
* Status-based counts, assignee breakdowns, workflow and knowledge base links

#### Requests

Six request-based widgets capture Harmony's complete impact on support operations, including conversations resolved autonomously before a ticket was created:

* **Deflection Rate** - a KPI tile showing the percentage of requests resolved by Harmony out of all conversations
* **Total Requests by Resolution** - a donut chart breaking down requests into "Resolved by Harmony" vs. "Escalated to Human"
* **Request Resolution Trend** and additional request-focused metrics

These widgets are available in the widget library under the **Requests** section.

#### Assets

Asset widgets give you richer visibility into your asset inventory at a glance:

* **Asset breakdown by age** - assets categorized into age ranges (0-1 year, 2-3 years, 4-5 years, 6+ years) based on purchase date, with manufacturing year used as a fallback
* **Asset breakdown by EOL status** - see how many assets are End of Life, EOL Planned, or Supported; click any segment to navigate to the Assets page filtered by that EOL status
* **Asset breakdown by vendor** - distributed view of assets by vendor
* **Asset by Age** - click any age bucket to open the assets table pre-filtered by that age range

#### Applications

Five pre-built application insight stat widgets are available under the **Applications** section in the widget library:

* **Ghost** - applications with no recent activity
* **Inactive** - applications that have gone dormant
* **Shadow** - untracked or undiscovered applications
* **Orphaned** - applications with no assigned owner
* **Impaired** - applications experiencing issues

Each widget displays a live snapshot count. Clicking any widget takes you directly to the Applications page with the matching filter applied. Application insight widgets show counts that match what you see on the main applications page, filtered by the same default statuses - Approved and Discovered - so numbers are always aligned and reliable.

#### Employee Adoption

The **Employee Adoption Rate** widget shows the percentage of employees who submitted at least one request via the Service Desk Agent, visualized week over week so you can spot trends at a glance. Features include:

* **Week-over-week chart** - see how adoption changes over time
* **Time-frame filtering** - narrow the view to specific date ranges
* **Per-tenant data** - each organization sees its own adoption figures

#### Live Queue Widgets

Three real-time widgets give your team instant visibility into the current state of your support queue:

* **Open tickets now** - displays the current count of all tickets in an open or pending state
* **Unassigned tickets now** - shows how many tickets are currently waiting to be assigned to an agent
* **Tickets crossed SLA threshold now** - highlights the number of tickets that have breached their SLA

### Adding Widgets to Your Dashboard

#### Using the Widget Library

1. Click **Add widgets** (with the plus icon) in the dashboard header.
2. The **Widget library** opens as a side panel with all available widgets, organized by category (Tickets, Requests, Assets, Applications, and more).
3. Click a widget to add it. Widgets are sorted by category (number first, then chart) and by type.

Hover over a widget in the library to see a preview before adding. You can also access the library directly from a new dashboard's empty state to get started immediately.

![Widget library side panel](/files/Z4gKjTABfs6fZyTAipgB)

#### Quick Add in View Mode

On a custom dashboard (not the system dashboard), you can add widgets without entering edit mode. Click **Add widgets**, choose a widget, and it is added and saved automatically.

#### Add in Edit Mode

For finer control, enter edit mode first:

1. Click **Edit** in the header.
2. Click **Add widgets** and select from the library.
3. Arrange and resize as needed.
4. Click **Save & Exit** to persist your changes.

In edit mode, new widgets are not saved until you click **Save & Exit**.

### Configuring Widget Settings

#### Switching Chart Types

Chart widgets that support multiple types (line, bar, donut) show a chart-type button in the header. Click it to cycle to the next available type. The button shows the icon of the type you will switch to.

Not all chart widgets support all types; availability depends on the widget.

#### Widget Units

You can configure units for widget metric values so they are displayed in a clear, human-readable format. When setting up or editing a widget, choose from:

* **Time** - values are automatically formatted into a readable time display (e.g. hours, minutes, seconds) based on the magnitude of the data
* **Currency** - values are displayed as monetary amounts, with the option to select your preferred currency

#### Widget Titles and Data Sources

Widget titles and data sources are predefined. Each widget is configured to show a specific metric from Harmony (tickets, assets, software, AI performance, etc.). You cannot rename widgets or change their data sources in the UI.

### Clicking Widgets to Explore Data

Many widgets act as deep links to filtered views of the underlying data. When you click a widget element, Harmony automatically applies the relevant filters - including team and desk - so the resulting view matches exactly what the widget was showing. This works across:

* **Status-based widgets** - click a status (e.g. Pending Approvals) to see all tickets in that state
* **Assignee widgets** - click an agent or assignee to view their associated tickets
* **Workflow, knowledge base, and service catalog item widgets** - each links through to the corresponding filtered page
* **Number widgets** - single values navigate directly to the filtered page; group entries navigate filtered by that specific value
* **Asset by Age widget** - click an age bucket to open the assets table filtered to that age range
* **Application insight widgets** - click to open the Applications page filtered by the matching status
* **Bar charts, donut charts, and bar-gauge visualizations** - click any segment or bar to drill into the matching records

Clickable widgets display a subtle highlight on hover so it is clear they are interactive.

### Metric Calculation Accuracy

#### Median-Based Averages

Average metrics - such as Average Ticket Response Time - now use the statistical median rather than the mean. This gives you a more representative view of typical performance that is less skewed by outliers.

#### SLA Score Denominators

SLA score widgets now display the denominator alongside the score, so you can see the full picture of how your SLA score is being calculated, not just the resulting percentage.

#### CSAT Response Count

The Average Satisfaction Score widget displays the number of survey responses the score is based on, giving you instant confidence in how representative the result is. A tooltip explains the score's meaning directly in context. The response count appears consistently alongside the score across all widget and graph types - including bar, pie, line, and table views. When viewing satisfaction scores over time, the response count is shown on hover via a tooltip.

### Removing Widgets

1. Click **Edit** to enter edit mode.
2. Hover a widget and click the **trash** icon in its header.
3. Click **Save & Exit** to persist the change.

### Rearranging Widgets (Drag & Drop)

1. Click **Edit** to enter edit mode.
2. Grab the **drag handle** (grip icon) on the left side of a widget header.
3. Drag the widget to a new position. It snaps to the grid.

{/\* IMAGE: Edit mode with drag handle on widget header → /guides/working-with-dashboard-widgets/screenshots/widget-drag-handle.png | UI: frontend-app/src/features/dashboard/components/layout/dashboard-grid.tsx, widgets/chart-widget.tsx | Route: /dashboard \*/}

4. Click **Save & Exit** to save the layout.

### Resizing Widgets

1. Click **Edit** to enter edit mode.
2. Drag the **resize handle** at the bottom-right corner of a widget.

**Number widgets:** Width only, 3-12 columns. Height is fixed.

**Chart widgets:** Width (3-12 columns) and height (3, 6, or 9 rows). Width snaps to 3, 4, 6, 8, 9, or 12 columns; height snaps to 3, 6, or 9 rows.

### Understanding the Widget Layout Grid

The dashboard uses a 12-column grid:

* **Desktop:** Widgets use their assigned positions and sizes.
* **Tablet:** Layout may show 2 widgets per row where applicable.
* **Mobile:** Widgets stack in a single column.

Row height is fixed at 99px per row. Margins between widgets are 16px.

### Using Dashboard Date Ranges and Filters

The date range selector and desk selector in the dashboard header apply to all supported widgets.

#### Filtering by Service Desk

A desk selector in the dashboard header lets you choose a particular service desk or view data across all desks at once. The following widgets support desk-based filtering:

* **Average Response Time** and **Average Resolution Time**
* **SLA Compliance** (number and chart views)
* **Total Tickets**, **Opened vs. Resolved**, and **Ticket Breakdown**
* **User Satisfaction** and **AI Resolved vs. Escalated**
* **Open Tickets Now**, **Unassigned Tickets Now**, and **SLA Breached Now**

#### Setting Date Range Presets

![Dashboard with date range selector](/files/qJhs8JdIu26rIjGTO9Ry)

Click the date range button to open the selector. Choose a preset:

* **Last 24 hours** (1d)
* **Last 7 days** (7d)
* **Last 30 days** (30d) - default
* **Last 90 days** (90d)

#### Using Custom Date Ranges

1. Open the date range selector.
2. Enter **From** and **To** dates (YYYY-MM-DD), or use the interactive calendar to pick any start and end date.
3. Click **Apply time range**.

Custom ranges are limited to 90 days. The "From" date must be before the "To" date. When a single day is selected, charts automatically switch to hourly buckets for finer resolution. Date ranges are handled with timezone awareness so results stay accurate regardless of your location.

#### How Date Ranges Affect All Widgets

The selected date range applies to every widget on the dashboard. Data granularity adjusts automatically: shorter ranges (e.g. 24h) use finer intervals; longer ranges (e.g. 90d) may aggregate by week. Use the refresh button to reload data with the current range.

### Related Resources

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Managing Custom Dashboards</strong></td><td>Create, navigate, and manage custom dashboards</td><td><a href="https://github.com/harmonyso/public-docs/tree/main/guides/creating-and-managing-custom-dashboards/README.md">https://github.com/harmonyso/public-docs/tree/main/guides/creating-and-managing-custom-dashboards/README.md</a></td></tr><tr><td><strong>Getting Started</strong></td><td>Learn the basics of Harmony Dashboard and key features</td><td><a href="https://github.com/harmonyso/public-docs/tree/main/guides/getting-started-with-harmony-dashboard/README.md">https://github.com/harmonyso/public-docs/tree/main/guides/getting-started-with-harmony-dashboard/README.md</a></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.harmony.io/dashboard-and-analytics/working-with-dashboard-widgets.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.