atomic-numeric-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., ascending, descending). An atomic-numeric-facet displays a facet of the results for the current query as numeric ranges.

Introduction

A numeric facet allows users to drill down inside a result set by filtering the result to certain numeric field values. Adding an optional custom range selector to a numeric facet can help find specific ranges more efficiently.

User Experience and Best Practices

Usage Notes

  • Checkboxes let users select multiple values and are the most commonly used selection, being more visual and presenting more values in small spaces.

  • Links allow the user to select only one value at a time, behaving like a normal navigational link.

Guidelines

Use Cases and Examples

In cases where the value has a units such as height, width, screen sizes, etc.

Reference

Don’t Lose Face with Facets

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-numeric-facet
  depends-on-abc
  ...
></atomic-numeric-facet>

<!-- To show the facet when value "doc" is selected in the facet with id "abc": -->
<atomic-numeric-facet
  depends-on-abc="doc"
  ...
></atomic-numeric-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

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 Default: 1000

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'

numberOfValues

number-of-values

The number of values to request for this facet, when there are no manual ranges. If the number of values is 0, no ranges will be displayed.

number

8

rangeAlgorithm

range-algorithm

The algorithm that’s used for generating the ranges of this facet when they aren’t manually defined. The default value of "equiprobable" generates facet ranges which vary in size but have a more balanced number of results within each range. The value of "even" generates equally sized facet ranges across all of the results.

"equiprobable" | "even"

'equiprobable'

sortCriteria

sort-criteria

The sort criterion to apply to the returned facet values. Possible values are 'ascending' and 'descending'.

"ascending" | "descending"

'ascending'

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[]

'[]'

withInput

with-input

Whether this facet should contain an input allowing users to set custom ranges. Depending on the field, the input can allow either decimal or integer values.

"decimal" | "integer" | undefined

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.

input-apply-button

The apply button for the custom range.

input-end

The input for the ending value of the custom numeric range.

input-form

The form that comprises the labels, inputs, and 'apply' button for the custom numeric range.

input-start

The input for the starting value of the custom numeric range.

label-button

The button that displays the label and allows to expand/collapse the facet.

label-button-icon

The label button icon.

label-end

The label for the ending value of the custom numeric range.

label-start

The label for the starting value of the custom numeric range.

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-label

The facet value label, common for all displays.

value-link

The facet value when display is 'link'.

value-link-selected

The selected facet value when display is 'link'.

values

The facet values container.

CSS Custom Content

Name Description

--atomic-facet-checkbox-size

Size of the checkbox.