Create projects risk score grid chart component

Summary

We need to create a new Vue component that is responsible for rendering the grouped-by risk score projects grid. This issue handles the chart and its story and not the panel or group-by functionality surrounding it.

Rectangle sizes should scale based on how many projects are represented.

Calculating optimal rows and columns grid configuration

We should make a good trade-off between having nicely sized tiles, i.e. following a certain aspect ratio like 4:3 and on other hand maximizing utilization of the tiles with the panel. Namely, we'd like to let the tiles fill up the panel as much as possible. This is not possible with prime number like 23 where we can't get a perfect utilization except if we have either 1 row or column and 23 columns or rows respectively which would not look balanced.

Suggested scoring formula we want to minimize, with the utilization having a weighted factor of 2, the rows and columns are our degrees of freedom:

\begin{align} aspectRatio_c &: \text{current aspect ratio} \\ aspectRatio_o &: \text{optimal aspect ratio} \\ n &: \text{amount of tiles} \\ rectWidth &= \frac{containerWidth}{cols} \\ rectHeight &= \frac{containerHeight}{rows} \\ aspectRatio_c &= \frac{rectWidth}{rectHeight} \\ utilization &= \frac{n}{rows \times cols} \\ \\ score &= |aspectRatio_c - aspectRatio_o| + 2 \cdot (1 - utilization) \\ &= \left|\frac{rectWidth}{rectHeight} - \frac{4}{3}\right| + 2 \cdot \left(1 - \frac{n}{rows \times cols}\right) \end{align}