Weighted Decision Matrix Weighted decision matrix for comparing options across multiple criteria with scoring.

The tool uses React's useState hook to store options, criteria, and scores in memory, with each option and criterion represented as a JavaScript object. The scores are stored as a record of strings to numbers, where the key is a concatenation of the option ID and criterion ID. When a user inputs a score or edits an option or criterion name, the corresponding state is updated using callbacks like setScore, addOption, or addCriterion. These updates trigger React's virtual DOM to re-render the table with the new data.

Under the hood, the tool relies on JavaScript's built-in array methods like map and reduce to calculate the weighted scores for each option. The totals are computed by iterating over each criterion, multiplying its weight by the score for that criterion, and summing up these products. This process is repeated for all options, resulting in an array of objects with the total weighted score for each option. The maxTotal is then calculated as the maximum of these totals, which is used to determine the winner and visualize the results.

The tool also uses React's useMemo hook to memoize the calculation of the totals and maxPossible values, ensuring that they are only re-computed when the dependencies change. This optimization improves performance by avoiding unnecessary recalculations. Additionally, the code utilizes TypeScript to define interfaces for options and criteria, providing type safety and helping catch errors at compile-time rather than runtime.

The automatic ranking feature is implemented using JavaScript's sort method, which sorts the totals array in descending order based on the total weighted score. The winner is then determined as the option with the highest total score, and its ID is stored in the winnerId variable. The results visualization uses a combination of HTML and CSS to display the ranked options, with the top-scoring option highlighted in green.