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("ElasticsearchL")
    .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.

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
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 => {
            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.