dc.jscrossfilter

How to filter data in 3 different dc.js tables independently?


I have a data collection which combines three different metrics (received calls, emails, and chat messages), and I want to display it in three separate tables using dc.js and Crossfilter:

const ndx = crossfilter(data);
const dimFilter = ndx.dimension(d => d.day);
const dimCalls = ndx.dimension(d => d.numberOfCalls);
const dimMails = ndx.dimension(d => d.numberOfMails);
const dimChats = ndx.dimension(d => d.numberOfChats);

dc.selectMenu('#filters').dimension(dimFilter).group(...).multiple(true).render();
dc.dataTable('#calls').dimension(dimCalls)./* ... */.render();
dc.dataTable('#mails').dimension(dimMails)./* ... */.render();
dc.dataTable('#chats').dimension(dimChats)./* ... */.render();

This works as expected. However, there are days with calls but no emails, for example, so I'd like to hide the empty rows... independently for each table. If I do this it hides the rows, but it also affects the other tables, because it's filtering the data in the same Crossfilter instance:

const dimCalls = ndx.dimension(d => d.numberOfCalls).filter(d => d > 0);

The only solution I can come up with, is creating three different ndx = crossfilter(data) objects, one for each table. But then, if I apply some filter using the dc.js "select menu", it would only affect one of the tables. Can I somehow propagate it to the other ndx objects?

I also thought of hiding the empty rows in the dc.js table without affecting the dimension (perhaps with a postRedraw event), but that would mess up with the pagination and the element count I show under the table - both of which are based on the Crossfilter object.


Solution

  • I found a way to do it thanks to this question:

    const dimCalls = ndx.dimension(d => d.numberOfCalls);
    const dimCallsTable = {
      top: n => dimCalls.top(n).filter(d => d.numberOfCalls > 0),
      bottom: n => dimCalls.bottom(n).filter(d => d.numberOfCalls > 0)
    };
    

    Creating a new dimension this way, the filters d.something > 0 don't affect the others, while they all get filtered by the "select menu".

    PS: it's the first time the "related questions" list has actually helped me. It would have been nice to have seen the same question before I posted mine, but still...