Field Selector

The Field Selector allows you to interactively change fields for a group of visualizations. This enables the analysis of several attributes and metrics without having to manually modify the aql for each of the charts.

The most basic declaration of the Field Selector is as follows:

const charts = ['chart-1', 'chart-2', ....];

cf.provider('Elastic')
    .source('ticket_sales')
    .graph('Field Selector')
    .set('charts', charts)
    .element('v1')
    .execute()

The above code creates a simple input field that, when clicked, opens a list of fields as shown below:

You can type within the text input to filter the list of fields.

Selecting a field

When you select a field using the Field Selector, all visualizations matching the ids specified in charts will change their selected field. The default behavior is as follows:

• For all visualizations except Trend and Area Line, the first group or metric will be changed
• Since Trend and Area Line use two groups where the first one is an attribute and the second one is a time field, the Field Selector will automatically match fields of type ATTRIBUTE with the first group and TIME with the second.
• The new group or metric will keep the old configuration (limit, sort, function) unless you specify a different configuration
• Integer can be used as Attribute or Metric. See Specifying what field is affected

The default behavior can be modified using the options specified in the next section.

Options

Filter by type

You can specify the types of fields that appear in the Field Selector list by providing an array of types. Example:

.set('type', ['TIME'])

Or if you want metrics:

.set('type', ['INTEGER', 'NUMBER', 'MONEY'])

If not specified, the default is ['ATTRIBUTE']

Filter by specific fields

You can also narrow down the list of fields by providing an array of field names:

.set('fields', ['catname.keyword', 'catgroup.keyword', 'eventname.keyword'])

When the fields option is used then the type option has no effect.

Default field

To load the Field Selector with a field already selected:

.set('field', 'catname.keyword')

The default field won't show if not found in the list of predefined fields when using the fields option or if the default field's type does not match with the types specified when using the type option.

Specifying affected fields

When users select a field, by default the Field Selector updates the first group or metric of the selected charts. When charts have more than one group or metric, you can specify what group or metric should be changed like this:

.set('group', 2) // change the second group

or for the metrics:

.set('metric', 3) // change the third metric

The INTEGER type can be used as a group or metric because it can represent an id, day of week, year, etc. To use the INTEGER type as attribute:

.set('type', ['INTEGER']) // we could also include ATTRIBUTE
.set('group', 1) // updates the first group of the affected charts

Extending options for attributes

When selecting a new attribute or time field, we can specify new configurations to override the current ones.

Using a different sort for the new field:

.set('extend', {
    'sort': { 'dir': 'asc', 'by': cf.Metric('pricepaid', 'sum') },
})

Or if we want to use the selected field as sort by (alphabetical sort):

.set('extend', {
    'sort': { 'dir': 'asc', 'by':  '_field_'},
})

If the chart is currently sorted alphabetically and we want to keep it in the same way for the new selected field, then we don't need to specify a sort since the Field Selector will recognize it and use the newly selected field also as the sort by.

Using a new limit:

.set('extend', { 'limit': 10 })

Using a different granularity when using fields of type TIME

.set('extend', { 'func': 'MONTH'})

Extending options for metrics

If we are using metrics, a new function can be specified for the new metric:

.set('extend', { 'func': 'AVG'})

Non supported visuals

All visuals are supported except for those that don't use the .groupby method such as Pivot Table, Raw Data Table, Sankey, and Sunburst.

Events

The visualization triggers the field-selected event everytime a field is selected as the name states. The event properties are:

.on('field-selected', event => {
    event.name // field-selected
    event.visual // Field Selector
    event.element // the id of the Field Selector dom element 
    event.data // The name of the field selected
})