shadcn.io is not affiliated with official shadcn/ui
Competitor Analysis Map Block for Ark UI
Four of your shops against three rivals as catchment circles with a 1 to 4 km slider; sampled areas fill a segmented bar (only you, contested, only rivals) and a rival table names the overlap with each of your shops.
Installation
Overview
See who owns the ground around your shops, with this competitor analysis map for React with Ark UI. Rivalmoor, a retail-planning tool, draws four of your shops as solid lettered circles and three rivals as numbered squares on an SVG street map of an invented town, each with a catchment circle of one radius that a Slider sets from 1 to 4 km (yours solid, theirs dashed). The areas are counted, not drawn: a 40 by 30 grid of points is tested against every circle, and the share only you reach, the contested share and the share only rivals reach fill one segmented bar with a figure and an area in square kilometres each. A Table lists the rivals with their catchment, what they share with you and the share of their own area; pressing a rival's name rings its circle on the map and writes out its overlap with each of your shops. On a phone the table keeps the rival and the shared column. It's built from Slider, Table and Guides, with a CSS entrance only. For site selection, franchising and retail-planning tools.
FAQ
How are the three areas measured?
sampleOf walks a grid of 40 by 30 points over the drawing. A point inside one of your circles and one of a rival's is contested, inside only yours is yours alone, and inside only a rival's is theirs. The shares are whole numbers that add to 100 (sharesOf uses the largest remainder) and the areas multiply the points by the area one point stands for. Circles that run off the drawing count only where they fall inside it.
How do I use my own shops and rivals?
Edit YOURS and RIVALS, each a name and a position in the drawing's 480 by 360 units, and the slider's MIN_KM, MAX_KM and UNITS_PER_KM. The segments, figures, table and the detail sentence all follow. In your app replace the circles with drive-time polygons and keep the counting, testing each point against the polygons.
Why are shapes used and not colours?
Your shops are solid circles with letters and a rival is a square with a number, and the catchment lines are solid for you and dashed for them, so the picture reads in any theme and without colour. The bar uses three weights of the foreground colour, labelled in the figures under it.
Can I use it without a mouse?
Yes. The slider takes the arrow keys and speaks its value in kilometres, each rival's name in the table is a button that you can press with Enter or Space, and the written detail under the table names the overlap with each of your shops. The shop markers are decoration for assistive technology because the table says the same things.
What stays local in the demo, and how do I wire it up?
All of it. The shops, the rivals and the areas are typed sample data and nothing is measured on the ground. In your app load shop locations from your store records and your rivals from a data provider, and recompute the shares when the radius changes.