shadcn.io is not affiliated with official shadcn/ui
Pollution Monitor Map Block for Svelte
Six stations on a drawn harbour re-valued by an hour slider from 00:00 to 23:00 from typed 24-hour series, with wind arrows, health advice in words by band and a sparkline of the chosen station's day.
Installation
Overview
Watch a day of dust move through a port, with this pollution monitor map for Svelte with Ark UI. Hazelwind, a port authority, draws six monitoring stations on a harbour with quays, basins and a breakwater. A Slider runs from 00:00 to 23:00 and reads out as a time; each hour re-values every station from its own typed 24-hour series. Each station is a pill with its reading, a swatch from a five-step foreground ramp over five bands from Good to Severe and a small arrow turned to that hour's wind. The list shows every station at the chosen hour with its band in words, and a detail cell gives the chosen station's whole day as a sparkline with a marker at the hour, its peak hour, and the health advice for the band it is in, for example "Wear masks on the quay and move heavy work indoors." It's built from Slider and Guides, with a CSS entrance only. For ports, industrial estates and site safety teams.
FAQ
Where do the 24-hour series come from?
BASE is the port's fine-particle curve for a day, with a morning and an evening peak. Each station scales it by its own percentage and adds a small stateless wobble, so every station has its own typed series that is the same on the server and in the browser. In your app replace seriesOf with the hourly readings from your sensors.
What do the arrows show?
The direction the air moves toward at that hour, from a typed WIND list in degrees clockwise from north, plus a small turn of each station's own. The arrow is decoration for the pointer; the advice and the readings are in text.
Where does the health advice come from?
Each of the five bands has one sentence in ADVICE, written for the port. The detail shows the sentence for the band the chosen station is in at the chosen hour. These are sample sentences for the demo, not medical or regulatory guidance.
How does the slider announce itself?
Its value text reads as a time ("17:00"). A polite message says the highest station and the chosen station's band and advice once the slider has settled, never while it moves.
What stays local in the demo, and how do I wire it up?
All of it. The harbour, the stations, the wind and every reading are invented and typed into the file; nothing is fetched, published or saved. Load the hourly readings and wind for the chosen day from your sensor network and keep bandOf, which decides every swatch and every advice line.