Detect changes in crossfilter state

Question

I have a chart group linked to data (year, product, sales) through a crossfilter with two dimensions product and year.

The initial state should be product = 'A' and year = 2019.

When the user changes this state by filtering the chart, a star (*) should appear somewhere denoting the chart has changed.

How do I capture the change in the state of a crossfilter?

Presumably you want to remove the star if the user returns to the original selection? If so, you're not really talking about changes to the crossfilter so much as detecting when the active filters on the charts are different from some set values... — Gordon

Gordon Gordon · Accepted Answer · 2019-02-14T15:41:22

As I commented above, I think this problem is better handled at the dc.js level than the crossfilter level. There isn't any way to track changes to a crossfilter that I know of, and anyway, you want to compare against a certain state, not just see if any changes have been made.

I'd approach it like this: for each chart that you want to show changes, create a div somewhere for the change indicator. Then watch the filters on that chart and see if they are different from your defaults:

chart.on('filtered', function() {
    var changed = chart.filters().length !== 1 || chart.filters()[0] !== 'A';
    d3.select('#product-chart-changed').text(changed ? '*' : '');
});

This could be generalized by putting it in a function, e.g.:

function show_changes(chart, indicator_sel, initial) {
    chart.on('filtered', function() {
        var changed = chart.filters().length !== 1 || chart.filters()[0] !== initial;
        d3.select(indicator_sel).text(changed ? '*' : '');
    });
}
show_changes(chart, '#product-chart-changed', 'A');

And I suppose further, you could introduce array comparison if the initial filter is more than one item.

Detect changes in crossfilter state

1 Answers