shadcn.io is not affiliated with official shadcn/ui
Website Analytics Dashboard Block for Vue
Daily page views for 7, 30 or 90 days as a line against the previous period, a day slider that reads each day beside the same day before, signed changes, the top pages with share bars and a source split.
Installation
Overview
See whether traffic is up or down, and on which days, with this website analytics dashboard for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a hand-built line chart of daily page views, with the previous period drawn dashed behind it. A range slider under the chart moves a marker along the days and reads the day in a polite line, such as "4 Oct: 8,412 views, previous period 7,970". A figures line gives page views, visitors, bounce rate and average session with a signed change each, and a table lists the top pages with a share bar. The side cell splits the views by source as one stacked bar and a list. A Native Select in the header picks 7, 30 or 90 days. It's built from Native Select, Badge and Guides. For product sites, docs and marketing reports.
FAQ
How do I fill it with my traffic?
Replace the series that builds VIEWS with your daily page views, oldest first, 180 days ending on AS_OF. Each entry in RANGES holds the typed visitors, bounce rate, average session and the page and source shares for that range. The header sentence, the changes, the top-page counts and the chart are all worked out from them.
What is the previous period?
The same number of days directly before the range: for 30 days, the 30 days before those. The dashed line is drawn from them, and each change in the figures line is this period against that one.
How do I read a single day?
Move the range slider under the chart, with the pointer or the arrow keys. The marker follows, and the status line gives the date, that day's views and the previous period's views at the same place. A hidden table under the chart lists every day for screen readers.