shadcn.io is not affiliated with official shadcn/ui
History Chart Billing Block for Vue
Six months of invoices as stacked mini columns by line (plan, seats, usage, add-ons); pick any two months to get a difference table, a sentence on what drove it and a CSV of the full history.
Installation
Overview
Answer "why did this month cost more?" inside your app, with this spend history for Vue with Ark UI. A hairline frame with a plus mark on each corner holds six month cells on shared hairlines, each drawing its invoice as a stacked column in four weights of the foreground (plan, seats, usage, add-ons) with the month's total beside its name. Press a month to set one side of the comparison, press another to set the other, or use the two Native Selects that mirror the pick for the keyboard. A table then lists each line for both months with the change written as a sign and a word ("+$30 more"), and a sentence names the line behind most of it. A Shine Button in the header downloads the six months as a real CSV, the only colored control. The bands are ruled by Guides. For any product with a monthly invoice made of several lines.
FAQ
How do I load my own invoices?
Edit LINES, the names of the parts of an invoice, and MONTHS: each month has an id, a short label, a name and a values array in the same order as LINES, in whole dollars. The columns are scaled to the largest month, the difference table and the sentence are derived from the two months picked, and the CSV is built from the same array, so a new month or a new line needs no other change.
How does picking two months work?
Pressing a month sets B, the next press sets A, and so on, and the cells mark themselves with an "A" or a "B". If you pick the month the other side already holds, the two swap rather than leaving you comparing a month with itself. The selects change the same pair, so a keyboard or a screen reader user never needs the cells.
What does Download spend history save?
A real CSV file, built in the browser: one row per month with the month, each line and the total, whichever two months you are comparing. In your app, point it at the same data your invoices use, or at an export endpoint, and keep the status line so people know the file was saved.
How is the sentence worked out?
It takes the line with the largest change and says it drove the difference when that line is at least half of the total change and moves the same way ("Most of the change is usage: +$30 of +$35"). Otherwise it says the change is spread across lines. When both sides are the same month, or the totals match, it says so instead.
Can the columns be read without seeing them?
Each cell is a button named with the month, its total and which side it is compared as. The columns are decoration and are hidden from assistive technology; the table holds every number, with a caption naming the two months, row headers for the lines and a total row.