shadcn.io is not affiliated with official shadcn/ui
Data Analyst Cleaning Waterfall Profile Block for Vue
A data analyst profile as a cleaning waterfall: four reports to choose from, five steps with the rows kept as a bar, the rows removed as a hatched stretch with the reason in words, the share kept worked out, and the finding in one sentence.
Installation
Overview
Show how much data survived before a number was published, with this data analyst profile for Vue with Ark UI. A compact header names the report library, and the hairline frame under it opens on the analyst: initials, name, role and place. A start cell lists four reports as pressable rows (a native select on a phone) and the chosen one fills the main cell: five steps from Raw to Joined, each with its name, the reason it removed what it did and a bar on one scale, solid for the rows kept and hatched for the rows that step removed. The count, the share kept and the rows removed are written under every bar, and one sentence states how much reaches the report and the finding. It's built from Native Select, Badge, Avatar and Guides, with a CSS entrance only. The reports and counts are invented. For a report library, a data-quality page or an analyst's portfolio.
FAQ
How do I add my own report?
Add an entry to REPORTS: an id, a title, the day it was refreshed, five row counts in thousands (kept), five reasons in the same order and the finding. The removed counts, the shares, the bar widths and the share that reaches the report are worked out from the counts, so they are never typed twice. The counts must not rise from one step to the next; the first is the raw count.
Is every bar on the same scale?
Yes. Each bar spans the raw rows of its report, so a shorter solid bar means fewer rows kept, and the hatched stretch after it is exactly what that step removed. The hatching is a pattern, not a colour, so the removed part reads in any theme. Switching reports re-scales the bars to the new report's raw count.
Is any of it real data?
No. The reports, the counts, the reasons and the findings are invented. Choosing a report only changes what the page shows, and the polite line says how many rows came in and how many reach the report. To make it real, load each report's step counts from your pipeline and keep the reasons next to them.
Is it accessible?
The steps are an ordered list with a heading each, the bars are decorative because the same numbers are written under them, and the report list marks the chosen one with the current state. The refreshed day is a real time element, and the status line is a polite live region present from the start. In a right-to-left layout the bars stay left to right and the numbers keep their order.