shadcn.io is not affiliated with official shadcn/ui
Property Valuation Map Block for Solid
An estimate from comparable sales: pick a home and its three nearest sold homes are joined on a drawn map, each with an Include checkbox, and the median price per square metre sets the estimate, its range and the sales used.
Installation
Overview
Show where a price comes from, with this property valuation map for Solid with Ark UI. Plinthcheck, a property price guide, draws an invented town, Ostrewick, as an SVG street map with eight homes sold this summer and five homes to value. A native Select picks the home; the three nearest sales are joined to it by lines and shown as pills with their price per square metre, and a Table lists them with the sale date, area, price and price per square metre. Each sale has an Include checkbox: untick one that does not compare (its line turns dotted and its pill dashed) and the estimate, the range and the count of sales used re-derive. The estimate is the median price per square metre of the included sales times the home's area, rounded to the nearest thousand, and the range runs from the cheapest to the dearest included sale. The three figures sit in a foot of three cells that share hairlines. The caption says it is sample data and not a valuation. On a phone the table keeps the sale and the price per square metre, with the date and area under the name. For property price guides, mortgage tools and appraisal pages.
FAQ
How is the estimate worked out?
Each included sale gives a price per square metre (its price in cents over its area, rounded to whole cents). The estimate is the median of those, times the home's area, rounded to the nearest thousand dollars; with two sales the median is their average. The range is the lowest and highest price per square metre times the same area. The helpers medianOf, estimateOf, lowOf and highOf are at the top of the file, and none of the three figures is typed twice.
How are the comparable sales chosen?
They are the three sold homes nearest the chosen home in the drawing's units. Real comparables also match type, size and age, so in your app rank by those too, and let the person untick the ones that do not fit, as here.
What if every sale is unticked?
The estimate and the range say None, the count says 0 of 3 and the polite message says there is no estimate. Tick a sale and they return. Nothing in the layout moves, because the three cells and the table keep their size.
Can I use it without a mouse?
Yes. The select is labelled Home to value; each Include box is a real checkbox named by the sale's address, in the table's first column. A polite message speaks the new estimate, range and count after each change. The pins and lines are hidden from assistive technology because the table says the same things in text.
What stays local in the demo, and how do I wire it up?
All of it. The sales and homes are typed sample data and prices are integer cents. This is not a valuation and sends nothing. In your app query sold prices near the chosen address, keep the median in one helper, and show the method and the date range of the sales wherever you show the figure.