User adoption graph

Originally built for the Rewatch dashboard, this graph allows you to visualize user adoption of a feature in a 1:1 representation. Each icon represents an individual user. For larger values, the graph transitions to a percentage-based representation, filling the SVG icons proportionally based on user adoption.

How it works

First, we calculate the percentage of users who have adopted the feature, if there are no users, it returns 0.

const percentValue = totalUsers > 0 ? (usersWithFeature / totalUsers) * 100 : 0;

Next, we calculate the maximum number of icons that can be displayed, this is done by taking the minimum of the total number of users and the maximum number of icons we want to display. For this example, I'm hardcoding this to 54. If your total users exceeds the maximum number of icons defined here, then the graph will transition to a percentage-based fill.

const maxIcons = Math.min(totalUsers, 54);

Finally, we calculate how many icons should be filled to represent the adoption percentage. It also ensures that the value doesn't exceed the maximum number of icons.

const filledIcons = Math.min(Math.round((percentValue * maxIcons) / 100), maxIcons);

Also, you may notice that the insight panel is hidden when adoption exceeds 80%. This is a totally optional and arbitrary threshold that assumes the information the insight panel is providing is mostly known and can be removed to keep the graph clean.

  {percentValue <= 80 && (
    <div>
      // Insight panel markup here
    </div>
  )}