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
19
// Define the aql
let metrics = [
    cf.Metric("qtysold","sum"),
    cf.Metric("commission","avg"),
    cf.Metric("pricepaid","avg"),
]

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

// 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. 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.

If we only want to see the filtered data (without the values in 0) we can use the noMerge option:

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

Don't filter the data

At some point we may not want the Slicer to be filtered to avoid graying out values and data re-sorting. In this case we need just to use the noFilters option in the Slicer definition:

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

Now, this option will only avoid the Slicer from being filtered. But it will still trigger and remove filters if the items on it are clicked in the same way explained before.

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')()

Note

The option noFilters will only work when used with the Filter Control. If we handle the event without it, we must validate that the slicer must not be filtered as described below.

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 Filter Control 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 FC 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 Filter Control 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);