Technical
Adoption rate
Making sense of metrics dashboard.
Stylebit adoption has 3 sections about adoption rate.
General
, Components
, Tokens
General
This is the formula how the adoption rate is calculated
Adoption rate = (used core components + used tokens ) / (total components + total tokens)
For more information about core components and Tokens check Components and Tokens sections accordingly.
total components = (used core components + unused core components) + used non-core components
total tokens = used tokens + unused tokens
If you don’t track Tokens then tokens part is omitted and not taken into account on calculations.
Components
Adoption rate = used core components / (used core components + unused core components)
What are the core components ?
Core components are the components whose definitions found under
componentRoot
folder specified in your config file which is supposed to be your component’s library root folder. If you are tracking through
packageName
then core components are the components imported from that package. In this case adoption rate is almost always 100% cause whatever is imported from the package most probably is also used in your code if you have proper linting.In the component section you will also find an information about non-core
components. Just don’t get confused, they don’t have an impact on core component adoption rate.
If you are searching the ratio of components from your library to overall components then check the General
section..
Tokens
Tokens section is pretty straightforward
Adoption rate = used tokens / (used tokens + unused tokens)
in the code below --white01
is used token and --zindex-tooltip
is not used token.
:root {
--white01: rgba(255, 255, 255, 0.1);
--zindex-tooltip: 1001;
}
.dividerVertical {
background-color: var(--white01);
}