shadcn.io is not affiliated with official shadcn/ui
Utility Outages Map Block for Radix UI
Nine zones of an invented city shaded by customers still without power, with a toggle for now, in 2 hours and in 6 hours that restores zones by their typed repair times, and a vertical steps timeline for the chosen zone.
Installation
Overview
Forecast when the power comes back, with this utility outages map for React with Radix UI. Gridkeep, an electricity network operator, draws nine zones of the invented city of Pelbury on a lattice whose neighbours share every border, each shaded by the customers still without power in four steps with a legend in words; a restored zone is the lightest and carries a check. A Toggle Group moves the clock from Now (14:00 on Monday 12 October) to two and six hours later. A zone is restored when its typed restoration time has passed, so the figure of customers still out, the restored share and the shading all follow. A card for the chosen zone shows its cause and a vertical Steps timeline, reported, crew assigned, repair under way and restored, with fixed times and the later ones marked as forecasts. The list of zones is the way in for the keyboard and the map is a pointer shortcut. It's built from Toggle Group, Steps, Progress and Guides, with a CSS entrance only. For utilities, councils and emergency desks. Sample data, not advice.
FAQ
How is a zone restored in the forecast?
Each zone carries four typed times: reported, crew assigned, repair under way and restored. At a given moment the clock is 14:00 plus the chosen hours, and a zone is restored when its last time is on or before the clock. The customers still out, the restored share and the shading are all computed from that one rule, in restoredBy and outOf.
How does the steps timeline decide what is done?
A step counts as reached when its time is on or before the clock, and the Steps component is given the number of reached steps. Later steps show "Forecast" with their typed time, so the timeline never claims something has happened that the data says is still to come. Times are fixed text on a fixed day, never read from the clock.
How do I use my own zones?
Edit LINES: a lattice cell, a name, customers out, a cause and four times as HHMM. Change the thresholds in levelOf to suit your customer counts and the three entries in MOMENTS for your forecast steps. In your app feed the same shape from your outage management system, with crew times as they are logged.
Can I use it without a mouse?
Yes. The toggle group is one tab stop with arrow keys and every zone is a button in the list with its pressed state. The zones on the map are skipped by the Tab key and hidden from assistive technology because the list says the same things in text. A polite message gives the customers still out and the chosen zone's forecast once the choice settles.