Time Range Fitler

The Time Range Filter (TRF) allows users to filter data based on time windows. We can create this component by using a time field and a metric to reflect the data:  

var timeGroup = cf.Attribute('saletime')
                    .limit(10)
                    .sort('asc','saletime')
                    .func('DAY');
var price = cf.Metric('pricepaid', 'sum');
var myChart = cf.provider('Elasticsearch')
    .source('ticket_sales')
    .groupby(timeGroup)
    .metrics(price)
    .graph('Time Range Filter')
    .element('chart')

myChart.execute()

Then, we'll see the component:

The data plotted in the chart is the combination of the used metric with the time field.  The dataZoom component below the visual is what is used to apply filters after we subscribe to its event:

var applyFilter = function(e){
    var f = e.data;                    
    var filter = cf.Filter(f.path)
                    .operation(f.operation)
                    .values(f.value);
    var charts = cf.getAllVisualizations();
    charts.forEach(c => {
        // Don't apply the filter to itself 
        var vis = c._chartType;
        if (e.nativeData.from != vis) {
            c.filters(filter).execute().
        } 
    });
}

myChart.on('timefilter',applyFilter)

What the function applyFilter does is to create a new Filter object with the values provided in data. It then gets all the visualizations and applies the filter to them, except for the TRF. This validation must be done to avoid self-filter that will restrict the data. From here we can exclude the visualizations that we don't want to filter.

Slider data background

The slider handler by default comes with a solid gray color as a background as we can see in the component's picture above. This can be changed to display the same data that is displayed when the component is fully rendered. So if we specify this option:

myChart.set('sliderData',true);

We'll se how the slider shows the data:

With this option we can see the entire data behavior all the time while we are moving the slider.