CrmStatistics | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

The CrmStatistics component renders data summaries calculated from the currently displaying CRM record's associations. For example, you can use this component to display data such as:

  • The average revenue of all of a contact’s associated companies.
  • The total number of times that a company has been contacted based on all of their associated tickets.
  • The maximum number of days to close from all of a company's associated deals.

To render data, you'll specify the properties you want to read from the associated records along with the type of calculation to perform on the property values. For each property, you can also include filters to narrow down the records that are included in the calculation.

ui-extension-component-crm-statistics

import { CrmStatistics } from '@hubspot/ui-extensions/crm'; const Extension = () => { return ( <CrmStatistics objectTypeId="0-3" statistics={[ { label: 'Average Deal Amount', statisticType: 'AVG', propertyName: 'amount', }, { label: '50th Percentile Deal Amount', statisticType: 'PERCENTILES', propertyName: 'amount', percentile: 50, }, { label: 'Time Left for Most Important Upcoming Deal', statisticType: 'MIN', propertyName: 'days_to_close', // The filters below narrow the fetched // deals by the following criteria: // - Amount must be >= 10,000 // - Deal must not be closed filterGroups: [ { filters: [ { operator: 'GTE', property: 'amount', value: 10000, }, { operator: 'EQ', property: 'hs_is_closed', value: "false", }, ], }, ], }, ]} /> ); };
Prop Type Description
objectTypeId Required String The numeric ID of the type of object to fetch statistics about (e.g., 0-1 for contacts). See complete list of object IDs.
statistics Required Array An array of objects that define each statistic to fetch. Supports the following fields:
  • label
  • propertyName
  • statisticType
  • filterGroups
Learn more about these fields below.

Specifying statistics data

Using the statistics prop, you'll define the data that you want the component to display. Data is fetched from CRM properties, and is calculated based on the specified statisticType. You'll include an object for each statistic that you want to fetch. You can also optionally specify filterGroups to further refine the data.

Below are the supported fields for objects in the statistics array.

Field Type Description
label Required String The label that displays above the statistic.
propertyName Required String The name of the property to fetch data from. Must be a number, date, or datetime property. Requesting any other type of property will result in the statistic displaying -- for its value.
statisticType Required String The type of statistic to request. Supported values include:
  • SUM: the sum of the values of the specified property.
  • AVG: the average of the values of the specified property.
  • MIN: the smallest value of the specified property.
  • MAX: the largest value of the specified property.
  • COUNT: the number of CRM records with a value for the specified property.
  • DISTINCT_APPROX: an approximate count of distinct values for the specified property.
  • PERCENTILES: the property value at which a certain percentage of observed values occur.
filterGroups String An optional field for further refining the values that are included in the statistic. Up to three filter group objects may be specified in this array, and you can include up to three filters in each item. Exceeding these limits will result in the statistic showing -- for its value. Filters are structured the same way as filters in the CRM search API.
percentiles Number When statisticType is PERCENTILES, this field is required. Specifies the percentile to display. Must be an integer from 0-100, inclusive.

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.