atomic-rating-facet

This is for:

Developer

A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (e.g., number of occurrences). An atomic-rating-facet displays a facet of the results for the current query as ratings. It only supports numeric fields.

Introduction

A facet allows users to drill down inside a result set by filtering the result to certain field values. The Rating Facet component displays a facet of the results for the current query as ratings.

User Experience and Best Practices

  • Use the Rating Facet when social proof is important in guiding the user’s decisions.

  • Ratings help users understand what others think, or how they have rated the item.

  • The Rating Facet only works with numeric field values.

Guidelines

Don’t use a range that’s too large, we recommend that you keep it below ten. A five star rating system is ideal; this is a common system that’s familiar to most people.

Use Cases and Examples

On an ecommerce website, a user may want to filter their results to display only the items that have a rating of four stars or above.

Properties

Property Attribute Description Type Default

dependsOn

The required facets and values for this facet to be displayed. Examples:

<atomic-facet facet-id="abc" field="objecttype" ...></atomic-facet>

<!-- To show the facet when any value is selected in the facet with id "abc": -->
<atomic-rating-facet
  depends-on-abc
  ...
></atomic-rating-facet>

<!-- To show the facet when value "doc" is selected in the facet with id "abc": -->
<atomic-rating-facet
  depends-on-abc="doc"
  ...
></atomic-rating-facet>

{ [x: string]: string; }

{}

displayValuesAs

display-values-as

Whether to display the facet values as checkboxes (multiple selection) or links (single selection). Possible values are 'checkbox' and 'link'.

"checkbox" | "link"

'checkbox'

facetId

facet-id

Specifies a unique identifier for the facet.

string | undefined

field (required)

field

The field whose values you want to display in the facet.

string

filterFacetCount

filter-facet-count

Whether to exclude the parents of folded results when estimating the result count for each facet value.

boolean

true

headingLevel

heading-level

The heading level to use for the heading over the facet, from 1 to 6.

number

0

icon

icon

The SVG icon to use to display the rating.

  • Use a value that starts with http://, https://, ./, or ../, to fetch and display an icon from a given location.

  • Use a value that starts with assets://, to display an icon from the Atomic package.

  • Use a stringified SVG to display it directly.

When using a custom icon, at least part of your icon should have the color set to fill="currentColor". This part of the SVG will take on the colors set in the following variables:

  • --atomic-rating-icon-active-color

  • --atomic-rating-icon-inactive-color

string

Star

injectionDepth

injection-depth

The maximum number of results to scan in the index to ensure that the facet lists all potential facet values. Note: A high injectionDepth may negatively impact the facet request performance. Minimum: 0

number

1000

isCollapsed

is-collapsed

Specifies whether the facet is collapsed. When the facet is the child of an atomic-facet-manager component, the facet manager controls this property.

boolean

false

label

label

The non-localized label for the facet. Used in the atomic-breadbox component through the bindings store.

string

'no-label'

maxValueInIndex

max-value-in-index

The maximum value in the field’s index and the number of rating icons to display in the facet. If not assigned a value, this property will default to the same value as numberOfIntervals.

number

this.numberOfIntervals

minValueInIndex

min-value-in-index

The minimum value of the field.

number

1

numberOfIntervals

number-of-intervals

The number of options to display in the facet. If maxValueInIndex isn’t specified, it will be assumed that this is also the maximum number of rating icons.

number

5

tabsExcluded

tabs-excluded

The tabs on which this facet must not be displayed. This property should not be used at the same time as tabs-included.

Set this property as a stringified JSON array, e.g.,

 <atomic-timeframe-facet tabs-excluded='["tabIDA", "tabIDB"]'></atomic-timeframe-facet>

If you don’t set this property, the facet can be displayed on any tab. Otherwise, the facet won’t be displayed on any of the specified tabs.

string | string[]

'[]'

tabsIncluded

tabs-included

The tabs on which the facet can be displayed. This property should not be used at the same time as tabs-excluded.

Set this property as a stringified JSON array, e.g.,

 <atomic-timeframe-facet tabs-included='["tabIDA", "tabIDB"]'></atomic-timeframe-facet>

If you don’t set this property, the facet can be displayed on any tab. Otherwise, the facet can only be displayed on the specified tabs.

string | string[]

'[]'

Shadow Parts

Part Description

clear-button

The button that resets the actively selected facet values.

clear-button-icon

The clear button icon.

facet

The wrapper for the entire facet.

label-button

The button that displays the label and toggles to expand or collapse the facet.

label-button-icon

The label button icon.

placeholder

The placeholder shown before the first search is executed.

value-checkbox

The facet value checkbox, available when display is 'checkbox'.

value-checkbox-checked

The checked facet value checkbox, available when display is 'checkbox'.

value-checkbox-icon

The facet value checkbox icon, available when display is 'checkbox'.

value-checkbox-label

The facet value checkbox clickable label, available when display is 'checkbox'.

value-count

The facet value count, common for all displays.

value-link

The facet value when display is 'link'.

value-link-selected

The selected facet value when display is 'link'.

value-rating

The facet value rating, common for all displays.

values

The facet values container.

CSS Custom Content

Name Description

--atomic-facet-checkbox-size

Size of the checkbox.

--atomic-rating-icon-active-color

Color of the icon when active.

--atomic-rating-icon-inactive-color

Color of the icon when inactive.

--atomic-rating-icon-outline

Color of the icon’s outline.