Case Study·Client project·Analytics dashboard
In productionA customer-support SaaS needed its support leads to stop rebuilding reports by hand. We built a Vue 3 dashboard with live ticket metrics, fast charts on long date ranges, one shared set of filters and exports that match the screen.
Vue 3
TypeScript
Vite
Pinia
ECharts
WebSockets
Vitest
Context
The client runs a helpdesk product for B2B companies. Their own support leads, and their customers' leads, needed the same answers every week: how many tickets came in, how fast teams responded, where the backlog was growing and how customers rated the help they got.
Those answers lived in CSV exports, a separate BI tool and a few shared spreadsheets. Numbers didn't always agree, and building the weekly report took hours.
We built a dashboard inside the product that answers those questions live. It's a client project, so this page describes our engineering without publishing the client's name or code.
The Journey
We started from the questions people asked every week, built a data layer every chart could share, and only then designed the views. It's the order we recommend for any reporting project.
Support leads were stitching together CSV exports, a BI tool and spreadsheets every Monday. Before writing any code we sat with them, listed the questions they answered each week, and turned those into the metrics and views the dashboard had to provide.
History comes from the existing REST API; live changes arrive over a WebSocket. A small Pinia store merges both, so every widget reads the same numbers and none of them talks to the network on its own.
We wrapped ECharts in a handful of Vue components with consistent props, colours and empty states, then built the views on top: ticket volume, first response time, resolution time, backlog by team and satisfaction scores, all driven by one shared filter bar.
Exports are built from the same query as the screen, so a CSV always matches the chart it came from. We rolled the dashboard out team by team, watched how people used it, and tuned the default views from that.
Hard Problems, Solved
Drawing a chart is easy. Keeping it live, fast and consistent with every other number in the product is the work. These are the problems we solved, described without exposing the client's code.
Where this applies to you Any operational dashboard that stays open for hours and updates in real time.
Where this applies to you Dashboards that need to show both today and the last twelve months.
Where this applies to you Reporting tools where people share links to specific views.
Where this applies to you Any product reporting on SLAs, shifts or teams in more than one time zone.
Where this applies to you Teams who take numbers from the dashboard into finance or board reports.
Vue Depth
Data loading, filters and live updates live in small composables that each widget reuses.
ECharts wrapped in Vue components with typed props, shared colours and consistent empty and loading states.
One metrics store merges REST history with live WebSocket events.
Period, team and channel filters are kept in the route query, so views are shareable.
Charts below the fold render when they scroll into view, keeping first load fast.
Every chart has a text summary and a data table view for keyboard and screen-reader users.
Bucketing, time-zone and business-hours rules are covered by unit tests, including daylight-saving changes.
Key views are opened in a real browser on every pull request.
Is This You?
Operational screens that update live and stay open all day without slowing down.
One set of metric definitions, filters that apply everywhere and exports that match the screen.
Long date ranges and many series without a sluggish browser.
Moving weekly CSV and spreadsheet reporting into a live view inside your product.
FAQ
Yes. We built the dashboard for a B2B customer-support SaaS. The client's name and code aren't published, so this page describes the engineering and the outcome.
Yes. On this project live ticket events arrive over a WebSocket and are merged into a Pinia store with the API's history, so existing charts update without each one managing its own connection.
Whatever fits the product. Here it was ECharts, wrapped in typed Vue components. We've also worked with Chart.js and D3, and we can keep the library you already use.
Vue and Nuxt are our core. On this project the client's team owned the API, and we agreed the endpoints and bucketing rules with them. When the dashboard needs backend changes, we can make them too.
Usually, yes. Batching updates, rendering off-screen charts lazily and moving bucketing to the server fixed most of the slowness here without a rewrite.
Send us a short note on the contact page about your dashboard and what's not working. We'll set up a call to go through your product and codebase.
Get started
Talk to the engineers who built this live analytics dashboard in Vue 3. Tell us what you're reporting on and where it's stuck.
Matched in 24 hours·48 hours free on every plan·No long-term contract
