shadcn.io is not affiliated with official shadcn/ui
Solar Panel Potential Map Block for React Aria
A roof calculator on a drawn street map: pick one of eight hatched rooftops, set the panels from 4 to 24 and the way the roof faces, and read the year's energy, savings and payback.
Installation
Overview
Show homeowners what a roof could earn, with this solar panel potential map for React with React Aria. Roofwatt, a solar installer, draws the invented town of Thornsea as an SVG street map with a canal and a green, and eight rooftops as small rectangles whose hatching is shade: the denser the lines, the less sun. Choose a roof by its pin or its row, then set the panels with a Slider from 4 to 24 and the way the roof faces with a Native Select (South, East and west, or North). The foot reads the year back in four figures: the panels counted, the energy in kilowatt hours, the saving and the payback in years. The list beside the map shows every roof at the same settings, each with its shade as an outline Badge and the number of panels it holds, and a roof that holds fewer panels than you asked for says so. A polite status line speaks the result once the controls settle. On a phone the map comes first and the roofs stack under it in a box that scrolls on its own. It's built from Slider, Native Select, Badge and Guides, with a CSS entrance only. For solar installers, energy suppliers and home-improvement apps.
FAQ
How do I use my own roofs?
Edit ROOFS. Each roof has an id, a name, the room for panels, a shade from 0 to 3 that picks the hatching, sun (the kilowatt hours a year that one kilowatt of panels makes on a south face of that roof) and a centre and size in the drawing's 480 by 360 units. In your app take the sun figure from a solar irradiance service for the roof's address and measure the usable area from its outline.
How are the figures worked out?
Energy is the panels counted, times 0.4 kW, times the roof's sun figure, times the share for the orientation (100 percent south, 86 east and west, 58 north). The saving is the energy times a typed tariff of 31 cents a kilowatt hour. The payback is the cost, a fixed $1,500 plus $480 a panel, divided by the yearly saving. Everything is held in integer cents and the caption says it is a simplified estimate, not a quote. A real quote also needs the roof pitch, the inverter and the local feed-in rules.
What happens when I ask for more panels than the roof holds?
The roof's own limit wins. The figures count only the panels that fit, and the line under the foot says so, for example that the roof holds 16 so 16 are counted. The slider keeps its range so the comparison list stays on the same scale for every roof.
Can I use it without a mouse?
Yes. The slider takes the arrow keys and announces its value in panels, the select is a native one, and the roofs are a list of buttons, one tab stop each, the chosen one marked as current. The pins on the map are hidden from assistive technology and skipped by the Tab key because the list says the same things in text, and hatching is never the only sign of shade: each row says it in words.
What stays local in the demo, and how do I wire it up?
All of it. The roofs, the tariff and the costs are typed sample data, the map is a drawing and nothing is requested or sent. In your app load the roofs from your survey, keep the formulas in one place and make a button start a real quote. Keep the caption that says it is an estimate.