Change the data source when working with the drill-in hierarchy

#1

Hi guys, I have a Word Cloud visualization which represents the states of the United States grouped by name and the sum of another field as a metric. In the interaction manager I have configured a rule, a restriction and the drill hierarchy configuration so that when I select a state it shows me the counties of the selected state.

The problem is that the state data and the county data are at different indices so I had to use the filter:before-add and filter:before-remove events to manually change the state source to county and vice versa.

This is my Interaction Manager configuration:

const state_source = "state_index";
const county_source = "county_index";
const wcId = "wordclouduniqueid";

const drill = {
    [wcId]: {
      group1: ["state_name", "county_name"]
    }
};
const rules = {
    [wcId]: { clientFilters: true }
};
let restrictions = [
    { filter: "county_name", dependsOn: "state_name" }
];

let aktive = cf.create();
let myChart = aktive.graph("Interaction Manager")
    .set("skin", "modern")
    .set("rules", rules)
    .set("drill", drill)
    .set("restrictions", restrictions)
    .on("filter:before-add", (event) => {
        const wordcloud = cf.getVisualization(wcId);
        const isStateFilter = event.filters.find((f) => f.getPath() === "state_name");
        // Change the source to county if any state was selected
        if (isStateFilter) {
            wordcloud.source(county_source);
        }
    })
    .on("filter:before-remove", (event) => {
        const wordcloud = cf.getVisualization(wcId);
        const removingState = event.filters.find((f) => f.getPath() === "state_name");
       // Change the source back to state if the state filter was removed
        if (removingState) {
            wordcloud.source(state_source);
        }
    })
    .execute();

This solution works and achieves the desired goal, but I know that it can be heavy to do this in the interaction manager’s events or perhaps is not the best practice. Is this the proper way to do this?

#2

Hi @jonathan , thanks for contacting us. The way you are doing it is not bad, because those two Interaction Manager events are just to add the desired logic before the query is executed.

Now, as you may have already seen in the ChartFactor documentation related to drill hierarchy, it is also possible to change some display properties by declaring the configuration as an array of objects instead of an array of strings.

In the latest version of ChartFactor, 3.1, we include support for multiple sources in the drill-in configuration (https://chartfactor.com/doc/3.1/releases/#toolkit).

Therefore, applying the new configuration to your drill object would look something like this:

const drill = {
    [wcId]: {
      group1: [{
          field: "state_name",
          default: {
              source: state_source
          }
      }, {
          field: "county_name",
          default: {
              source: county_source
          }
      }]
    }
 };

As you can see, this way is much easier, maintainable and avoids having the logic in the Interaction Manager events.

If you have any other questions, do not hesitate to contact us.