Filter field

With the filter component, lists and views can be filtered.

´ Loading interactive demo...
<dt-filter-field [dataSource]="_dataSource" label="Filter by" ></dt-filter-field> export class FilterFieldDefaultExample { private DATA = { autocomplete: [ { name: 'AUT', autocomplete: ['Linz', 'Vienna', 'Graz'], }, { name: 'USA', autocomplete: ['San Francisco', 'Los Angeles', 'New York'], }, { name: 'Requests per minute', range: { operators: { range: true, equal: true, greaterThanEqual: true, lessThanEqual: true, }, unit: 's', }, }, ], }; _dataSource = new DtFilterFieldDefaultDataSource(this.DATA); } <dt-filter-field [dataSource]="_dataSource" label="Filter by" ></dt-filter-field> export class FilterFieldDefaultExample { private DATA = { autocomplete: [ { name: 'AUT', autocomplete: ['Linz', 'Vienna', 'Graz'], }, { name: 'USA', autocomplete: ['San Francisco', 'Los Angeles', 'New York'], }, { name: 'Requests per minute', range: { operators: { range: true, equal: true, greaterThanEqual: true, lessThanEqual: true, }, unit: 's', }, }, ], }; _dataSource = new DtFilterFieldDefaultDataSource(this.DATA); }

The content affected by the filter is dependent on the filters position. If the filter is placed on top of a view, the filter applies to all components and contents underneath it. All filter terms are connected with the logical AND operator if no other operator is explicitly used.

Styleguide

Filter field styles

Filter style guide field
x: 12px
y: 8px
Filter style guide elements

Filter icon

width: 16px
height: 16px
icon-color: $gray-500

Filter watermark

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-500

Filter field

Find the filter field styles on the Input-field site.

Key-value filter styles

Filter style guide key-value
x: 24px
y: 8px
Filter style guide key-value elements

Key

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-500

Value

font-family: Bernina Sans Regular
font-size: 12px
color: $turquoise-600

Filter bubble

height: 24px
width: depends on text length
border: 1px solid $gray-300 //inside
border-radius: 3px
background-color: $gray-130

Icon

height: 16px
width: 16px
vertical-align: center
icon-color: $turquoise-600

Hover state

Hover on bubble

Hover on bubble or text

font-color key: $gray-600
font-color value: $turquoise-700
background-color: $gray-200
Hover on icon

Hover on 'x' icon

icon-color: $turquoise-700
background-color: $gray-200

Disabled state

Filter disabled state
font-color: $gray-300
border: 1px solid $gray-200 //inside
icon-color: $gray-300

Variants

Key-value filters

Applied filters can be displayed as key:value pairs.

Key-value filter

Free text filters

Free text can be used in filters, the typed text will be suggested on top, focused and selected on enter key.

The applied free text filters are displayed in quotes.

Free value filters

Free text in key:value filters

It is valid to filter for key:values where the value contains a specific free text. The free text values are displayed with a ~ in front.

Free text value filter

Behavior

Adding filters

On focus of the filter field the dropdown panel expands and reveals valid items.

Adding a filter

The suggested items can be redefined by typing.

Refine filter results

Edit filters

A key:value filter can be edited by selecting it, all possible values for the key are presented in the dropdown again. The selected value is highlighted.

Edit filters

Clear filters

By triggering the clear all button, all filters are deleted. This button appears on focus loss of the filter field. Please also check out this behavior in the click dummy

Clear all filters

The clear all button is a secondary button.

Filter for custom metrics

Some keys ask for custom values, e.g. response time, CPU, failure rate, etc. Input fields in the dropdown provide the possibility of entering a range.

By leaving the second input field blank, the filter will be set to everything >= entered value.

Filter for custom metric bigger than

The styling for the tabs is the same as the chart tabs.

Styling of custom metric filters

Handling operators

By default, all filter terms are handled as AND operations. However, the filter results can use other operators like OR, NOT, (, ), * ... All used operators are highlighted as soon as they are active and can be edited by selecting them.

Operators in filter
x: 8px

Operator

font-family: BerninaSans Regular
font-size: 14px
color: $turquoise-500

Multiselection of filter values

To select multiple values, use the operator IN, or select several values from the dropdown.

Multiselection of filter values

Help and errors

To make users aware of the operators, the options will appear when the filter field is focused and at least one filter is already applied.

Operators hint

The filter fields syntax is validated, please consider the input field validation in the validation guidelines for details.

Syntax validation in filter

Invalid function

font-family: BerninaSans Regular
font-size: 14px
color: $red-500

Abbreviations for long names

By default, filters should not extend 50 characters. Long names can be abbreviated with three dots .... The full name is visible when clicking the filter (edit mode).

Filter abbreviation

