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?

Answer 1

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.