shadcn.io is not affiliated with official shadcn/ui
Referral Tracking Table Block for Vue
A traffic sources table with nested visitor and conversion-rate bars, an attribution switch between last click and first click that shares the same conversions out differently, and Rate and Revenue heads that sort.
Installation
Overview
See how the attribution model changes who gets the credit, with this referral tracking table for Vue with Ark UI. Seven traffic sources sit in a native table, each with a nested bar (the outer bar is its visitors against the busiest source, the inner bar its conversion rate), the rate and the revenue. A Toggle Group at the header's end switches between last click and first click: the same 1,327 conversions are shared out differently, every bar, rate and revenue figure is worked out again, and each row says what the other model would give, such as "+58 under first click". The Rate and Revenue heads are buttons that sort highest first, then lowest first, then back to the order of visitors, with ties falling to the name, and a polite status line reads out the model, the totals and the sort. The rows are the same seven in every state, so the table never changes height. It's built from Toggle Group and Guides, with a CSS entrance only. For marketing dashboards, campaign reports and any funnel where credit is a choice.
FAQ
What is the difference between last click and first click?
Last click credits a conversion to the source of the final visit before it, first click to the source of the first visit. The two figures per source are typed in the file and add up to the same total, so switching the toggle moves credit between rows rather than creating or losing any.
How do I read the nested bar?
The outer bar's width is the source's visitors against the busiest source. The inner bar is the conversion rate on a 0 to 10 percent scale, drawn inside the outer bar, so a high rate on small traffic is a short outer bar with a nearly full inner one. The numbers beside the bar give the exact values.
What does the change line say?
The gap between the other model's conversions and the one shown, signed, such as "+58 under first click" when first click would credit the source with 58 more conversions, or "Same under first click" when the two agree. It flips its wording when you switch.
How does sorting work?
The first press on Rate or Revenue sorts highest first, the second lowest first, the third returns to the order of visitors. The sorted head carries aria-sort, its column turns from muted to full strength, and sorting happens on the press, never under the pointer.
What changes on a phone?
The Medium column folds under the source's name, the bars and the three lines of text stay, and the figures are set smaller. Every row keeps one height whatever the model.
What stays local, and how do I wire it for real?
Everything: the sources, visitors and both models' conversions are typed in SOURCES, and the toggle and sorts only change this page. To wire it up, load your analytics' per-source visitors and the conversions each model credits, keep the helpers that derive rate, revenue and the change line, and keep the two totals equal so credit only moves.