shadcn.io is not affiliated with official shadcn/ui
Weighted Decision Matrix About Block for Solid
A vendor decision matrix for an evaluation firm: options by weighted criteria, a computed score on each row, and a column that rings when its criterion is hovered or focused.
Installation
Overview
A decision matrix for Solid with Ark UI, written for Weighwell, a fictional firm that scores vendors for a buyer. Options run down and criteria run across, each criterion with a weight. The weights add to 100. The last column is the weighted score, computed from the marks: each mark times its weight, over 100. Hovering a criterion, or focusing its header, rings that column. The table scrolls in a labelled region on a phone, and the option names stay put. It's built from Table and Guides, with a CSS entrance on the header and your theme's tokens for every colour. There is no client state: the ring is CSS. For an about page that should show how a firm weighs a choice. Northbin, Keppler and Yardline are a worked example, not customers.
FAQ
How do I change the options, the criteria and the weights?
CRITERIA names the columns and their weights, in the order the marks are stored. OPTIONS is one row per vendor, with a mark out of 5 for each criterion. The score column and the "weights that add to 100" line both read from that data. Keep the weights as a sum of 100 if you want the score to be a weighted mean on that scale.
How is the weighted score computed?
Each mark is multiplied by its criterion's weight, the products are added, and the sum is divided by the total of the weights. The result is written to two decimal places. Change a mark or a weight and the score changes with it. The number is not stored on the option.
How does a column ring without any state?
Each criterion's cells share a marker. While the pointer is over one of them, or while focus is inside that criterion's header, CSS rings the column and tints it. Leaving the column clears the ring. The score column is not a criterion, so it does not ring. The page does not move.
How is it read by a screen reader?
The heading is an h2. The table is named as a worked example of three vendors scored on four criteria. Option names are the row headers. A mark is read as a number out of 5, and the header button adds "Highlight this column" so the ring has a name. The closing paragraph says the three names are an example.