shadcn.io is not affiliated with official shadcn/ui
Oil Pipeline Map Block for Solid
A 480 km pipeline on a drawn island with four pump stations; a slider moves a dot along the pipe and reads the kilometre and the pressure, a profile chart draws the pressure with a step at each station, and a table lists outlet pressures.
Installation
Overview
Read the pressure anywhere along a pipeline, with this oil pipeline map for Solid with Ark UI. Trunkmarsh, a pipeline operator, draws a 480 km line across a drawn island with four pump stations as numbered squares and a diamond for the terminal. A Slider, "Position along the line", moves a dot along the pipe and reads "Km 212, 52 bar". Pressure is typed per stretch: each station sends the oil out at an outlet pressure, friction takes a typed number of bar from it for every kilometre, and the next station boosts it again. A profile chart under the map draws that as a hairline with a step at each station and a cursor that follows the slider, and a Table lists the stations with their outlet pressure and throughput, the stretch under the cursor tinted. A polite message speaks the reading once the slider settles. It's built from Slider, Table and Guides, with a CSS entrance only. For pipeline operators, control rooms and engineering reviews.
FAQ
How is the pressure at a kilometre worked out?
pressureAt finds the last station at or before the kilometre and returns its outlet pressure minus its friction rate times the distance from it. The profile chart draws the same numbers: a fall along each stretch and a step up at the next station.
How does the dot find its place on the map?
The route is a typed polyline in the drawing's 480 by 360 units. pointOnPipe takes the share of the line's length that the kilometre is of 480 and walks the segments to that distance, so the dot stays on the drawn pipe.
How do I use my own line?
Edit STATIONS (a kilometre, an outlet pressure, a friction rate and a throughput), ROUTE for the drawn path and LENGTH. The chart, the table and the reading follow.
Can I use it without a mouse?
Yes. The slider takes the arrow keys and its value text says the kilometre and the pressure, the table is plain text with the current stretch marked, and the map and chart are decoration, hidden from assistive technology.