shadcn.io is not affiliated with official shadcn/ui
Supply Chain Map Block for Radix UI
Suppliers, factories and warehouses on a dot map of the world; choose a late supplier and a delay of up to 21 days, and each node shows its days of cover and the first one to run out is named.
Installation
Overview
See how far one late supplier reaches, with this supply chain map for React with Radix UI. Stowline, a procurement planner, draws the world as a dot map with three suppliers (circles), two factories (squares) and three warehouses (diamonds) joined by flow lines. A select picks the late supplier and a slider sets the delay from 0 to 21 days. Each factory and warehouse downstream keeps stock for a number of days of cover; when the delay is longer than the cover on the way, the node runs dry and is drawn filled, and the flows carrying late goods turn dashed. Above the list the first node to run out is named ("Out in 7 days: Monterrey"), and every row says in words whether it is covered, out in how many days and for how long, or not affected, with a bar for its cover. A factory fed by the supplier runs out the shipment's due days plus its cover from now; a warehouse behind it runs out its own cover after the shortfall reaches it. Simplified, not a forecast. Cities are real places; the companies and figures are invented. It's built from Native Select, Slider, Progress and Guides, with a CSS entrance only. For procurement, planning and operations teams.
FAQ
How is the day a node runs out worked out?
A factory fed by the late supplier runs out due + cover days from now, where due is the days until the first affected shipment was due and cover is the days of stock on hand, and it stays out for the delay minus its cover. A warehouse behind a factory that runs out is out transit + cover days after that, and stays out for what remains of the delay after its own cover. A node whose cover is longer than the delay is shown as covered with the days to spare.
How do I use my own network?
Edit SITES (a kind, a mark, a name, a city, a position in the map's columns and rows and the days of cover), SUPPLY (supplier to factory, with the days until the first shipment is due) and SHIP (factory to warehouse, with the days in transit). The map, list, headline and flow styles all read them. The land is the LAND bitmap, one row per 7 degrees of latitude.
Can I use it without a mouse?
Yes. The select and the slider are ordinary controls, the slider speaks "12 days", and the eight rows list the same facts the map draws. The map is decoration for assistive technology, and a polite message speaks the headline once the controls rest.
Are the places and companies real?
The cities are real, named only as places on a world map; the suppliers, plants and warehouses are invented descriptions, and all figures are sample data. The caption says so.