shadcn.io is not affiliated with official shadcn/ui
Timeline With Charts Block for Vue
A promotions log on a vertical rail where each of five shop promotions carries a fifteen-day bar chart, a derived lift sentence and an Orders or Revenue toggle that redraws every chart.
Installation
Overview
Show what a promotion did to the days around it with this charted timeline for Vue with Ark UI. It is written for Promolift, a fictional promotions log for a cookware shop. A hairline frame with a plus mark on each corner holds a band of three figures (best lift, average lift during, average lift after) over a rail of five promotions. Each node has fifteen daily bars: seven days before, the four days of the promotion on a shaded window, and four days after, with a dashed line at the average of the days before. Under the title a derived sentence reads, for example, "Orders +22% during, +5% after, against the 7 days before". An Orders and Revenue Toggle Group in the header redraws all five charts and every figure, and the best promotion carries a ringed node and a Best lift Badge. The charts are CSS-sized SVG bars with no chart library, and each has a screen reader table. The series come from a fixed formula, so they are example data. For campaign reviews, marketing logs and any history where an event needs its before and after.
FAQ
How do I use my own series?
Edit PROMOTIONS at the top of the file, or replace seriesOf() with your own fifteen daily values per promotion: seven before, four during, four after. Everything else, the bars, the dashed average, the lifts and the sentences, is derived from those values.
How is the lift worked out?
It compares the average of the four promotion days, and then of the four days after, with the average of the seven days before, rounded to a whole percent. Revenue is orders times a basket that discounts lower during a promotion, so its lift can differ from the orders lift.
How is a chart read without seeing it?
The bars are hidden from assistive technology. Each node has a visible caption with the sentence and the three averages, and a screen reader table with the averages and all fifteen daily values.
What stays in the page?
Only the chosen measure, in local state. Nothing is fetched or saved. To use real data, load the series from your analytics API and pass them to the same helpers.