Skip to content

Slicer

The Slicer visualization is a special table that allows the user to have a visual indicator of all the data available for a given attribute (depending on the specified limit). This data can be displayed even if the slicer is filtered. The main utility of the slicer is to add or remove multiple values for a filter based on the attribute used. The slicer is similar to most of the visualization when we need to define it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// Define the aql
let metrics = [
    cf.Metric("qtysold","sum"),
    cf.Metric("commission","avg"),
    cf.Metric("pricepaid","avg"),
]

let group1 = cf.Attribute("eventname")
            .limit(10);

// Add metrics and groups to data source
cf.provider("Elasticsearch")
    .source('ticket_sales')
    .groupby(group1)
    .metrics(...metrics)
    .graph("Slicer")
    .element('chart')
    .execute();

S1

The slicer supports only one group by and multiple metrics. The group by can also be a time field. This visualization  shine when we start using it as a filter utility. We have different modes to apply filters from the slicer:

  1. Clicking one value will immediately trigger one filter for that value
  2. Pressing Cmd/Ctrl keys and selecting several values at the time, and then releasing the key. This will trigger a new filter with all values selected
  3. Pressing shift and selecting an initial and a final value. This action will select all values in between the selected "start" and "end", and after releasing the shift key, it will trigger the filter with the selected range of values.

S2

After applying a filter from the Slicer, we'll notice a set of grayed out values with a 0 (zero) for each one of the metrics. These are values that don't belong to the filtered data, but to the original. This feature is called "Merging" since it compares and merges incoming data with the one queried the first time.

We can modify the existing filter by selecting grayed out values using any of the three mentioned methods. Or we can also unselect selected values to remove them from the filter.

Unselecting values programatically

If we select a lot of values it could be tedious then to manually unselect them all. We can use the following method exposed by the slicer:

1
slicer.get('unselectAll')()

Avoiding merging items

The Slicer merging is possible because, as explained before, it compares original queried data with new incoming data every time a filter is applied. The original data is obtained with an initial query which we call "first load".

The merging feature can be avoided in two ways depending on our needs.

The first one is when we never need to see the grayed out elements (see only filtered data). In this case we can use the noMerge option:

1
slicer.set('noMerge', true);

The second one is when we need to avoid merging only for a given filter. In this case we need to check first if the filter to be applied matches our criteria. If that's the case we just need to reset the first loading flag for the slicer like this:

1
slicer.set('firstTimeLoad', true);
This way, the Slicer will know that the filtered data for that specific filter will be considered as the 'original' data.

Sorting

The Slicer data can be sorted in two ways: By clicking the column header after is rendered, and/or by specifiying the sort criteria in the aql definition.

A difference with most of the visuals is that for the slicer the .sort() method is not required in the aql. By default it will sort by group ascending. So we can declare the attribute without the sort like:

1
let grp = cf.Attribute('my_field').limit(1000)

Depending on the sort criteria we'll see different behaviours on the slicer:

  1. If no sort is specified, all selected elements will bubble up to the top as shown in the previous image.
  2. If a sort data is specified (by group or metrics), all selected elements will respect that sort, which means that they won't go to the top if they don't meet the criteria.
  3. Time fields are special in the way that if no sort is specified, the will be sorted chronologically descending (most recent at the top). When items are selected they will bubble up and will be sorted chronogically ascending.
  4. Clicking on the column header, will re-order element according to the metric or field. If the elements were all at the top (default behaviour), the sort then will be done only between those elements.

It is important to mention that selected items will bubble up to the top when no sort criteria is specified (if the noMerge option is NOT set).

By default the Slicer will have in the header of each column a magnify glass icon that allows to type and filter by that colum:

S3

This search icon is hidden by default and only shown when we hover the column header. To display it all the time we can use:

1
2
3
4
5
cf.provider("Elasticsearch")
    ...
    .graph("Slicer")
    .set('showSearch', true)
    ...

Listening to the Slicer filter event

Usually, the slicer will be used along with the Interaction Manager to automatically suscribe to its filter events. But in case we'd like to suscribe to do our own task with the fired filter we can do:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var applyFilter = function(e){
    var filter = e.data; 
    // filter = doSomethingElse(filter)

    // Or Apply the filter ourselves if no IM in the dashboard
    var charts = cf.getAllVisualizations();
    charts.forEach(c => {

            // If we want to exclude the slicer this is the place
            if (c._elementId !== 'slicer-element') {
                c.filters(filter).execute().
            }
    });
}

slicer.on('slicerfilter',applyFilter)

Although in the example the filter is applied to each chart, we MUST NOT do that ourselves if there is a Interaction Manager component in the dashboard / app.

Hide the Slicer header

If we want to hide the columns headers for the slicer we can use the following:

1
slicer.set('hideHeaders', true);