Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

Customer Support Ticket Volume Monitoring Block for Vue

Fourteen days of opened and closed support tickets as mirrored columns with the backlog as a dashed line, weekend ticks, a topic toggle and a cursor that reads one day.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See whether the help desk is keeping up with this ticket volume chart for Vue with Ark UI. It is Deskgauge, a help-desk analytics tool (made up), drawing 14 days of tickets: opened tickets rise from a centre axis as solid columns, closed ones hang below as lighter columns, and the backlog runs across as a dashed line on its own scale, so a day that closed fewer than it opened looks lopsided. Weekends are the hatched ticks on the day axis. A Toggle Group in the header redraws the plot for All, Billing, Technical or Account tickets, and a hidden range over the plot is the cursor that reads one day's opened, closed and backlog counts. The header sentence is worked out from the series (the backlog's change over seven days and the day that fell behind most). On a phone the plot scrolls in a named region that opens on the newest days. Guides draw the frame and its bands; the entrance is CSS only. For support leads, staffing reviews and weekly reports.

FAQ

How do I use my own tickets?

Edit TOPICS: each has an opened and a closed list of 14 daily counts, oldest first, and the start backlog before the first day. The All series is the sum of the topics, backlogs are worked out by adding opened and taking away closed, and LAST_DAY sets the date of the newest column.

How does the cursor work?

It is a native range laid over the plot, named Day, whose value text is the day ("Tue 13 Oct"). Arrow keys move it one day, Home and End jump to the ends, and dragging scrubs it. The readings under the plot update at once and a polite status line speaks the day about 600 ms after the last change.

What is real here and what is typed?

All of it is typed: the counts, the backlogs and the dates are examples and nothing is read from a help desk. In your app feed the same shapes from your ticket export; the columns, the line, the scales and the header sentence are derived from them.

Can I read it without colour?

Yes. Opened and closed differ by position and weight, the backlog is dashed, weekends are hatched, and a table of all 14 days is available to screen readers.

How does it look on a phone?

The plot is 224 px tall and scrolls sideways with the newest seven days in view; the readings stack in two columns.

All 100 monitoring blocks