shadcn.io is not affiliated with official shadcn/ui
Revenue by Region Map Block for Ark UI
Six sales regions as a tile cartogram with a proportion bar under it; a Revenue, Growth, Share toggle resizes the circle on each tile, and pressing a tile, a bar segment or a table row marks all three.
Installation
Overview
Compare regions without a real map, with this revenue by region map for React with Ark UI. Ledgerbridge, a revenue reporting tool, draws six sales regions as a tile cartogram: one square per region in a rough geographic arrangement, a two-letter code on each and a circle inside it. A Toggle Group in the header picks what the circle's area shows: revenue, growth or share of the total. Under the tiles a proportion bar is both the legend and a control, one button per region sized by its share and ordered from the largest; pressing a segment, a tile or a row of the Table marks the region in all three. The quarter-on-quarter change is a signed number with an arrow, and a dashed tile fell on the last quarter. Three figures under the bar show the chosen region or the total, and a polite status line speaks the result once the controls settle. Money is in whole cents, growth in basis points and the shares add to 100. On a phone the tiles keep their code and value and the table drops the revenue column. It's built from Toggle Group, Table and Guides, with CSS transitions only. For finance, sales-ops and reporting tools.
FAQ
Why tiles and not a map?
A cartogram gives every region the same footprint, so a small region is as easy to press as a large one and the size of the circle carries the number. The squares sit roughly as the regions lie, which keeps the idea of a map without the borders.
How are the shares worked out?
sharesOf takes each region's revenue in cents and returns whole percentages that add to exactly 100 (the largest remainder gets the spare points). Growth is the change on the quarter before in basis points, Math.round((revenue - prior) * 10000 / prior), shown as one decimal. Edit REGIONS and every figure, the bar and the table follow.
How is a region told apart without colour?
By position, a code, a number and a weight: the bar and each circle share one of six foreground weights ordered by revenue, and a dashed tile border marks a fall. Nothing relies on a hue, so it reads the same in light, dark and any theme.
Can I use it without a mouse?
Yes. Each tile, each segment of the bar and each region name in the table is a button with a pressed state, and the toggle group is one tab stop. The same region is marked wherever you press it, and the status line says what changed.
What stays local in the demo, and how do I wire it up?
All of it. The figures are typed sample data for an invented quarter and nothing is loaded or sent. In your app load the current and prior quarter per region from your warehouse, keep the money in cents and let the metric toggle reload nothing, since all three views come from the same rows.