´ Loading interactive demo...
<dt-filter-field [dataSource]="_dataSource" label="Filter by" ></dt-filter-field> export class FilterFieldDefaultExample { private DATA = { autocomplete: [ { name: 'AUT', autocomplete: ['Linz', 'Vienna', 'Graz'], }, { name: 'USA', autocomplete: ['San Francisco', 'Los Angeles', 'New York'], }, { name: 'Requests per minute', range: { operators: { range: true, equal: true, greaterThanEqual: true, lessThanEqual: true, }, unit: 's', }, }, ], }; _dataSource = new DtFilterFieldDefaultDataSource(this.DATA); } <dt-filter-field [dataSource]="_dataSource" label="Filter by" ></dt-filter-field> export class FilterFieldDefaultExample { private DATA = { autocomplete: [ { name: 'AUT', autocomplete: ['Linz', 'Vienna', 'Graz'], }, { name: 'USA', autocomplete: ['San Francisco', 'Los Angeles', 'New York'], }, { name: 'Requests per minute', range: { operators: { range: true, equal: true, greaterThanEqual: true, lessThanEqual: true, }, unit: 's', }, }, ], }; _dataSource = new DtFilterFieldDefaultDataSource(this.DATA); }

Imports

You have to import the DtFilterFieldModule when you want to use the dt-filter-field.

@NgModule({
  imports: [DtFilterFieldModule],
})
class MyModule {}

Inputs

Name Type Default Description
dataSource DtFilterFieldDataSource Provide a DataSource to feed data to the filter-field. This input is mandatory.
filters any[][] The currently selected filters. This input can also be used to programmatically add filters to the filter-field.
label string The label for the input field. Can be set to something like "Filter by".
loading boolean false Whether the filter field is loading data and should show a loading spinner.

Outputs

Name Type Description
filterChanges EventEmitter<DtFilterFieldChangeEvent> Event emitted when filters have been added or removed.
currentFilterChanges EventEmitter<DtFilterFieldCurrentFilterChangeEvent> Event emitted when a part has been added to the currently selected filter (the filter the user is currently working on).
inputChange EventEmitter<string> Event emittend when the input value changes (e.g. when the user is typing).

Distinct Options

Normally you can select all options of an autocomplete, but sometimes there is also the need to remove a the whole list of options once one of them is selected (e.g. when you only want the user to select one city of full list).

You can do that by setting the distinct: true property onto the autocomplete object.

´ Loading interactive demo...
<dt-filter-field [dataSource]="_dataSource" label="Filter by" ></dt-filter-field> export class FilterFieldDistinctExample { private DATA = { autocomplete: [ { name: 'AUT', autocomplete: ['Linz', 'Vienna', 'Graz'], distinct: true, }, { name: 'USA', autocomplete: ['San Francisco', 'Los Angeles', 'New York'], }, ], }; _dataSource = new DtFilterFieldDefaultDataSource(this.DATA); } <dt-filter-field [dataSource]="_dataSource" label="Filter by" ></dt-filter-field> export class FilterFieldDistinctExample { private DATA = { autocomplete: [ { name: 'AUT', autocomplete: ['Linz', 'Vienna', 'Graz'], distinct: true, }, { name: 'USA', autocomplete: ['San Francisco', 'Los Angeles', 'New York'], }, ], }; _dataSource = new DtFilterFieldDefaultDataSource(this.DATA); }

Loading Options asynchronously

When working with huge sets of data, there is often the need to load parts of it asynchronously when the user needs it. You can do this by setting the async: true property on the autocomplete instead of options, then load the data and apply it to the Data Source.

Data Source

The filter-field needs a DtFilterFieldDataSource so data can be applied. The main part of the Data Source is to convert the data that should be fed into the filter-field into a form the filter-field can understand.

A DataSource needs to be a class that implements the DtFilterFieldDataSource interface.

The filter-field provides a default implementation of a DataSource, named DtFilterFieldDefaultDataSource, that takes a specific form of data. If your data has a different form you can either transform your data so the Default Data Source can understand it, or you create your own custom Data Source.

When creating a custom Data Source, we also provide a lot of utility functions for converting and creating data into the form of definition node objects the filter-field can understand. You can also take a look at the implementation of the DtFilterFieldDefaultDataSource to get a better understanding on how to create a custom Data Source

Data utility functions:

A list of the most useful utility function for creating and checking definition node objects:

Name Description
dtAutocompleteDef Creates a node definition object or extends an one and applies a autocomplete definition object based on the parameters.
isDtAutocompleteDef Whether the provided definitoin object is of type NodeDef and consists of an autocomplete definition
dtFreeTextDef Creates a node definition object or extends an one and applies a free-text definition object based on the parameters
isDtFreeTextDef Whether the provided definitoin object is of type NodeDef and consists of an free-text definition
dtOptionDef Creates a node definition object or extends an one and applies a option definition object based on the parameters.
isDtOptionDef Whether the provided definitoin object is of type NodeDef and consists of an option definition
dtGroupDef Creates a node definition object or extends an one and applies a group definition object based on the parameters.
isDtGroupDef Whether the provided definitoin object is of type NodeDef and consists of an group definition