Table of contents

• In action
• Overview
• Getting Started
  • Install
  • Usage
• API
  • useComponentUsageAggregate
  • useAttributesUsageAggregate
  • AttributeUsage
  • AttributesUsageDetails
  • AttributesUsageList
  • ComponentUsage
  • ComponentUsageDetails
  • ComponentUsageList

In action

Example site

Overview

Addon to collect and display statistics for component-controls

Getting Started

Install

yarn add @component-controls/addon-stats --dev

Usage

import { ComponentUsage, AttributeUsage, ComponentUsageList, AttributesUsageList } from '@component-controls/addon-stats';


## Attributes usage summary

Attributes usage - how many times an attribute is being set on a component, and on which component it is being set

<AttributeUsage />

## Components usage details

How many times a component is being used from another component, with a list of the components using it

<ComponentUsageList />

## Attributes usage details

How many times an attribute is being used on a component, with a list of those components

<AttributesUsageList />

API

useComponentUsageAggregate

useComponentUsageAggregate source code

properties

Name	Type	Description
filter	StatsFilter

useAttributesUsageAggregate

useAttributesUsageAggregate source code

properties

Name	Type	Description
filter	StatsFilter

AttributeUsage

Table of all the used attributes, with their components

AttributeUsage source code

properties

Name	Type	Description
filter	StatsFilter	filter which stories to apply
linkAttributes	boolean
title	string	optional section title for the block.
description	string	optional markdown description.
id	string	optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
collapsible	boolean	if false, will nothave a collapsible frame.
data-testid	string	testing id
plain	boolean	inner container variant or plain
sx	ThemeUIStyleObject
ref	((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>

AttributesUsageDetails

Table to display the attributes usage, with a % progress indicator

AttributesUsageDetails source code

properties

Name	Type	Description
stats*	AttributeAggregateRow	a row of usage statistics
title	string	optional section title for the block.
description	string	optional markdown description.
id	string	optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
collapsible	boolean	if false, will nothave a collapsible frame.
data-testid	string	testing id
plain	boolean	inner container variant or plain
sx	ThemeUIStyleObject
ref	((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>

AttributesUsageList

Tables for all the filtered attributes, and the components using them

AttributesUsageList source code

properties

Name	Type	Description
filter	StatsFilter	filter which stories to apply
title	string	optional section title for the block.
description	string	optional markdown description.
id	string	optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
collapsible	boolean	if false, will nothave a collapsible frame.
data-testid	string	testing id
plain	boolean	inner container variant or plain
sx	ThemeUIStyleObject
ref	((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>

ComponentUsage

Table of all the components, with their attributes

ComponentUsage source code

properties

Name	Type	Description
filter	StatsFilter	filter which stories to apply
linkAttributes	boolean
title	string	optional section title for the block.
description	string	optional markdown description.
id	string	optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
collapsible	boolean	if false, will nothave a collapsible frame.
data-testid	string	testing id
plain	boolean	inner container variant or plain
sx	ThemeUIStyleObject
ref	((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>

ComponentUsageDetails

Table to display the components usage, with a % progress indicator

ComponentUsageDetails source code

properties

Name	Type	Description
stats*	ComponentStats	a row of usage statistics
title	string	optional section title for the block.
description	string	optional markdown description.
id	string	optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
collapsible	boolean	if false, will nothave a collapsible frame.
data-testid	string	testing id
plain	boolean	inner container variant or plain
sx	ThemeUIStyleObject
ref	((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>

ComponentUsageList

Tables for all the filtered components

ComponentUsageList source code

properties

Name	Type	Description
filter	StatsFilter	filter which stories to apply
title	string	optional section title for the block.
description	string	optional markdown description.
id	string	optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
collapsible	boolean	if false, will nothave a collapsible frame.
data-testid	string	testing id
plain	boolean	inner container variant or plain
sx	ThemeUIStyleObject
ref	((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>