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.
User adoption
50%
27 of 54 users have adopted this feature
Insight
Adopting this feature is a great way to increase transparency and collaboration. Learn how to configure this feature
you can play with the values here:
How it works
const percentValue = totalUsers > 0 ? (usersWithFeature / totalUsers) * 100 : 0;
// This line just calculates the percentage of users who have adopted the feature, if there are no users, it returns 0.
const maxIcons = Math.min(totalUsers, 54);
// Here I'm setting the maximum number of icons to 54, but you can set this to any number you want.
const filledIcons = Math.min(Math.round((percentValue * maxIcons) / 100), maxIcons);
// This line calculates 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.
The insight panel is hidden if adoption exceeds 80%.
{percentValue <= 80 && (
<div>
// Insight panel markup here
</div>
)}