shadcn.io is not affiliated with official shadcn/ui
Market Expansion Map Block for React Aria
Fifteen metro tiles with a rank on each candidate; three 0 to 5 sliders weight demand, income and rivalry, every candidate is re-ranked, the top three get a heavy outline and a card splits the score into its parts.
Installation
Overview
Weigh a launch before you commit to it, with this market expansion map for React with React Aria. Stridewick, a growth-strategy tool, draws fifteen invented metro areas as tiles in a rough geographic arrangement: four are live markets (solid tiles) and eleven are candidates, each carrying its rank. Three Sliders, Demand, Income and Rivalry from 0 to 5, weight three typed indicators that are already scaled 0 to 100 (rivalry counts in reverse, so fewer rivals score higher); a metro's score is the weighted average and every candidate is re-ranked as a slider moves. The top three candidates get a heavy outline. A card splits the chosen metro's score into its three parts, whole points that add up to the score, and a Table lists every metro with its rank and score and is the keyboard route. A polite status line speaks the new leader once the sliders settle. On a phone the tiles keep their rank and code, and the card and the table stack under the sliders. It's built from Slider, Table and Guides, with CSS transitions only. For expansion, retail-planning and strategy tools.
FAQ
How is a score worked out?
pointsOf multiplies each weight by its indicator (demand, income and 100 minus rivalry), divides by the total weight and rounds the three parts so they add up to the rounded score, using the largest remainder. With every weight at zero nothing is ranked and the page says so.
How do I use my own metros?
Edit METRO_LINES: an id, a name, a two-letter code, the three indicators scaled 0 to 100 and a 1 for a live market. The order is the order of the tiles, five to a row. In your app compute the scaled indicators from your data, for example a percentile within the candidates, and keep the scoring.
Why do the live markets have no rank?
They are already open, so only the candidates are ranked and a live tile says "Live". They still have a score, shown in the table, so you can see how a candidate compares with what you run today.
Can I use it without a mouse?
Yes. Each slider takes the arrow keys and speaks its value out of 5, every tile and every metro in the table is a button that fills the card, and the status line names the leader. Tiles carry the metro's name for screen readers.